Mac SEO Blog

Creating a navigation menu is one of the core features of most websites, making it easy for website visitors to navigate the pages within the site. EverWeb includes the Navigation Menu widget for just such a task. The widget is extremely customizable as shown in the Navigation section of the Video Tutorials page of EverWeb website. There are also third party Navigation Menu widgets available, e.g. from everwebwidgets.com, if EverWeb’s built in widget does not suit your requirements.

One important requirement when using a navigation menu for many website developers is that it remains at the top of a page whilst the visitor scrolls the page. In this way, the navigation will always be visible.

If you have created a fixed width website (i.e. one that uses a Centered or Left Aligned page layout), check out our Creating a Sticky Navigation Menu video, which shows you how to easily create this effect.

If you have a responsive website and want a sticky navigation, read on…

Set Up: Use a Master Page

It is always recommended that you use Master Pages in your website so that you only need to add your navigation once to your website. Any page using a Master page will inherit its navigation. As EverWeb’s Navigation Menu widget is so customisable, you will only want to set it up once. If you change the style of the Navigation Menu widget at a later date in Master page, all the pages that use the Master Page will be automatically updated. This is a great time saver as you do not have to update every page in your site with the same change.

Creating The Master Page

In this example, start by creating a responsive Master page:

1. Click on the ‘New Master Page’ button in the Master Page section of the Web Page List. This section is colored blue at the top of the Web Page List above the name of your website. If you are using Dark Mode, the area is colored black. If you do not see the ‘New Master Page’ button, drag the splitter bar (the row of dots above the name of your website) down until the button becomes visible.
2. Once you have clicked on the New Master Page button, the Theme Template Chooser will appear. Choose the ‘Responsive Blank’ theme from the list of Theme Templates on the left of the dialog box. Click on the ‘Home’ page style and click ‘Select’ to finish.
3. A blank new Master Page will be added in to the Master Page List. The page will be called ‘Home’, you can rename it as you would any other page in the Web Page List by double clicking on its name, entering a new name, then pressing Enter to finish.
4. You can always check to make sure that you have created a responsive page by checking the Page Layout section of the Page Settings tab in the Inspector Window. I

Adding The Navigation To The Master Page

Now that you have created a Master Page, keep it selected. The next step is to add the Navigation Menu widget to the page.

1. Click on the Widgets tab and drag and drop the Navigation Menu widget on to the page.
2. As this is a responsive page, the widget will automatically display at full width. As this is the first object placed on the page, it will be appear at the top of the page.
3. The Master page footer contains the ‘Made with Love with EverWeb’ image. You can remove this if you do not need it and add your own content if you want.

Making the Navigation Stick

Now that the Navigation Menu widget is in place on the page, it is time to make it stick so that content will be able to scroll underneath the navigation when the page is scrolled.

1. In the Widget Settings of the Navigation Menu widget, tick the ‘Use Background Color’ checkbox and add a background color to the navigation using the ‘Background Color’ color swatch. This step will stop the contents of the page from being visible under the navigation when you scroll the page.
2. Next, go to the Metrics Inspector and make a note of the Height of the Navigation Menu widget, e.g. by default this is usually 50 pixels.
3. In order for the sticky navigation to work, you will need to place a dummy rectangle shape on the page. Create a new rectangle shape using the Shapes button in the Toolbar.
4. The rectangle will be created as a full width object directly below the Navigation Menu widget.
5. Change the color of the shape to match the color of the background of the navigation. To do this go to the Shape Options tab whilst the shape is selected. In the ‘Fill’ section change the color of the ‘Color Fill’ using the color swatch.
6. Next, change the height of the shape so that it is the same as the height of the Navigation Menu widget. To do this, go to the Metrics Inspector and change the Height field in the ‘Size’ section to 50 pixels.
7. Now that the changes to the rectangle are complete, reselect the Navigation Menu widget and go to the Metrics Inspector.
8. Tick the ‘Fixed Position’ box. This will pin the navigation menu widget in place. Leave ‘Relative to browser left’ ticked
9. When you select ‘Fixed Position’ for the Navigation Menu widget, you will notice that the rectangle shape below it slides underneath it. When using Fixed Position on a full width object in a Responsive page, it is as if the object becomes a layer above the page. 
10. As content in responsive pages has to be in continuous sections down the page, we need to fill the space below where the navigation was. If we do not do this, when we use the Master Page on a regular page, part of the regular page content may be obscured underneath the navigation.
11. This is the reason why the dummy rectangle shape is needed and created with the same height as the Navigation Menu widget to fill the gap where the navigation menu would have been if it had not become its own ‘layer’.
12. Finish styling the Navigation Menu widget as you want and add the other objects you want to the Master page as desired.

Finishing Tasks

Once you have finished styling he Master Page

1. Select a regular page in the Web Page List to attach the Master Page to.
2. In the Page Settings tab of the Inspector Window, click on the dropdown menu in the Master Page section and select the Master page that you have just created.
3. The Master Page will be attached to your regular page.
4. Scroll the contents of the page to see them slide under the navigation.
5. Use Preview to test out the sticky responsive navigation.

As this is a responsive page, the navigation will automatically on mobile devices. To display a Hamburger Navigation icon when on using the navigation on mobile pages, select ‘Responsive Navigation Bar’ in the widget settings of the Navigation Menu widget.

Video Walkthrough

You can also enjoy a video walkthrough of this blog post in our YouTube video Responsive Sticky Navigation Menus.

If you have any questions or comments about this blog post, please let us know! We’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter

Instagram

It’s been a busy first half of 2019 as there is always a lot going on with EverWeb. We thought we would bring you a round up of the latest EverWeb news all in one place!

The Latest News On EverWeb 3.0

The most current version of EverWeb is 2.9.1 was released back in February. Development of EverWeb version 3.0 is well underway and we hope to have a public beta available within the next few weeks, followed by the official EverWeb 3.0 release soon after if all goes to plan with the beta. Why so long between releases? Well, EverWeb 3.0 packs an amazing amount of new and improved features, such as Contact Form Enhanced add-on, improved asset management, reCaptcha in Contact Forms, blog pagination, lots of improvements to widgets as well as the usual maintenance and bug fixes. We hope to preview more new EverWeb 3.0 features soon, so stay up to date by checking the Announcement Section of the EverWeb Discussion Forum!

EverWeb & macOS Catalina

Apple’s World Wide Developers Conference took place in June 2019 with the usual news of the upcoming features for all of Apple’s software platforms. In respect to macOS, the new 10.15 version, Catalina, was announced. This release is now in its developer and public beta testing phase with a scheduled release this fall. One important feature of the upcoming release is that it adds more security to the OS which means that these changes have to be integrated in to apps such as EverWeb. If you are trialling the beta version of MacOS Catalina, the current version of EverWeb, 2.9.1, will not run. The same will also probably be true of EverWeb 3.0 when it released in the next few weeks. [UPDATED] However, when released, EverWeb 3.0 will support MacOS Catalina when the new operating system debuts.

EverWeb Third Party Website Resources

There are some new EverWeb related third party websites live for you to enjoy. The first is everwebgalleries.com which focuses on the needs of photographers. The website is currently offering two new, free widgets which are currently in beta test. The first is the Categories Image Gallery widget which lets you group photos in to categories e.g. you could have gallery containing black and white photos in one category, color photos in another category and and ‘All’ category that contains both black and white and color photos. The second widget is an Image Carousel, which is just that, a carousel of photos that you define. You can add change the speed of the carousel and the number of images you want to scroll at each turn of the carousel. If you have any feedback on these widgets, just use the Contact form in the About menu of the website.

EverWeb PowerUp is a site that focuses on Theme Templates offering a number of free, and for purchase, theme templates. There are also widgets available including a dropdown menu widget, a cookie consent widget and an image compare widget like those you sometimes see on news websites.

For more theme templates, Everything EverWeb has a variety of contemporary themes available to purchase. There’s also a quick guide to blogging in EverWeb which is available through the Apple Book Store.

And last, but not least, Roddy at EverWeb Widgets continues to be the foremost and prolific provider of third party widgets for EverWeb. Roddy’s just released a Toolbar widget to help solve the problem of converting your fixed width website to a responsive layout then wondering what to do with the icons for email, phone and social media links?

Updated YouTube Videos and Udemy Course

We are currently updating some of our older YouTube videos replacing those featuring EverWeb’s user interface from before EverWeb 1.7 with the UI of the current EverWeb release. This also gives us the opportunity of expanding the videos to include EverWeb’s newer or improved features at the same time.

If you have a Udemy account, you can also access our EverWeb Website Builder course absolutely free. The 33 video course is also being updated at the moment to replace older content with contemporary content and improved descriptions. We hope to be adding new courses in the future!

You may have also noticed that our video’s Video Poster Images (i.e. the title card) have either a black or blue background. A black background is used for videos about responsive website design features and tutorials whilst the blue background is used for all other subjects in EverWeb.

We’re really looking forward to bringing you EverWeb 3.0 in the near future and lots of new and exciting features in the second half of the year. If there is anything you would like to see in EverWeb, or if you have any comments, please feel free to let us know in the Comments Section below!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are an EverWeb user who has invested in third party widgets, you can get to the point where the number of widgets in the Widgets tab starts to become a frustrating experience of scrolling to find exactly the right widget that you want.

Whilst EverWeb 2.8’s headline feature was the introduction of Responsive Web Design to the product, widget organization also debuted at the same time. The days of scrolling are over as you can organize your third party widgets easily. Widget organization is designed to be used only when you have, or want to install and manage, third party widgets.

Widget Category Settings

When you click on the Widget tab, you will see the Widget Category Settings directly below the tab. The Widget Category List is on the left hand side and by default is set to display ‘All’ of the widgets you have installed. To the right is the Remove Category button, the Widget Category Settings Cog and the Add Category button. These features allow you to organize and manage your widgets. 

The Widget Category List contains two predefined categories that cannot be deleted and any categories you have created yourself. The predefined ‘All’ category displays all of the widgets installed on your computer. You cannot remove EverWeb’s built in default widgets but you can add, delete and categorize any of your third party widgets. The other predefined category, ‘Default’, lists EverWeb’s own preinstalled widgets. This category cannot be changed in any way. If you do not have any third party widgets installed, their categories will have the same widgets as each other.

Adding Third Party Widget To the Widgets Tab 

Adding third party widgets in to the Widgets tab is easy, just drag and drop your downloaded third party widgets on to the widgets list. You can also add widgets to an existing user created category. First select the category you want from the Widget Category List, then drag and drop the widget into the category’s widget list. 

When you add any third party widgets to the Widgets tab, they will also be added automatically added to the ‘All’ category.

Creating a New Widget Category

To create a new widget category:

1. Click on the ‘+’ button in the Widget Category Settings to add a new category.
2. A dropdown will appear asking you to enter in the name of the widget category you want to create.
3. Enter the name you want then click the ‘OK’ button to finish.

Adding Widgets to Your Widget Category

The newly created category will become the currently selected category. If you have newly downloaded widgets you want to add to the category, add them in the same way as described above.

If you have already added third party widgets to the Widgets tab, you can add them in to your new category as well.

1. First, select the ‘All’ from the category list dropdown.
2. Locate the widget that you want to add to your new category and secondary click on it.
3. A submenu appears. Select the widget category that you want the widget added to..
4. The widget will be added to your selected category, but will also still appear in the ‘All’ category.

Adding a Folder of Widgets

Many third party widgets come in packs, so ideally you want to be able to install all of the widgets in the pack at one time. everWeb makes this easy to do. Just drag and drop the widget pack folder on to the widget list. EverWeb will create a new category with the same name as the folder, which will contain all of the widgets within the folder. The category is named after the folder.

Renaming a Widget Category

To rename a user created widget category:

1. Select the category you want to rename from the Widget Category List
2. Next, click on the Category Settings button.
3. A drop down will appear where you can edit name of the Widget category. 
4. Click the ‘OK’ button to finished. 

Deleting Widgets

As you have already seen when adding a widget to a user created widget category, secondary clicking on a widget opens a submenu. This submenu is also where you can ‘Delete’ the currently selected widget. If you delete a widget, you will be asked to confirm your action. When deleted, the widget is placed in your computer’s Trashcan. If you have deleted a widget by mistake, open the Trashcan and drag and drop the widget back on to the widgets list.

It’s always best to back up any third party widgets you may have in case you need to restore them at a later date.

Deleting a Widget Category

If you want to delete one of your user created widget categories:

1. First select the category you want to delete from the Category List dropdown menu.
2. Click on the Remove Category button.
3. A dropdown will appear asking you to confirm your actions. You can either:
   1. Select ‘Delete Widgets’ to delete the category and the widgets it contains or
   2. Select ‘Keep Widgets’ which will delete the category and move the widgets it contains back in to the ‘All’ category. 

Using the Widgets Tab Organizer is a quick and easy way to keep all of your third party widgets properly organized so that they are always quick and easy to hand.

Video Walkthrough

There is also a YouTube video about the Widgets Tab Organizer available on our YouTube channel. Subscribe today for regular videos about everything EverWeb!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw

If you are a Google+ user, you should already have been notified by Google that its social media platform, Google+, will be shutting down imminently.

If you have any data in Google+ that you want to keep, Google advises that you should download and save it by March 31st, 2019. The shuttering of Google+ will commence as of April 2nd 2019.

Google has already taken steps to wind up its social media service as you can no longer create new Google+ profiles, pages, communities or events. Google+ comments have also been removed. After April 2nd, Google will begin to remove content from Google+ which will take time to complete, so if you have content, it may still be there for a while.

Any sites that use Google+ buttons for login purposes will also cease to function over the coming weeks. In some instances, the Google+ button will be replaced with an ordinary Google button instead.

If your EverWeb created website includes any Google+ widgets, buttons or other links, now is a good time to remove them and republish your website. If you have deeply integrated into Google+, you have probably found alternatives and informed your Google+ community already. EverWeb’s Responsive Image Gallery widget

It is, of course, recommended that you no longer use the Google+ widget or button in your website. Also remember that it is only Google+ that is going away so your regular Google account will not be affected. G Suite users will also have new and updated options.

If you have any comments or questions about this post, please let us know in the Comments Section below.

 

ECWID is an an e-commerce platform that helps you easily create an online store so you can sell products and services anywhere online or in-person. ECWID can be integrated in to your website, Facebook and other social media, and Marketplaces such as eBay.

 

Adding ECWID In To Your Website

Integrating ECWID in to your website in EverWeb only takes a few steps…

1. First sign in to your ECWID account or create a new account if you don’t have one already, at ECWID’s website.
2. Once you have created your account or have signed in, you will be taken to your ECWID Control Panel.
3. The Control Panel will guide you though the steps you need to complete the setup. If you are just starting a new account, select ‘Create account’ and complete the details required.
4. Next select ‘Create Your Own Online Store’ where you will go through the steps required to create your own online presence.
5. You will be asked the question ‘Do you have a Website or Facebook Page?’ Select the ‘Yes, I have a website’ option.
6. On the next screen select ‘Other Platform’.
7. You are now on the ‘Add ECWID store to your site’ screen. 
8. Highlight the code in the center of the screen and copy it to the clipboard.
9. Now switch to EverWeb and go to your Storefront page.
10. Add an HTML Snippet widget to the Storefront page and paste in the code that you copied from the clipboard into the HTML Code box. Click ‘Apply’ to finish.
11. Now go back to the ECWID website and select ‘Proceed to next step’.
12. Now you will need to add in the URL of your Storefront page in to the field on the ‘Set. Store URL’ page. If you have already published your website with the Storefront page, navigate to this page in your browser. Copy the URL address from the search bar in to the field.
13. If you have not yet published your website you can come back to this step later once you have published. Alternatively, use the folder structure of your website from the Web Page List to construct the Storefront URL name.
14. After adding the URL to the field in the ‘Set store URL’ page, click on the button ‘Proceed to next step’.
15. You will be taken back to the Control Panel page as you have finished the setup.
16. You should now go to the ‘Add Products’ section of the Control Panel and add one or more products to your ECWID store. If you have not added any products in your own store, ECWID will display a demo product list when you publish your website instead!
17. Once you have added your product(s), complete your ECWID Control Panel setup so that your storefront is ready to go if you have not done so already.
18. The last step is to go back to EverWeb and publish your website. When you view your Storefront page, you will see your products listed for sale!

 

Video Walkthrough

You can also follow the steps in this blog post in our YouTube video Using ECWID with EverWeb.

 

If you have any questions about this blog please let us know in the Comments Section. We are always happy to help!

 

 

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw

On July 1, 2018 Google is set to release version 68 of its popular Chrome web browser. The new version of Chrome will mark all HTTP websites as ‘non secure’ in a move to make for a more secure Internet. This new security measure will affect all Chrome browser users. Websites using HTTPS are not affected as they are already secure through end to end data encrypted. In addition to Google’s new security measures in Chrome 68, the new version of the browser offers improved performance and other features not available for HTTP only websites.

 

EverWeb Standalone (Software Only) Accounts

 

EverWeb on Social Media

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

 

Adobe recently announce the immediate discontinuation of their website building software Muse its the last feature update released on March 26th 2018. If you currently use Muse you will no doubt be considering alternative website building products before support for Muse ends in May 2019 [Updated: Support now ends on March 26th 2020].

EverWeb has been recommended as a replacement for Muse by HostingAdvice.com

 

“The go-to site-building solution for fans of iWeb and Adobe Muse, the EverWeb drag-and-drop website builder creates cleaner, faster, and more compatible websites than the discontinued platforms. EverWeb offers an intuitive platform that makes web development accessible to a wider audience by offering extensive features, support, and resources in the familiar macOS interface.”

 

About EverWeb

Ever web is a drag and drop website builder for the Mac. EverWeb is NOT sold as a subscription. You get to keep the version you purchase (plus any upgrades you are entitled to while your account is active) for life. You will never lose access to the software you purchased if you decide not to renew your plan. Follow the link for more information about purchasing EverWeb and FAQ’s.

EverWeb is installed locally to your hard disk which has the advantage of no lag when developing your website. EverWeb is designed to be easy to use whilst making complex features simple to implement without having to resort to coding. You can use fully customizable Theme Templates to develop your site, or start with a blank template if you are redeveloping your existing site from scratch.

We have already had many Muse users enquiring about EverWeb and how the two products compare. Whilst it is always difficult to directly compare products, the list below gives you some indication of the features that EverWeb and Muse have in common.

 

EverWeb and Muse: Comparable Features

Whilst no means an exhaustive list, these are some of the major features that EverWeb and Muse have in common. Inevitably there will be features that are in Muse that are not available in EverWeb, and vice versa. In such instances, there may be alternatives or workarounds available. Please refer to the ‘Resources to Help’ section below for help here. We also recommend downloading the free trial version of EverWeb so you can experiment to see what is possible.

• Drag and drop, no coding needed to build your website.
• You can publish your site to your own hosting provider or to EverWeb’s own hosting (recommended).
• Support for hyperlinks and mouse normal, rollover and mouse down states.
• Support for page anchors (known as Scroll Position in EverWeb).
• Built in widgets for E-Commerce, Image gallery, Image Slider, Facebook, Navigation Menus, RSS feeds, Contact FormsPayPal, YouTube and many more. Third Party Widgets are also available.
• E-Commerce features built in with our robust PayPal Widget.
• Fully featured integrated Blogging Environment.
• WordPress blog post import.
• HTML code can be injected at page and site level if required.
• Built In Contact Forms with built in controls for customization.
• Auto generated desktop, mobile and responsive  Navigation Menu widget.
• Fast Loading Times.
• Ability to Attach Files.
• Spell Checker.
• Secure Websites Support Available with EverWeb+Hostng Accounts.
• Built In Animation features.
• 64-Bit App.
• Website files can be published to a folder on the local hard disk.
• Built in Preview.
• Stock Photos library with over 500,000 free to use images.
• Built in SEO together with our SEO for EverWeb video course.

 

Try EverWeb for Free

EverWeb is free to try. You can download the trial version at the EverWeb website. The trial version is fully functional so you can develop your website immediately. The only restriction with the trial version is that you cannot publish to your local hard disk or to the Internet. EverWeb comes complete with built in help with a downloadable user manual and help videos throughout the product wherever you see the ‘?’ symbol displayed.

 

Resources To Help

There are plenty of resources to help you discover more about EverWeb. This blog has lots of information about EverWeb’s features and how to use them. There is also the EverWeb website itself which contains lots of information and video tutorials, our YouTube Channel and our Discussion Forum.

 

 

If you have any questions about EverWeb, please let us know. We’re always happy to help.

 

 

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Since our last update at the end of 2016, we’ve been busy, as always, making EverWeb even better. Catch up on what you may have missed in our mid 2017 Review below!

 

EverWeb Versions 2.1 – 2.3

The last release of EverWeb in 2016 came in November with the huge version 2.0 release that added a fully featured, integrated, blogging environment to EverWeb. The all new Contact Form Advanced widget also debuted,  taking contact form creation to a new level.

2017 kicked off with the release of EverWeb 2.1 in January, adding a new ‘Link to Archive’ feature for the blog main page as well as new security features for the Contact Form Advanced widget, more details of which can be found below. Other additions to the widget included the ability to delete form options and reorder control options.

Two new keyboard shortcuts also debuted making your workflow a lot easier and time saving. The Command+Option key shortcut lets you easily drag an object out from underneath other objects whilst the Command+Shift key shortcut lets you to drag and drop objects up and down your page whilst retaining the page layout.

For more details, follow the links to the EverWeb version 2.1 release notes.

In February, EverWeb version 2.1.1 updated the Audio, Contact Form Advanced and Image Slider widgets as well as the usual maintenance and stability improvements. The EverWeb 2.1.1 release notes have all the details.

EverWeb version 2.2 followed in April with the brand new Animation Engine bringing you 16 different types of animation effects to use in your website. This is a great feature that really makes any website pop and are great ‘Call To Actions’ for your visitors.

The new ‘Distance to Object’ feature was also introduced, making it easy to see how far one object is away from other objects in the Editor Window. To use this feature, first select an object then hold down the Option key whilst mousing over other objects. You will see the distance between the source and target objects displayed directly in the Editor Window. For more on this and the other features of this release take a look at the EverWeb version 2.2 release notes.

Our final release for the first half of the year, EverWeb version 2.3, brought optimization and speed improvements to make websites load faster as well as bringing faster upload times when publishing websites.

 

Blogging

There’s a lot of information available about EverWeb’s new blogging feature. If you are new to blogging, or   transitioning from iWeb to EverWeb, our YouTube videos, and blog posts are there to help you get started. If there is something you want us to feature, please let us know, we would love to help!

We also have an updated iWeb to EverWeb YouTube video for EverWeb version 2.o making transferring from iWeb to EverWeb even easier with our step by step guide.

Since EverWeb 2.0 we have refined and added features to blogging such as updating the blog main widget to include a customizeable ‘Go To Archive’ page hyperlink feature and streamlining the import ofblog posts from iWeb and WordPress into EverWeb.

 

Updated Widgets

A number of widgets have been updated since the start of the year, notably:

Contact Form Advanced

The Contact Form Advanced widget added new features to make sending and receiving of forms more secure and reliable using SMTP features. This is an important addition to the widget as email apps get more aggressive about spam, you will still want ‘valid’ emails to come through without any problem.

The Contact Form Advanced widget now lets you reorder its Control Options and delete Form Options

Image Slider Widget

A couple of small, but great, additions to this widget. You can now center thumbnails and you can also change the color of the previous/next arrows to be either light or dark.

 

Audio Widget

One of first widgets that shipped with EverWeb 1.0 was updated to include audio looping, automatic playback on page loading, the ability to set the default sound volume and a mute option.

 

Working with Other Products and Tools

 

Our blog posts featured many different aspects of EverWeb but we also took the time to look at how EverWeb can be used with other products such as Font Awesome and JotForm. Our blogs also now have more links to corresponding YouTube videos so it’s even easier to see how features work.

If there is any feature that you would like to see us cover, please let us know in the Comments Section below, we’re happy to help!

 

Looking Ahead!

Although it’s been a busy first half of 2017, there’s plenty more to come in the second half of the year. We’re working hard on EverWeb version 2.4 at the moment and should have more news to share with you soon!

The most important part about EverWeb is giving you the best features and experience that we can. If there is anything that you would like us to consider for the future, or anything we can do better, please feel drop us a line I note Comments Section, we’re here for you!

 

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

 

If you have not heard of Font Awesome, it’s a collection of over 600 scaleable icons that you can include in your web pages and it’s absolutely free! In addition, Font Awesome’s icons do not need to be downloaded and they can be updated by those who supply them. For example, Google updated its Google+ icon about a year ago and later updated its Font Awesome icon. The updated icon is automatically used in your web pages so you do not have to update. or republish. your website. The icons can be customized so that you can combine icons together, change the icon’s color and other effects. Last but not least, using Font Awesome’s icons is a great way to ‘dip you toes’ into the ‘waters’ of HTML.

 

Getting Started With Font Awesome

To start using Font Awesome icons is very simple and only takes a few steps:

1. Go to the Font Awesome website and click on the ‘Getting Started’ menu.
2. Sign up by entering your email address and clicking on the ‘Send my Font Awesome embed code’ button.
3. Check your email. If you have not received an email, check your junk mail folder just in case.
4. Copy the CDN (Content Delivery Network) embed code from the email to the clipboard.

 

Adding Your Font Awesome Embed Code in EverWeb

The CDN embed code is going to be added to your EverWeb Project file. Font Awesome uses the CDN, or Content Delivery Network, as a simple, fast and efficient way of loading and rendering icons on your page. Now that you have copied the CDN embed code, you can use it in EverWeb:

1. Open your Project file in EverWeb
2. Go to the ‘Site Publishing Settings’ either by clicking on the website name in the Web Page List or by using the File-> Edit Publishing Settings menu.
3. Go to the Header/Footer Code section. In the Header Code section, paste in the CDN embed code.

 

You are now all set up to use Font Awesome icons in your Project. As you have added the code to the Project’s Header code section, the embed code is now available on all of your Project’s pages so you place add icons anywhere in your website.

 

Using Font Awesome Icons in EverWeb

Now that everything is set up you can start to use Font Awesome icons. Each Font Awesome icon has its own name e,g. the Instagram icon is called ‘fa-instagram’, an icon representing a desktop pc is called ‘fa-desktop’ and so on.’fa’ is used as a prefix to identify the icon as a Font Awesome icon. All available icons and their names are listed on Font Awesome’s Icons page which is sorted by category and completely searchable.

To get started, it’s a good idea to try out some examples from Font Awesome’s ‘Examples’ menu. You will find a great camera example in the ‘Larger Icons’ section which shows you how to scale the icon to different sizes, a ‘Stacked Icons’ section that shows you how you can place icons on top of one another and so forth.  Even if you have never had any experience in HTML it is easy to get started using the code relating to each icon.

To add an icon to your page in EverWeb do the following:

1. Start with an example from Font Awesome’s icon page e.g. the camera in  the ‘Larger Icons’ section.
2. Copy the code that relates to the icon on the left hand side e.g. for the largest camera icon displayed,  copy the code on the right of it to the clipboard e.g.

   <i class="fa fa-camera-retro fa-5x"></i> fa-5x

3. Next, in EverWeb, drag and drop the HTML Snippet widget on to the page.
4. Paste the code you have copied from the clipboard in to the the ‘HTML Code box’ of the widget and press ‘Apply’ to implement the code.
5. The widget will update in the Editor Window. In this example above, the camera icon and the name of the icon (fa-5x) are displayed.

 

If you do not want the text that is displayed, just delete the text ‘fa-5x’ from the end of the line of code and press the ‘Apply’ button again to update the widget.

Next you may want to start using other icons e.g. to use a Facebook icon with the same size as the camera example, you could use the code

 

<i class="fa fa-facebook fa-5x"></i>

 

in the HTMLSnippet widget. Use the examples in Font Awesome’s website to experiment more, especially if you are new to coding. Use the examples to stack icons, create lists of icons, animate icons and so on. There is plenty to discover! You will usually see the results of your work immediately in EverWeb as the HTML Snippet widget updates when you press the ‘Apply’ button.

 

More Help and Resources

The main source of help is the Font Awesome website itself. It has many examples and a blog where you can find out more information, hints and tips on using these icons.

As Font Awesome involves some coding, the W3Schools website may also be of use as it has a specific section dedicated to Font Awesome as well as further examples and information on how to start with HTML if you are interested.

 

Enjoy discovering Font Awesome in EverWeb!

 

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

2019 UPDATE: Easily justify text without widgets in EverWeb 2.9.

Original EverWeb Justified Text Post

Justified text is used extensively in printed books and newspapers as it’s flush left and right margins give content a clean, well ordered appearance. Broadsheet newspapers traditionally used this style of alignment to place as much text content within a  limited amount of page space. Many print edition newspapers today mix justified and left aligned text for both styling and readability reasons.

Printed books and academia also use justified text, printed books for much the same reasons as newspapers.  Academic works tend to use justified text where annotations or corrections need to be applied to text. Often specific rules about content layout are required, e.g. university dissertations often require justified text with double line spacing as it’s easier for assessors to annotate and mark the content this way.

The Problems With Justified Text

In the Internet Age there’s often argument that justified text has no place in the digital media and with good reason. Whilst it looks neat and tidy in print, on screen it can result in large gaps between words (see the screenshot below for an example of this.) These gaps can form ‘rivers’ of white space flowing down a column of justified text making distracting the reader and at worse making the text just difficult. There’s also a tendency for the right margin to be ‘over hyphenated’ to accommodate words having to be split from one line to the next to accommodate the justified text look. Again this can result in readability issues.

Studies indicate that justified text slows reading speed as the eye tends to track words and lines better when the right margin (in the Western World) is ragged rather than justified. Those who have reading disabilities also have more problems with justified text than with left aligned, ragged right text.

Justified Text in The Digital World

Printed text solves the problems inherent with justified text through subtle changes of font size, spacing and other styling attributes to make text visually appealing. In the digital world, the tools available are generally not sophisticated enough to make justified text look as appealing as printed text. As such, in most cases text manipulation is the digital world is limited in scope which is where the typesetters eye is an advantage. HTML 5 and CSS offer limited support for justified text basically for the same reasons. As EverWeb complies with the standards set for HTML5 it therefore includes left aligned, right aligned and centered text options but not justified text.

Lastly, the Internet has expanded our concept of what a page is. When designing a website you have an unlimited “canvas” to use. Pages have no limits. As such, some of the original reasons for using justified text are no longer necessary. You don’t need to cram content any more in to limited space.

When to Use Justified Text

Even with all of the problems, justified text can create a neat and organized appearance to text and IS a great way to highlight particular areas of text. To create your own justified text in EverWeb just download the free Justified Text widget from EverWeb’s Third Party Add-Ons section or directly from AllAboutiWeb.com.

Installing and Using the Justified Text Widget

The AllAboutiWeb website explains how to download and install the Widget. Once installed you will see a message that the widget has been installed. When you launch EverWeb, you will see it in the Widgets Tab.

The widget works in the same way as all of EverWeb’s widgets, just drag and drop it to where you want it on the page. The Justified Text Widget lets you create up to three paragraphs. If you need more paragraphs just drag and drop another Justified Text Widget on to the page! You can style the text using the Fonts Panel to create the effect you want.

The Justified Text Widget from AllAboutiWeb.com gives you extra flexibility in your website design. Whilst it can give your web page a neat and tidy look, always remember to prioritize the readability of your website’s text content over it’s aesthetics.

What do you think of justified text? Does it have a place in website design today? Let us know your thoughts below!