Archive for Tutorials

09 Nov 2017

Creating Your First Blog Post with EverWeb

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

EverWeb version 2.0 introduced what was perhaps the most user requested feature ever: Blogging! If you’re familiar with blogging in iWeb, you’ll be immediately familiar with EverWeb’s blogging environment. Whilst looking familiar, EverWeb improves upon the iWeb blog by adding features such as Master Page support, Comment Engine support using Disqus or Facebook Comments, a dedicated Editor and Preview Window and more. There’s also a convenient Import feature so that blog posts from either iWeb or WordPress can be directly imported in to EverWeb.

Creating a Blog in EverWeb
If you have’t created a blog in EverWeb yet, it just takes a few clicks of the mouse button:

  1. First, open your project file in EverWeb if you have not done so already.
  2. Click on the ‘Add Page’ button in the Toolbar.
  3. Click on the ‘Blank’ Theme Template which is the first theme listed on the left hand side of the dialog box.
  4. Next select the ‘Blog’ page style from the right hand side of the dialog box.
  5. A new blog will be created in the Web Page List.

The Structure of the Blog
The blog you have just created has three components:

  1. The ‘blog’ page is also known as the Blog Index Page. It lists some, or all, of the blog posts that you have created depending on how you customize your Widget Settings. You can rename ‘blog’ to a name of your choice and it’s fine if you want to have more than one blog in your project file if you need it. Typically ‘blog’ lists only the most recent blog posts with older posts listed in the ‘archive’ page. The ‘blog’ page is a directory page containing the ‘posts’ and ‘archive’ pages. If you delete the ‘blog’ page, you delete the whole blog including all of your posts. Make sure that you have backup set up on your EverWeb Preferences just in case!
  2. The Blog Posts Page. This page is called ‘posts’ and is where you create, edit and delete your blog posts. You cannot rename, or delete, this page without deleting the whole blog.
  3. The Archive Page. The ‘archive’ page lists all the blog posts contained in your blog. As with the posts page, you cannot delete, or rename, the archive page without deleting the whole blog.

Creating and Editing Blog Posts
Creating blog posts is at the heart of your blogging experience. Begin by selecting the ‘posts’ page in the Web Page List. When you create a blog in EverWeb,the first post ‘New Blog Post’ is automatically created which you can directly edit.

There are three windows on the ‘posts’ page:

  1. The Blog Posts List. At the top of the page is the list of blog posts that have already been created. Here you can add additional posts, delete unwanted posts and import blog posts from iWeb and WordPress by clicking the appropriate button at the bottom of the list. You can reorder blog posts by title and date by clicking on the ‘Blog Post’ and ‘Date’ labels in the Blog Posts List header. To change a blog title, click on its title then edit it just as you would do for a regular page in EverWeb. To change the post’s date or time click in the Date field. To the left of each blog post you’ll also notice a red or green button indicating whether the blog post has been published or not.
  2. The Blog Post Editor Window. The middle section of the ‘posts’ page is the Blog Post Editor Window. This is where you directly enter your blog post text, or copy and paste text from the clipboard. You can apply fonts and colors to the body text and drag and drop in any images required for the post. The editor supports features such as ordered and unordered lists, hyperlinking, paragraph formatting, quote levels, justified text and more, all easily accessed from the Editor’s Toolbar. Remember, though, that the Blog Post Editor Window is just that – an editor. To see the fully formatted blog post in the Blog Post Preview Window.
  3. The Blog Post Preview Window is located in the bottom third of the ‘posts’ page. This is where you see the formatted results of the text and images that you added in the Blog Post Editor. The Preview Window is much like a Master Page. Any content added directly in to the Preview Window will be displayed on all blog posts. The same is true if you change page settings in the Page tab in the Inspector Window for the ‘posts’ page. For example, if you change the Browser Background color, Content Height/Width etc. these changes will be reflected in all your blog posts. The ability to add such Master Page type features to the Preview Window is a guaranteed time saver.
  4. If you want to change how much of each section is visible on screen just drag the splitter bar between sections up and down until you have the desired result.

Blog Post Widget Settings
Widget Settings are available to further customize your blog posts. Usually you’ll see the Widget Settings immediately when accessing the posts page. If you don’t, click on the Widget Settings tab in the Inspector and make sure that the blog content in the Blog Post Preview Window is selected.

Widget Settings are where you can set defaults for the Blog Post Preview Window e.g. Header Title font size and style settings, date formatting settings, and post specific options such as hyperlinks settings, post image, Comment Engine options and so forth.

Publish Your Blog!
Once you have finished your blog post, either preview or publish to the Internet.

We’ve only briefly covered how to create your first blog post in EverWeb. There’s a lot more to explore, the best way to do this is by experimenting to see what works best for you.

If you have any questions or comments please let us know, we’ll do our best to help! There’ll be more about blogging in the future so come back soon!

26 Oct 2017

Integrating Facebook In To Your Website

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

If your business is tightly integrated with Facebook as a means revenue generation you’ll also probably want tight integration with your website as well. Integrating Facebook with your website can help improve your business’s reach as you target non-Facebook users through your website using EverWeb’s Facebook features. This may also be a timesaver as you as you may only need to update Facebook which filters through to your website automatically. This is a boon, for example, if you’re business runs classes or seminars, or has new or updated products to announce. There are numerous possibilities! It’s not only commercial concerns but non-commercial organisations, and even individuals, can also benefit in much the same way.

EverWeb’s new Facebook Page Timeline widget, introduced in EverWeb 2.5, adds more possibilities and flexibility to your webpage design in EverWeb. You now have a range of tools to use to bring your website visitors and Facebook users closer. It’s simple and easy to share what’s going on between the two different audiences. Facebook itself allows you to add your website URL, as well as other integration tools, to your Facebook account. You can also easily embed links from your website directly in to Facebook.

So, save time and effort by integrating Facebook in to your website with the following three EverWeb tools…

Facebook Page Button
If you just want a simple link to your Facebook page, just use the Insert -> Button -> Facebook Page option and enter in the full URL of your Facebook page. It’s best to copy the URL from your browser’s search bar and paste it in to the button’s URL field. If you enter the URL manually and make a mistake, you’ll have to delete and reinsert the button on to your page. Tip! Buttons such as these are great to use in Master Pages!

Facebook Like Widget
The Facebook Like Widget was introduced in EverWeb version 1.3 and allows you to add a more sophisticated and tailored button to your web page. Although the widget is called ‘Like’ you can in fact use it to include a Facebook share button. You can decide if you want the button to be ‘Like’ or ‘Recommend’. There are many different display combinations that should cater to everyone’s taste e.g. you can display the number of people who like your page. Once you have finished customising the widget, you may need to resize and adjust the placement of the widget on your page before previewing or publishing.

Facebook Page Timeline Widget
The newly introduced Facebook Page Timeline widget lets you add a Facebook page timeline directly to your web page. As you update your timeline, your webpage will update automatically. The new widget can be customized in a number of different ways so that you can display your Timeline just how you want it. Once you’ve drag and dropped the widget on to the page from the Widgets tab, enter your Facebook page URL in to the ‘Webpage Address’ field. Again, it’s best to copy and paste the URL from your Facebook page to avoid any typos. Once you’ve entered the URL press the enter key to dynamically update the widget to show the Page Timeline.

By default, all Widget Setting options except for ‘Hide Cover Photo’ are set on. If you deselect all the options, you will only see the most recent post displayed, so it’s likely that you’ll want to have at least ‘Show Timeline’ checked so that your visitors can scroll through your timeline. As you select or deselect the widget’s options, the Page Timeline widget dynamically updates. When you’re finished with customizing the widget, you may need to readjust the size and placement of the widget on the page. Preview or Publish the page to see the results of your work.

Depending on your specific requirements you can use any combination of Facebook Page button, Facebook Like Widget or Facebook Page Timeline on your page to give your visitors just the right experience. The Facebook Page Timeline widget will also help save you time and effort in updating your website as it’s all done in your Facebook Page Timeline!

24 Aug 2017

10 Things To Do Before Publishing Your EverWeb Website

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

Publishing your website to the Internet is the culmination of many hours of hard work getting your site exactly how you want it. As you get closer to publishing, it’s easy to rush the final steps to get your site out for the whole world to see!

Sprinting to the project’s finish line is understandable, but too much haste can lead to a published website that’s full of errors or does not work as expected. It’s potentially embarrassing, unprofessional and can be a real negative to your site visitors. So why not take a breath then run through our checklist blow before hitting the ‘Publish’ button. Save yourself the hassle of having to go back to make lots of changes, corrections or fixes after you’ve published.

Here’s the checklist of things to review on your EverWeb website Project before publishing…

  1. Set up a Favicon for your site. The Favicon is the little square image that appears beside your URL in the web browser search box. It’s a nice professional touch to your website even if it’s not an essential feature to include.

    To add a Favicon, go to the File-> Edit Publishing Settings. Scroll down to the Favicon section and choose an appropriate image (preferably one that’s square!). EverWeb will do the rest when you publish. When including a Favicon in your site, it may take a few hours for replication around the web for it to show up in the browser search box.

  2. If you have EverWeb 2.4, or higher, set the Language Localization for your website and for any individual pages as necessary. This is a great feature to add as it will help serve your visitors searching the web with more targeted search results. Check out our blog Language Localisation in EverWeb 2.4 for Better SEO! for more details.
  3. Check that you’ve implemented a ‘404 Page Not Found’ error page for both desktop and mobile versions of your site.

    First, create a ‘404’ error page for both desktop and mobile sites then set up a mobile redirect using the ‘Mobile Settings’ section of the Inspect or tab. In this way, if a user gets a 404 Page Not Found error when using a mobile device, they will be directed to your mobile 404 Page Not Found error page and not the desktop version.

    Once you have linked your desktop and mobile pages together, go to Site Publishing Settings. Scroll down to the ‘Advanced Options’ section. There’s only one option ‘Not found page’. Click on the drop down and set the page to the desktop 404 Page Not Found error page.

  4. If you have any unused assets in your website project that you know you won’t be using in the future, now is a good time to remove them. When developing websites, there’s often experimentation that leads to some ideas that you move forward with and some that you abandon. As such, your Project file may get cluttered with extraneous image files so why not remove them and reduce the size of your Project file at the same time?

    To remove unwanted assets first go to the Assets tab. Select ‘Find Unused Assets’ from the drop down menu that’s to the right of the word ‘Assets’.

    Any unused asset will be highlighted. Review these highlighted assets before removing the ones your don’t want.

  5. As SEO is baked in to EverWeb you don’t explicitly see features labelled as ‘for use with SEO’. If you have not included SEO in the planning of your website, it’s never to late to include it. Using SEO is the best way to improve your Search Engine Ranking Results. For a better understanding of SEO and how to use it in EverWeb, or if you just want a refresher, check out the SEO for EverWeb Course.
  6. If you have an EverWeb+Hosting Plan and EverWeb 2.4 or higher, you can add end to end data encryption to your website with HTTPS. To add this, tick the checkbox ‘Use HTTPS Secure URLs’ feature in Site Publishing Settings. For more information about this feature, check out the EverWeb 2.4 Released Making Your Website Safer! blog post.
  7. If you use Social Media, add an image to your web pages for social media purposes in the Page Details settings of the Inspector tab of your webpage.
  8. Spelling, typos and grammar checking! If you’ve written your own text content for your webpages, it’s easy to miss out on finding mistakes in your own work. If possible, get someone else to read through your text to find typos, spelling mistakes and grammatical error. It’s also useful for another person to check your sentence and paragraph flow.
  9. Preview your website before publishing. Preview shows you how your site will look when published without publishing the site to the Internet. You can interact with Preview to test out most features of your website, but bear in mind that some features, such as sending email, only work when your site has been published.
  10. Before you press the ‘Publish’ button, check to make sure you’re publishing to the correct location by reviewing the ‘Publish’ section of ‘Site Publishing Settings’. It’s especially important to do this if you’ve been publishing to a ‘test’ location before going live, or if you have more than one website under your EverWeb account. Accidents can happen, and you don’t want to be publishing your site to the wrong location.

These tips should make your publishing easier and reduce the need to correct your site afterwards. If you’ve got a tip to share, please let us know in the Comments Section below! Thanks!

10 Aug 2017

Language Localization in EverWeb 2.4 for Better SEO!

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

The latest EverWeb release, version 2.4, adds a new feature that uses language and regional localization to help boost your website’s search engine results rankings. Your website will be better able to target your desired audience as potential visitors will be served results that are more specific and relevant to their search than before.

EverWeb 2.4 can take advantage of geographic location and the languages used in your website, which when combined with HTML’s language features, provide an SEO boost. As you’d expect, EverWeb makes Language Localization easy with just a few mouse clicks.

You can use the language localization feature for either commercial or non-commercial purposes e.g. businesses may be focused on serving customers in their own region, country or internationally. Non-commercial websites, for example, non-profit organizations, local associations, hobbyists and so on, may gain better reach and more focused results when trying to attract their target audiences such as local or regional markets or specific language groups within their area.

How Does Language Localization Work?
Language localization works in three different ways:

  1. For the website as a whole, i.e ‘globally’,
  2. At the webpage level only or
  3. Using a combination of the above two methods i.e. the website has the global language set, but occasionally this is overridden at the webpage level when needed.

The following are some examples demonstrating how to use, and get the best from, Language Localization:

Going Global!
At the global level is where you set the language localization for the whole website only. As an example, a website has been developed in EverWeb to sell digital products globally only via the internet. In this case, you may think that no language localization is needed. However, if the website itself has been developed in Spanish, it may be advantageous to set the global language to Spanish as well to better target Spanish speaking visitors.

To set global Language Localization:

  1. Go to the Site Publishing Settings either by using the menu File-> Edit Site Settings, or by clicking on the website name in the Web Page List;
  2. In the Head/Footer section of the Site Publishing Settings is a new setting ‘Language’, just below the Favicon setting. Click on the ‘Language’ drop down.
  3. When the list appears you’ll quickly see that there are numerous languages listed together with lot of local variations based on country. To get quickly to ‘Spanish’, start typing the word itself. Predictive search is used, so as you type you’ll be taken down the list quickly. Locate Spanish.
  4. For our example, we can just use the generic ‘Spanish’ without specifying a country to target all Spanish speaking visitors.
  5. Once Spanish has been selected, publish the website. Use File-> Publish Entire Site to make sure that the whole website adopts the change you have made.

Global Setting, Local Market
In the next example, a national animal welfare organisation, based in Austria, has designed their website using EverWeb. In this instance, the website will probably want to target only potential visitors in the Austria itself. As German is the language spoken in Austria, the global language would be set to German (Austrian).

Global Setting, Multiple Markets
Switzerland is an interesting country as it has a population of about eight million people and four nationally recognised languages: German, French, Italian and Romansh. A Swiss company may build a website with webpages in some, or all, of these languages.

In this case, the developers might select the most appropriate, or dominant, language used in the website as the global Language setting in Site Publishing Settings. This could be German, French or Italian (Romansh is not included as it’s only spoken by 0.6% of the population and so not listed.) Alternatively, the website developers could decide to have no global language and set up language localization just on a page by page basis.

Whether the website uses a global language setting or not, it’s likely that this website will want to set up Language Localization on a page by page basis. To do this:

  1. Open the website Project file and go to first web page.
  2. With the Inspector tab of the Inspector Window selected, go to the Page Details section.
  3. In the ‘Language’ option, select the language that is appropriate for your page e.g. French, German or Italian. Leave the setting blank if the page is in Romansh, and use other EverWeb SEO techniques instead for this language for SEO purposes.
  4. Repeat the process for all of the other pages in the Project file that need localizing
  5. Publish the website using File-> Publish Entire Site.

Same Language, Different Countries
There may be instances where your website uses one language but targets different countries that speak the same language. For example, an English language based site may specifically target markets in the US, the UK, Canada, Ireland, Belize, South Africa, New Zealand and so forth…

In this case, you may want to set the global language setting in Site Publishing Settings to English without specifying a country, then have country specific web pages using the language of English, but with their own specific country identified e.g. English (United States), English (Belize) etc.

When using EverWeb’s Language Localization options it may take a couple of weeks to see if it has been effective on your website visitor stats. If you find no uptick in your website traffic, you may also need to implement some other measures as outlined in EverWeb’s own SEO Course.

08 Jun 2017

Image Masking in EverWeb

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

Masking has many different meanings, but is commonly used when describing something that is disguised or concealed. When used in EverWeb, masking is used to hide, or obscure, part of an image.

Masking is useful as you can display just the part of the image you want, without having to crop, or edit, the image itself. Masking keeps the original image intact so it can be used again in your Project. Having one image that you can ‘repurpose’ keeps your Project file size down as you don’t have to have multiple images of roughly the same image in your Project.

Masking and Unmasking Images
EverWeb’s Masking feature is accessed either from the Toolbar or from the Format-> Mask menu. If you have an image selected that has already been masked, the Toolbar button will be called ‘Unmask’. Additionally, the Format menu makes the ‘Unmask’ option available. If you prefer, you can use the Shift+Cmd+M keyboard shortcut to quickly unmask a selected masked object (Note that there is no equivalent shortcut key for Mask.)

Where and When Masking Can Be Applied
Masking is only available for images. You can’t mask other objects such as shapes, text, buttons etc. You can use masking in the Blog Editor Preview window if the image has been drag and dropped into the the Blog Post Preview Window. You can’t use masking if you have have drag and dropped images into the Blog Post Editor Window.

Applying the Masking
To mask an image, drag and drop the image you want on to the Editor Window if you have not done so already, either from its original source, or from the Assets List. All images in your Project should be optimized as best as possible before bringing them in to EverWeb. The image file size should be such that it doesn’t adversely slow page loading times and the file name itself should describe the image itself as this is better for your SEO.

Once the image is on the page, size and position it as desired. You can apply Shape Options to the image e.g. stroke and picture frame borders as these effects will generally be maintained when masking the image. However, it’s always advisable ti check the image once you have masked it to see if you get the effect you wanted. To apply the mask, select the image and click on the ‘Mask’ button in the Toolbar or using the Format-> Mask menu option.

The Editor Window will now have a grey semi-transparant ‘mask’ over it except for a square ‘window’ area in the center that you can see through on to part of the image underneath. This ‘unmasked’ area has a dashed line around it.

Moving and Resizing the Selected Image
When you apply the mask, the underlying image still retains its grab handles. This means that you can still manipulate the image as usual e.g. you can resize and reposition the image, apply Shape Options etc. To move the underlying image, click and hold the mouse button down whilst dragging the image to where you want it. Make sure that you don’t click inside the unmasked area itself or outside of the image’s grab handles.

Moving the Unmasked Area
To move the unmasked area over the top of the masked image, click and hold the centre of the unmasked area and drag and drop it to the desired location. When you have dropped the unmasked area in to place you will see its grab handles again so you can resize the area if you want.

Resizing The Unmasked Area
If you want to resize the unmasked area but don’t see any grab handles around it, click once inside the unmasked area. The grab handles will appear. Resize the unmasked area to reveal as much, or as little, of the image as you want.

Finishing The Masking
When you have finished positioning and sizing the mask, click on an area outside the image. The semi-transparent grey mask will disappear. The only part of the image you’ll see is the area you masked, the rest of the image will not be visible.

Masking The Same Image More Than Once
You may want to mask different parts of the same image. Once you have brought the image in to EverWeb, it is available in the Assets List so to reuse the image a second time, just drag and drop it from the Assets List on to your page. You do not need to drag and drop it again from the original source location.

Removing The Masking
Whilst there’s no visible indicator to show if an image has already been masked, you can easily find out by selecting the image and looking at the Mask button in the Toolbar. If it shows ‘Unmask’ then the selected image is currently masked. To remove the mask simply click on the ‘Unmask’ button. The whole image becomes visible again.

What Happens If The Mask Is Wrong?
If you have not masked the image how you wanted it, just reapply the mask. Additionally, it’s best not to use ‘Undo’ or ‘Redo’ commands as it may lead to unexpected results.

Masking is a handy feature, saving time, effort and Project file space! It’s worthwhile becoming familiar with how it works.

As always, if you have a question about this blog, feel free to comment in the Comments Section below!