Archive for Tutorials

13 Apr 2017

Creating Animation Effects in EverWeb

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

The new animation effects in EverWeb version 2.2 are great for bringing your web pages to life. The effects can be used to highlight areas of your web page that you want your visitors to focus on – essentially creating ‘Calls To Action’. EverWeb’s animation effects can also be used to ‘tell a story’ whereby you trigger effects in sequence to produce a flow of action for your visitor to follow.

Creating an Animation Effect
Animation effects are added to objects. You can animate text boxes, shapes, images and most widgets. The RSS Feed, Image Gallery and blog widgets used for blog posts, blog main and archive cannot be animated.

To animate an object in Everweb

  1. First select the object you want, then go to the Shape Options Tab in the Inspector Window.
  2. Note that animations can be applied to more than one object at a time and even to grouped objects
  3. Once you have selected your object(s), tick the box in the ‘Animation’ section of the Shape Options Tab to activate the animation options.
  4. From the first drop down menu, select the type of animation you want. At the bottom of the Animation section is a Preview window so you can see what the effect will look like when you select it.
  5. The last option in the first drop down menu list is for ‘Other.’ Use this option for an additional list of animation effects that are displayed in the second drop down menu.
  6. Once you have chosen the effect you want from the first drop down menu, use the second drop down menu to further customize the effect you have chosen. If you have selected ‘Other’ from the first drop down menu, you will only see a list of other animation effects instead of a list of customization options.
  7. After selecting your choices from the drop down menus, set the animation ‘Duration’ using the slider, by entering a number in the field entry box or by using the up/down arrows. The number shown corresponds to seconds and milliseconds. When selecting duration, the longer the time you enter, the slower the effect takes to complete.
  8. The ‘Delay’ option should be set if you do not want the animation to start immediately as the page loads or when the object scrolls on screen.This option is useful if you have a number of effects on a page and you want to ‘stagger’ them (e.g. if you are ‘storyboarding’.)
  9. The last option is ‘Replay’ which animates the object the number of times you specify.

Animation Effects in Practice
When using animation effects, use Preview to view how the effect(s) will look as effects do not animate when you are in the page design itself. It’s recommended to use the File-> Preview menu (or the Preview button) to view your animations before publishing so you can see how the end result will look. This is important especially if you have a number of animations that run one after the other. It’s also important to see if the animation is appropriate to the page and that its playback speed is correct. Use the Duration, Replay and Delay options to tweak your animation (even by milliseconds!) to get the right effect.

Animation Example: Fade Out Effect
One of the animations that EverWeb includes is a Fade effect. This is a fade IN effect. If you want a fade OUT effect instead, try the following:

  1. Create a blank page with a white background.
  2. Add a Text Box (from the Toolbar) and enter some text in it. Style the text as you want.
  3. Next, add a rectangle shape, again from the Toolbar.
  4. Move and size the rectangle so that it covers the text of the Text Box.
  5. With the rectangle shape still selected, go to the Shape Options tab.
  6. Set the ‘Color Fill’ of the rectangle to be White, the same color as the page background.
  7. Tick the box next to ‘Animation’ so you can access the ‘Animation’ options.
  8. Set the first drop down menu option to ‘Fade’.
  9. Set the second drop down menu option to ‘In Place’ which is the usual default option.
  10. Set a Duration of 1.5 which will give a fairly fast fade speed to the rectangle.
  11. Set a Delay e.g. 3.0 seconds.
  12. Leave Repeat set at 1.
  13. Preview!

What you will see in the Preview is that the text appears, but gradually fades away as the rectangle shape fades in!

This is only one example of how animation effects can be used in EverWeb. To get the most out of them I would recommend thinking of what you want to achieve then play with the effects, duration, delay and repeat options until you get the desired effect!

if you have an effect that you have created why not share it with us, or if you want to create an effect but don’t know how, let us know in the comments below!

16 Mar 2017

5 Reasons Why You Should Be Using Master Pages

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

I was quite surprised recently when a customer sent me their EverWeb project file and I discovered that it didn’t have a Master Page. The website was only seven pages in total so maybe it wasn’t a big deal. When I started browsing through the project I immediately realised that a Master Page would reap benefits, even with a relatively small website project.

Why Use Master Pages
Master Pages were one of the first major features added to EverWeb back in version 1.2. It was one of the most requested features that iWeb lacked and rightly so as it immediately gives you these great benefits…

  1. Design Consistency. Presenting your website with a consistent design on every page is vital when you want your visitors to easily navigate your site to find and discover what you want them to. Placing objects in consistent locations on your web page and using the same style approach for things such as titles, buttons, logos and so on is really important so your visitors don’t get a frustrating experience. Consistency should also extend to page settings as well. Having a consitstent framework to design your site in is easier for you as well as being easier for your visitors.
  2. Design Accuracy. Web design also needs to be pixel perfect. Have you ever visited websites where things like titles and buttons jump around a bit as you move from page to page. Or the background color changes slightly when it really shouldn’t? Your website should focus your visitor on it’s content, not the distraction of a poorly placed objects on the design canvas. A Master Page will instantly take these issues away and you’ll have a more focused visitor as a result.
  3. More ProfessionalYour website is often the first place potential and existing customers go to when they want to discover more about you, your company, your products or your services. Often it’s your calling card for the digital age. Creating a professional appearance is a must. If you have followed the first two points above, you’re already getting there. Take time to think about the design of your Master Page(s) as and test the results on mobile, tablet and desktop devices. If necessary create Master Pages for each environment so that you offer your visitors the right experience on all platforms. It’s the professional approach!
  4. Easier Website Maintenance and Updates. Having one Master Page to maintain and update rather than all of your web pages is a no brainier. Having just one page to update means you’re less liable to make mistakes. Updating many pages with the same changes is boring and repetitive which is where errors start to creep in.
  5. Saves Time. We all know that time is a valuable commodity to most people. Using a Master Page is the perfect tool for this. If you do make a mistake, or need to make changes or a quick website update it’s faster and more efficient to do so using a Master Page. All changes immediately get applied to any page that uses the Master Page so it couldn’t be easier!

Creating a Master Page

Creating a Master Pages is very simple to do – just click on the ‘New Master Page’ button in the blue Master Page section of the Web Page List. If the blue section is not visible, it’s probably because the splitter bar (right above the Project name) needs to be dragged down to reveal it. Next you will see the the Theme Template Chooser, so select the Theme and Page Style you want as you would do when adding any regular page in EverWeb. Note that you can’t make a Master Page from of a blog page style.

Once the new Master Page has been created it’s added to the Master Page section. Name the Master Page in the same was as you would for a regular page. In fact, use the Master Page in exactly the same way as a regular page. The only difference is that you will only add objects that you want to appear on all pages that are going to be using the Master Page. Typically, this means that the body area of the page is usually empty as this is where regular page content will go.

In my customer’s case, I took her company logo, tag line, contact details from the header and footer and the social media buttons she used and placed them in the Master Page in the same locations as they were on the regular pages. I then made sure that the Page Settings for content width, content height, header, footer, background color and browser background were set correctly. Again, that’s another real benefit of the Master Page. You only need to set up page defaults once.

Using your Master Page

Once you have finished your Master Page, apply it to all of the pages you want to use it with. To do this, select the regular page that the Master Page will be attached to. Next, on the Page Settings tab of the Inspector Window select the Master Page to attach using the dropdown menu in the Master Page section. You’ll see that the page changes, adding in the objects from the Master Page.

The objects that come from the Master Page all have a black page symbol in the top right hand corner meaning that you can’t edit them from a regular page. You can only edit these objects by editing the Master Page itself.

Now that you’ve applied the Master Page, you’ll probably notice that you have the same objects twice on the page. As the Master Page objects ‘sit’ underneath the regular page and can’t be deleted unless you edit the Master Page itself, you can delete the duplicate objects from the regular page so only the Master Page objects remain on the page.

When you’ve completed this task for all pages in your site that are using the Master Page, publish the entire site using the File-> Publish Entire Site menu.

If you need it make changes in the future to all of your pages at one time, you’ll only have to do the changes to just the Master Page. Adding and working with Master Pages even on small websites is something that takes very little time, and will save you lots of time in the future!

if you have a question about Master Pages, please let us know in the Comments Section below. Thanks!

20 Aug 2016

Adding a Favicon To Your Website

No Comments Tips and Tricks, Tutorials

Adding A Favicon To Your Website

The Favicon originated in 1999 with the introduction of Microsoft Internet Explorer 5. The word Favicon stands for ‘Favorite Icon’, and is a small icon assigned to a specific website or web page. If a website uses a Favicon, it’s usually displayed in the browser’s search box to the left of the web address. Web browsers, such as Firefox, display the Favicon in each of browser tab. Some browsers also support the use of Favicons in address bar drop down lists, links bars and drag to desktop features.

Originally, Favicons could only be created in a specific ICO file format. This format allowed for multiple icons in multiple sizes and a with variety of color settings all in one file. Modern day browsers, however, support other file formats in addition to the ICO format. Browsers such as MS Edge, Apple Safari, Chrome and Firefox can use PNG, GIF, and JPEG file formats.

Why Use a Favicon?
A Favicon is a good way to easily find their bookmarked websites as the eye will recognise a graphic icon faster than a line of text. Additionally, some web browsers specifically look for a Favicon when loading a web page. If the Favicon is not present a ‘404 Page Not Found’ type error message may be generated. Fortunately, such ‘404’ messages are found only in error logs and are not displayed back to the visitor. Including a Favicon will stop errors occurring in error logs and may improve your page loading times a little bit.

How to use a Favicon in EverWeb
You can easily add a Favicon to your website in EverWeb.

  1. First select the image that you want to use as your Favicon. This can be in any of the formats mentioned above. It’s best to make the Favicon something that’s easily recognisable – this is especially important in this scenario as the Favicon is very small!
  2. Once you have selected the image you want to use, go in to your EverWeb Project file. Select File-> Edit Publishing Settings to access your Site Publishing Settings.
  3. Scroll down to the Head/Footer Code section of the screen. At the bottom of the section is the word ‘Favicon’ with a ‘Choose…’ button next to it. Click on the ‘Choose…’ button and select the image file that you want to use.
  4. Publish your website to the Internet. EverWeb will convert the file you selected for the Favicon in to an ICO file and upload it to your web server. You’re now finished!

Testing Your Favicon
Once you have published your website to the Internet, you probably want to see the Favicon in action. If you visit your website straight away, you may find that the Favicon is not displayed. If this happens, check to see if the Favicon has uploaded correctly to the web server. For example, go to your home page in your browser. The web address may look something like the example below:

http://www.mywebsitedomain.com/homepage.html

To find if the Favicon has been uploaded properly replace ‘homepage.html’ with ‘favicon.ico’. in this example, the above web address would become

http://www.mywebsitedomain.com/favicon.ico

If the Favicon has uploaded correctly to the web server, you’ll see the small Favicon displayed on screen.

The Favicon may not immediately display due to replication of the file on the Internet, so you may find that visitors to your website see the icon before you do!

05 Aug 2016

From Desktop to Mobile and Back in EverWeb

6 Comments Software, Tips and Tricks, Tutorials, Web Design

When you create a website in EverWeb you should always create pages for desktop/tablet devices and equivalent pages for mobile devices. It’s important to have a mobile presence as our phones are now the primary way in which we access the Internet.

Once you’ve developed your website, you’ll want to make it so that your website visitor will be automatically directed to the correct page style on whichever device they’re using at the time: your mobile website pages when using a mobile phone and the desktop website when using a desktop or tablet device.

Redirecting From Desktop To Mobile Websites

In EverWeb it’s easy to set up this automatic redirection within your Project file.

  1. You first need to tell EverWeb which pages in your Project are specifically for use on a mobile device. To do this, select your mobile page and go to the Page Inspector. Scroll down to the ‘Mobile Settings’ section. If the section is closed, click on the arrow symbol to the left of ‘Mobile Settings’ to expand it.
  2. Check that the drop down box for ‘Mobile Pages’ is set to ‘None’, then tick the box ‘This page is for mobile devices’. That’s all you need to do to set up your mobile page. Repeat this step for all of your ‘mobile’ type pages.
  3. Next, link the corresponding desktop page to the mobile page. For example, you may a ‘Contact’ page for desktop and one for mobile. You need to link the pages together so that when a visitor goes to the Contact page they get the right experience for the device they are using.
  4. in our scenario, to link the desktop page to the mobile page, you would go to the desktop version of the ‘Contact’ page. Scroll down to the Mobile settings section. This time, under ‘Mobile Page’ click on the drop down and choose one of the following options:
    • Select ‘One of My Pages’ if the mobile ‘Contact’ page is in the same Project file as the desktop page. When you select this option, select the page you want in the ‘Page’ dropdown that appears. In our case it is called ‘Mobile Contact Page’.
    • Select ‘External URL’ if the page you are linking to is in a separate Project file. If you are using this option remember to enter the full URL of the ‘Contact’ page you are linking to in the ‘URL’ box.
    • Remember that you should only select ‘None’ for a mobile page, not on a desktop page.

    Your desktop and mobile pages are now linked. Once you have completed this for all pages that have desktop and mobile counterparts, publish your website and test the redirection on different types of device. It’s good practice to test as you can see that the redirection works and that you have linked to the right corresponding page.

    Redirecting Back From Mobile To Desktop Websites

    There may be times where your visitor actually wants to use the desktop website in preference to the mobile website, when they are using a mobile device. It may be that there’s more detailed information available on the desktop website.
    If you have set up your redirection as outlined above, you will always go to the mobile website if on a mobile device. To stop this automatic redirection and force the use of the desktop website on a mobile device take the following steps…

    1. Add a piece of text or a button to your mobile website pages to act as a link to your desktop website e.g. a button labelled as ‘Go to Desktop Website’. You may just want to this only on the ‘Home’ page or on all of your mobile pages. The choice is yours.
    2. Once you have added the linking piece of text or button to your page(s), select it and go to the Hyperlinks Inspector. Enable the Hyperlink and then set the ‘Link To:’ drop down as ‘An External Page’.
    3. In the ‘URL’ box enter the full URL of the desktop web page you want to link to. It’s easier and more accurate if you cut and paste the desktop page’s URL from the browser’s search box in to the URL section in the Hyperlinks Inspector.
    4. Once you have the URL added, go to the end of the URL address and add in ‘?fullsite=true’ e.g. http://mywebsite.com/home-pagre.html?fullsite=true
    5. Once you have completed the Hyperlink, publish your website.
    6. On a mobile phone go to the mobile page with the redirection text or button. Click on the link to test that it redirects you to the desktop website.

    Your website is now complete and will direct your visitors to the mobile website automatically as needed with the option to override if needed!

    If you have a question about this blog article, let us know below! Thanks!

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!