25 Apr 2017

News Flash! EverWeb 2.3 Out Now!

No Comments EverWeb, Software, Web Design

Hot on the heels of the animation featured release of EverWeb comes the new version 2.3! This new version is essentially all about speed and performance with many optimizations to help make publishing faster and make your website’s performance that bit snappier! EverWeb version 2.3 includes lots of code tweaks and some important fixes and improvements.

You can download the latest version through the EverWeb-> Check for Update… menu or directly from the EverWeb website. Always remember to check that you have a valid software and support license before you download the new version. If you’re unsure, have a look at the EverWeb 2.3 release notes before you update your product. first!

Once you have updated to EverWeb 2.3, you may want to republish your websites (use File-> Publish Entire Site) to get the benefits of all the code optimizations!

As always, if you have a question let us know and we’ll do our best to help you out! Enjoy the speed and performance improvements in the meantime!

13 Apr 2017

Creating Animation Effects in EverWeb

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

The new animation effects in EverWeb version 2.2 are great for bringing your web pages to life. The effects can be used to highlight areas of your web page that you want your visitors to focus on – essentially creating ‘Calls To Action’. EverWeb’s animation effects can also be used to ‘tell a story’ whereby you trigger effects in sequence to produce a flow of action for your visitor to follow.

Creating an Animation Effect
Animation effects are added to objects. You can animate text boxes, shapes, images and most widgets. The RSS Feed, Image Gallery and blog widgets used for blog posts, blog main and archive cannot be animated.

To animate an object in Everweb

  1. First select the object you want, then go to the Shape Options Tab in the Inspector Window.
  2. Note that animations can be applied to more than one object at a time and even to grouped objects
  3. Once you have selected your object(s), tick the box in the ‘Animation’ section of the Shape Options Tab to activate the animation options.
  4. From the first drop down menu, select the type of animation you want. At the bottom of the Animation section is a Preview window so you can see what the effect will look like when you select it.
  5. The last option in the first drop down menu list is for ‘Other.’ Use this option for an additional list of animation effects that are displayed in the second drop down menu.
  6. Once you have chosen the effect you want from the first drop down menu, use the second drop down menu to further customize the effect you have chosen. If you have selected ‘Other’ from the first drop down menu, you will only see a list of other animation effects instead of a list of customization options.
  7. After selecting your choices from the drop down menus, set the animation ‘Duration’ using the slider, by entering a number in the field entry box or by using the up/down arrows. The number shown corresponds to seconds and milliseconds. When selecting duration, the longer the time you enter, the slower the effect takes to complete.
  8. The ‘Delay’ option should be set if you do not want the animation to start immediately as the page loads or when the object scrolls on screen.This option is useful if you have a number of effects on a page and you want to ‘stagger’ them (e.g. if you are ‘storyboarding’.)
  9. The last option is ‘Replay’ which animates the object the number of times you specify.

Animation Effects in Practice
When using animation effects, use Preview to view how the effect(s) will look as effects do not animate when you are in the page design itself. It’s recommended to use the File-> Preview menu (or the Preview button) to view your animations before publishing so you can see how the end result will look. This is important especially if you have a number of animations that run one after the other. It’s also important to see if the animation is appropriate to the page and that its playback speed is correct. Use the Duration, Replay and Delay options to tweak your animation (even by milliseconds!) to get the right effect.

Animation Example: Fade Out Effect
One of the animations that EverWeb includes is a Fade effect. This is a fade IN effect. If you want a fade OUT effect instead, try the following:

  1. Create a blank page with a white background.
  2. Add a Text Box (from the Toolbar) and enter some text in it. Style the text as you want.
  3. Next, add a rectangle shape, again from the Toolbar.
  4. Move and size the rectangle so that it covers the text of the Text Box.
  5. With the rectangle shape still selected, go to the Shape Options tab.
  6. Set the ‘Color Fill’ of the rectangle to be White, the same color as the page background.
  7. Tick the box next to ‘Animation’ so you can access the ‘Animation’ options.
  8. Set the first drop down menu option to ‘Fade’.
  9. Set the second drop down menu option to ‘In Place’ which is the usual default option.
  10. Set a Duration of 1.5 which will give a fairly fast fade speed to the rectangle.
  11. Set a Delay e.g. 3.0 seconds.
  12. Leave Repeat set at 1.
  13. Preview!

What you will see in the Preview is that the text appears, but gradually fades away as the rectangle shape fades in!

This is only one example of how animation effects can be used in EverWeb. To get the most out of them I would recommend thinking of what you want to achieve then play with the effects, duration, delay and repeat options until you get the desired effect!

if you have an effect that you have created why not share it with us, or if you want to create an effect but don’t know how, let us know in the comments below!

07 Apr 2017

Just Released! EverWeb version 2.2 with Animation Effects!

No Comments EverWeb, Software, Web Design, Widgets

EverWeb version 2.2 has just been officially released with some great new features added as well as lots of minor tweaks and fixes.

The main highlight of EverWeb version 2.2 is the addition of the new animation engine that lets you easily add animation effects to objects such as text, shapes, images and most widgets. There are 16 different animation effects to choose from in the Shape Options. Just select the object you want and tick the ‘Animation’ box!

In addition to animation effects, there’s a new ‘distance to object’ feature added to this release. Just select an object then press and hold the Alt key whilst mousing over other objects to see the distance (in pixels) between the objects.

The Audio and Image Slider widgets have also get some additional features in the new release.

Here’s the full list of new and improved features in EverWeb version 2.2!

New Features

  • New Animation Engine with 16 different animation effects
  • New Distance to Object feature
  • Updated Audio widget with looping, play audio on page load, sound level controls
  • Updated Image Slider widget with dark ‘previous/next’ arrows and centered thumbnails

Other Enhancements and Fixes

  • EverWeb work much better with large projects and uses much less memory
  • Fixed issues with copy and pasting styled text from Chrome into EverWeb
  • Fixed site wide Header/Footer code fields replacing certain characters automatically while typing
  • Fixed blank paragraphs in text objects having their font and style information removed when closing and re-opening a project
  • Fix for forward delete keys
  • Fixed Contact Form Advanced to use proper form address
  • Fixed minor blog archive widget issues
  • Fixed Blog post image with spaces in its name not being exported properly
  • Fixed issue with blog images breaking when moving a project to a new computer
  • Fixed a memory leak on macOS Sierra that would cause EverWeb to slow down after using it for a while and publishing your website
  • Images for regular, color filled rectangles are no longer generated on publish, making publishing faster.
  • Moving a Project to/form a retina screen will draw the images and widgets correctlty
  • Fixed error message when adding the blank template and EverWeb is in the Downloads folder instead of the Applications folder.
06 Apr 2017

Setting Up Your EverWeb Project

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

If you’re new to EverWeb, you’re probably keen to start building your website straight away. However, it’s worth taking a breath before jumping in so you can set up your EverWeb environment properly before getting down to work on your website. Start by launching EverWeb and creating a new website project, or if you have already started your project, double click on it’s name in the Projects Window to open it.

Log In To Your EverWeb Account
Start by checking that you are logged in to your EverWeb Account using the EverWeb-> Preferences menu. The first tab is ‘Account’. Enter your account details if it’s not already pre-filled, or if you have not done so already, create an account. Logging in to your EverWeb account is important as it’s how EverWeb determines whether you have a purchased or demo version of the product. The only difference between purchased and demo is the ability to publish your website is disabled for the demo version.

Auto Save and Automatic Backup
Once logged in to your EverWeb account I recommend that you immediately set Autosave and Automatic Backup on. These features are also in the EverWeb-> Preferences menu on the ‘Backup’ tab. Autosave and Backup are invaluable tools that can save you lots of time, effort and frustration if you ever have problems with a Project file and need to ‘rollback’.

‘Autosave’ saves your work on the fly and ‘Backup’ creates a back up copy of your Project file in the location you choose on a daily, weekly or monthly basis. You keep from one to 50 backups at any one time. This is useful if, for example, you’ve made changes to your website that you want to reverse out. You may need to go back a couple of backup copies to reverse out all the changes you don’t want.

When you use ‘Backup’ remember that if you delete your Project file, the backups are also deleted.

It’s also a good idea to backup your computer regularly using tools such as Apple’s Time Machine or a third party backup solution. In this way you have less risk of losing any valuable work.

Name Your Website
When setting up your Project file you’ll want to name it! It’s often a question on the EverWeb Discussion Forum, but easy to answer when you know how! By default, all new websites you create are called ‘NEW WEBSITE’. Double click on this text in the Web Page List that runs down the left side of the Project Window. Enter the name you want as the website Project and press Enter to finish.

Set Default Styles
When you start a new website Project you’ll hopefully know what fonts and color palette your website will be using. Set these choices up as defaults for the Project using the Format-> Default Styles menu to access the list of styling attributes that you can change. Click on the ‘Save’ button when finished. Note that ‘Default Styles’ are not applied retrospectively. If, for example, you have changed the ‘Body Text Font’ default, this change is only effective when creating new Text Boxes. For any existing Text Boxes, you will need to change the font manually.

Publishing Settings
There will come a time when you’ll want to publish your website! It’s worth setting up your Site Publishing Settings at the start of your project so when you are finished, or want to test, everything is already in place.

Access the Site Publishing Settings either by the File-> Edit Publishing Settings menu or by double clicking on your website name in the Web Page List. There are three ‘Publish To’ options on the drop down menu. Select ‘EverWeb’ if you have an EverWeb+Hosting plan and ‘FTP Server’ if you have your own hosting provider. Fill in the details as required. If you are using FTP Server and are not sure about the details to fill in, your host provider should be able to help. You can also checkout this video on Publishing in EverWeb. This video walk through is a couple of years old so the EverWeb UI may look a bit different to your version of EverWeb, but the principles remain the same.

The third Publish To option is ‘Folder’ which is useful for testing your website locally before publishing to the Internet.

Email. 404 Page Not Found and Favicon Setup
The Site Publishing Settings is also where you can add email addresses to your website if you have an EverWeb+Hosting plan. For help, click on the ‘?’ to the right of the ‘Email Addresses’ heading. If you have your own host provider use your host provider’s cPanel to setup your email addresses.

At the end of the Head/Footer Code section, is a section where you can select an image to use as a Favicon for your website.Checkout our article on Favicons for more information!

In the ‘Advanced Options’ section of the Site Publishing Section you can also set up a link to a ‘404 Page Not Found’ to capture instances where there may be broken links in your website. It’s a great safety net and we’ll feature this more in an upcoming blog.

Other EverWeb Preferences
The other settings that you will probably want set are the General Preferences in the EverWeb-> Preferences menu. Here you can set the guides that you see when moving objects around the page and whether you want to see the Hyperlink Indicator when you set up Hyperlinks in your web pages.

Spell checking is a great option to set up when you create your website so you don’t get misspellings on your pages! Use the Edit-> Spelling menu and tick the option you want to use. I usually recommend ‘Check Spelling While Typing’ is set on.

Finally, the Window menu can be used to set up whether the Layout is displayed or not and whether the Toolbar and Inspector Window are displayed or.

There may seem a lot that can be set up here, but with just a few minutes work, you’ll have the website project environment you want and you’ll be more efficient in process!

If you have a question about this post, please drop us a line in the Comments section below. Thanks!

22 Mar 2017

Coming Soon! Animation Effects in EverWeb!

No Comments EverWeb, Software, Web Design

Breaking News! If you’ve been to the EverWeb website recently or to the EverWeb YouTube channel, you’ll see some great news. The next release of EverWeb will include animation effects!

Although it’s only a ‘Sneak Peek’, the Home, Features and Pricing pages of the EverWeb website use animation effect really effectively to make features on each page really pop. The teaser video clip shows us just some of what’s going to be possible soon!

It looks like this is going to be one awesome release coming up! There’s no news of a date yet, but we’ll keep you posted as soon as we find out! It looks as if this is going to be a big release…