23 Jun 2017

New 3rd Party “EverWeb Widgets” Now Available!

No Comments EverWeb, Software, Web Design, Widgets

Most EverWeb Discussion Forum visitors will already know Roddy McKay whose been a fantastic provider of third party widgets for EverWeb since 2013. Roddy’s EverWebCodeBox website has been a great source of widgets that extend EverWeb’s capabilities.

Roddy’s now created a completely new website, “EverWeb Widgets“, which has just launched with over 200 new widgets designed for EverWeb 2.0 and higher.

The new widgets take advantage of EverWeb’s updated widget API so offering a more feature rich experience than those in the EverWebCodeBox. The widgets are organised in to 20 categories making it easy to find what you want quickly. A website Search button is included to quickly locate widgets and the ‘Info’ menu is a useful resource on all aspects of the new widget packs.

Different widget categories cater for different design needs. The ‘Elements’ widget pack, for example, contains twelve widgets to create tables, lists, scroll to top buttons, text wrapped images, social media buttons and more. More advanced EverWeb users may be interested in widget packs such as the ‘Responsive’ pack which gives you the tools needed to build a responsive design website within EverWeb. The new ‘Responsive’ widgets supersede the ‘Flex’ system found in the EverWebCodeBox and are much easier to set up and use than before. Information detailing how to create a Responsive style website are included as well as some caveats and limitations of this approach.

The new widgets have also taken advantage of today’s web design trends with a new ‘Hero’ widgets category, Podcast widgets, Image Sliders, widgets for mobile and more. The widget packs also take advantage of EverWeb’s Full Width feature and the updates to the EverWeb widget API. All widgets in the ‘EverWeb Widgets’ website are fully described and include a demo so you can see how each widget works in real world situations. Widgets can only be purchased in packs and not individually. The number of widgets per pack will also vary depending on the widget category.

The new third party ‘EverWeb Widgets’ offer a great resource for any EverWeb user who has specific website needs, or requirements, that go beyond what is in the product itself. There are bound to be more widgets available in the future. You can stay up to date with any future widget pack releases from Roddy via the EverWeb Discussion Forum or directly from his website.

Summary
‘EverWeb Widgets’ : Third Party Widgets for EverWeb
EverWeb Version Required: Version 2.0 or higher
Available From: www.everwebwidgets.com
Experience Level: From Beginner to Expert depending on the widgets you want to use
Availability: Now, http://www.everwebwidgets.com

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!