Archive for Widgets

07 Sep 2017

10 Things To Do After Publishing Your EverWeb Website…

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

It’s a great moment when you finally click the “Publish” button in EverWeb and your website goes live on the Internet. All that hard work has finally paid off!

Now comes the difficult part, testing out your website to make sure it all works properly. This is something that seems to be a bit of a chore, but if you’ve prepared your website properly beforehand e.g. using the tips in the “10 Things To Do Before Publishing Your Website” blog, testing should be relatively quick and easy.

Here’s a checklist of things to look out for:

  1. Make sure your Navigation Menu is working properly. Check that the labels you’ve used (i.e. the Navigation Menu Display Name that you’ll find in the Page button of the Inspector tab) are correct and that each menu item goes to the page it’s meant to go to.
  2. If you’ve previously published your website, you may have made some changes and republished. Make sure that the updated pages in EverWeb have updated on the Internet correctly. If they haven’t, try full republish using File-> Publish Entire Site instead of the Publish button (or File-> Publish Site Changes menu option).
  3. If you have any hyperlinks in your pages, test out all the links to make sure they go to where they are supposed to go. Don’t forget to check out any hyperlinks you may have added to objects such as images or shapes as well as your text hyperlinks!
  4. Check that any contact forms you have added work correctly such as EverWeb’s own Contact Form Advanced widget. Check that form fields work correctly as well as the sending and receiving of the email itself. Although you may see the message “Your email has been sent” it does not necessarily mean that the email has been received! Remember also that problems can lie at either end, e.g. incorrect SMTP options set in the widget, or incorrect configuration options set in your email program.
  5. If you have an EverWeb+Hosting account and are using EverWeb Site Shield for HTTPS Secure URLs, check that the URL in your browser window starts with HTTPS and has a Padlock symbol next to the URL. Whilst you’re checking this, you may also want to see if any Favicon you’ve added is displayed (bear in mind that this may take a few hours to become visible due to replication round the Internet).
  6. Check that any widgets or code you may have used work correctly e.g. if you’re using icons from Font Awesome, make sure that these display properly.
  7. Check that your page layout works correctly e.g. you have a fixed header so that your page content scrolls under as your visitor scrolls down the page. Make sure that the content scrolls under the header and not on top of it! Check your Always On Top setting in the Metrics Inspector and make sure that Arrange-> Bring To Front is selected. Test any changes using Preview before publishing.
  8. Check that your website works properly on all device types: desktop, tablet and mobile. It’s extra work for sure, but it’s better for your users that you do this work! A professionally made website makes for a better user experience and is better for repeat visits.
  9. Test out your 404 Page Not Found pages. On both your desktop and mobile websites, check that the error page works. To test, just enter the website URL in your web browser’s search box but include a mistake in the page name you’re looking for. You should see your own 404 Page Not Found error page appear as a result.
  10. How about some documentation? It’s always worth having some documentation about your website project, especially if you’ve drawn content from a number of different sources. That can come in handy in future if you ever need to go back to find your source data. It’s also useful to note down all Hyperlinks references you’ve used in your website. Even basic information such as page layout items found in the Page tab of the Inspector can be useful to record.

    And finally, don’t forget your backups! Always have EverWeb’s own backup feature on in addition to any regular backup of your computer itself.

Once you’ve published your website it’s easy to want to just enjoy the fruits of your work, but making sure that your website is working properly is worthwhile in itself.

If you have any ideas or suggestions about this blog post, let us know! We’d love to hear from you!

23 Jun 2017

New 3rd Party “EverWeb Widgets” Now Available!

No Comments EverWeb, Software, Web Design, Widgets

Most EverWeb Discussion Forum visitors will already know Roddy McKay whose been a fantastic provider of third party widgets for EverWeb since 2013. Roddy’s EverWebCodeBox website has been a great source of widgets that extend EverWeb’s capabilities.

Roddy’s now created a completely new website, “EverWeb Widgets“, which has just launched with over 200 new widgets designed for EverWeb 2.0 and higher.

The new widgets take advantage of EverWeb’s updated widget API so offering a more feature rich experience than those in the EverWebCodeBox. The widgets are organised in to 20 categories making it easy to find what you want quickly. A website Search button is included to quickly locate widgets and the ‘Info’ menu is a useful resource on all aspects of the new widget packs.

Different widget categories cater for different design needs. The ‘Elements’ widget pack, for example, contains twelve widgets to create tables, lists, scroll to top buttons, text wrapped images, social media buttons and more. More advanced EverWeb users may be interested in widget packs such as the ‘Responsive’ pack which gives you the tools needed to build a responsive design website within EverWeb. The new ‘Responsive’ widgets supersede the ‘Flex’ system found in the EverWebCodeBox and are much easier to set up and use than before. Information detailing how to create a Responsive style website are included as well as some caveats and limitations of this approach.

The new widgets have also taken advantage of today’s web design trends with a new ‘Hero’ widgets category, Podcast widgets, Image Sliders, widgets for mobile and more. The widget packs also take advantage of EverWeb’s Full Width feature and the updates to the EverWeb widget API. All widgets in the ‘EverWeb Widgets’ website are fully described and include a demo so you can see how each widget works in real world situations. Widgets can only be purchased in packs and not individually. The number of widgets per pack will also vary depending on the widget category.

The new third party ‘EverWeb Widgets’ offer a great resource for any EverWeb user who has specific website needs, or requirements, that go beyond what is in the product itself. There are bound to be more widgets available in the future. You can stay up to date with any future widget pack releases from Roddy via the EverWeb Discussion Forum or directly from his website.

Summary
‘EverWeb Widgets’ : Third Party Widgets for EverWeb
EverWeb Version Required: Version 2.0 or higher
Available From: www.everwebwidgets.com
Experience Level: From Beginner to Expert depending on the widgets you want to use
Availability: Now, http://www.everwebwidgets.com

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.
02 Mar 2017

EverWeb’s Contact Form Advanced Widget Explained

No Comments EverWeb, Software, Tips and Tricks, Widgets

The Contact Form Advanced (CFA) widget is a great successor to EverWeb’s original Contact Form widget. The new widget debuted in EverWeb 2.0 offering a highly customisable form that can include drop down menu selections, radio buttons, checkboxes, pre-filled text fields and much more.

EverWeb version 2.1, and the recently released version 2.1.1, add more options and capabilities to the CFA widget which we will go through in detail later on. To start, let’s take a look at perhaps the most important new option: SMTP Settings…

SMTP Settings in the Contact Form Advanced Widget

EverWeb 2.1 now includes SMTP Settings to make sending and receiving email easier!

SMTP Settings
The CFA Widget Settings now includes an ‘SMTP Settings’ section. This is designed to help the contact form be more reliably delivered to the form recipient. It’s important to fill in the SMTP Settings correctly otherwise the form won’t work properly. The new ‘More Help’ button steps you through the process of filling in the settings if you are unsure about what to fill in. The steps also cater for everyone, whether you have an EverWeb+Hosting account or your own hosting provider.

The CFA widget in EverWeb version 2.1.1 has also been updated to improve the reliability of sending and receiving emails if you do not use the SMTP settings, which is like how the original Contact Form widget works.

Troubleshooting SMTP settings
If you’ve followed the above steps but still find that your contact form is not working, try these troubleshooting tips:

  1. Use EverWeb version 2.1.1. This release typically fixes most issues with the CFA widget so is highly recommended. If you’re having problems with your contact form and are not on the latest version, update EverWeb first to 2.1.1, republish your website (use File-> Publish Entire Site) then test your contact form again.
  2. Check that you have completed the steps from the ‘More Help’ button in the widget.
  3. Check that the ‘Email Address to Send Form to’ section has been filled in with a valid email address. It may seem obvious, but quite often people forget to fill in this field!
  4. Check that the password you’ve used in the SMTP Settings is correct. If you’re unsure, you may need to reset your email password. If you reset your password, exit EverWeb and log out of your email. Relaunch EverWeb and log back in to your email and try again.
  5. Check your SMTP settings with your hosting provider to make sure they are correct if you are unsure about any settings you may have entered.
  6. Check your webmail! I made a contact form and was not receiving email, so I checked my webmail and found that the emails were being received. The problem was that my Apple Mail wasn’t configured correctly so didn’t receive the emails even though they were correctly sent.
  7. Publish your website. Using preview with a contact form will not work as the widget sends email to the outside world which it can’t do when using preview. Sometimes you may also find that publishing your entire site may be beneficial. Use the menu to do this as the Toolbar ‘Publish’ button will only publish changes made to the website.

Important! When using any contact form, it’s paramount that you test that the form works. Remember that when you hit the ‘Submit!’ button and get the message ‘Your message has been sent’ this doesn’t mean that the message has been received! So… test, test, test!

Updated Form and Controls Options
EverWeb 2.1 (and 2.1.1) now let’s you reorder and delete Form Controls and Option List items. Reordering items is done in the same way as other you would for items in Asset Lists in other EverWeb widgets by clicking and dragging the control up and down the list until you have moved it to its new location when you just release the mouse button. In EverWeb version 2.0 you had to delete the widget and start again if you wanted to remove controls, so this is a welcome enhancement.

Fixes for the CFA Widget
The updated widget also contains some bug fixes including an important one where the form is now correctly sent to the email address that you enter in the widget.

If you are new to the widget there’s also a Contact Form Advanced widget video tutorial available to get you acquainted!

As always, if you have a question, let us know… we’ll do our best to help!