Archive for Tutorials

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!

23 Jun 2016

Analyze Your EverWeb Website with Google Analytics

No Comments EverWeb, Tutorials

Once up and running, you may want to have some analysis and reporting on how your website performs in the real world. Website analysis tools will tell you all you need to know and with all the detail you could ever want. Website analysis tools are useful as they

  • Tell you how many hits your website is getting.
  • Tell you from where is traffic coming to your website from.
  • Show you which periods of the day, week, month or year generate the most traffic.
  • Show you which pages and links are used the most by visitors.
  • Enable you to fine tune your website SEO as you will see which Keywords generate interest and which don’t.
  • Help you track traffic by segment e.g. mobile device visitors, via social media links etc.
  • Helps you check your ‘Bounce rate’ i.e. how many visitors visit only one page of your website then ‘bounce’ away.

Using Google Analytics To Analyze Your Website
The tool of choice when it comes to analyzing website performance is Google Analytics. It’s a free app offering a wide range of tools for analyzing, profiling and reporting your website data. You can set up criteria to report on, create alerts to monitor events, compare data in date ranges and so on. Google Analytics works on a website by website basis so it’s easy to get and manage data from multiple websites. Setting up Google Analytics for use with EverWeb just takes a few steps…

Setting Up Google Analytics
To start using Google Analytics create a Google Account if you don’t already have one. If you already have a Google account, go to https://www.google.com/analytics to create an Analytics account.
Once you have created your Google account that includes Google Analytics, you’ll need to generate a Tracking ID which will be used in your EverWeb project to accumulate analytic data. To get the Tracking ID…

  1. In Google Analytics, click on the Admin menu
  2. Your Account is listed in the left hand pane. To the right is the ‘Property’ pane. Click in the Tab underneath the word ‘Property’.
  3. Select ‘Create New Property’.
  4. On the next screen create the Tracking ID for your website. Under ‘Website name’ enter the name you want to call the Tracking ID e.g. ‘My new website’.
  5. In the Website URL box, enter the website address you want to accumulate data for e.g. ‘www.mynewwebsite.com’.
  6. If you want, enter the type of industry that relates to the website, although it’s not obligatory.
  7. Finally, enter the timezone you want to report from. This will usually be your own timezone unless specifically need to use a different timezone.
  8. Once you’ve completed the above steps, press the ‘Get Tracking ID’ button.
  9. On the next screen you will see your Tracking ID code in the ‘Website tracking’ section. Copy all of the code that’s in the box to the clipboard (see screenshot below). Do not copy the ‘PHP Implementation’ box as it is not needed.
tracking ID

Google Analytics Tracking ID Code

Setting Up Google Analytics in Your EverWeb Project
Now that you have copied the code from Google Analytics, you need to paste it in the right area in EverWeb…

  1. Open the EverWeb Project file that relates to the Tracking ID code you have just copied to the clipboard
  2. Go to the Site Publishing Settings using the File-> Edit Publishing Settings menu, or just click on the website name in the Web Page List on the left of the EverWeb UI.
  3. Paste the code in to the Footer area of the Head/Footer Code section (see screenshot below).
  4. Publish the website to implement the code.
  5. Once you’ve published the website, your data will begin to accumulate in Google Analytics.
  6. To find your accumulated data, go to Google Analytics and login to your account.
  7. You will see your website data available to view from your Google Analytics Home page. Note that you may not see any data in the 24 hours after setting up.
Tracking ID Code in EverWeb

Google Analytics Tracking ID Code pasted in to the Footer section of the Head/Footer Code area of the Site Publishing Settings

Tips on Using Analysis Tools
Analysis tools, such as Google Analytics, can be bewildering in the variety of ways you can track, accumulate and report data for analysis. If you’re starting out with this type of tool remember

  • Keep focused on the data you want to get out of the analysis tool.
  • Remember what your priorities and goals are… SEO? Mobile visitors? etc.
  • Check your analytics regularly so you can make any necessary changes easily and quickly to your website SEO.
  • Track changes you make to your website over a period of time – are they effective?

Analytics are an extremely useful tool for EverWeb website developers when used properly, and in a focused way, to get the data you want from your website.

17 Jun 2016

Using EverWeb in The Cloud

No Comments EverWeb, Software, Tips and Tricks, Tutorials

The growth of Internet Cloud based services has been a boon to many people who now have the flexibility to work either in the office, at home or on the road. Cloud based services also make collaboration easier than ever. EverWeb developers who work in a mobile-centric way, or need to collaborate on website projects with others, can take advantage of Cloud based services. Working where you want has never been easier…

The best way to collaborate or share EverWeb project files is by using Cloud based drives such as Dropbox or iCloud as both offer easy, flexible and cost effective ways to work in anywhere, anytime.

Sharing EverWeb Project Files in The Cloud

  1. If you are going to be using Dropbox it must be installed on all the computers you want to share EverWeb Project files with. If you try to open an EverWeb Project file through www.dropbox.com in a browser window it won’t work properly. Once you’ve installed Dropbox on your computer, the Dropbox folder location is added to your Favourites in OS X’s Finder window (see screenshot below.)
  2. If you’re using other Cloud services, such as Apple’s iCloud Drive, make sure it’s been installed and configured properly, then log in to the service.
  3. After installing and logging in to your Cloud service, the next step is to locate the EverWeb Project file you want to share. When you create an EverWeb Project you give it a name, but this is really only an alias. The actual Project filename is a randomly generated alphanumeric name with a ‘.everweb’ file extension.
  4. To locate the Project file, go to the EverWeb Projects Window where all your Project files are listed. Click on the up/down arrows to the right of your Project’s name.
  5. From the menu select ‘Show On Disk…’
  6. You’ll see the Project file selected in the Finder window. Drag and drop the file to your the Cloud storage location. Typically the location is automatically added as a Favorite to the Finder window in OS X when you install your Cloud based service e.g. ‘Dropbox’, ‘iCould Drive’ etc.
  7. Once you have dragged and dropped the file in it’s new location, go back to EverWeb, close the application and relaunch it (or just close and reopen the Projects Window.) This refreshes the Projects Window and you’ll notice that the Project file you just moved is no longer listed.
  8. To access the Project file you just moved, go to it’s new Cloud location using OS X’s Finder window. Double click on the Project file name and it will open in EverWeb.
EverWeb in the Cloud

When moving EverWeb Project Files into the Cloud, it’s a good idea to first create a folder for it using the Project File’s (alias) name.

Tips on using EverWeb Projects in The Cloud

  1. EverWeb Project filenames are randomly generated when you create a new Project. In EverWeb itself an alias is used, initially ‘NEW WEBSITE’ until you change it. When accessing the Project file from The Cloud, you want an easy way to find the Project file using it’s alias rather than it’s real file name. To do this, create a folder in The Cloud using the Project’s alias name. Drag and drop the Project file in to this folder using the instructions above. This approach makes Project file easier to find especially when you have more than one Project stored in the Cloud. In the screenshot above, our Project alias is ‘Recruitment Co’ so we created a folder with the same name and dropped the Project file there for ease of use.
  2. When sharing a Project file, or when using it yourself on more than one computer, only have it open on one computer at one time. If you move to another computer, close the Project file on the first machine before opening it on the next computer.
  3. If you’re using any third party widgets install them on all the computers you are going to be using. If collaborating with others, check with your third party vendor about licensing and sharing third party widgets!
  4. The Project File may look different on different computers due to differences in screen sizes and resolutions. You may need to expand or contract the Project file window when you open it.
  5. If your Project file uses widgets, you may need to manually refresh the widget if it doesn’t automatically refresh (i.e. looks too large or small) on screen.
  6. Putting your EverWeb Project file in The Cloud allows you to work from almost anywhere as long as you have an Internet connection. Whilst there are some caveats to it’s use, it’s a great way to remain productive when in the office, at home or one the road!

    Got a question or comment about using EverWeb Project files in The Cloud? Let us know below!

30 May 2016

Easy PDF File Downloading in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials

One of the ways in which you can attract more visitors to your website is by offering an incentive – something that’s free and of value to your visitor, but easy and cost effective for you to produce. Many websites offer PDF file downloads as such incentives to attract and retain visitors. Electronic incentives are also great marketing and promotional tools to use in social media to attract visitors to your website!

Creating PDF File Download Link in EverWeb
Creating download links to your EverWeb designed website in itself is the easy part. Most of your time and effort will be devoted to creating your content and preparing it in a format that’s suitable for downloading. Here’s how to create a PDF file download link with EverWeb…

Create Your Content

  • First of all create the content you want to use as download content. The content should be something that easily hooks your visitor to wanting to download the file. The content of the download itself also needs to be good. If you create poor content people won’t come back to your website!
  • Make sure the content is your own. Only use the work of others if you have express permission in writing to use their content in your work. If in doubt check first before proceeding as you won’t want to get sued later for breaching someone else’s copyright! Your own content that you create should be copyrighted with the copyright symbol, the year and your name or company name as appropriate.

Convert and ZIP Your Content

  • Once you’ve created your content, save a copy of it in PDF file format if appropriate to your content. Most word processing, spreadsheet and presentation apps export to PDF as an option. Once you’ve converted your content to PDF, open the resulting PDF file to check that the contents have converted properly!
  • PDF stands for Portable Document File and for good reason too as it can be downloaded, opened and read on either MS Windows or Apple OS X without needing any additional software.
  • Whether your content is in a PDF or another format (e.g. video or audio content) it’s best to ZIP the file that the download is as small as possible. Zipping a file will result in a faster download for your visitors and will use less bandwidth.
  • To create a ZIP file in OS X secondary click (i.e. a two finger tap) on the PDF file you’ve created and select ‘Compress’. This will create a ZIP file of the PDF in the same location as the original content file using the same file name as the PDF together with a ‘.ZIP’ extension.
EverWeb Hyperlinking

Hyperlinking in EverWeb

Creating Your Download Link in EverWeb

  • Now the ZIP file has been created we are ready to create the download link in EverWeb. Go to the page in your EverWeb Project where you want the download link to be. The download link object can be either text, graphic, button or even an image. Whatever you choose, make sure that your visitor can easily access the download link!
  • If you’re going to use text as your link remember your SEO. Try to avoid using stock phrases such as ‘Download your free file HERE’ (with ‘HERE’ being the link word in this instance). Try using text that’s related to the content itself e.g. “Download my ‘Guide to SEO’” where ‘Guide to SEO’ is the link text. If using an image file, remember to complete the ALT-Text with a description of the link.
  • Select your download link object and create a Hyperlink by ticking ‘Enable as Hyperlink’ from the Hyperlink Inspector. If you’re using text select the text inside the text box and not the text box itself.
  • In the ‘Link To’ box select ‘A File’. You’ll see that under ‘Name: No File Selected’ is the ‘Choose…’ button. Select this and then select ‘Choose…’ again. Select your ZIP file and select ‘Open’.
  • If using text as your download link object, you may want to adjust the colors and underlining in the Hyperlink Formatting section of the Inspector.

Always Test Your Work

  • Your download link is complete! The best way to test that the download link works properly is to publish the website to your server then try the link. When you publish in this way the ZIP file gets uploaded to your server and will get downloaded to your visitors PC when they click on the download link. If you try to test the download using EverWeb’s Preview or Folder option, you may get unexpected results.
  • If you want to play safe, create a test download link in an obscure part of a web page, publish to your server and see if it works from there first before trying it for real

Having downloadable content on your website is a great way to attract visitors to your website. Setting up PDF file download links in EverWeb is super easy so take time creating effective content for your downloadable freebie that incentivizes your visitors to come back to your website again and again!

02 May 2016

Creating Dynamic Pages with EverWeb’s ‘Fixed Position’ Feature

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

EverWeb comes with a couple of features that help you easily create dynamic web pages. ‘Fixed Position’ is a great example of a feature that can be used to give your website a fresh, robust appearance. The feature let’s you fix an object in place along the horizontal axis enabling you to produce some cool effects for your web pages. Add in EverWeb’s ‘Always On Top’ and ‘Full Width’ features and you get even more possibilities. Here are three examples of how you can use and combine some of these features to good effect…

Vertical Buttons
Many websites have buttons vertically set in place, especially for Social Media purposes, so that as you scroll down the page the buttons stay in place and visible at all times. It’s easy to create this type of effect in EverWeb. In our example we go one step further by creating a pager with placeholder buttons and pictures fixed in place to create a fixed pane on the left and a scrolling pane on the right of the page…

  1. To start, you’ll probably want to add the buttons to a Master Page so that they can be used throughout your website.
  2. If you haven’t done so already drag and drop the buttons you want on the page e.g. down the left hand side.
  3. Use the Arrange-> Align Objects and Arrange-> Distribute Objects menus to help properly space and align the buttons.
  4. When placing the buttons remember to keep the left hand gutter of the page clear of any other objects so your buttons don’t bump in to anything as you scroll up and down the page.
  5. When placing a button check the ‘Fixed Position’ box in the Metrics Inspector tab to keep it in place as the page scrolls.
  6. When you come to preview the page, if you find any of the buttons obscured, this may be due to another object on the page ‘floating’ above the button and hiding it. This can happen when you have a Master Page attached to a regular page. Master Page objects lie beneath regular page objects which float above them sometimes causing objects, in this case the buttons, to be obscured. Use the ‘Always On Top’ feature to manually float any obscured buttons to the top of the page. This feature is on the Arrange menu and the Metrics Inspector.

The effect is shown below…

vertical Scrolling start

The vertical scroll pane is on the right with the buttons and pictures fixed in the left hand column

Vertical Scrolling end position

Vertical scrolling in action with the right pane scrolling up and the left pane remaining fixed in place

Creating a Split Horizontally Scrolling Page
Fixed Position can be used to set up a horizontally scrolling page where the left hand side remains fixed and content slides behind it when you scroll to the right. This type of effect may be something that is effective for mobile environments. To make such a page…

  1. Set the page Content Width to a wider than normal value in the Page Inspector, e.g. 2000 instead of 1000 to create a two page width effect.
    Once you have increased the Content Width value, you may have to reposition objects that were already on the page back in their original position, especially objects that are in the header and footer areas as they may have become displaced. In our example, the social media buttons were displaced, so they been moved to the left and set with a Fixed Position within the original Content Width of 1000, so creating the illusion of a two page effect.
  2. If you are creating this effect for a mobile device, you may want to also adjust the Content Height so the page stays ‘fixed’ stopping a visitor from trying yo scroll up and down as you want them to scroll left to right.
  3. To create the effect, add a rectangle that is the length of the page and color it to contrast with the page background.
  4. The rectangle shape has been set to ‘Fixed Position’ before the pictures and buttons are added on top of it. All of these objects should also be set up as Fixed Position. It’s also recommend that ‘Always On Top’ is set for all of these objects to guarantee that they always float above everything else placed on the page.
    When you create the page you may find Bring Forward, Bring to Front, Send Backwards and Send to Back useful in floating objects on the page to the ‘depth’ that you want them.
  5. In addition, EverWeb also has a great little feature called ‘Pick Layer’ If an object is obscured by another, hover the mouse over the object and perform a secondary click (double tap). On the sub menu you’ll see the Arrange menu options that were just mentioned. At the bottom of the menu is the ‘Pick Layer’ option. When you hover over this option you will see a list of all the layers that exist along the z-axis at that location. Select the layer you want.

When creating your double page effect it’s best to work in columns so that you separate one screen width from the next. You may want to test this on your desktop or mobile device to see how the effect works in practice. You can see how the effect looks in the two screenshots below.

Horizontal Scrolling Start

Horizontal Scrolling at the start position. On the Left is the dark rectangle which the contents to right will slide underneath.

Horizontal Scrolling End Position

The contents of the page slide under the section on the left which is fixed in place using Fixed Position

Creating A Picture Scroller
Our third example is one where you create a scrolling picture view. In this example, as you scroll down the page, the text on the left hand side of the page remains in place, but the picture that is embedded in the text changes as you scroll up and down the page.
To create the effect…

  1. Select the pictures you want to use. Make sure they are the same size as each other.
  2. Next arrange the pictures in a column with no gap between the pictures.
  3. Fix Position the picture column. Once you have done this, it may be an idea to group the pictures together using the Arrange -> Group menu so they remain as a ‘unit’.
  4. Now create a rectangle shape in the same color as the page background. Shape the rectangle so it’s the same width as the picture column.
  5. Place the rectangle at the bottom of the first picture and extend it downwards to hide the rest of the picture in the column that may be visible.
    Once the rectangle is in place fix it’s position and set ‘Always On Top’ on.
  6. To complete the effect, duplicate the rectangle shape. Duplicating is better than creating a new shape as you retain all of the original shape’s attributes. Place the shape above the top of the first picture. so the bottom edge of the rectangle meets the top edge of the first picture. The top of the rectangle should be extended to the top of the page.
  7. The effect is now complete as can be seen in the screenshots below. You can test out the effect whilst in the Editor Window. When scrolling down the page, make sure that the picture column does not reappear over the top of the page.
Picture scrolling effect

The picture scrolling effect at the start position

Picture Scrolling End Position

When the page is scrolled some text moves in the center of the page and the picture scrolls to the next one in sequence

When creating effects such as those above, always remember if you are creating for mobile or desktop devices as the results may look good on one type of device and not on another. It’s also worth remembering to Preview your web pages to check that you don’t have any scrollable objects bumping in to fixed objects or that you don’t have hidden objects suddenly becoming visible. There are many more possibilities with Fixed Position and the related Always On Top and Full Width features in EverWeb!