Mac SEO Blog

The recently released EverWeb 2.2 added an all new animation engine to the product, giving you 16 different types of animation effects to choose from. Animation effects can really bring your website to life and you can get really creative in the process! Let’s look at how to create an animation and when it is good to use, or not use, an effect in your website.

How to Create an Animation Effect

Creating an animation effect in EverWeb is easy…

1. Start by selecting an object to animate. This can be a Text Box, Shape or Image. You can even animate widgets with the exception of the RSS Feed and Image Gallery widgets. The widgets used to display the blog main, archive and blog post contents are also excluded.
2. Next, go to the Shape Options Tab and tick the box next to the ‘Animation’ section to access the available options.
3. Begin by choosing an Animation effect from the first drop down menu.
4. Use the second drop down menu for additional options for the animation effect you chose in the first drop down menu. If you selected ‘Other’ in the first drop down menu, you will see a list of additional animation effects displayed in the second drop down.
5. You can see a preview of the effect in the Preview box at the bottom of the Animation section.
6. Once you have selected the animation you want, use ‘Duration’ to specify how long the animation is to last (in seconds.)
7. Use ‘Delay’ to time when you want the animation to start, for example, if you have more than one animation effect in use, you may want to set a delay to stagger the effects them instead of them all being animated at the same time.
8. Use ‘Repeat’ to trigger the animation effect again for the amount of times you specify.
9. To see the animation effect in action, select Preview or Publish from the Toolbar.

When To Use Animation Effects

Using animation effects is a great way to bring your web pages to life, but there are also some caveats. Often sites that use animation tend to be look gimmicky. Here is our guide to when animation effects should be used:

Less is more: It’s best to use animation effects sparingly. Too many effects will just confuse your audience as they will not know where to focus their attention in the frenzy of effects on the page! Using fewer effects also makes the effects more fun and less gimmicky.

Focus: The main reason for using an animation is to bring your visitor’s attention to a particular part, or feature, of your page. For example, if you are selling concert tickets you may want to animate a ‘Buy Now’ button using a Flash or Pulse effect to lead your visitor to where you want them to be. Equate focus to ‘Call To Action’.

Timing: Your animation effects should be timed properly, not too fast and not too slow e.g. if you are animating a heart shape you will want it to beat (using the Pulse effect) at the right speed! Use ‘Duration’ to set the length of the animation and ‘Repeat’ to loop the animation. Always test your animations to make sure the timings are correct. You may find that you are adjusting your timings by 1/10ths of a second to get the effect spot on!

Suitability: When animating objects make sure that the effect used is suitable for the audience you are targeting. Remember that animation is a component of your page design and should be a natural ‘fit’ in your design. For example, if you web site is for a legal firm, you probably will want subtle effects rather than ‘comedy’ effects!

Telling a Story: The great thing about animation effects is that they can help you tell a story.e.g. a photographer may want showcase his/her work first before you see anything else on the page (such as navigation menus, text etc.) In this example, start with a blank page. To achieve this, first add all of the objects you want on to the page. Next, set a ‘Delay’ for all of the objects as this will delay them from being revealed. The last object you want revealed will have the longest delay, the first object you want revealed will have the shortest delay.

Next, you may want to use ‘Flip’ or ‘Fade’ effects to dramatically display the photographer’s images. Use a short Delay to quickly reveal each image for maximum effect. Next, you may want to fade in text boxes to explain the images using a delay long enough for the reveal of the images to have completed. Finally, the page is completed by adding a navigation menu, social media buttons etc. again using the ‘Delay’ property and the ‘Fade’  effects.

Testing: Always use Preview to see how your effects will look and if you need to adjust the Duration, Delay and/or Repeat. Remember that if you want to replay the animation effect in your browser just hit your browser’s refresh button unless you have changed the effect and need to Preview it again.

Planning and Testing

Animation can produce some amazing and fun effects. They can also add subtlety and style to your pages. The over-arching theme to remember, though, when using animation is planning and testing. Think about what you want to animate, why you want to animate and how you want to animate. Plan out the steps you need to achieve this. In the examples given above, typically you design you page first add the animation afterwards. In the photographer example, the page gets deconstructed so we want to work back from a complete web page to a blank looking page using animation to do so. Planning is essential when creating complex animations or storytelling style effects.

And as always, Test, Test, Test! Creating great effects can be sabotaged by poor timing or by delays that are either too long or too short. If you can test out your animations on others to see if your timings are correct! And don’t forget to test on mobile devices as well to see if what is effective on a desktop is also effective on a mobile phone.

Enjoy the animation effects in EverWeb 2.2 and please let us know if you have a question, or want to share any tips or effects work with us in the Comments section below!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re thrilled to announce that EverWeb version 2.2 is now available to download. The new release features a new animation framework with 16 different animation effects can be used in your website!

There is also a new ‘distance between objects’ feature, updated Audio and Image Slider widgets and much more as well as the usual maintenance and stability fixes. See below for the full list of what’s new in EverWeb version 2.2.

EverWeb version 2.2 Includes…

• [NEW] Animation Framework featuring 16 different animation effects.
• [NEW] Distance between objects indicator lets you see how far an object is under the mouse cursor from the selected object if you hold the Option key down
• [NEW] Image Slider widget now includes ‘Dark navigation arrows’ and centered thumbnails options
• [NEW] Updated Audio widget with looping, play audio on page load, mute and default sound level controls
• [IMPROVED] EverWeb works much better with large projects and uses much less memory
• [FIX] Copy and pasting styled text from Chrome into EverWeb
• [FIX] Blank paragraphs not retaining their font styling
• [FIX] Minor fixes to the blog archive widget
• [FIX] Delete key operation fixes
• [FIX] Projects resize and refresh properly between retina and non-retina displays
• [FIX] The least number of posts that can be displayed on blog main is now set to 1
• [FIX] When transferring a Project with a blog to another computer, the image links are maintained
• [FIX] Fixed Blog post image with spaces in its name not being exported properly
• [FIX] Fixed a memory leak on macOS Sierra that would cause EverWeb to slow down after using it for a while and publishing your website
• [FIX] Fixed Contact Form Advanced to use correct form address
• [FIX] Images for regular, color filled rectangles are no longer generated on publish, making publishing faster.
• [FIX] Header/Footer Code fields would replace a double dash. OS X Automatic text changes are no longer applied in these fields
• [FIX] Fixed error message when adding the blank template and EverWeb is in the Downloads folder instead of the Applications folder

How To Update To EverWeb version 2.2

You can easily update to EverWeb version 2.2 by

1. Launching EverWeb then 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 version 2.2 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 have 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 version 2.2

If you need more information about EverWeb version 2.2

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb 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.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

Creating an online store for your website in EverWeb  is easy using the built in PayPal widget and an active PayPal account. If you are about to set up a web store, remember that the process may take a couple of days to complete as setting up a PayPal account will require validation processes which take time to complete.

An online store selling physical goods is relatively straightforward to set up, but what if you want to sell digital goods through your website?

This blog explores how to use PayPal and EverWeb to sell your digital goods online as it is relatively simple and straightforward to do.

Setting Up PayPal

It’s assumed that you have already set up your PayPal account and it is active. One additional step is required when you want to sell digital goods via PayPal:

1. First log in to your PayPal account
2. Go to your Profile and select ‘Profile and Settings’
3. On the ‘My Profile’ page select ‘My Selling Tools’
4. From the list, choose to ‘Update’ your ‘Website Preferences’
5. Set ‘Auto Return’ to  ON
6. Enter your website URL e.g. http://mywebsite.com as the Return URL
7. Scroll down to the bottom of the page and Save your changes.

PayPal is now set up so that when a visitor clicks on the ‘Buy’ button in your website, they will be taken through the payment process in PayPal, then returned to your website at the completion of the transaction.

Setting Up EverWeb for Selling Digital Goods

After setting up PayPal, you can proceed to set up your online store in EverWeb. A number of steps need to be completed to get your digital store up and running effectively:

1. Create a ‘Storefront’ page
2. Create a ‘Thank You’ page
3. Create a ‘Cancel’ page
4. Add your digital products to your Storefront page
5. Use the hints and tips below as required.

Creating a Storefront Page

Creating a Storefront page may seem to be the first logical step, but we are going to do this last as it easier to pull everything together at the end using the Storefront page. As such we start by creating the ‘Thank You’ page…

Creating a ‘Thank You’ Page

1. The ‘Thank You’ page tells your customer that the transaction has completed successfully.
2. Add a button, or text, to the page which the customer will click on to initiate the download of the digital product upon completion of purchase.
3. To initiate the download of the digital product, use the Hyperlink Inspector. Link to ‘A File’ and select the relevant digital product. It is advisable to zip the file before adding it to EverWeb. The smaller the file size, the faster it will download. It will also take up less  server space too! The file will be added to your Asset List in EverWeb.
4. A separate ‘Thank You’ page is needed for each product you are selling as the download link is for one digital product only.
5. Add the following code to the Head Code section of the Header/Footer Code section of the Page Settings of all of your Thank You pages. This code helps stop the URL linked to the download file from being tracked.

   <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

Creating a ‘Cancel’ Page

As well as a ‘Thank You’ page, a ‘Cancel’ page should be created. If your customer cancels their purchase before completion, EverWeb can redirect them appropriately to the ‘Cancel’ page where you can direct the customer on how to proceed further.

Adding Products to Your Storefront

After creating the ‘Thank You’ and ‘Cancel’ pages, create your Storefront page. Format the page as desired.

1. Add the product name and description for each digital product you want to sell on your Storefront page.  If possible, an image of the product is also a good idea.
2. Drag and drop the PayPal widget on to the page and place it appropriately next to the digital product name and description for each product you are selling.
3. Customize each PayPal widget for the digital products you are selling. This will add a ‘Buy Now’ button to the page.
4. When using the PayPal widget, make sure to enter in an ‘Item ID’ as it is required by PayPal. If you do not include an ‘Item ID’, the purchase will not work properly.
5. In the section at the bottom of the widget, select the ‘Thank You Page’ that links to the page that downloads the relevant digital file. Each product you sell will link to its own unique thank you page.
6. In the field for ‘Cancelled Page’, link to your Cancel page.

You have now set up your digital store! Before testing, see the tips below.

Hints and Tips

1. Use Heading Tags as titles for your products. This will help your SEO. Use an H2 or H3 Heading Tag.
2. Use Alt Text for your product images. Remember to name the image file in line with what the image is, e.g. the name of the product the image is displaying
3. Security. As well as wanting to sell your digital goods, you will also want to make sure it is done securely to avoid digital theft.  Remember to add the code as outlined above in the ‘Thank You’ page. You may also want to disguise the filename of your Thank You page so it is less obvious as to what its function is. You may also want to remind your customers not to share the Thank You page link either if it is appropriate to do so.

Creating a digital store take a few steps. The blog above creates a simple webstore. More sophisticated and secure options are possible which we will explore further in future posts.

Watch the Video

To see the YouTube video of this blog, navigate to ‘How to sell your digital goods online – Selling Digital Goods with EverWeb & PayPal’

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

We’re so excited about this upcoming feature that we had to share it with you!

The next release of EverWeb will include an animation engine so you can create lots of super live effects for your website! You’ll be able to create awesome animations with just the click of a button!

To see some of these animations in action check out the home, features and pricing pages of the EverWeb website or follow the link to our Sneak Peak video Animation Effects Coming To EverWeb Soon!

We hope you are looking forward to this great new feature in our next big release!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb’s blogging feature has the option to include a comment engine so your visitors can add their own comments to your blog posts.  Typically, only users registered with the comment engine provider can add comments which are displayed in chronological order after the blog post itself. As the blog ‘administer’ you will usually be responsible for overseeing, or ‘Moderating’, the Comments Section.

Do You Need To Use A Comment Engine?

The first question you should ask yourself is ‘Do I need to use a comment engine at all?’ It’s often a question that is overlooked as it is generally assumed that if you have a blog, you have a Comments Section. There are great reasons to use a comment engine: It helps engage your audience with what you are doing, it fosters debate which may help you develop your products and services and it tells your audience that your website is live and active! The downside, however, is that you have to administer the comments, answer questions and respond to any issues or complaints that may arise. Additionally, you also have to police the comments section for spam and for potential abuse. Moderating can be a stressful business.

So, there are pros and cons to having a comment engine for your site. If you are happy to go ahead, the next task is to decide which comment engine best suits your needs.

Selecting Your Comment Engine

EverWeb gives you the choice of Disqus or Facebook Comments. These are the two most popular comment engines out there although there are others. It is up to you to decide on which engine to use, The decision should be based mainly around the audience that you have, or want to attract, to your website and its blog.

Disqus and Facebook Comments essentially do the same thing and both have their strengths and weaknesses. Essentially there are a number of questions that will determine which Comment Engine is best for you.

1. Where is my target audience? If you have a great Facebook presence, FaceBook Comments may be better for you. If your  audience is largely non-Facebook users then Disqus may be better.
2. How do the Moderation features stack up? As administrator of the Comments Section, you will probably be the one to ‘moderate’ the comments that come in. Responding to comments may require timely action. Policing the comments may be important if your comments section gets spammed, or trolled or if abusive language is used. These tasks require management, so you will want your comment engine to have the tools you need, when you need to use them
3. User friendliness. Typically comment engines will ask you to register first before you can post your comments. Once registered, the user will typically use a ‘handle’ by which they will be known when commenting. The user will then need to log in to the comment section of your website to leave a comment. In all, it is important that your user’s experience of logging in, commenting, replying, sharing and so on, are easy and quick to do. Make sure that the user experience matches your goals for your blog.
4. Ease of set up and management. Both Facebook Comments and Disqus have their own tools to set up and manage their comment engine. FaceBook does this through a ‘Developer App ID’ whilst Disqus uses a ‘Shortname’ handle, both of which are created when you first setup your account. The two approaches to set up and management of your commenting environment are different yet achieve the same result. It is worth while taking some time to explore both tools from a management perspective before choosing the one suits your needs best.
5. Ease of administration. As the Moderator of your blog, you will want administatration tasks to be as easy as possible. Check that the comment engine you intend to use does what you want in this respect e.g. Do you want to be notified when a comment is logged, do you want to vet comments before they ‘go live’ in your comments section (e.g. To filter out spam) etc.

Disqus and FaceBook Comments Compared

I noted earlier that the two comment engines have many features in common. However, there are some definite distinctions to be noted, which are outlined below. Remember that both products are often updated so this list is subject to change!

Disqus

Disqus has the following distinguishing features:

• Discussions in real time
• Login via Facebook, Twitter, Google, Yahoo! Microsoft Live and more!
• Comments can be threaded, imported and exported
• Comments are easy to edit
• Discovery feature to help find other website content
• Moderation of comments can be done via Email

Disqus is often favored for

• Real time commenting and alerts and an
• Easy to use interface

FaceBook Comments

Facebook has the following distinguishing features:

• You can comment immediately if you are logged in to FaceBook
• Login via either Facebook, Yahoo! or Microsoft Live
• Comments can be threaded
• Like and Reply options included
• Free data analytics
• Comments can be ordered by the number of Likes
• Includes a well regarded anti-spam tool

FaceBook Commenets is often favored as it

• Allows visitors to publish comments on their public Facebook Profile
• When large numbers of website visitors already use Facebook

When you have chosen your comment engine, the next step is to create your FaceBook Developer App ID or Disqus Shortname. The best course of action at this stage is to refer to the EverWeb User Manual as this takes you through the process in detail.

Adding Your Comment Engine To Your EverWeb Blog

Once you have selected and set up your Comment Engine, add the FaceBook App ID or Disqus Shoretname to your EverWeb Blog.  To use the Comment Engine, just tick the ‘Enable Comments’ box in the Widget Settings of your blog ‘posts’ page.

When you publish your website, the Comments Section will be available for use. Registered users will be able to log in to the commenting engine and add their comments.

Blogging and user interaction can be great for your website and rewarding and fun for your users with the right comment engine and with proper ‘Moderation’!

If you have a question or comment, please let us know in our own Comments Section below! Thanks!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

There are lots of useful shortcuts and tricks that will make your blog look more eye catching!

There are lots of good to know about hints and tips in EverWeb’s blogging feature. Save time and give your blog that extra bit of style! Here’s our list…

1. Duplicating a blog post. Easily make a copy of an existing post by right clicking on the post you want to duplicate in the Blog Posts List. From the submenu select ‘Duplicate’. The duplicate is named in the same way as when you duplicate regular pages directories in EverWeb
2. Creating a left hand margin for your post. If you have made the Blog Posts Preview Widget full width, you may find your blog text is bumping up against the edge of the window. Adding a left margin is the ideal solution to this problem. First, select the widget in the Blog Post Preview Window. Next go to the Text Inspector and set the Insert Margin option. This will set the left margin for everything inside the widget.
3. You can hyperlink your blog main page, the blog archive page and any blog post in the same way as you would elsewhere in EverWeb using the Hyperlinks Inspector.
4. Adding a blog to the Navigation Menu widget. Just select the blog main page in the Web Page List then tick ‘Include page in Navigation Menu’ in the Page Settings of the Inspector Tab.
5. Adding the blog archive page to the Navigation Menu widget. Adding the Archive page to the Navigation Menu widget can only be done under the following conditions:
   1. The blog main page is included in the Navigation Menu widget and
   2. The blog page is not in a directory. If these two conditions are met, select the archive page in the Web Page List and tick ‘Include page in Navigation Menu’ in the Page Settings of the Inspector Tab.
6. Adding an indent or outdent to your post. If you want to indent text, first select the text you want in the Blog Post Editor Window. Next press Cmd+] and your text will indent. Press Cmd+[ to outdent.
7. Reordering your blog posts by date or by title. Click on either the ‘Title’ or ‘Date’ field name in title bar of the Blog Post List. This will toggle the blog post list in ascending or descending order.
8. Using vertical splitters. You may know already that you can drag the blog post list, editor window and preview windows up and down using the horizontal splitters between each section. EverWeb’s blogging feature also has vertical splitters in the Title bar of the Blog Post List. This is useful to know for when you want to show more or less of the title in the list, if you want to hide the date or the red/green published radio buttons from view. Just drag the splitter between each section to the left or right as needed!
9. Change the color of the Navigation Links separator bar. When you display the Navigation Links, you can change the color of the post title using the Post Links options. If you want to change the horizontal separator bar between each post title, first select the posts page and click on the widget in the Blog Posts Preview Window. Next, click on the Navigation Links ‘Fonts’ button. The Fonts Panel will appear. Click on the Text Color button and change the color. This will change the separator bar color.
10. Centering titles and dates. EverWeb aligns the blog post title and date on the left hand side of the widget. If you want to have the date and title centered instead, start by selecting the ‘posts’ page in the Web Page List. Select the Page Settings tab then scroll down to the ‘Header/Footer Code’ section. Add the following code in to the ‘Head Code’ box
    

    [code]
    <style>
    h2.blogposttitle, p.blogpostdate {
    text-align:center;
    }
    </style>
    [/code]

    Your blog post titles and dates will now be centered. Don’t worry if you see some formatting such as ‘code’ in the blog post preview window. This will be hidden when you preview or publish you blog.

If you have a blogging hint or tip you want to share, be sure to let us know below!

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 2.1.1 is now available for download!

We are pleased to announce EverWeb version 2.1.1. This new release focuses on enhancements to the Audio widget and fixes for some other EverWeb widgets as well as the usual maintenance and stability fixes.

EverWeb version 2.1.1 includes…

• [NEW] Additional Options for Audio widget include Default Volume Level, Mute Sound, Autoplay on Page Load and Audio Loop.
• [NEW] Check spelling while typing option is remembered when quiting/relaunching
• Image Slider widget now shows the correct display name in the list of assets under Widget Settings in the Inspector
• Contact Form Advanced widget works better when there are no SMTP details entered
• Contact Form Advanced sends to the correct email entered in the Inspector (not the email entered in the form)
• Fixed ‘UnsupportedFormatException’ Error
• Fixed setting image Height/Width when Constrain Proportions is enabled from the Inspector

How To Update To EverWeb version 2.1.1

You can easily update to EverWeb version 2.1.1 by

1. Launching EverWeb then 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 version 2.1.1 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 have 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 version 2.1.1

If you need more information about EverWeb version 2.1.1

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb 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.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

EverWeb version 2.1 introduces a couple of really handy features to help improve your workflow. The new features will reduce the time it takes when moving (and resizing) objects on your page. The other plus point is that the features preserve your existing page layout so you won’t need to worry about having to re-edit your page after moving objects around on it.

Moving Obscured Objects

When moving an object that is partly obscured by other objects, the selected object can get de-selected when you try to move it. If you find this happening, the new keyboard shortcut in EverWeb version 2.1 will fix the problem.

In this example, we want to move the circle shape lying underneath the squares without affecting the squares themselves. Start by selecting the obscured object that you want to move. In the example below, select the circle shape by either clicking on the black color of the circle (if possible) or right (secondary) click on part of one of the squares that covers the circle. If using the right click option, a submenu will appear. Go to the ‘Pick Layer’ option and, in our example, select ‘Oval 1’. The circle shape will be selected.

If you do not see the selection handles, do not worry, as the circle has been selected.

With the object selected,  hold down the Cmd+Option keys and click and drag the selected object from underneath the squares. The correct object gets moved – the circle shape – whilst the squares remain unaffected.

Move All Objects Beneath The Selected Object

The second keyboard shortcut new to EverWeb version 2.1 lets you move all objects below the selected object in one go. It’s a really useful tool when you want to add objects in between other objects on your page. Here’s how to use this feature:

In this example, we are going to insert EverWeb’s Video widget in to the second section ‘This Is My Journey!’ whilst moving all of the content below the title down the page.

This example uses the Algonquin Theme Template with the goal being to insert EverWeb’s Video widget between the first and second section of the page (see screenshot above).

First, hold down the Command+Shift keys. Next, click and drag the title in the second section of the page ‘This Is My Journey’ down the page. A gap will open up with all of the objects below the selected object having moved down in synch! Once you have finished the move, release the Command+Shift keys.

Hold down the Command+Shift keys then drag the title ‘This Is My Journey’ down the page. All of the items below the selected object also move down at the same time!

To finish, drag and drop the Video Widget in to the gap that you have just created as shown below.

The page is now complete with the addition of the Video widget.

This feature can also be used if you are resizing an object, such as a shape, and want the objects beneath it to move up or down as you resize. To do this, hold down the Command+Shift keys as you resize the object by using its selection handles.

When using the Command+Shift shortcut only objects that are entirely underneath the selected object will be moved down. This is important as objects that are only partially under the selected object will not move using this method. In some instances, that in itself may prove a useful option for you!

These simple, yet great, new keyboard shortcuts in EverWeb version 2.1 will make working with your web pages even easier, faster and less prone to errors.

If you have any questions about this article, we would love to hear from you! Feel free to post a comment 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!

We are happy to announce the immediate availability of EverWeb version 2.1. The new release focuses on blogging, the Contact Form Advanced widget, UI and workflow enhancements as well as maintenance and stability fixes.

To update, please see the section ‘How to Update to EverWeb 2.1’ below.

User Interface

• [NEW] Holding down Command+Option keys while dragging will not change the selection so you can easily move selected objects that are covered by other objects
• [NEW] Holding down Shift+Command keys while dragging or resizing an object will move all objects underneath that object down in order to preserve the page layout
• [NEW] Function arrow keys work in the EverWeb Design Canvas
• [NEW] Rename option added to the sub menu when you right click on the Project name in the Web Page List

Contact Form Advanced Widget

• [NEW] New options to enter SMTP details to help improve reliability of receiving emails
• [NEW] Control options can now be reordered
• [NEW] Form Options can now be deleted
• Reply to email set correctly (especially when using the SMTP option)
• Form controls are not overly large when you have a wide form
• Font styling isn’t applied to some form fields anymore

Blogging

• [NEW] Option for linking to the full archive is available in the Blog Main page widget
• Fixes a problem with blogs being added to sub directories producing 404 errors
• Fixed a bug with Google Fonts and Blog Post widget not including the font for navigation links at the bottom of the posts
• Fixed a bug with Google Fonts and Blog Post widget not including the font for the date style
• Blog posts starting with an image no longer export with extra line breaks on the archive and main blog page
• Blog post images no longer get exported twice
• Fixed a memory leak after publishing when using blogs
• Fixed a CSS error in blog post widget for default font color value
• Fixed blog CSS font size export issues
• Inserting an external link will not add the external link to the end of the post when trying to delete it
• Fixed issue with Facebook comments not working properly
• Warning message when a WordPress image file can’t be downloaded when importing WordPress blog posts
• Fixed an issue with the Date Format in the Blog RSS Feed

Miscellaneous

• EverWeb removes all double quotes from images dropped on to the Assets List
• Images are opened with the correct DPI so dropping retina images works properly again
• Fixed some error checking when writing out web page files
• Setting height or width from the Inspector for multiple objects will not update both properties at the same time
• Using the selection rectangle to select objects (clicking and dragging to select objects) loads them properly in the Inspector
• Making changes in the Inspector when multiple objects are selected will not disable the Inspector after one change
• EverWeb recognizes .ico files as images again
• Fixed RSS Feeds to make sure they are always in the correct format
• Fixed text alignment issues with using line height and paragraph spacing options
• Lots of improvements to the Widget API’s
• Fixed an issue where fixed position objects didn’t get exported correctly if a top margin was specified

How To Update To EverWeb version 2.1

You can easily update to EverWeb version 2.1 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 version 2.1 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 have 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 version 2.1

If you need more information about EverWeb version 2.1

• The updated EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb 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.

EverWeb on Social Media

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

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw

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