One of the most important parts of the EverWeb User Interface is the Web Page List as it is where all the web pages you create are listed. The Web Page List has many different functions and features which are explored below.

The Web Page List lists all of the pages that you create in your EverWeb website project. The blue colored Master Page List contains  one Master Page – ‘Resort Master Page’. The grey colored regular page list includes the website’s Home Page,  a Directory Page called ‘Resorts’ containing three pages used in Drop Down Navigation Menu and an About Us page.

The Web Page List Structure

The Web Page List (WPL) runs down the left hand side of Everweb’s User Interface and has two sections separated by a splitter line (see above screenshot.)  The blue section at the top is the Master Page List. The grey area below it is the regular page list. Between the sections is a ‘splitter’ line which can be moved up and down to show more or less of the Master Page List from view. If you move the splitter line up high enough you can hide the Master Page List altogether this usually is not recommended. To move the splitter line, click and drag it up or down to where you want it.

If you have long page names in your website project click and drag the WPL’s right hand margin to the right to see more of the page names. Conversely click and drag the margin to the left to see less of the page names.

Both sections of the WPL allow you to create, select and delete pages. If you secondary click (a two finger tap) on a page name a context sensitive menu appears with options listed below. If you secondary click on the top line of the great area containing the website name, only ‘New Page’ and “Clear ‘Using Assets’ Indicator” are available.

New Page: Creates either a new Master Page or a new regular web page. Alternatively, you can create pages using the menus, shortcut keys or the Toolbar ‘Add Page’ button (for regular web pages only).

Rename: Opens the editing box for the highlighted page where you overtype the page name with a new name. It’s actually quicker to double click on the page name to edit it.

Delete Page: Deletes the highlighted page immediately. If you delete the page by mistake press Cmd+Z straight way to undo the action.

Duplicate: This is a useful option when you want to create a new page that is similar to the one you are highlighting

Convert To Directory: This menu option is only available in the regular page list. Regular pages can be converted to Directory Pages. A directory is like a folder that you put web pages in to. In EverWeb, directories are also used for Drop Down Navigation Menu structures which are discussed in detail below. Once you convert a regular page to a Directory Page, you can’t change it back. If you have have converted the wrong page in to a Directory Page, press Cmd+Z immediately to undo the action.

Clear ‘Using Assets’ Indicator. EverWeb has a feature in the Assets tab to find all pages that are associated with a particular Asset e.g. if you have a picture that is used on more than one page you can find which pages it is on. First go to the Assets Tab and highlight the picture’s filename. Next, secondary click on the filename and a menu appears that  includes the option ‘Find Pages Using Asset’. When you click on this option, all pages using the picture will be highlighted in yellow in the WPL. To clear the yellow highlight, click on the “Clear Using Assets’ Indicator”.

Web Page List Icons

The top of the grey regular Web Page List is headed by a line containing a triangle symbol, a folder or globe icon and the website project name. If you click anywhere on this line the Editor Window changes to the website project’s Site Publishing Settings. Use this dialog box to tell EverWeb where to publish your website to.

When setting ‘Publish To’ in the Site Publishing Settings the Publishing icon to the left of the website name changes to reflect your choice of publishing location.  If you choose ‘Folder’, the icon becomes a folder indicating that you are publishing to your local hard disk. Publishing to ‘Folder’ is useful when building your website so you can safely test it before going live. The Globe icon is displayed when publishing to the Internet, either to EverWeb (if you have an EverWeb+Hosting plan) or via FTP to your own host provider.

The Triangle symbol on the left hand side of the top line expands or collapses the content beneath it. If you click on the triangle at the top of the grey WPL area, all the pages beneath it ‘collapse’ and are hidden from view and the triangle points to the right instead of downwards. Click the triangle again to ‘expand’ the view and make the pages visible again. The triangle appears whenever you use directories which is useful if you don’t need to see the pages contained inside them or when you want to have more vertical display space available in the WPL. The triangle symbol also appears in many other areas of EverWeb such as in the Page Tab of the Inspector Window.

On the right of the Publishing icon is the website project name. By default this is initially set to ‘NEW WEBSITE’. To rename you website project double click on the name and type over it. Press Enter to finish.

Web Pages, either Master Pages or regular web pages, use the Page icon and directories use the Folder icon. These icons  can be either grey or red in color. When an icon is grey it means that the page or folder has not been changed since it was last published. When the icon is red, the page or folder has been changed since it was last published. For example, if you edit a Master Page, all regular pages using it will change to a red icon in addition to the Master Page’s page icon itself.

When you select a page in the WPL, a ‘dot’ to the right of the web page name displays providing an additional visual indicator that the page is currently selected.

The Master Page List

The blue colored Master Page List is where you create, select, manage and delete Master pages. There are a number of different ways to create a Master Page: The ‘New Master Page’ button, the File -> New Master Page… menu, the keyboard shortcut ^Shift+Cmd+N or the “+” symbol in the Master Page section of the Page Inspector. Additionally, secondary clicking in the blue Master Page section you display a context sensitive menu including the ‘New Page’ option.

Master pages are listed in the order you create them and cannot be moved as you can with regular pages. In addition, you cannot create Directory Pages for Master Pages.

To delete a Master Page, select the page in the Master Page List and press the backspace key. The page will be deleted immediately. If you delete a Master Page by mistake, press Cmd+Z immediately to undo the deletion. Remember that if you delete a Master Page it will be removed from all the regular web pages that it was attached to.

TIP: If you have designed a regular page that should have been a Master Page, drag and drop it from the regular page list in to the Master Page List area. This creates a copy of the page in the Master Page List.

The Regular Web Page List

Adding regular web pages to the WPL is done in much the same way as for Master Pages: The ‘Add Page’ button in the Toolbar, the File -> New Page… menu, the keyboard shortcut Cmd+N or secondary clicking in the grey regular web section to display a context sensitive menu including the ‘New Page’ option.

Deleting regular web pages also works in the same way, just highlight the page in the the WPL and press backspace. Again, if you have made a mistake, press Cmd+Z to immediately undo the action.

Regular web pages and Directory Pages in the regular page list section can be moved by dragging and dropping them to where you want them. If you are using EverWeb’s Navigation Menu Widget it will inherit the page order of the regular page list so ordering  pages appropriately is important. To exclude pages from the Navigation Menu Widget un-tick ‘include page in navigation menu’ in the Page Inspector for the page(s) you want to exclude.

Directories

EverWeb uses directories in the regular page list of the WPL for a number of different purposes. The main reason is that they provide the structure needed for drop down menus in the Navigation Menu Widget. As you can see in the screenshot above, the pages Bali, Palm Springs and  Malta are in the Directory ‘Resorts’. For more information on the Navigation Menu, please see the blogs on Adding a Menu and Styling Options for EverWeb’s Navigation Menu Widget. Directories are also useful if you want to create your own blog in EverWeb or if you just want your website’s pages properly organised.

To create a directory first create a regular page. Next secondary click on the page you just created and select ‘Convert to Directory’ from the menu. The page icon changes to a folder icon indicating that the page has been converted. Note that once you converted a regular page you cannot change it back. If you realize that you have converted the wrong page, press Cmd+Z to immediately undo the action.

To add a page into a directory drag and drop an existing page underneath and to the right of the directory, then drop it in place. You will see a guide line to help you when you perform the move. Once you have dropped the page in to the directory, you may need to click on the triangle to the left of the folder icon to see the page you have just dropped in there.

If you don’t have existing pages to add in to the directory, just highlight the Directory Page name and secondary click to bring up the sub menu. Select ‘New Page’ and choose the template you want to use. The page is added in to your Directory structure.

You can move pages within a directory just by dragging and dropping them to their new location. You can even take pages out of the directory altogether by dragging the page to the left and either up or down until the page is outside of the directory structure, then dropping it in it’s new location.

The Web Page List offers a flexible and easy way to organize your website project. Getting familiar with the Web Page List will also help improve your workflow as seen by some of the shortcuts outlined above.

In the next instalment of the Getting Started with EverWeb Guide we take a look at the Assets Tab.

As always please let us know if you have any comments and questions. We’re happy to help. You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

The last instalment of the ‘Getting Started with EverWeb’ series focuses on the Asset Tab. It’s a part of EverWeb you may not immediately think you need to get to grips with when building your website. However, it’s worth getting acquainted with the Assets Tab as it has many features that help your workflow, SEO and website Project file management.

What is the Assets Tab?

The Assets Tab is the file management center of your EverWeb Project and contains two ‘Assets Lists’:

Image Files: Any image you drag and drop in to your Project are listed here. Image files are imported in their native format except for TIFF, PDF and PSD files that are converted to a JPG format. Retina display images are also supported.

External Files: Media files such as audio or video and files used in hyperlinking e.g. PDF files are listed as External Files. The reason for this is that EverWeb uploads the ‘external’ file to the server when you publish your website so that it can be downloaded, or accessed, from the server as needed.

How Do I Use The Assets Tab?

There are a number of different ways in which the Assets Lists can be used and managed. Most of the features of the Asset Tab  are self explanatory, so below we explore how to get the best out of the Assets Tab as well as some of it’s lesser known features…

Predictive Search

When using the Assets List, you can search for assets with the search box (see screenshot below). You can also find assets using predictive search. Highlight the first asset in the list then start typing the name of the asset you want to find. The more you type, the closer you get to the locating the asset you want.

Previewing an Asset

To preview an Asset, you click on the preview eye to the right of the asset. You can also preview an asset by starting to drag the asset out of the Asset List. As you do so, you will see an image thumbnail. If you do not want to use the asset just drop it back in t’s original place in the Assets List.

Reusing Imported Image Files

Once you have imported an image file there is no need to reimport it if you want use it more than once.  Just drag and drop the image from the Assets List on to your page as often as you need it. There’s no need to reimport the same image every time you want to use it. Using the same image file is efficient than having the same image multiple times in your Assets List.

Troubleshoot Slow Loading Web Pages

If you have a web page that loads slowly when published, you can use the Assets Tab to check if there are any large image files that may be causing the problem. If the Assets List just shows a list of file names without any extra information included, click on the up/down arrows at the top of the Assets List (see screenshot below) tick ‘Show File Info’. Next, select the page in the Web Page List that loads slowly. Click on each of the page’s images in turn to see if any of them are large enough to affect the page load speed. If you do have a large image file, delete the image from the Assets List, optimize the original image so that it’s smaller and reimport it.

Part of the Editor Window showing the Assets Tab, The up/down arrows above and to the right of the Assets List  are used to access menu options.

Which Images are Used on Which Pages?

To quickly locate all pages that use a particular image file, first highlight the image file in the Assets List. Next, secondary click on the highlighted file and select ‘Find Pages Using Asset’ from the menu. Any pages using the image file are highlighted in the Web Page List.

To remove the highlight, secondary click on a page name in the Web Page List and select “Clear ‘Using Assets’ Indicator”.

Better SEO with the Assets Tab

Before importing an image file into your Project, make sure the filename is meaningful e.g. if you are importing a picture of the US flag, you may want to call the file ‘USFlag.jpg’. This approach is better for your SEO. Many image files use automatically generated filenames which is not good for SEO.

If you have already imported files that have non-meaningful names rename them in the Assets List. Double click on the filename and overtype the name with a more meaningful one and press Enter to finish. Although renaming image files before importing them in to EverWeb is best, renaming files that are already in EverWeb Assets List still helps.

Housekeep Your Project File

As you develop your website you may build up a collection of unused assets, e.g. image files you were going to use but later decided not to. The space these assets take up can be reclaimed by deleting them from the Assets List. Click on the up/down arrows above the Assets List and select ‘Find Unused Assets’. EverWeb will highlight all assets not currently in use and will ask if you want to delete them.

Deleting unused assets saves disk space by reducing the physical size of your website project file. It is also a good way of un-cluttering your Project’s Asset List.

The Assets List is a versatile tool to manage your EverWeb Project’s Image Files and External Files. If you have a question about the Assets Tab and it’s capabilities please let us know in the Comments section below.

More Related Blogs…

For more ‘Getting Started with EverWeb’ blogs please click on the link that you are interested in below

Creating Your First Website

The Editor Window

Master Pages

Learning About SEO

The Web Page List

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.

Comparison of left, centered, right and justified text. As can be seen, the justified text tends to result in large gaps between words creating rivers of white space in the column on the right.

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!

EverWeb allows you to create anchor links – links that can send visitors on your site from one section on your page to another. Anchor links allow to you guide the visitor to certain sections on the page, making it easier for them to navigate your content. For example, let’s say that your home page has some important content, but that content is located near the bottom of the page. Rather than just hoping the visitor will scroll down to the bottom, you can guide them right to that particular section by using an anchor link.

There are 2 styles of anchor links that you will be able to use on your site. One style is a basic ‘jump’ that will just send the user directly down the page. The other style is a ‘smooth scroll’ which will gently scroll the visitor down the page.

This video tutorial will show you how you can accomplish either of these methods. You will need to refer to some code for one of the smooth scrolling options. There is also a widget that can be purchased to make this process even easier.

VIDEO TRANSCRIPT

In this video tutorial, I am going to show you how you can create anchor links so that you can link from one section of your page to another.

I am going to show you three different ways of accomplishing this, and I encourage you to watch all 3 methods before determining which one will best suit your needs.

The first method will be a simple method which will just jump the user from one part of the page to another.

The second method adds a couple more steps, but will allow you to have a smoother scroll to the other section of your page.

The third method is the easiest, allowing you to setup smooth scroll anchor links, but will require the purchase of a third-party widget. I will provide more information on this later in this tutorial.

So for the first method, I have this page here and I want to setup an anchor that will let the user jump from up here near the top of the page, to a section closer to the bottom.

The first thing I am going to do is create my link that will allow the user to click to go to the bottom of the page. I am just going to create some basic text, and then hyperlink the word or words that I want the user to click on.

I’m now going to enable this as a Hyperlink by clicking on the Hyperlinks tab in the Inspector window, and checking the box to enable as hyperlink. I will choose to link to an external page. In the URL field, I will type in the pound sign, followed by any text that I want to refer to this as, so in this case I am just going to call it bottom

The next thing I will do is add an HTML snippet to the page. In the Widget Settings box, I am going to type in some simple HTML. The important thing to note here is that I am putting in the same word which is bottom, that I linked to in our previous step.

I also wrote bottom inside the tags, and that does appear on the page here. So what I will do is just find an object that this can hide behind nicely, and I will just hide it by going to Arrange, and then selecting Send to back.

When the site is previewed or published, you will see that I can jump to the bottom when I click on the link.

The next method will provide us with a smooth scrolling anchor. This is going to be done using some code, which you can obtain from everwebcodebox.com, hovering your mouse over the Links menu, and then clicking on Links & Anchors. You can now scroll down to the bottom of the page, or click on the Smooth Scroll link to get there smoothly.

We’re going to highlight the script that is here, and copy it.

Back in EverWeb, this script is going to be pasted into the Footer Code section. If you only plan on having the smooth scrolling anchors on one page of your site, you can actually just paste it into the footer code box for that particular page. But if you plan on having it on multiple pages, or you are not 100% sure yet, pasting the script into the site wide footer code section will be fine.

Next, I’ll head back to everwebcodebox and copy the code next to Hyperlink code.

I am going to add an HTML snippet and then paste this code. The anchor-name can be changed to whatever you want, as well as the text that will appear as the anchor link.

Place this on your page where you want the anchor link to be located.

Now I will head back to everwebcodebox again, and copy the code for the anchor.

Drag and drop another HTML snippet onto the page, and paste the code.

I’m going to replace anchor-name with the same name I gave to the anchor in the previous step, which was bottom.

Now place this where you want the user to end up when they click on the anchor link.

When the site is previewed or published, you will be able to see that you can scroll smoothly.

This next method, which is my preferred method, involves using two widgets that are available for purchase on everwebcodebox.com. If you prefer the smooth scroll over the jump, this method is by far the easiest to accomplish and provides the most flexibility for your text link.

These widgets can be purchased by going to everwebcodebox.com, clicking on the Widgets 1 link and then go to Layout and click on Anchors.

To use these widgets, first drag the A Link widget onto your page. In the Pre Text field, type in whatever you want to appear before the link. Then in the Link Text field, type in the text that you want to appear as the anchor link. Then type whatever you want to appear after the link in the Post Text field. You can also change the font, the size, the text color, the link color, and select if you want the link to be underlined.

Then you can give the hyperlink an ID. I’ll just use the same ID I have been using throughout this tutorial which is bottom, but you can of course use whatever you want.

Place this on your page where you want the anchor link to be located.

Then go back to the Widgets tab and drag and drop the Anchor widget.

In the anchor ID field, type in the anchor ID that we just entered in the previous step.

Now you can place this anchor wherever you want the smooth scroll link to the take the user.

When the site is previewed or published, you will be able to see that you can scroll smoothly.

And those are three different ways you can setup anchor links on your site in EverWeb.

We recently released a popular video tutorial that demonstrates how to create a full width header that can resize as the user scrolls down the page. This can make your website have a more modern feel to it, as this type of header is becoming more widely used on professionally built websites.

This effect not only will make your site look and feel more modern, but it also adds a bit of convenience to your website visitors. Rather than having to scroll all the way back up to the top of the page, visitors will be able to access your website’s navigation menu at all times, making it much easier to navigate from page to page.

Check out the video below and see how you can add this feature to your website. The widget can be found at EverWebCodeBox.

Video Transcript

With the help of a very powerful widget, you can add a sticky header that resizes when you scroll down the page of your EverWeb site. Here is an example of a basic sticky header that I will show you how to create in EverWeb.

The widget that we will be using to create this header was developed by a third-party EverWeb widget developer named Roddy. The widget is available for purchase at a modest price on Roddy’s website everwebcodebox.com

You can locate it by clicking on the Widgets 3 link, followed by hovering over Responsive and selecting resize header. Scrolling down this page will show you another example of this widget in use.

In this tutorial I am going to show you how I created this header using the widget. This widget is powerful and comprehensive, so I will be skipping over some of the controls that I don’t need to use or ones that I accept the default values for. I am making sure that I cover the most important aspects of the widget, and provide you with enough information to be able to move forward with creating your own header.

I also want to point out that Roddy actively updates his widgets, so if you see a control in your widget that you do not see here, it is because the widget has been updated after the release of this video.

The header that we will be creating has 4 main parts to it. There is the background, the logo, the text, and the navigation menu.

So starting with a blank page for the purpose of this demonstration, I will drag and drop the widget onto the page. This is what appears by default.

The very first thing I will do is make the header full width. I do this by clicking on the Metrics tab, and then enabling the Full Width option.

I will now click on the Widget Settings tab.

The Background

The first thing I will do to the widget settings is change the background color of the header. This is done by clicking on the color control next to where it says Background. You will also notice that there is a Background B. This is because by default, the background will be a Gradient. Since I want a solid color, I will also make Background B the same color as the one I chose before.

The Logo

Next I am going to add the image. I have already added the image to the assets list, so I just need to click on Choose and then select it.

My logo appears much smaller than I want, so I will adjust the value next to width, until my desired width for my logo is displayed.

I also want the logo to be closer to the top of the header, so I will adjust the value next to Top.

The logo is also a bit further to the left than I want it to be so I will adjust the value next to Left.

I will also adjust the Resize Width so that the logo is my desired size once it has been resized.

I will also adjust the Resize Top value so that the logo is a bit further from the top.

The Text

The next thing I will do is replace the heading with my own.

I will also type in my desired Font Family. Since this is a Google Font, I will check the option for Google Font.

You will also notice that the text is overlapping with the logo, so I am going to adjust the value next to Left to move it a bit to the right.

I will also modify the resize left value.

The Navigation

The next thing we will do is add the navigation menu. This is done by adding the navigation menu widget by dragging and dropping it onto the header.

Next, I will click on the Metrics tab and enable the Full Width option. Back on the Widget Settings for the navigation menu, I am going to change the alignment from Left, to Right, since my navigation is on the right side of my header. I will also position the navigation menu somewhere around the middle of the header.

I will also click on the Fonts button to open up the fonts window to select my font.

The rest of the modifications that I make to the navigation menu will be done using the controls on the Full Width Resize Widget, so I will click back to that widget, and then select the Widget Settings tab in the Inspector, and then scroll down to the navigation menu section.

I am going to increase the value next to Resize Top so my navigation menu is bit further away from the top.

I will now adjust the link color, as well as the hover color. You will notice that some of the changes made to the navigation menu will not appear in EverWeb. This is normal. Your navigation menu will appear much different when your site is previewed or published.

I also do not want there to be a background for my navigation menu so I will select Transparent background.

I will modify the font size since I want it to be a bit larger.

I am going to decrease the minimum width for the links in the navigation menu because I want this spacing between links to be a bit smaller.

My navigation menu does not contain a drop down menu so I will skip over the drop down menu style controls.

The last thing I will do is check the boxes to fix the header and navigation and activate the resize on scroll.

We have now just re-created this header.

Just a quick reminder about all of the values that I just set. These values correspond to my logo and the way I want it to appear. Your values will all differ based on the logo and based on how you want your header to look. The way you will determine most of the values that you input will be through trial and error, which is how I determined the values for this header. For most of values that we adjusted, you will be able to see the result of changing the values right away. But for the values that have Resize next to them, you will need to preview the page in order to see the change.

And even though I skipped over some of the controls, you might still find them useful for you, so feel free to play around with them when creating your header.

One of the most important aspects of website development is Search Engine Optimisation (SEO.) It’s an essential element to incorporate in your web pages as it may affect your website ranking in search engine results pages (SERPs.) When creating your website in EverWeb you should add ‘Keywords’ to your web pages so they are optimized for search engine spiders. If you have not added Keywords to your website, or have not thought about SEO yet, take a look at the ‘SEO for EverWeb Video Course‘ which explains all you need to know about SEO and how to implement it in EverWeb.

The SEO for EverWeb Video Course is the perfect start to learning about how to apply SEO in EverWeb.

SEO itself is not a static concept, it’s dynamic and constantly changing as our patterns of Internet usage change and technology develops. In this Blog we’re feature some recent SEO articles below to help you stay up to date with SEO to keep your website tuned to keep it’s SERP ranking optimized.

Don’t Avoid Linking To External Websites

Do you include links to external websites in your own website? There’s a tendency to exclude external links from websites as developers and website owners believe that such links take visitors away from their own site. Google’s Gary Illyes has a different view on external links:

“The internet is built upon links, links are essential for the internet.”

Read more and see the video in ‘Google’s Gary Illyes: I’m Angry News Sites Don’t Link Out, It’s Stupid‘.

What happens if the focus of your website changes over time?

When developing your website you should include SEO as part of the development process. However, do you review your website’s SEO when you update or change it’s content? And what happens if you decide to change the focus of your website at a later date? Will this change your ranking? Find out more in ‘How Google Handles a Site When It Changes Topic Focus‘

Google Launches Mobile Friendly Update Algorithm

Google’s ‘Mobile First’ strategy for SEO gained a boost in May when it completed the launch of it’s mobile friendly ranking algorithm. It’s a good reminder that mobile’s importance is growing fast and that all websites should have a mobile version, with SEO included!

Related Topics

SEO in EverWeb

SEO for EverWeb Video Course

And don’t forget our YouTube Channel where there’s more content about EverWeb and SEO.

EverWeb’s Heading Tags Widget makes it easy to insert HTML Heading Tags into a web page without having to code. In this blog we explain what Heading Tags are, how to use them with the widget and why Heading Tags are good for your website’s SEO.

Headings, HTML and Heading Tags

Text is often organised in such a way to make it easy to read and understand. Written articles often include a title with the text broken down by headings, sub-headings , sub sub-headings and so on. The title has the most importance followed by the article’s headings which are of secondary importance, followed in third by sub-headings and so on. This hierarchy can continue further if needed, although having more than three or four levels can leave readers a bit lost..

When developing web pages in EverWeb, you probably use the same approach. Your web pages may have some form of title and the page text organised either formally, or informally to give your content a logical, readable, flow. When you ‘Publish’ your website the web pages are converted in to HTML (HyperText Markup Language) code and uploaded to the host server.

EverWeb generates code that is structured to HTML standards. In HTML, Heading Tags act as a language element used explicitly to add structure to the generated code. If you take this blog as an example, it has a title at the top of the page  and headings to break the text content down in to smaller, more manageable parts. If we want, we can explicitly make the page titles and headings in to specific HTML Headings using the Heading Tags Widget.

HTML has six levels of Heading, the most important heading is ‘h1’ with the least important heading referred to as ‘h6’. For example, an ‘h1’ tag would be used for the title of this blog as it’s the most important piece of text on the page. The blog’s headings would have an ‘h2’ tag. Any subheadings would use an ‘h3’ tag and so on… This blog’s tags would therefore be:

h1= EverWeb’s Heading Tags Widget

h2= Headings, HTML and Heading Tags

h2= Heading Tags and SEO

h2= The Heading Tags Widget

h2= Heading Tags Widget Tips

Heading Tags and SEO

Heading Tags should be used in EverWeb as it’s good for your SEO. Search engines can target Heading Tags that have been placed in a web page. Without Heading Tags, search engines treat the headings in your web page just as regular text and so will not be able to distinguish what is important to highlight, in SEO terms, on the page. This in turn may have an effect on your web page rankings.

The title ‘Global Business’ has been converted in to an H1 Heading Tag with the fonts and colours matched properly using the Fonts Panel. The heading below the title could be converted to an H2 tag and the ‘Tools & Technology’ title in to an H3 tag if desired.

The Heading Tags Widget

It doesn’t matter if you have already created web pages or not, you can still use the Heading Tags Widget. On an existing web page, start by taking the most important piece of text and converting it into a Heading Tag. This will probably be the page title. To convert the heading to a Heading Tag:

1. If you have a page title already on the page, copy it to the clipboard. If it is a new page, you can manually enter the title in to the Heading Tags Widget later on.
2. Next, drag and drop the Heading Tags Widget on to the page.
3. Paste the text from the clipboard in to the ‘Heading Text’ box in the Widget Settings Inspector or enter the text that you want to use for the title in the box.
4. Select the Heading Level you want  to use for the text, in this example it will be h1 as the title is the most important heading on the page.
5. The heading tag can be aligned to the left, centered or to the right using the ‘Text Alignment’ drop down box.
6. You can apply a bold styling to the tag by ticking the ‘Use Header Bold Styling’ box.
7. With the Heading Tag created you can now match it’s style with the rest of the page using the Fonts Panel.
8. When you have finished styling the Heading Tag, place it where you want on the page, or replace the original text with the newly created Heading Tag.

Heading Tags Widget Tips

1. Don’t overuse Heading Tags in your web pages. Search engines can detect  the overuse of tags, called ‘stuffing’, and will demote your web page rather than improve it’s ranking.
2. Use just one h1 tag per page. You can use more than one h2-h6 tags on the page as you need. Again, use wisely and sparingly.
3. Including multiple tags at the same tag level on a page is perfectly acceptable with the possible exception of the h1 tag.
4. Save Heading Tags for important pages only. Inserting Heading Tags on pages such as Contact and About pages will not be of benefit.
5. As always, don’t sacrifice your web page content for the possibility of a higher search engine page ranking. It is always better to have a better visitor experience than better SEO.

Heading Tags are useful and easy to implement, and are another tool in your SEO arsenal!

If you have any questions, please let us know! We’re happy to help!

We are pleased to announce that EverWeb version 1.9.7 is now available for download for anyone with an active license and macOS Sierra (10.12) installed. Please read the information in the ‘How to Update to EverWeb  version 1.9.7’ section below before updating.

This version of EverWeb focuses on compatibility with the new macOS Sierra operating system. A big update is coming soon with EverWeb version 2.0 which will add a host of new, exciting features to the product. We will have more news soon!

EverWeb 1.9.7 Features

• Supports Apple macOS Sierra operating system
• Fixes issues when previewing websites in EverWeb on macOS Sierra

How To Update To EverWeb version 1.9.7

EverWeb version 1.9.7 is available only with macOS Sierra installed. The update is not available if you are using OS X El Capitan or earlier.

If you have installed macOS Sierra you can easily update to EverWeb 1.9.7  by launching EverWeb and going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’.

EverWeb will check to see if you are running macOS Sierra. If you are, the Software Update window will appear where you can update EverWeb to version 1.9.7.

If you are running an older Operating System version, you will not see the Software Update window and will remain on your current version of EverWeb.

Remember that you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.

If you purchased EverWeb as a standalone product the upgrade will not be free if your license has expired. You can check your license expiry date at any time using the EverWeb-> Preferences… menu. The ‘Next Due Date’ in the ‘Account’ tab shows the date your license is due for renewal.

The EverWeb Standalone license entitles you to EverWeb plus one year of upgrades and support. You can always use your purchased version of EverWeb without ever paying again. If your EverWeb license has expired and you want to renew it to receive another year of updates and support, click on the ‘Manage Account’ button. This will take you to the EverWeb Client Area.  Select the Services-> My Services menu. On the ‘My Products & Services’ page, double click on the EverWeb product that has expired. The ‘Manage Product’ page is where you renew your license. Once you have renewed your license, you can update your product to the latest version.

EverWeb includes 13 built in shapes that can be used and customized in a number of different ways to add features and flair to your website. Here are a few tips on getting the best from shapes…

Mouse Over and Mouse Down Effects

Using Color Fill

A good way to draw a visitor’s attention to a particular part of your web page is by changing a shape’s color depending on user behavior. For example, you can change a button shape’s color when it’s ‘moused over’ or ‘moused down’. To create this effect, select the shape you want then go to the ‘Fill’ section of the Shape Options tab. Click on ‘Normal’ and change the setting to either ‘Mouse Over’ or ‘Mouse Down’. Next, change the Fill type from ‘None’ to ‘Color Fill’ and select the color you want. When the user mouses over or mouses down, the button will change color.

Using Image Fill

You can use ‘Image Fill’ as a Fill type to create special mouse over effects. For example, if a visitor mouses over an image, you can use the mouse over effect to highlight certain parts of the image (see the screenshot below). To do this, use an image editor to create an image that contains your text caption. Once you have done this, add an image to your page in EverWeb. Next, add a rectangle shape to your image in EverWeb where you want the text caption to be located. In the Shape Options tab, make the rectangle’s Fill for the Normal state ‘None’. This will make the rectangle invisible. Now change the Fill for the ‘Mouse Over’ state to ‘Image Fill’. Choose your text caption image. Preview or publish the page and mouse over the area where the shape is. The text magically appears!

The top image uses a rectangle shape but cannot be seen as the ‘Fill’ for Normal behavior is set to None. In the bottom image, the ‘Fill’ for Mouse Over for the same shape is set to Image Fill. The image used is a piece of text about the building. When the visitor mouses over the rectangle area, the text appears!

 

Adding Text to Shapes

Remember that you can add text to shapes. This is useful when you want to create a button with a label on it or when using the speech bubble shape! Just double click on the shape and start typing. Use the Fonts Panel to apply font choices and the alignment options in the Text Inspector to center the text vertically and horizontally. Set Before Paragraph, After Paragraph and Insert Margin settings to zero. If using the speech bubble and it’s stem is not in the corner you want it in, use the Flip option in the Rotation section of the Metrics Inspector. This stops your text  rotating when rotating the stem.

 

Creating Special Effects

Create a Pill Shaped Button

Start by adding a rounded rectangle shape to your page. Set the Corner Radius to about 25 in the Widget Settings. Add the text you want and style it using the Fonts Panel. Use the Text Inspector to center and align the text inside the button horizontally and vertically. Set Before Paragraph, After Paragraph and Insert Margin to zero. Use the Line options in the Stroke section of the Shape Options to add a border to the button if desired.

 

Create Picture Frame Buttons

To create a picture frame effect button, choose the shape you want e.g.  a circle. Make the height and width equal and then check ‘Constrain Proportions’ in the Metrics Inspector. Next, go to the Shape Options tab and change Stroke from ‘None’ to ‘Picture Frame’ e.g. in the example screenshot below we used the fourth frame on the first row of picture frames. This produces a circle with a square border. You now have a button which you can use e.g. as a hyperlink to another page.

 

Combine shapes with picture frames to create button effects easily.

 

Combine Shapes for Different Effects

Combining shapes can easily create different effects. For example, create a crescent moon effect by adding an oval shape to a black  background. In the Metrics Inspector check that the oval shape height and width are equal, then click ‘Constrain Proportions’ to keep the shape as a circle. Fill the circle with a white, or yellow, color using the Color Fill option in the Shape Options tab. Next, duplicate the shape. Change the color fill to black to match the background. Move the duplicate as required so that it overlaps the original circle. This will create the crescent moon effect. Finally select both shapes and group them so you can easily move the crescent moon around the page whilst keeping the effect.

 

The presence moon is created using two overlapping circles shapes as shown. The background circle is white, the overlapping shape black, on a black background.

 

Shape Widget Settings

Some shapes have Widget Settings available to them e.g. the Speech Bubble has an option to change the edges to make the bubble more round or square looking. These following shapes have Widget Settings:

Rounded Rectangle

Single Arrowhead

Double Arrowhead

Star

Polygon

Jagged Box

Speech Bubble

 

Some shapes also have a ‘blue dot’ available when you use them. As you move the dot the shape changes in character e.g. the rounded rectangle can become a circle or even a square edged rectangle. The shapes that have feature a blue dot are:

Star

Jagged Box

Rounded Rectangle

Single Arrowhead

Double Arrowhead

 

If you ever select the wrong shape, you can easily change it to the shape you want. In the Shape Options tab go to the Shape section. Click on the drop down menu and select the shape you want. The shape changes but retains any settings you may have applied already.

 

With some thought and imagination, shapes can be extremely useful in your web design. Enjoy!

 

 

We’re currently beta testing EverWeb version 2.0, but in the meantime we’re so excited about it that we wanted to share some things about the upcoming release with you! As you may know, blogging is coming in EverWeb 2.0! This headline feature will be available to EverWeb+Hosting users and for those of you who have your own Hosting provider. There’s also great support for iWeb and WordPress users included. For now, we’d like to tell you some of what iWeb users can expect…

The new blogging environment in EverWeb version 2,0! In this screenshot, an iWeb blog entry has been imported and the original image drag and dropped in to the blog post. The recreated blog post took only a few minutes to do!

Import Your iWeb Blogs in to EverWeb!

EverWeb version 2.0 will easily import iWeb blog entries into EverWeb’s blogging feature. EverWeb 2.0 will make it simple and straightforward to transfer your blog titles and text over with just a couple of mouse clicks.

The screenshot below shows a sample iWeb blog entry imported in to EverWeb version 2.0. The blog title, date, time and main body text are quickly added in to your EverWeb Project file’s blog. We spent only a couple of minutes formatting the EverWeb version to match up with the original just to give you an idea of what’s coming soon.

The original blog post from iWeb which has been recreated in the next screenshot with the forthcoming EverWeb 2.0 release.

In EverWeb 2.0, you will be able to quickly format all blog posts at once by adding Master Page like features directly in the Blog Post Preview Window. You will also be able to easily edit blog posts using a great in-line editor which includes features such bullet lists,  numbered lists, quote levels, paragraph styles and more. There’s also a choice of Disqus and Facebook Comments for your comments engine, so your visitors can join the conversation!

The recreated blog post in EverWeb version 2.0 uses Master Page style features to save you time and effort. There are lots of new and updated features for all iWeb blog developers to enjoy.

In our example screenshot above, once the text was imported from iWeb in to EverWeb version 2.0, the page and background colors, as well as the page dimensions, were changed using the Page Settings tab in the Inspector Widow.

The blog post Widget Settings were used to change the blog post’s fonts to look like how they were in iWeb. The Navigation Links to the previous post, next post and blog index were also changed and a Comments Engine added (not shown) so visitors can comment on the blog post.

A Navigation Menu Widget from EverWeb’s Widgets tab was added at the top of the page to give the blog post the same navigation as it had in iWeb.

Finally, the blog entry’s image file from iWeb was drag and dropped from it’s original location on the hard disk on to the Blog Post Editor Window, centered and given a background frame using a shape.

Recreating blog posts from iWeb is easy and our example only took a few minutes to make. Remember that there will be some differences between the iWeb and EverWeb but it’s a great opportunity to update the look of your blog with EverWeb version 2.0 features that keep your website fresh, up to date, easy to change and easy to mange in the future.

We’ll have another update soon on the upcoming EverWeb 2.0 release!

The new, upcoming, EverWeb 2.0 will include a rich blogging environment as it’s marquee feature. The Blog Posts Editor will have all of the features that bloggers expect. For ease of use, the most commonly used features can be found on the Editor Window Toolbar.

EverWeb’s Blog Post Toolbar lets you format text in a number of different ways.

Hover your mouse over any of the buttons in the Toolbar for a description of the button and any keyboard shortcut that it may have. The first button on the Toolbar is for Paragraph Formatting. You can choose one of four levels of paragraph heading, ‘code’ and ‘normal’ paragraph styles. the next buttons are the standard bold, italic and underline buttons which use the standard Cmd+B, I or U shortcut keys if you prefer.

The ‘A’ button lets you quickly select one of six predefined web safe fonts or the Fonts Panel if you need to use a font style that is not listed. Use the ‘T!’ button to specify the font size you want to use. The drop down lists font sizes from 8 point to 96 point. If you need other sizes you can use the Fonts Panel. Next to the ‘T!’ button is the ‘Droplet’ button where you can easily change the text color and text background using a palette of color swatches.

Aligning your text is as easy as you would expect with the ‘Align’ button. Choose either left aligned (default), centered, right aligned and even justified text!

Use the Blog Posts Editor Toolbar to quickly add ordered and unordered lists, change fonts, colors, text alignment and more!

The Quote Levels button lets you quickly indent or outdent quotes with vertical quote bars indicating the level of quotes as you would expect.

Finally, you can add video content to your blog at the touch of a button directly from the video’s source.

In the screenshot above, we formatted the blog post text just using the Toolbar. We then added an image to the post which was then set ‘inline’ and right aligned so that the ordered list to the left of it flowed properly.

The Toolbar and the Editor Window in the above screen shot are where you add text and images to your blog post. Below the line is the Blog Editor Preview Window which shows how the post will look when published. The Preview Window acts like a Master Page so, for example, if you add a background color or social media button in the Preview Window, it will appear on all of your blog posts.

The Toolbar is just one quick and easy way to add format your blog posts. There’s a lot more to the Blog Posts Editor, so stay tuned as we will have more information soon!

To see blogging in action have a look at our ‘Create your first blog with EverWeb‘ video.

EverWeb 2.0 is currently in beta testing so some features may be subject to change. Check back here, or on the Announcements section of our Discussion Forum, for more news and updates about the release!

If you want to see blogging in action, check out our completely redesigned website!

… and we’ve also released a series of EverWeb 2.0 Preview videos. Check out our YouTube channel and subscribe to keep up to date with the latest videos.

If you have a question about anything EverWeb, please let us know in the Comments section below.

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

in May 20111 the European Union enacted a directive giving EU citizens the right to refuse to use cookies that could reduce their online privacy. The directive requires websites to gain consent from visitors if the website stores or retrieves any information about the visitor on any type of computing device.

What are Cookies?

Cookies are small packets of data that a website asks a web browser to store so that the data can be used in the future. The data stored typically helps identify visitors, visitor preferences or visitor actions. Cookies can be either be valid for the browser session or persistent i.e. permanent.

What Does This Mean For My Website?

EverWeb itself does not create or use cookies, so for most website developers cookie consent is probably not required. However, there may be instances where you do use cookies e.g. if using Google Analytics in your website, if you have added custom scripts that use cookies or if you are using third party tools and add-ons in your website that use cookies as part of their functionality. If  you use cookies you should include cookie consent to your website.

Even if your website is targeted towards a market or audience outside of the EU, cookie consent is probably good to include anyway in case visitors from the EU find your website.

The Cookie Consent directive has also been designed for flexibility of use. This is advantageous as it means that website developers may only have to achieve minimum compliance to the directive. If you need to have a cookie consent, there are a couple of simple ways to add it to your website which we have outlined below. Silk tide is a free tool that adds some Javascript to your website whilst Roddy McKay’s EverWeb CodeBox offers a Cookie Bar Widget as part of the Touch Widget set that’s available to purchase from the EverWeb Codex website.

Silktide’s Wizard quickly guides you through setting up and customizing your Cookie Consent bar.

Using Silktide for Cookie Consent

Silktide offers a free to use Cookie Consent bar using Javascript that’s injected in to your website. The website uses a wizard (see above screenshot) that guide you through the Cookie Consent setup process, first by selecting and customising the theme you want to use, linking to a cookie policy page if you have one, then copy the code that is produced to the clipboard.

The code that you have copied to the clipboard should be added to your Site Publishing Settings. To access the Site Publishing Settings, click on your website name in the Web Page List of your project, or use the File-> Edit Publishing Settings menu.

In the Head/Footer Code section, paste the copied code in to the Head section. Publish your website and test to see the results. If you use Preview, you may not see the Cookie Consent bar.

The EverWeb Codebox Touch Cookie Bar lets you customize many features of the Cookie Consent Bar to match your website’s design.

Using The EverWeb Codebox Widget

The EverWebCodeBox from EverWeb super user Roddy, includes a Touch Cookie Bar Widget that is available for purchase as part of the Touch Widgets collection. Once purchased and installed, drag and drop the Touch Cookie Bar Widget on to your web page. It is best to do this on the home page on your website as this is typically the first page visitors will access on your website. you can add the Widget to all of your website pages, but this may be irritating for your visitors!

Once the Widget has been placed on your page, go to the Metrics Inspector and tick ‘Full Width’ and ‘Always On Top’. The remaining settings for the Widget can be found in the Widget Settings tab. The Cookie Bar is placed at the top of the browser window by default but can be placed at the bottom of the screen by ticking the ‘Fix To Bottom’ checkbox.

The Touch Cookie Bar Widget is fully featured so you can include ‘Decline’ and ‘Cookie Policy’ buttons if desired (see screenshot above). Color, spacing and text options can be applied to give the Cookie Bar the look that matches your website’s design.

Further information about the EU Cookie Consent Directive can be found in the European Commission’s ‘EU Internet Handbook‘.

We are thrilled to announce that EverWeb version 2.0 is now available! The new version of EverWeb introduces a brand new blogging engine as it’s marquee feature.

Please read the information in the ‘How to Update to EverWeb 2.0’ section below for updating instructions.

EverWeb 2.0 Features

EverWeb version 2.0 introduces a new, fully integrated blogging  engine (see the ‘EverWeb 2.0 Blogging Features’ list below), relocated Toolbar which is now at the top of the UI, a new Contact Form Advanced widget to fully customize your contact form experience and much more!

The main features of EverWeb version 2.0 are :

1. All New, fully integrated, feature rich blogging environment
2. New RSS Subscribe button
3. Redesigned User Interface with the Toolbar now located at the top of the UI
4. Character Spacing setting in the Text Inspector (OS X 10.7 and later only)
5. New Contact Form Advanced widget for highly customizable contact form creation
6. Publishing optimizations and speed improvements
7. Updated and expanded EverWeb User Manual includes a chapter on blogging
8. The EverWeb User Manual is now available from the Projects Window
9. EverWeb 2.0 is compatible with Mac OS X 10.6, 10.7+ including macOS Sierra
10. Stability and performance enhancements

EverWeb 2.0 Blogging Features

Everweb 2.0’s blogging environment is rich with easy to use features such as:

1. Automatic numbered & bullet lists
2. Image wrapping
3. Justified text
4. Comments using Disqus or Facebook Comments
5. Importing of iWeb & WordPress blog posts
6. Embedded media including video
7. Automatic Google Fonts
8. Automatic RSS feed creation
9. And much more!

How To Update To EverWeb 2.0

You can easily update to EverWeb 2.0  by

1. Launching EverWeb and going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

Remember, you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.

EverWeb 2.0 is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb Standalone free upgrade period from EverWeb’s Preferences window or your client area.

If you are passed your one year of free EverWeb upgrades, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of upgrades and support.

Login to your client area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of Everweb that you need, either the OS X 10.6 version,or OS X 10.7 and later, version.

More Information About EverWeb 2.0

If you need more information about EverWeb version 2.0

• Check out the Easy Blog Post Editing  and Importing Your iWeb Blog Entries blogs on this website
• The updated EverWeb website which has up to the moment information in it’s new blogging section
• The new EverWeb 2.0 videos on YouTube
• The updated EverWeb User Manual under EverWeb’s Help menu
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re thrilled to announce the introduction of our new iWeb to EverWeb website conversion service!

With the all new blogging feature we introduced last week, we have gotten a lot of requests for help in upgrading an iWeb website to EverWeb.

When iWeb was discontinued almost five years ago, EverWeb was created to provide a similar, yet more powerful,  website builder to iWeb users. Now with the new blogging engine, you can do everything in EverWeb, plus a lot more.

We’ve just introduced a service to help you convert your iWeb site to an EverWeb site. We can deliver you the exact same iWeb site, built with EverWeb in under 7 days so you can start taking advantage of EverWeb’s modern features including:

1. Optimized mobile pages
2. Built in Search Engine Optimization features
3. Drop down menus
4. Advanced contact forms
5. Rollover mouse effects
6. Master Pages
7. Popup windows
8. 24/7 customer support
9. Support for the latest version of macOS
10. And so much more…

Fill out our online form and we’ll get a quote to convert your iWeb site to EverWeb as soon as possible!

Always keep up to date with EverWeb on your favorite social media platform!

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

In a handful of countries, today is Thanksgiving. A day originally used for celebrating and giving thanks for the benefits of the preceding year.

On Black Friday, consumers are used doplenty of discounts off their favorite products.

This year, we have decided to do something special.

We know EverWeb users are the generous type and this year we want to use our reach to give opportunities to those who really need it.

Today, we want to say Thanks for Giving!

Starting now, until 11:59PM EST Friday, 40% of every EverWeb purchase and renewal, will be given to children around the world who need it the most with the help of WE.org (Formally Free the Children).

Purchase & Give: Get EverWeb & Help the Children

We chose WE.org because they are an organization we have known for a very long time, were established in the same city (Thornhill, Canada) that we are from, and we believe they have a great reputation for doing amazing things to help children around the world.

On Saturday, November 26, we will donate the proceeds raised by you, to WE.org.

Plus, share our facebook post to help bring awareness and we will extend your EverWeb account by 3 months.

We wanted to extend a big Thank You to everyone who purchased or renewed EverWeb this Black Friday!

Because of you, we raised $2500 that has been donated to WE.org.

We hope to continue to use our reach to raise money and resources for those who don’t have the same opportunities that we have.

We believe it is everyone’s personal choice to decide how they want to help and from the bottom of our hearts, we thank you for helping us raise money for a great cause and also for being our customers.

So once again, a HUGE Thank You to all of our users!

Sincerely,

The EverWeb Team

Probably one of the first things you’ll want to do once you have downloaded the new EverWeb version 2.0 is to try out the new blogging feature. Here’s a primer to get you started…

Creating Your First Blog

Start your first blog either by opening an existing website project or creating a new one from the Projects Window.

If you opened an existing project, select ‘Add Page’ from the Toolbar at the top of the EverWeb UI in version 2.0.

If you created a new project file, EverWeb will automatically the adding new page process for you.

In both instances you should now see the Theme Template Chooser. Select the ‘Blank’ Template Theme at the top of the left hand column.

EverWeb 2.0’s Theme Template Chooser. Use the Blank theme on the left, then select the ‘blog’ page style on the right.

On the right hand column, select the ‘blog’ page theme and click on the ‘Select’ button to finish.

TIP!: If you want the Theme Template Chooser to display the pages in a row as shown above, you can resize the window. Click and drag the bottom right hand corner of the Theme Template Chooser window until the template pages display how you want them to.

You’ve now created a blog in EverWeb!

The Blog Structure

In the Web Page List you will see the blog as a folder icon. The ‘blog’ directory is always displayed open by default when you create a new blog. For those new to blogging, the blog has a specific structure.

The ‘blog’ directory page is like an ‘index’ page of your most recent blog posts. The first post in the list is the most recent followed by the remainder in reverse date order.

The blog directory contains two pages: ‘posts’ and ‘archive’. ‘Posts’ is a special page in that it contains all of the blog posts you create. It’s the heart of EverWeb’s blogging experience!  The ‘archive’ page is lists older blog posts that you no longer want listed on the ‘blog’ index page.

Creating Your First Blog Post

To create your first blog post, click on the ‘posts’ page in the Web Page List. The Blog Posts Editor Window is displayed in the Editor Window in the center of the screen. This is where you will create, import, edit and delete blog posts.

EverWeb automatically creates the first post as ‘New Blog Post’. Rename the post title by double clicking on ‘New Blog Post’ in the Blog Post List in the top part of the window. Enter the title you want and press enter. All blog posts that you create will be listed in the Blog Posts List Window.

A red or green button to the left of the blog post title indicates if a blog post has been changed since last published (red) or not (green).

To select the blog post you want just click on its title.

EverWeb 2.0’s blogging interface. In the center column, at the top is the blog posts list, in the middle the blog posts editor window and in the bottom section is the blog posts preview window.

Below the Blog Posts List, the words ‘This is a sample blog post’ are displayed in the Blog Posts Editor Window. Select the words and type over them with your own, or paste text in from the clipboard.

Editing Your Blog Posts

The Editor Window is where you enter your blog post text and apply formatting. For example, highlight the text you want and use the Editor Toolbar options to style your text how you would like it. Alternatively, use the Color Picker and Fonts Panel from the Toolbar.

You can also insert images, video and hyperlinks in to the Editor Window. These media apply only to the blog post itself.

TIP: Use the Blog Post Preview Window to see how the blog post will look when published. The final published post may look different than what you see in the Editor Window due to the settings you use in the Blog Post Preview Window.

A splitter bar between the each section of the Blog Posts Editor Window can be clicked and dragged up and down to display more of less content of each section.

TIP: There’s also a vertical splitter between Blog Post and Blog Date in the Blog Posts List.

The Blog Posts Preview Window

The Preview Window in the bottom part of the screen is where you see the formatted results of your work. The text from the Editor Window displays in a widget that you can position where you want in the Preview Window. Adjust the width of the widget using the selection handles. The widget height is set automatically.

The Preview Window works in a similar way to Master Pages so you can add objects such as a company logo to the Preview Window which will then display the logo in all of your blog posts.

Use the Widget Settings tab to set defaults for all the blog posts. At the bottom of the screen is where you add in your Comment Engine, either from Disqus or Facebook. For more information on using Comment Engines please look at the EverWeb User Manual via the Help-> EverWeb Manual menu.

Blog Post Formatting Tips

The Widget Settings also allow you to set the font style and sizing of the blog post title, add and define date format and styling, add Navigation Links and add an image for the post.

In addition, use the Page Settings Tab in the Inspector Window to set the page background color, page dimensions etc. as you would any other page that you create in EverWeb.

You can also use a Master Page for blog posts if you prefer or a combination of Master Page and Preview Window objects depending on what effect you want to achieve.

Once you have finished, preview or publish your results.

More About Blogging in EverWeb 2.0…

There’s lots more to explore with blogging in EverWeb version 2.0. Here are some suggested resources to help:

• Check out the Easy Blog Post Editing and Importing Your iWeb Blog Entries blogs on this website
• The updated EverWeb website which has up to the moment information in it’s new blogging section
• The new EverWeb 2.0 videos on YouTube
• The updated EverWeb User Manual
• The EverWeb Discussion Forum

If you can’t find what you need, or have any other questions, comments or feedback please let us know. We’re happy to help.

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

For many iWeb users, the introduction of blogging to EverWeb 2.0 makes it a perfect time to finally port legacy iWeb websites over to EverWeb. If you’re planning to convert your website, here are some things to consider before you begin that will help save you time and effort along the way…

1. Use Master Pages: iWeb doesn’t use template pages but EverWeb does with Master Pages. It’s a good idea to think about the common features of your iWeb pages that can be collected together in to one or more Master Pages if your website has more than a few pages. Page dimensions, page and browser backgrounds, navigation menus, header and footer content, social media buttons and the like are ideal to put in to a Master Page. Attach the Master Page to your regular web pages to give your website a consistent design. If you want to change your design at any time, just edit your Master Page and all pages that have it attached will be updated with the changes.
2. Fonts and Color Settings: Your website probably uses different font styles and sizes. Make a note of anything that you want to transfer over. Check your font and color settings in iWeb and make a note of them so that you can use them in EverWeb. If you have difficulties matching colors, try using the Digital Color Meter that comes with your Apple OS to get accurate color values.
3. Widgets: You’ll probably find that some of the iWeb widgets you have been using are included in EverWeb, often with updated features and functionality. There are also a lot of other widgets built in to EverWeb that iWeb does not have. If you cannot find what you want, third party widgets are available either free or paid for. Our EverWeb Third Party page has more information.
4. Update your website: Technology has come along way since the demise of iWeb over five years ago. Now is a great opportunity to update and modernise your website. If you’re new to EverWeb, check out the features in our YouTube videos or from our blogs. You may find simpler, modern solutions in EverWeb that iWeb doesn’t have e.g. drop down menus, fixed position, always on top, support for SEO, mobile websites, widgets and so on… Whilst updating may mean adding new features to your website, remember that it’s also an opportunity to streamline your website and update your web page content if you haven’t done so for a while.
5. Include SEO: iWeb does not include any SEO features so this is one area you should be focus on. The best way to start with SEO in EverWeb is by checking out the SEO for EverWeb Course. Remember, as well as keywords for SEO, rename any image files to be SEO friendly if you have not done so already  e.g. if you have an image of a teapot that has a file name of ‘IMG0001.jpg’, rename it to something more meaningful e.g. teapot.jpg
6. Optimize and Rationalize: Whilst on the subject of image files, look at your image files and optimize them if they are large to help page loading times. Use a graphics program to reduce the file size to be more web friendly. There’s also retina display now which iWeb does not support. Our YouTube video has more information on using retina images in EverWeb.
7. Find Your Files: If you can’t locate your original image files, open your website in iWeb and use the File -> Publish to a Folder menu. Once published, your image files will be located in a folder where you can drag and drop the image files from in to EverWeb. iWeb has an unusual file and folder structure so you may find that the original image has been duplicated many times in to different folders. Each iWeb web page has it’s own folder which will contain images, often renamed by iWeb to ‘shapeimage’ followed by a number. Find the best resolution image you can then copy it to another location (e.g. to your desktop) and rename the file to something meaningful. Drag and drop the renamed file in to the Assets List of your  EverWeb project. You can drag and drop the image file from the Assets List as many times as you want on to the web pages you create in EverWeb without having to reimport the image every time.

Moving Your iWeb Website to EverWeb

When you recreate your website in EverWeb, the easiest way to bring text over is to cut and paste it from the iWeb page in to the corresponding EverWeb page. For image files, drag and drop them in from their source wherever possible. Remember if you use an image more than once in your website, you only need to import it once in to EverWeb. Once imported, drag and drop the image from the Assets List on to the pages you want to include the image on.

Importing iWeb Blog Entries

To import iWeb blogs:

1. Start by ‘exporting’ your iWeb project from iWeb using File -> Publish to a Folder to a location on your hard disk.
2. Next, go to your EverWeb project file and create a blog if you have not done so already.
3. To create a new blog select the ‘blank’ theme and the ‘blog’ page style.
4. When the blog has been created, you will see it in the Web Page List. Click on the ‘posts’ page.
5. In the Editor Window, click on the ‘Import’ button in the Blog Posts List.
6. The dialog box displays ‘iWeb’ by default as the import format so click ‘Import’ to continue’.
7. Navigate to the location of the iWeb project that you exported earlier. If you have more than one iWeb project, you will see all of them listed. Select the folder of the iWeb website blog that you want to import, then click ‘Open’.
8. Click on the name of the blog in the next dialog box and press ‘Import’ to load the blog entries in to EverWeb.

The blog Create Your First Blog Post in EverWeb 2.0! has more information on formatting blog posts.

When converting your iWeb website to EverWeb, perhaps the most important task is the planning. Getting to know EverWeb and it’s features is also a good idea if you are new to the product. Getting to know EverWeb will help you decide how best to modernize your iWeb website for today’s needs such as for mobile environments.

If you would rather have us convert and update your website for you, please take a look at the Convert your iWeb website to an EverWeb Site post for more information.

As always please let us know if you have any comments and questions. We’re happy to help. You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Welcome to our EverWeb 2016 Review Edition! First of all we want to thank you all for your continued support and for making 2016 a great EverWeb year! Thanks, you’re Awesome!

It’s been an incredibly busy 2016 for EverWeb so without any delay, here’s our 2016 Review!

From EverWeb version 1.9 – 2.0.2

We started the year with EverWeb at version 1.9. Language support for Chinese, Portuguese and Swedish came in February as well as a major update to the Video widget and many other minor enhancements. In September we added support for the new macOS Sierra operating system in EverWeb version 1.9.7 before unveiling EverWeb 2.0 in November.

Undoubtedly EverWeb 2.0’s all new blogging feature was the highlight of 2016. For many it completes a journey from iWeb to EverWeb especially as it’s easy to import blog posts from iWeb into EverWeb. The user interface should also be familiar to iWeb users, with many additions and enhancements to make blogging 2016 friendly! The new inline blog editor, preview window and Master Page like features also allow for more creativity and consistency within your blogging environment.

EverWeb version 2.0 also introduced the all new Contact Form Advanced widget for advanced contact form design, a new RSS Subscribe button and character spacing in the Text Inspector.

We added and enhanced many other features in EverWeb over the year such as an updated Video widget and enhancements to the PayPal E-Commerce, Image Gallery and Heading Tags widgets. EverWeb’s Toolbar was relocated from the bottom of the UI to the top, bringing better compatibility with OS X and macOS Sierra as well as improved workflow. Additional Theme Templates were also added throughout the year.

We also took the time to update and expand the EverWeb User Manual to keep up it to date as new product features arrived and also to streamline content to make it easier to use and find what you want! It’s also now available from the Projects Window when you launch EverWeb.

April 2016 Survey

We have lots of exciting plans for 2017 and your continued support, comments and feedback really helps us make EverWeb better every year! We would like to thank everyone who also took part in our April 2016 Survey. The survey is incredibly valuable as it tells us what you want to see in EverWeb in the future and how we can better help and support the EverWeb community. April’s survey told us that blogging was the top requested feature. This had been a long in the works feature and came to fruition with EverWeb 2.0 in November. Again, we just want to say a big ‘Thank You’ for your patience. The new blogging platform is a great environment which we will be building  upon in 2017!

Your comments and feedback are always welcome so please use the comments section below or use the EverWeb Discussion Forum.

Renewed EverWeb Website!

Our own website had a makeover this year and now sports a modern, clean design aesthetic. The website has been simplified using bold fonts and color choices make things easy to find, including a new blogging section in the menu to keep you updated on everything specifically EverWeb. Naturally, the website is both desktop and mobile friendly!

YouTube Tutorials & EverWeb Blogs

Many of EverWeb’s existing YouTube video have been updated to reflect updates to the product. YouTube flags updated content making it easy to stay up to date when you access video content. To keep up to date with new and updated content just subscribe to our YouTube channel.

Our blogging content has also expanded to keep abreast with all that’s new in addition to hints, tips and how to do’s. If you have anything you would like us to feature in the future, please let us know in the comments below!

Award Winning EverWeb!

In October 2016, EverWeb won best Developer Tool and Best Overall at the 2016 Xojo Design Awards. We’re thrilled that EverWeb continues to shine. We are also thrilled that our Facebook page gets a 4.7/5.0 rating from you all! Again, thanks and if you’re a Facebook user, like and follow us to stay up to date with all that’s new.

EverWeb & Charity Work

Our Black Friday event in 2016 was in aid of the WE Charity which raised a $2500 donation. The WE Charity is ‘an international charity that partners with communities to help lift themselves out of poverty using a holistic, sustainable five-pillar development model.’

Forward to 2017…

We’re really excited about 2017 as we have lots in the works for all of our users. It’s going to be an exciting year! To end, Team EverWeb wishes you all a very happy and prosperous New Year!

Please let us know if you have any comments, suggestions or questions in the Comments Section below…

Social Media

We all have a favorite Social Media platform for staying connected! As well as the EverWeb website, you can keep up to date with  all the latest EverWeb news and info on the following social media…

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

If you have a  favorite Social Media platform that we don’t cover we would like to know! Just drop a comment to us below!

Blogging with Everweb 2.0 lets you easily combine text and images to get the right look for all of your blog posts. Images can be added to blog posts in three ways: Firstly, on a global level so that any image appears on every blog post (like how a Master Page works), secondly, by adding the image on a post by post basis and thirdly by a combination of the first two techniques.

The images in the above blog post are set with an ‘inline’ display and aligned either left or right in the Blog Post Editor Window to get the desired result. The Navigation Menu widget, text box title and social media buttons are added to the Preview Window so they appear on all posts.

Preparing Images

When adding images to any web page, it’s always a good idea to make sure that the image(s) you are going to use are of a web friendly file size. It is also useful if the image file name relates to what the image is about. Preparing your image in this way will benefit web page load times and help your page’s SEO.

Adding Images to All Blog Posts

There are two ways in which to add an image to all of your blog posts at once:

The first method is to use a Master Page that includes the image(s), and any other objects you want. Attach the Master Page by first selecting the ‘posts’ page in the Web Page List. Next, go to the Inspector Tab and select the Page Settings button. Use the Master Page section to add the Master Page you want.

Using this method means that you will need to edit the Master Page if you want to make any changes to the objects it contains . To see the results of the using the Master Page, use the Blog Posts Preview Window.

The second method uses the Blog Post Preview Window as a ‘live’ Master Page. Drag and drop your image(s) from their source, e.g. the Assets List, on to the Blog Post Preview Window. Move and resize the image around the Preview just as you would on a regular web page in EverWeb. The dropped image and layout you have designed for the post will be applied to all posts.

The advantage of the first method is that you cannot move objects around the Preview Window. The advantage of the second method is that you can! Choose which method suits your requirements or use both!

Remember that moving or deleting images in the Preview Window on any blog post, will move or delete the image from all of the blog posts. It’s a good idea to think of the Preview Window as a ‘Live’ Master Page!

Adding Images to Individual Blog Posts

If you only want to add images in to a particular post, select the post you want. then drag and drop the image on to the Blog Post Editor Window. You can use images from the Assets List, from folder locations or using EverWeb’s Media button.

If using the Media button, drag the image you want from the ‘catalog’ on to the Editor Window. The Media button is useful as you can check the file size of the image before importing it. To do this, right click on the image in the catalog and select ‘Display as List’ from the menu. If you do not see file sizes listed, right click on the image again and select Show Columns-> Size.

Changing Image Size

Once you have dropped the image onto the Blog Post Editor Window, select it by clicking on it. A blue selection box appears around the image. Move and resize the image just as you would elsewhere in EverWeb. When the image is selected, the Image Editor Toolbar is available. For precise image sizing, click on the last Toolbar option, ‘Change Size’, and enter the value you require. Note that the image proportions remain are always constrained so that the image does not distort when you resize it.

The Blog Post Editor Window contains six images and text aligned to the left or right of the images. In the Blog Posts Preview Window below, you can see that objects that we want to include on all of the blog posts have been added in the header and footer areas. The background color of the page has been changed using the ‘posts’ page settings from the Inspector Tab.

Using Image Display

An image imported into the Blog Posts Editor Window is displayed as ‘Break Text’ by default. This means that any text around the image will be displayed above and/or below it depending on where the image is located. Use the Image Editor Toolbar to change the ‘Display’ from ‘Break Text’ to ‘Inline’ to embed the image more within your text. Once you have set ‘Inline’, use the ‘Align’ button to either left or right aligned to get a text wrap effect. Use the middle ‘Display’ option to cancel out the wrap effect.

If you are displaying multiple images in a row, it is easier to drag and drop the images on to the Blog Post Editor Window first before setting the ‘Inline’ and ‘Align’ options. In the examples above , Align has been set to Right for all the images on the top row and left for those on the bottom row. This results in the text being pushed to where it is desired. You may also find that changing the image size using the ‘Change Size’ button will help fit the images properly in a row. In the above example, the images were reduced from a width of 300px to 250px.

Alternate Text

It’s always good to add a description of the image using Alternate Text. Use text that’s appropriate e.g. ‘Gondolas in Venice’ may be suitable for our example. If the image does not display, the alternate text is used to replace it. Alternate text is especially useful for the visually impaired and may help your SEO.

The Blog Posts Preview Window

As you may already know, the results of your work in the Blog Posts Editor Window are seen in the the Blog Posts Preview Window. Here you can see the results of combing images in your posts with images that are used for every post. Use the Preview button in EverWeb’s Toolbar art the top of the UI to tweak the look of your blog posts before publishing.

Using images in your blog posts always helps to bring the post to your audience’s attention. With a bit of experimentation you will be able to make very creative posts. We will have a follow up blog soon with more hints and tips on using images in your blog. In the meantime if you have a question, please let us know below. If you subscribe to our YouTube channel, you will also find lots of blogging related posts there too!

As always please let us know if you have any comments and questions. We’re happy to help. You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw