Archive for Widgets

14 Nov 2016

EverWeb version 2.0 Launched with Blogging!

No Comments EverWeb, Software, Web Design, Widgets

ew20-default-posts-screen

EverWeb version 2.0 has just been released to the public and includes the highly anticipated blogging feature!

Great News For iWeb Users
For Apple iWeb users, EverWeb version 2.0 is the release many have been waiting for. It’s headline feature of a fully integrated, feature rich blogging experience comes with a look and feel that’s immediately familiar and intuitive to iWeb users. You can import your blogs from iWeb in to EverWeb at the touch of a button. Your blog entry headings, creation dates and main body text (including font styling) are transferred over easily. For those using WordPress blogging, EverWeb version 2.0 can import them in the same manner.

Key EverWeb version 2.0 Blogging Features
Whilst EverWeb’s new blogging feature retains an iWeb look and feel, there are still many new and improved features. EverWeb version 2.0 includes a blog post editing window to add and format your text, add images, hyperlink text, create lists, paragraph headings, quote levels and more! The Editor window is great for adding features specific to each blog post. You have all the tools bloggers expect with the convenience of a Toolbar to access commonly used features.

As well as the Editor Window, there’s also the Preview window. This window is where you can add features that you want to apply to all of your blog posts, e.g. social media buttons. Drag and drop the object that you want on to the Preview Window and it will then appear on all blog posts. In many ways it’s like using a Master Page.

There are a lot more features to discover, many of which can be found in the blog’s Widget Settings. For now though, here’s a summary of EverWeb 2.0’s main blogging features:

  • Automatic lists
  • Image wrapping
  • Justified text
  • Comments using Disqus or Facebook Comments
  • Importing iWeb & WordPress blog posts
  • Embedded media including video
  • Automatic Google Fonts
  • Automatic RSS feed creation and more!

Other EverWeb version 2.0 Features
Whilst blogging is the massive new feature of EverWeb 2.0, there are also some other great additions to the product!

  • The Toolbar has been relocated from the bottom of the UI to the top. This is good news as it’s better for your workflow. Once you’ve used it for a day you’ll never want it back at the bottom!
  • The new Contact Form Advanced widget that will help you create super advanced contact forms you can fully customize. The new Widget includes ten form ‘Controls’ so you can add questions to your contact form using drop down menus, radio button or checkboxes. You can include default values in Text Controls to help visitors via pre-filled text. All Contact Form Advanced options are easy to use as you would expect. The regular Contact Form remains in place for simple forms.
  • Character Spacing has been added to the Spacing section of the Text Inspector so you can now stretch out text horizontally. Great when you need to tweak the the look of your text!
  • A new RSS Subscribe button has been added on the Insert-> Button menu so your visitors can subscribe to your EverWeb or external blog.
  • The EverWeb User Manual has been updated and improved and includes info on blogging in EverWeb. As a small new feature, you can now access the Manual directly form the Projects Window as well as from the EverWeb Help menu.

For more on the new EverWeb version 2.0 and a new look EverWeb website, go to the EverWeb website to see it’s new blogging feature in action!

For information about updating your version of EverWeb to the new version 2.0, check out the official EverWeb version 2.0 announcement.

If you’re looking for EverWeb tutorials about the new version, there are preview videos on YouTube to enjoy.

If you have a question about the new version of EverWeb, let us know in the Comments section below. We’ll have lots more on EverWeb 2.0’s new features in the near future for you!

21 Jul 2016

15 EverWeb Navigation Menu Styling Tips

No Comments EverWeb, Software, Tips and Tricks, Widgets

EverWeb’s Navigation Menu Widget is very flexible in how you can style it to create the right effect to suit your website’s design and style. Sometimes the wealth of available options can be a bit bewildering if you’re new to EverWeb… Here’s 15 quick tips to get your Navigation Menu styled how you want it, quick and easy!

  1. Changing the Navigation Widget’s Default Styling
    When you first drop the Navigation Menu Widget on to your page it always displays in blue, underlined text using a Helvetica Regular 12 point font. The Nav Menu Widget doesn’t adopt any ‘Default Styles’ you may have applied using the Format-> Default Styles menu. Only when the Widget’s on the page can you style it as you please.
  2. Removing the Underlined Text
    The reason why the Nav Menu Widget initially displays as it does is because it’s built from Hyperlinks. The colors and underlined appearance are taken from EverWeb’s ‘factory settings’… To remove the underlines and change the text color, select the Nav Menu Widget then go to the Hyperlinks Tab. Change the settings for Normal, Rollover and Visited to what you want them to be. Don’t select the Nav Menu Widget and use Cmd+U to remove the underline as it doesn’t do the job properly.
  3. Use the Fonts Panel
    For styling your Nav Menu’s text, the Fonts Panel is the best tool to use. All the text styling options you need are in one place: System fonts, Google fonts (if installed), font styles (e.g.bold and italic), font size, color and so on.
  4. Make Your Nav Menu Easy on the Eye
    Your Nav Menu should use an easy to read font. Web safe Sans Serif fonts, such as Helvetica, are a good choice. Remember that the font size you choose should also be large enough to cope with any device it will appear on such as mobile phone or desktop. A 16 point, or higher, font size is recommended.
  5. Text Background Styling
    Use the ‘Fill’ option on the ‘Shape Options’ tab for the text background of the Nav Menu. Using the ‘Background Fill’ on the Text Inspector Tab won’t work.
  6. Fill Color Gaps Between Menu Items
    If you’ve styled the text background, there’ll likely be gaps between each menu item. The easiest solution is to place a rectangle shape, color matched to the text background, behind the Nav Menu Widget. Size the rectangle to cover the gaps. Alternatively use Padding, Spacing and Minimum Width options from the Widget Settings Tab although this isn’t as quick, or as easy, as using the backing rectangle. The screenshot below illustrates this and also settings such as Spacing and Minimum Width.
  7. Navigation Menu Widget Settings

    Use Padding, Spacing and Minimum Width options from the Widget Settings Tab to create the right spacing for your Nav Menu.

  8. Avoid Using Gradients Fills
    Avoid using any form of gradient filled background in your Nav Menu. They’re generally more difficult to read. Either use a solid ‘Color Fill’ or none at all if possible.
  9. Use Normal, Mouse Over, Mouse Down in Shape Options
    Combining Hyperlink formatting with Shape Options Fills can help you create different effects for Normal, Mouse Over and Mouse Down states. Hyperlink formatting will set the text color, Shape Options Fill states set the background color for ‘Normal’, ‘Mouse Over’ and ‘Mouse Down’.
  10. Go Full Width
    Check ‘Full Width’ in the Metrics Inspector to have the Nav Menu dynamically resize horizontally when you resize the browser window.
  11. Nav Menu Text Alignment
    Using the Text Inspector to change the Nav Menu items alignment to be either left, center or right justified. The other Text Inspector options don’t have any effect on the Nav Menu. Some of the other tips in this blog may help instead!
  12. Left, Center or Right Align the Nav Menu Itself
    The Text Inspector aligns menu items, whilst the ‘Alignment’ option in the Widget Settings Tab left, center or right aligns the Nav Menu itself within it’s selection box.
  13. Padding, Spacing and Minimum Width
    ‘Padding’ adds horizontal AND vertical spacing to the Nav Menu. As you increase the value, the Nav Menu adjusts accordingly. It’s useful especially if you have a right aligned, full width, Nav Menu where the menu item bumps up against the browser window edge. A bit of Padding gives the some extra space so the ‘bumping’ doesn’t happen.
    ‘Spacing’ sets the amount of space between each nav Menu item.
    ‘Minimum Width’ spaces all Nav Menu items equally. In the screenshot you see the Minimum Width set to 150 as you need to set this value higher than the minimum width of the longest menu item name (in the example ‘Miscellaneous’). Taking this into account makes all menu items appear evenly spaced.
    See the screenshot above for some illustrations of these features.
  14. Change Drop Down Menu Colors
    Use the Widget Settings tab to change the drop down menu’s background, separator line and mouse over colors.
  15. Use Bold and Italic Short Cut Keys but Not Underline
    The bold (Cmd+B) and italic keyboard shortcuts can quickly change the Nav Menu style if desired. It’s not recommended to use underline though as the Internet generally uses it to indicate Hyperlinks!
  16. Quickly Change Nav Menu Text Color
    If you only need to change the text color of the Nav Menu, you can do this using the Text Inspector instead of the Fonts Panel.

There are many ways you can get the results you want from the Navigation Menu widget. If it’s your first time using the Widget just experiment a bit to get used to what’s possible! Good luck, and let us know if there’s anything you need to know, or if you have a tip to share, in the Comments section below!

07 Jul 2016

Using Font Awesome with EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design, Widgets

You can easily add professional, up to date, icons such as Facebook, Google+, Pinterest and linkedIn to you EverWeb website with the minimum of effort. All you need to start with is Font Awesome, a free collection of over 630 scaleable icons that will probably have an icon for everyone.

About Font Awesome
Font Awesome can be used by everyone, from those new to website building right through to experienced coders. The set of icons is extensive, including product brands such as those mentioned above, accessibility icons, web application icons, file type icons and more. Font Awesome icons are updated regularly. If you use an icon and it’s updated in Font Awesome, your website icon will automatically update without you having to do anything! And, if there’s an icon you want that’s not in Font Awesome yet you can request that it be included.

Font Awesome icons are vector based and so scaleable for your needs. You won’t have to worry about how your icons will look on different displays anymore. It’s already Retina ready!

Setting Up Font Awesome To Use in EverWeb
To use Font Awesome icons in EverWeb, there are a couple of steps you need to take to set up it up for use. The first step is to place some code in the Header section of your EverWeb website Project. The code used points to the source of the icon set so it can be accessed and displayed correctly on your web pages. To get the code…

  1. Go to the Font Awesome website http:www.fontawesome.io
  2. Click on the link to get your own embed code
  3. In your EverWeb website project, go to the Site Publishing Settings.
  4. In the ‘Head/Footer Code’ section, paste the embed code in to the ‘Head Code’ section.

You’re now ready to start using Font Awesome fonts in your website!

What You Can Do With Font Awesome
Font Awesome offers a very flexible way to use icons your website. You can display icons in different sizes, stack them on top of each other (e.g. you can place the Facebook icon in a square), have animated icons etc.

There are a couple of ways you can use Font Awesome icons in EverWeb. In the example below we are going to add a Facebook icon to a website:

Using the HTML Snippet Widget

  1. Drag and drop the HTML Snippet Widget on to your page.
  2. Insert the HTML code you want to use and the Font Awesome icon name as desired. The Font Awesome website has many examples on their Examples Page http://fontawesome.io/examples/
  3. e.g. to add a Facebook icon in a square, enter the following code in to the HTML Snippet Widget. ‘2x’ denotes a doubling of the size of the square.






    fa-facebook on fa-square-o

  4. When you have pasted in the code, click ‘Apply’. If the HTML snippet appears not to have updated, try resizing the selection box a little to force a refresh.

Font Awesome is used with HTML code so if you’re new to HTML or interested in learning, the examples on their website will give you a good start. Here’s how you add a hyperlink to a Facebook page using the HTML Snippet Widget

In the example above replace ‘yourpagename’ with the Facebook page name you want.

football forever 1

In this example, EverWeb’s own HTML Snippet Widget is used to add code to produce the hyperlinked Facebook icon.

Using Widgets From The EverWeb CodeBox
The second method of inserting Font Awesome icons uses Widgets from the EverWebCodeBox. These widgets are produced by third party provider Roddy McKay. Find out more at www.everwebcodebox.com where there are plenty of widgets to purchase that take advantage of Font Awesome. The Touch Share Tab Widget illustrated below is just one example:

Using the Touch Share Tab Widget
The Touch Share Tab Widget takes the trouble out of coding buttons with links, background colors and so on which you have to do if use the HTML Snippet Widget.

  1. First you will need to purchase the widget pack you want to use – in this example the Touch Widgets pack.
  2. once installed, drag the Touch Share Tab Widget from the Widgets Tab on to your web page.
  3. In the Widget Settings, enter the name of the Font Awesome icon in the ‘Icon’ field. For Facebook, it’s just ‘Facebook’ There’s a full list of icons and their names on the Font Awesome website.
  4. For the background color of the Facebook icon use the value Hex # 3B5999 which is the deep blue color used by Facebook. There are plenty of Hex #’s on the Internet for the background colors of most brand icons.
  5. Change the shape of the background from square through to round using the ‘Corner Radius’ option.
  6. Shadow and border colors options are also available to produce the effect you want.
  7. Add the URL Link to your Facebook page and you’re done! Remember to test that the button and link work correctly!
  8. Touch Share Widget

    This example uses the Touch Share Tab Widget from the EverWebCodeBox. There are plenty of customisation options in the Widget so there is no need to code.

    Troubleshooting Font Awesome
    If your Font Awesome icons don’t appear on some or all of your website pages, you may need to replace your embed code with the following…

    The above code explicitly refers to the latest version of Font Awesome (version 4.6.3). When Font Awesome is updated, you’ll need to update this HTML reference to point to the new version.

    Also be aware that if you or your visitors use AdBlock Plus you may find some brand icons are not visible. In this case please refer to the http://fontawesome.io/icons/ page for more information.

    Finally, if you make changes to your Font Aware icons in EverWeb and they don’t appear to update in the Editor Window, just resize the selection box a bit to refresh it!

    Font Awesome and the EverWebCodeBox are great tools to extend your EverWeb websites. Have fun with them!

15 Apr 2016

Using Google Calendars in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Widgets

Adding a calendar to your website is a simple, easy and effective way to let others know your agenda and availability. It’s also great in business situations where you want to show things such as available appointment times, room availability for meetings or if a piece of equipment is available for hire on a particular day. Including a calendar in your EverWeb made website only takes a few steps using Google’s calendaring feature.

In this example we’re going to create a calendar showing the availability of a music studio for hire.

  1. First of all you’ll need to have a Google account. If you don’t have one go to www.google.com and click on the ‘Sign In’ button located in the top right hand corner of the browser window and create an account from there.
  2. If you have not done so already, log in to your Google account and go to Google Calendar by clicking on the grid icon in the top right of the browser window. The grid icon displays all of Google’s cloud based apps you can access. Click on the Calendar app.
  3. You’ll see this month’s calendar displayed. Next create your own calendar that will be shown on your website the studio’s availability. If you’ve used Google Calendar before, you may already have one or more calendars set up already. Different calendars can be used for different purposes e.g. one for your own availability and one for studio bookings. To create a new calendar, go to the ‘My Calendars’ section and click on the drop down arrow. Select ‘Create new calendar’.
  4. On the ‘Create new calendar’ page, name your calendar e.g. ‘Studio Bookings’ and complete the form by filling in the fields you want include.
  5. It’s important to remember to tick the box to ‘Make this calendar public’. If you don’t no-one will see the calendar content on your website.
  6. When you have completed the form click on the ‘Create Calendar’ button at the bottom of the window.
  7. You’ll now see the calendar in the ‘My calendars’ list. Now the calendar has been added, hover the cursor over the calendar name and click on the drop down button to the right of the calendar name. Select the option ‘Calendar settings’ from the menu that appears.
  8. On the next screen you can edit the calendar display by selecting ‘Customize the color, size, and other options’ link in the ‘Embed this calendar’ section. Google Calendar allows you to change the display size of the calendar, has color and bordering options, the initial calendar view options such as weekly, monthly or agenda view and more.
  9. Once you’ve finished customizing your calendar, click the ‘Update HTML’ button, Select all the code in the ‘Copy and paste the HTML…’ box and copy it using Cmd+C. Having copied the code to the clipboard you can return to the calendar by clicking on ‘Google Calendar’ in the top left of the browser window.
  10. On the calendar view add in some events so you can see that the calendar functions properly on your web page. To create an event just click on the time you want the event to start and drag the mouse cursor to it’s end time. You’ll then be able to create the event.
  11. There are other options available on the calendar page such customizing the color of the events in the calendar. Just click on the drop down button to the right of the calendar name for the menu of options.
  12. The code snippet you copied to the clipboard is what you need to embed the calendar in to your page in EverWeb. If you change the customisation options in your calendar after you’ve copied the code, you’ll need to ‘update’ the HTML code, recopy the resulting code and reapply it in EverWeb.
  13. With the code copied to the clipboard, launch EverWeb and go to the page in your Project file where you want to add the calendar.
  14. Drag and drop the HTML Widget on to the page from the Widgets tab. Paste the code that you copied in to the ‘HTML code’ box and press the ‘Apply’ button.
  15. The widget will update. Move the calendar to where you want it on the page. The width and height of the calendar will be the dimensions that you chose in Google Calendar.
  16. Use EverWeb’s Preview to see how the calendar will look, you can even interact with it as well.

When you’re happy with the results, hit the ‘Publish’ button and you’re all done and will have a live calendar online!

25 Mar 2016

Creating and Using Video Content in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Widgets

EverWeb has a great, updated Video Widget in version 1.9.5 that can be used to easily add video content to your website. Creating your own video content doesn’t have to be expensive or time consuming as apps such as iMove and Keynote are both free and easy to use. There’s also QuickTime Player, which comes with OS X, that lets you screen record video then edit it with some basic editing features.

In this example, we’re going to create a video tutorial about EverWeb’s hyperlinking feature using Quicktime. The video will include an audio track narrative. Once the video and audio have been created, we’ll insert it into a web page in EverWeb. OK, here we go…

Planning and Preparation

  1. Before creating a video tutorial, plan it’s flow from start to finish. Keep in mind what the goal is i.e. what do you want to tell your audience?
  2. Your tutorial should focus on one subject or idea only if at all possible e.g. how to hyperlink a piece of text to take you to another page in your website.
  3. Try a few ‘dry runs’ to make sure the tutorial flows properly before you start recording. Doing this also helps you get used to the steps you’ll be recording. It’s also a good point to double check that the video flow is as simple and straightforward as you had planned. Remove any unnecessary steps or anything not directly related to what your subject is about.
  4. Once you have rehearsed your tutorial, close any open applications on your desktop that are not needed in the recording.
  5. Set your OS X desktop background to a neutral color and clear away any files you have placed on the desktop. This will help keep your audience focused on the video content and not what’s in the background.
  6. When making screen recordings, you may want to increase the size of the mouse pointer so it’s easier to see and follow around the screen. You can change the mouse cursor size in ‘System Preferences’. Select ‘Accessibility’ and then ‘Display’. When recording, remember to move the mouse at a steady, even pace at all times. Avoid jerky mouse movements and don’t go too fast or too slow either!
  7. Once you have set up your recording environment, go to the point where you will begin the recoding. In our example, this is the page in our EverWeb Project file with the text that we want to hyperlink.

Recording Your Quicktime Movie
With all of the preparation done, it’s time to start recording…

  1. Open QuickTime Player. If it’s not in the Dock use Spotlight to search for it.
  2. Select File > New Screen Recording from the menu and follow the instructions that appear in the middle of the screen.
  3. When you have finished recording your video tutorial, press the record button in the menu bar in the top right hand corner of the screen to end the screen recording.
  4. Next, play your recording back to make sure that it’s how you want it. You may need to re-record a couple of times to get things right. Remember that if you need to re-record, you may need to reset things that have changed in the recording e.g. in the example of Hyperlinks, you would deselect ‘Enable as Hyperlink’. If you find that re-recording keeps going wrong, take a break and come back fresh to it later on.
  5. To add a narrative audio track to your video you’ll need a microphone. This is easily solved by using the microphone included with your mobile phone, such as the one on an iPhone. Plug the microphone in to your Mac. Remember to plan and test your audio track in the same manner as you did with your video track.
  6. Before starting the audio recording, make sure the video recording is at the start of playback. Also, moving the audio and video windows close to each other will make starting and stopping recording and playback easier.
  7. Select File > New Audio Recording. Begin the audio recording and then start the video playback immediately afterwards so that your narrative recording syncs up with the actions of the video recording. Once finished, turn off the audio recording and save the audio file.
  8. To combine the audio with the video, drag the audio recording file you have saved on to the window that contains the video recording.
  9. If the video is too long, use Edit > Trim to edit it down.
  10. To edit down the audio track, select Edit > Trim followed by View >  Show Audio Track. This will allow you access and edit the audio.
  11. When you have finished editing, save the video file. It will have a .MOV extension.
EverWeb's Video Widget Settings

Video Inserted into a web page.

Adding Your Video Content in to EverWeb
With your video tutorial now complete, it’s time to add it in to your web page in EverWeb…

  1. Open your EverWeb Project file and go to the page where you want to add the video.
  2. From the Widgets Inspector, drag and drop the Video Widget on to your page. Position and resize the video placeholder as desired.
  3. In the Video Widget settings tab click the ‘Choose…’ button for ‘MP4 Video’ and select your .MOV video file. You’ll notice that there are two other file format options available: WebM and OGG. Use these options for compatibility purposes with older versions of Firefox and with Opera browsers. If you need to convert from Quicktime’s .MOV file format to WebM or OGG formats look for appropriate conversion programs on the Web.
  4. The updated Video Widget in EverWeb 1.9.5 has a variety of options for video content (see screenshot above.) Generally it’s recommended to go with the defaults most of the time unless you have specific reasons not to. For example, muting the sound is a good idea incase the video is accessed in a public area where you won’t want sound to upset people who may be nearby.
  5. Poster Image in EverWeb

    Example Poster Image in EverWeb which can be used as a Title Card for your video.

  6. It’s recommended to use the Poster Image option as the option places a picture at the front of the video whilst the video itself downloads in the background. It’s useful especially if the video is large and/or download speeds are slow to the device being used. Without a Video Poster Image the video needs to download first to supply an image. The other use of the Poster Image option is that you can easily make a title card for your tutorial, in our example, ‘Hyperlinking with EverWeb.’
  7. Remember that when using Video Poster Image it isn’t supported with Autoplay checked. You may want to advise your visitors that video downloads can be bandwidth hungry, especially from mobile devices before they hit ‘Play’ so they can choose to play the video or not.
  8. To see the results, use Preview in the EverWeb Toolbar before publishing to the Internet. Don’t forget that when you publish to the Internet to test your video content in different browsers to ensure video format compatibility.

Adding video content in to your EverWeb Project is quick easy and hassle free, all it takes are OS X’s native or free apps to get you there!