Mac SEO Blog

We’re excited to introduce EverWeb 3.5 which is all about Website Search! Two great new widgets give you fully customizable website search options and three ways of displaying the search results. That’s not all though as we have added reverse wrap to the Responsive Row widget, Short Summaries and keywords to blog posts for better SEO and Open Graph tags have been added to the SEO PowerUp addon for better social media interaction.

Last, but not least, EverWeb 3.5 has been developed as a macOS Universal Binary, so will run natively on Apple Silicon Macs without the need to use Rosetta 2 as well as running on Intel Macs as always!

All this and more in EverWeb 3.5! Check out EverWeb’s new features in the video at the top of the page and below for a complete list of its new and enhanced features as well as the usual fix list.

Which Version of EverWeb is For You?

EverWeb is available in the following versions:

• If you are running an Intel Mac running OS X 10.10, macOS Yosemite, El Capitan, Sierra, High Sierra, Mojave, Catalina or Big Sur, EverWeb version 3.5 is available for you.
• If you are running an Apple Silicon Mac running macOS Big Sur, EverWeb version 3.5 is available for you as a Universal Binary. EverWeb will run natively without the need to use Rosetta 2.
• If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 3.1 is available for you.
• If you are running OS X 10.6 EverWeb version 2.5.2 is available for you.

When updating to the latest version of EverWeb, the update process will automatically download the correct version of EverWeb for your operating system.

EverWeb 3.5 Includes…

• [NEW] EverWeb 3.5 can be run on Apple Silicon Macs as a Universal Binary using macOS 11 Big Sur.
• [NEW] Search Website feature allows your visitors to search your website’s pages.
• [NEW] Website search results can be displayed in a dropdown list, a popup window or on a dedicated page.
• [NEW] Search Field widget allows you to set up a search bar and search results.
• [NEW] Search Results widget allows you to display results in one of the pages in your website.
• [NEW] Site Search section in the Page Settings tab of the Inspector window allows you to include or exclude the page in website searches.
• [NEW] The Responsive Row widget now includes a Reverse Wrap option.
• [NEW] You can now duplicate Form Controls in the Contact Form Advanced widget.
• [NEW] YouTube widget now includes a mute sound option.
• [NEW] Open Graph Tags are automatically included when you publish your site.
• [NEW] Short Summaries for blog posts allow you to enter descriptive summaries about your posts.
• [NEW] You can enter Keywords in your blog posts.
• [NEW] The Blog Post Editor Toolbar now includes options for ordered lists to be either Default, Lower Alpha, Lower Greek, Lower Roman, Upper Alpha or Upper Roman.
• [NEW] You can add Hex codes for colors in the Blog Post Editor Toolbar’s Color Picker.
• [NEW] The Blog Post Editor Toolbar now includes options for unordered lists to be either Default, Circle, Disc or Square.
• [NEW] A ‘Duplicate’ button has been added to the Contact Form Advanced widget’s Form Controls section.
• [NEW] A ‘Test SMTP Details’ button has been added to the Contact Form Advanced widget.
• [NEW] Option to only use local Jquery and not try to connect to Google servers has been added to Site Publishing Settings.
• [IMPROVED] If you add or remove pages that are included in Navigation Menu widget only the pages with the Navigation Menu widget will have to be republished.
• [IMPROVED] Improvements to loading HTML previews in HTML viewers for widgets that use plugins.
• [IMPROVED] RSS Feed widget improvements for when images can’t be found in a feed. The widget will still properly preview.
• [IMPROVED] Improved language localizations.
• [FIX] Fixed an issue with shapes that use picture frames not exporting properly.
• [FIX] Arrange-> Align-> Left and Arrange-> Align-> Bottom now work correctly.
• [FIX] Shapes using Picture Frames could not have a colored background but now can.
• [FIX] In the Assets List, secondary clicking on multiple assets and selecting ‘Add to Folder…’ would incorrectly add an external file to the images section of the Assets List if an external file was selected while some image files were also selected.
• [FIX] Select color button now copies colors properly with the right click->Copy function.
• [FIX] Assets that are used in blog posts can now be found properly.
• [FIX] Render error icon for widgets when they cannot be generated due to compilation errors.
• [FIX] Fix for exception on mouseover in Navigation Menu widget.
• [FIX] Shadows now work for widgets and when exporting responsive css.

How To Update To EverWeb 3.5

You can easily update EverWeb by either:

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.

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon. Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

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

The update 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 update period from EverWeb’s Preferences window or from your client area.

If you have passed your one year of free EverWeb updates, 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 updates 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.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

• The EverWeb website which has up to the moment information in it’s new blogging section
• New EverWeb videos on YouTube
• The EverWeb User Manual in EverWeb’s Help-> User Manual 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

Flipboard

YouTube

Twitter

Instagram

The Contact Form Advanced widget was introduced with EverWeb 2.0 and has grown in to a fantastically rich and versatile widget. The idea behind this widget was to provide a feature rich but secure widget so that your contact form would be less liable to SPAM and malware attacks. But that’s not all as the Contact Form Advanced Widget has a lot of other great features that can make filling in a contact form the best experience possible, Here are our Contact Form Advanced Widget feature recommendations based on the latest version EverWeb, version 3.4…

1. reCAPTCHA: This is a great tool, provided through Google, that adds security to your form. If you do not already have reCAPTCHA set up, just click on the ‘Sign Up for reCAPTCHA v2’ button and follow the instructions. At the end of the process you will get two keys: A Site Key and a Secret Key that you will need to copy and paste in to the corresponding fields in the Contact Form Advanced Widget Settings.
   Once you have set up reCAPTCHA and published your site changes, when a visitor uses your contact form, they will be asked to identify like photos in order to send the form to you.
   
2. Submission Confirmation Messages: There are two options available when a visitor hits the Submit button. The first is that the on-screen confirmation that the form has been sent. The message is automatically displayed and you can customize the message as you want. The second message is an Email Confirmation to the visitor that the form has been sent. For the latter feature to work, you need to enable reCAPTCHA in your form.
   Note that whilst these messages tell your visitor that the form they have been completed has been sent to you, this does not necessarily mean that you will receive the form. It is unlikely that this will happen, but be sure and test your form before going live with it and also make sure to check the email address that you use in the ‘Email Address to Send Form to’ field in the Widget Settings to make sure that it is a valid email address.
   
3. Remember Required Fields: Use this kind of field wisely. Too many ‘required fields’ may irritate your visitor and lead to them not completing the form. If there are too few required fields you may find that you have incomplete data, skewed data or an inaccurate overview of the data you originally wanted to collect. Finding the right balance of Required Fields may prove essential in your form.
   
4. Validation Messages: When visitors have not completed the form correctly e.g. they have not completed fields in the form that are obligatory, EverWeb will send out a default message as per the Form Validation Error Message field. You may want to customize this message to better suit your form. It is also worth considering giving your visitors more information about how to complete the form which leads on to the next tip…
   
5. Tips and Instructions: Creating a form is often straightforward, but there may be times where you need to add detail and complexity to the form which may require you to explain in more detail what parts of the form mean and how to complete them. This can happen, for example, if you use open ended questions in your form or if you are surveying people on their opinions. This is where using Placeholder Text and/or Control Instructions/Tip can prove invaluable. The Placeholder field is great for adding an example in the field e.g. in the email address field you may want to add e.g. Jane.Doe@mysite.com as an example of what to fill in. When your visitor types in the field, the Placeholder text disappears.
   The Control Instructions/Tip field does exactly that. Add information that will be useful for filling in the released field. The instructions/tip will be displayed immediately below the field itself. You can customize the form field and Control Instructions/Tip field’s font attributes as you want.
   
6. Forwarding Your Visitor to Another Page: Once your visitor hits the Submit button, you may want to take them away from the contact form page to another in your site. This could be e.g. a thank you for filling in the form page, or to a ‘what happens after you complete the form?’ page, or you may want to just return the visitor to your site’s Home page. Use the Forward to Page field to select the page you want the visitor to taken to.

Fine tuning the settings of the Contact Form Advanced widget can lead to an enhanced visitor experience and can help you collect the data that you require. Adding information to help visitors complete the form accurately will make form filling quicker, easier and more accurate!

In the previous post, we discussed how objects are stacked in Fixed Width page layouts and how you can change the order of objects within the stack, even when you have a Master Page attached to your page.

In this post, we explore how objects in a Responsive Page Layout in EverWeb are handled when you are building your responsive website.

The Same but Different…

If you have been a long time user of EverWeb you will probably know already that when it first came out you only create websites with a Fixed Width Page Layout. This all changed in EverWeb 2.8 when the Responsive Page Layout was added.

One of the design goals that we wanted to make sure of was that you could use EverWeb with a Responsive Page Layout in exactly the same way as you did with a Fixed Width Page Layout. For example, adding a new page, editing a TextBox, drag and dropping objects, accessing menu options and and so on would all remain the same as before. This goal was achieved, however, the concept of Responsive Website Design is in many way different to Fixed Width website design. As such, whilst EverWeb works in the same way as before, the fundamentals of designing a Responsive website is distinctly different to designing a Fixed Width website.

…Different but the Same

If you are designing a Responsive website in EverWeb for the first time, take a look at EverWeb’s YouTube video site to help get your started, or the EverWeb User Manual within the product which has a whole chapter dedicated to get you quickly productive.

If you have already been using EverWeb’s Fixed Width Page Layout for your site, you may want to convert your existing site to a responsive one, or you may simply want to design a completely new site. These are the kinds of circumstances where you will quickly find out that everything is different but the same. Again, check out the EverWeb User Manual to get up and running quickly.

Object Handling in Responsive Pages

One major area of design difference is how objects are handled on the page. In a fixed width design page design, objects can be stacked one on top of the other. In a responsive page design this is not possible. For example, create a Fixed Width page then add a rectangle to it. Next add a triangle. The two shapes appear on top of each other so you will se the triangle as it is the same color as the rectangle that it sites on top of. You can change the color of the triangle e.g. to yellow, to see the two shapes clearly on top of each other.

Now go to the Page Settings tab and change the Page Layout from ‘Centered Layout’ to a Responsive one. You will see that the yellow triangle sits on the top row, the rectangle shape is below it on the second row and the EverWeb logo sits beneath the rectangle on the third row.

If you try to stack any of these objects one on top of the other, you will find that it is not possible. Instead the objects will appear move to a different row, again one on top of each other. Now try to move the bottom object further down the page so that it is on its own. You will see that this time the object just snaps back to sit under the second object.

In responsive design, stacking one object on top of another is not usually possible and all object rows in a page must be contiguous to one another. There are many reasons as to why this is necessary, but essentially it is because a responsive page is scaleable that it is a requirement that the page structure is maintained at all times, at any scaling point. Objects on the page have to stay properly contained within the page at all times, so one of the ways to achieve this is to have the objects ‘flat’ on the page rather than allowing them to be ‘stacked’.

Options! Options! Options!

The Responsive Web Design approach may be frustrating at first if you have come from a Fixed Width design background. It may take time to get used to how responsive design works and the pros and cons of it. Here are a few tips that may help you out…

1. Background colors and images. Most objects and widgets can have a background color, or image, added to them without the need for a background shape being added.
2. Group Objects Using the FlexBox and Text Section widgets. Placing objects near to each other can be easily achieved with these two widgets so it’s easy to group text, images and buttons together as you want.
3. Images. If you want to have a frame around an image in a responsive page, you can add a line to an image using the Shape Options tab. You cannot use a Picture Frame, however, as the frame is actually an image in its own right so adding it to an image would make the two images appear side by side. Instead, it is better to add a frame to the original image using an image editor then use this image in EverWeb instead.
4. Check Out Third Party Widgets. There are some great third party solutions from EverWeb Widgets, EverWeb Garden and that may give you the solution you need. Note that some of these third party widgets are free, some are paid for widget.
5. Graphics Editors. You may find that a graphics editor becomes more useful if you need to include a ‘stacked’ type object on your page. Export the complete image as a jpg or png file then drag and drop the image in to EverWeb.

Embracing Website Design Differences

Responsive Web Design offers a different way of developing your website and has many advantages over traditional fixed width designs. The advantages (discussed in the EverWeb User Manual) of responsive web design, however, makes the design approach more difficult. In some ways you may feel constrained in what you can do, as the example of stacking objects, illustrates. It’s a different paradigm, though. Once you start working with responsive pages in EverWeb, you will start to find that there are many different possibilities and solutions at hand. It is just thinking in a different way, out of the box, or maybe within a ‘boxes within boxes’ approach that typifies responsive web design.

As you may already know, an ‘object’ in EverWeb can either be a TextBox, shape, image or widget. To add a TextBox to the page, you simply click on the TextBox button in the Toolbar then start adding your text inside the box. To add a shape, you just click on the Shapes button then click on the shape you want from the thirteen available shape types. Images can be added to your page by drag and dropping them from your hard drive, cloud location, the Assets List or by using the Media button in the Toolbar. Last but not least, widgets can be drag and dropped on to the page from the Widgets tab. All nice and easy

Objects in Fixed and Responsive Page Layouts

EverWeb has two types of page layout: Fixed Width and Responsive. In the Page Settings Tab of the Inspector Window, you will see a section called ‘Page Layout’. If you click on the dropdown menu, you will see three page layout styles are available. The Left Aligned Layout and Centered Layouts are Fixed Width page layouts whilst the third page layout, Responsive, is used if you want to design a Responsive website.

Whilst the technique of adding objects to the page in either of the two page layout types is the same, the way in which objects are handled on the page can diff.

Object Stacking in Fixed Width Page Layouts

When you add an object to a page in EverWeb, it is as if you are adding a new layer on top of the existing layers of the page, in the same manner as using layers of tracing paper. To see this effect create a new Blank Home page in an EverWeb Project file. The Blank Home page uses a Centered Page Layout and has only one object in it – the EverWeb logo image located in the Footer section. To keep this example simple, delete the logo image from the page.

Now that the page is completely blank, click on the Shapes button in the Toolbar and add a rectangle shape to the page. Click on the Shapes button a second time and add a triangle shape. This shape will sit directly on top of the rectangle. As the triangle is the same color as the rectangle you might not see it, so go to the Shape Options tab and change the Color Fill to green. Now click a third time on the Shapes button and add a circle. The circle will sit on top of both the triangle and square obscuring a part of both of these objects. Again, use Color Fill to change the color of the circle, this time to red.

You can freely move the three objects around the page as you want – horizontally along the page’s x-axis and vertically along the y-axis. In this example notice that the circle always sits on top of the triangle which always sits on top of the rectangle. This ‘stacking’ of objects shows you the depth of each object on the page which occurs along the z-axis.

For the moment, you will find that you cannot change the depth order of the stack. This is reasonable as the page is viewed on screen as a two dimensional object rather than a three dimensional object.

Changing Object Order on The Page

Most of the time, you will not need to worry about the ‘depth’ of objects on the page, however, there may be times when it does become important. For example, you might want to place two shapes on top of each other to create, e.g. a player control button, which would be represented by a circle on top of a rectangle. If you add the circle shape first to the page then the rectangle shape next, you will find that the rectangle is always above the circle.

EverWeb allows you to easily change the z-axis order of objects by using the Arrange-> Bring Forward or Arrange-> Send Backwards menu options. The option you choose depends on which object you have selected. To save time, you can also secondary click on the object you want to change the order of then choose the option you want from the popup menu.

As you can see from the Arrange menu, you can also quickly move an object right to the top or bottom of the stack using the Arrange-> Bring To Front and Send To Back menu options.

Objects in Master Pages

So far, so good, but what happens if you have a Master Page attached to your page? In this scenario, the Master Page is treated as if it is another page underneath the page it is attached to. Master Page objects can be brought forward or sent backwards but only within the Master Page itself.

The page the Master Page is attached to sits independently above the Master Page. The objects on this page can only be stacked within the page itself. Again this usually is not a problem but there may be times where you want a Master Page object to be visible above all other objects e.g. a navigation menu widget. In this instance you can force the object to be at the top level of the stack by selecting it then selecting the Arrange-> Always on Top menu option, or by checking the same option in the Metrics Inspector.

You can apply Always On Top to multiple objects. Objects set this way will still have a stacking order too, so you can still use Bring Forward and Send Backwards when Always on Top has been set.

More About Object Stacking…

Knowing how and why objects are stacked will help to make designing your website easier. In the second part of this post, we will look at object stacking in Responsive Page Layouts.

Creating flexible, one page fits all devices, website designs is at the core of Responsive Web Design. EverWeb makes building responsive pages as easy as possible through its built in features, widgets and drag and drop capability. If you have built a fixed width website using a centered page layout, or are just new to web design and want to try out creating a responsive web design, you may find some challenges ahead of you…

A case in point comes when using images in a responsive page layout. As you scale the page, you can allow its images to automatically scale at the same time.

If this is what you want to happen but it doesn’t, what’s going wrong and how do get scalable images? In this post we will explore the background to images in responsive pages and explain how, with a bit of knowledge behind you, you will be easily be making pages with scalable images!

Adding an Image Directly on to a Responsive Page

Images can appear in a number of different ways on a responsive page depending on how and where they are added. For example, if you create a blank responsive page and drag and drop an image on to it in the Editor Window, you will see that the image occupies the full width of the page. Use the selection handles of the image to increase its height. When you preview the image, you should see that it scales as you change the width and height of the browser.

That is fine if you want your image to be full width across the page but often you may have one or more images that you want displayed on the page, but you do not want them full width.

Images in a Responsive Row Widget

Often images are added in to a Responsive Row widget as this widget is a great way to add fixed width objects to your page. And this is exactly what you have to remember… the images you add will be fixed width.

You can try this yourself to see the effect that it has on your page. First delete the image on the page if you added it from the above example so that your page is empty. Next, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

Once the widget is on the page, drag and drop an image inside the Responsive Row widget. Now go to the Metrics Inspector to check the width of the image. If the image is 350px or less wide, increase this to e.g. 600px wide. Make sure when you do so that you have ‘Constrain Proportions’ checked. If you preview the image, you will see that the image remains fixed in size. If you use your browser’s responsive design mode, you will be able to view the page as if it was being displayed on one of a number of different devices. For example, if you use Apple’s Safari Responsive Design Mode you can view the page as if it were being displayed on an iPhone SE, iPhone 8 or 8 Plus and so on. You should see that the image does not scale and also overlaps any device that has a screen width of less than 600 pixels wide.

the moral here of using a Responsive Row widget with images (or any other object for that matter) is that as the objects are fixed width, you may get problems on some devices if the image is too wide to be displayed properly.

Solving the Scaling Problem

So, how do we solve the problem of getting images to scale correctly and the knock on problem of having images always fitting within the width of all devices? The answer: The FlexBox and Text Section widgets!

Using either of these widgets will enable fully scalable images on your page. Choose the widget that best suits your requirements. In this example, we will use the FlexBox widget as it allows you to add more than one image at a time in the widget.

Start by deleting the Responsive Row widget from the page then add the FlexBox widget to the page. In the Embedded Objects section of the widget, click on the Add button below the ‘Embedded Objects’ list. Set the Object Type to Image.

Scroll down to the Image Settings section and click on the ‘Choose…’ button to add your image. Next, You delete the text that you see in the Styled Text Editor further down the page so that you just have the image on the page. Lastly, scroll back up to the Object Sizing Options section of the widget.

The important fields to use in this section are the Minimum and Maximum Width fields. If you set the Maximum Width as zero, the image will take up the width of the screen that is available to it from the Minimum Width value upwards. So you could make the Minimum with 250 (which will likely suit the smallest mobile phone) and leave the Maximum Width at 0. You could also set the Default Width to the same value as the Minimum Width.

Preview the page to see the effect. You should see the page scale correctly at all time. If you use your browser’s responsive design mode, you will also see that the page width will alway fit within the device it is being displayed upon.

Once you have tested your page, try adding a second Embedded Object to the FlexBox widget using the same parameters as above. Alternatively, duplicate the image and experiment with the Minimum and Maximum width values.

When using the Minimum value, it is usually a good idea to use a hard number e.g. 250. In this way you will more than likely accommodate the smallest mobile device. For the Maximum value, you could leave it as zero or even use a percentage value e.g. 95% of the width available to the object.

You can also add margins to the left and right side of the widget using the Margin fields in the Metrics Inspector which will keep the image away from the edges of the browser. There is much you can experiment with here so the advice is to start simple!

With a little bit of widget knowledge, it is easy to create great scalable images in your website that fit within any device they are displayed upon!

There are many ways in which you can link to email in EverWeb. There are a variety of ways in which you can either open your email app for your visitor to create a new email or use a predesigned for from within a page of your website.

Here are some ways in which you make linking to email work effectively for you…

Using The Hyperlinks Inspector

The most common way to link to email is by linking a piece of text or an object, such as a shape or an image, to an email app using EverWeb’s Hyperlinks Inspector:

1. First select the object that you want to link the email app to
2. Go to the Hyperlinks Inspector and check the ‘Enable as Hyperlink’ box to activate the settings.
3. Change the Link To: dropdown menu option to ‘An EmailMessage’.
4. Enter the email address that you want the email to be sent to in the To: field.
5. Enter the subject of the email in the Subject: field.

That is all that you need to do! When you preview or publish your website, when the visitor clicks on the Hyperlink, their email app will open with the To: and Subject: fields already filled in.

Using the Contact Form, or Contact Form Advanced, Widget

EverWeb includes two Contact Form widgets. The Contact Form widget debuted in EverWeb 1.0 and is a very basic form. The Contact Form Advanced widget premiered in EverWeb 2.0 and supersedes the original form. This Advanced form continues to gain new and improved features, whilst the original Contact Form remains to be used for legacy purposes.

We highly recommend that you use the Contact Form Advanced widget as it is a lot more secure than the original Contact Form widget. The advanced form also offers a lot more features and flexibility so that you can design just the form that you want to fit the style of your website!

By default, both contact form widgets include an email address field which should be filled in straight away with a valid email address where the form will be sent to when the visitor hits the ‘Submit’ button. The original contact form only includes four input fields at most whilst the Advanced form allows you to create any number of fields, each of which includes its own form control type. The Advanced form also allow you to send confirmation messages that the email has been sent as well as customizable form error checking messages and reCAPTCHA anti-Spam capability.

Using The Styled Text Editor in Widgets

The Styled Text Editor is included in the FlexBox, Text Section and PayPal widgets. You can add a link to an email app from within the Styled Text Editor using the following method:

1. Highlight the piece of text that you want to link to email.
2. Click on the Link button in the Styled Text Editor’s Toolbar.
3. To add just a ‘Send To’ email address enter
   mailto:emailaddress.com
in to the URL field. Replace ’emailaddress.com’ with the email address that you want the email to be sent to.
4. You can also include a default Subject heading by using this line in the URL
   mailto:emailaddress.com?subject=My subject 
In this instance, replace the email address as described above then change the text ‘My Subject’ to the text that you want to be displayed in the Subject field when the visitor’s email app opens.

Using the Link Field in Blog Posts

As with the Styled Text Editor, you can add email links in to your blog posts in exactly the same way, using the Link button in the Blog Post Editor.

As you probably already know, as well as the Blog Post Editor, there is also a Blog Post Preview window below the Editor window. If you add objects in to this window they will appear in all of your blog posts. Therefore, this is a good place to put objects such as an email link button. In this case,

1. Click in the location in the Blog Post Preview Window where you want to add your email link button, e.g. in the Footer.
2. Add an email icon to the Blog Post Preview Window using the Insert-> Button-> Email Me menu option
3. Use the Hyperlinks Inspector to add the link to your email app to your button.

Using the Built in Link Button in Widgets

The last way in which you can add links to your email app in EverWeb is through the ‘Link’ button in EverWeb’s FlexBox and Text Section widgets. In these instances you can add links to your email app when your visitor clicks on an image or button that you have added to the widget. Use the same method as for linking to the Styled Text Editor, as described above, to add your email link.

Adding a link to email is easy in EverWeb and knowing a couple of tricks along the way can also help take your website design one step further!

Adding animation to your website can add flair and fun to your site. Animating an object on your page can also serve a practical purpose as a ‘Call To Action’ for your visitors. By drawing a visitor’s attention to a particular object, such as a button, you may help increase the likelihood of the visitor clicking on the button.

About Animation Effects in EverWeb

You can use animation effects in any page layout type in EverWeb, Responsive or Fixed Width, by selecting the object you want to animate, clicking the Animation box in the Shape Options tab, then applying the animation effect that you want. you can apply an animation effect to most objects in EverWeb, the exception being the Image Gallery widget.

EverWeb includes sixteen different styles of animation of which six, Bounce, Fade, Flip, Rotate, Slide and Zoom, can have additional have directional control added to give the effect movement within the page. The movement controls are From Top, From Left, From Right and From Bottom.

Each animation can have a duration set, in intervals from 1/10th of a second up to 60 seconds. The longer the duration, the slower the animation will play out. You can also add a time delay before the animation starts, again from 1/10th of second, this time up to 100 seconds. Delay is useful when you have a number of objects that you want to activate in a timed sequence. Finally, you can set the animation to repeat, from one time only to up to 100 times.

Animation in Fixed Width Sites

When using animation in a Fixed Width (i.e. Centered or Left Aligned) Page Layout style, you can use all of the animation’s directional controls (From Top, Left, Right and Bottom) if using one of the six animations styles mentioned above. For example, you could have animated clouds crossing the page from left to right, or have titles drop in from the top of the page.

In addition, as you can stack objects on top of each other in a fixed width page. you can create ‘reveal’ effects by using the Fade animation style. This is a ‘Fade In’ animation so you can use it to make a fade out by creating a rectangle shape in the same color as the background and have it fade in over the object that you want to disappear. Check out our Animation Effects Part One and Part Two YouTube videos for more information on what you can do with animation!

Animation in Responsive Websites

Animation works in the same way in Responsive Page Layouts as it does for Fixed Width Page Layouts except for a couple of differences. The first thing is that it is not possible to stack objects in a Responsive Page Layout as you can in a Fixed Width layout. However, you can use the Fixed Position setting in the Metrics Inspector to fix a full width shape in place that can fade in over a full width shape placed over it. This will achieve a fade out effect.

The second thing to be aware of is that when using any of the six animation styles that include directional control, you should avoid using ‘From Left’ and ‘From Right’ direction controls. When using these direction controls, the object itself is placed at the left or right starting point of the animation from which it then moves in to the page when the animation begins.

As such, the object will be outside of the page’s left or right margin prior to being animated and so the page width will be greater than the width of the browser it is being displayed in. The result is that the page will drift horizontally to the left or to the right within the browser window instead of being fixed in place.

The third thing to be aware of is that when using a Responsive Row widget, you can add the animation to the widget itself and to the objects inside it. This may help you produce some interesting effects, but testing is vitally important to ensure that your animations work correctly on all device types!

Conclusion

Using animation in EverWeb’s responsive page layout style can provide some great effects to your page. However, it is important to thoroughly test your page to make sure that the animation you want works correctly under all circumstances. The best way to test is to always preview your page. If your browser supports responsive design mode, you should be able to test your page on a variety of different device sizes to see whether it holds up or not. If your browser does not support responsive design mode, it is recommended to use Apple’s Safari browser which does support this feature.

When using EverWeb you pretty much have everything to hand that you need to build a website but sometimes you may want something extra for your site. Perhaps you want better security, or you want to sharpen your site’s SEO, or you want to use the data gathered from your contact forms. EverWeb’s Addons are here to help you get even more out of EverWeb!

Site Shield Addon

EverWeb’s Site Shield Addon is designed for EverWeb + hosting customers who want a secure to transmit data across the internet to all of the devices your website visitors may be using. The ‘end to end’ data encryption of data is provided through the use of HTTPS (HyperText Transfer Protocol Secure) in place of HTTP.

WhyEverWeb Site Shield Addon Is Important

There are a number of reasons why EverWeb Site Shield Addon might be important to your website:

1. Your data is end to end encrypted across the Internet protecting you from ‘Man in the Middle’ attacks;
2. Sensitive data, such as financial data, confidential data, web shopping carts or medical data, is safely and securely transmitted;
3. Site Shield Addon will help improve your SEO rankings. For example, Google prioritizes HTTPS sites over non-secure HTTP sites;
4. Using Site Shield Addon also makes Google Analytics more effective as Referrer data is saved which is not the case if you only use HTTP;
5. Site Shield Addon builds trust with your potential and existing customers. The Padlock symbol that appears beside your URL in a visitor’s browser search box indicates that the site has secure end to end data encryption enabled. This visual symbol is a great way to let your visitors know that you take data security seriously;
6. Installing EverWeb Site Shield Addon is really easy, you just tick a checkbox in EverWeb’s Site Publishing Settings screen! There is no configuration needed. Just publish your entire site once you have checked the ‘Use HTTPS Secure URLs’ checkbox.

To purchase EverWeb Site Shield Addon, just check the Use HTTPS Secure URLs’ checkbox. A dialog box will appear which will guide you through the purchase process.

Contact Forms Enhanced Addon

EverWeb’s Contact Form Advanced widget debuted in EverWeb 2.0 as a replacement for the original Contact Form widget. Whilst you can still use either widget in your site, the Contact Form Advanced widget is:

1. More Secure than the Contact Form widget through the use of SMTP Settings in the Widget Settings.
2. Has 17 different Form Control types so you can control and customize data input in to the form just as you want.
3. Improved SPAM protection. The use of forms in a website is one way in which SPAMmers can infiltrate your email box with SPAM. EverWeb’s Contact Form Advanced widget uses Google’s reCAPTCHA to help reduce this attack vector.
4. Enhanced Form Confirmation and Submission Settings are included so that you can highly customize your form. You can even forward your visitor to a different page in your site once they have clicked on the form’s submit button.
5. Advanced Form Error Validation helps guide visitors if they have not filled out the form correctly and try to send it to you.

The EverWeb Contact Forms Enhanced Addon Advantage

These above features make the Contact Form Advanced widget the perfect tool for form creation in EverWeb. The Contact Forms Enhanced Addon, introduced in EverWeb 3.0, seamlessly integrates with the widget and offers the following advanced features:

1. Easily manage your Contact Form data from within your EverWeb Client Area.
2. Reporting on your Contact Form data is also easy and customizable.
3. Contact Form data can form the basis of mail shot campaigns by exporting the data out in to CSV format.
4. Contact Form data is securely stored on EverWeb’s Servers.
5. Use ‘Calendar’ and ‘Select Time’ Form Controls to create your own in-form calendar which can be used as the basis of a booking system.
6. Your customers can upload files to you from within the form using the ‘File Upload’ Form Control.

To purchase EverWeb Contact Forms Enhanced Addon, add the Contact Forms Advanced widget to your page then click on the ‘Contact Form Enhanced Add-on’ field then click on the ‘Add Contact Form Enhanced Features’ menu option. You will then be guided through the purchase process.

EverWeb SEO Power Up Addon

The most recent addition to EverWeb’s collection of add-ons is SEO Power Up, which debuted in EverWeb 3.4. The new add-on builds upon EverWeb’s existing built in SEO features to giving you more customization options to fine tune and focus your SEO.

EverWeb SEO Power Up lets you add your own keywords to individual pages, set the priority of your pages for SEO purposes and the frequency in which web crawlers crawl your pages. You can even designate pages in your site that you do not want to be included in SEO.

To purchase EverWeb SEO Power Up, just go to our secure online store.

More features will be added to SEO Power Up in the upcoming EverWeb 3.5, as well as a host of new features including site wide search, so check back on our blog or go to the EverWeb Forum for the latest news!

When you start to build your first website you may or may not, already know about SEO. It may be something that is extremely important to you. It may be something that you have no idea at all about. It may be something that you think might be important to you but it is shrouded in mystery that it seems almost magical or mind bogglingly confusing.

In this post, we are going to demystify SEO and explain what it is and why it can be important for you to implement it in your EverWeb created website.

What Exactly is SEO Anyway?

SEO is an acronym for Search Engine Optimization. SEO is a method by which you tune, or optimize, your website to its best advantage to Search Engines, such as Google, Bing and Alexa. The better you optimize your website, the better the chances are that your site will appear higher up in search engine results rankings.

When you enter a search term in to your browser’s search box, the search engine behind it (e.g. Google) will present you with a set of ranked results based on your search criteria. Simply put, you use SEO to improve your chances of ranking higher up in these such search results. As such, SEO can also be thought of as a process that is applied to your website. SEO is not hardware. SEO is not software. SEO is a methodology that you apply to your website.

Should Everyone Use SEO in Their Website?

Typically, you will want to apply SEO to your website if you run any form of business. Equally, you will probably want to apply SEO to your site if you just want it to be more visible on the Internet. On the other hand, you may not want to apply SEO at all to your site e.g. you may have a site just for personal reasons so it is not important for you to try to reach as many people as possible with your site.

Reasons to Apply SEO to Your Website

1. Potentially higher rankings in Search Engine Results Pages. When done correctly, SEO will improve your rankings.
2. Your Audience will be able to find you more easily! SEO is good to use as you can target the words that you think visitors will search on. If done correctly, your (potential) audience will find you more easily!
3. Customer Reach: SEO can be a great way for potential new customers to find you!
4. Better Customer Reach translates to more traffic to your site.
5. SEO Is Free! You do not have to pay anything to apply SEO to your site. You should not have to pay anyone to apply SEO to your site!
6. Improves Brand Awareness. Even if someone does not click on your website link in a search results set, the fact that you are visible may bring them back later to your site.
7. The effect of SEO can also be measured from your site’s statistics so you can adjust you SEO to see what works and what does not work.

Investing in SEO in Your Website

Just like building a great looking website, SEO is an Investment – and it should be thought of as a long term investment. As your business grows and develops over time, so your SEO should be in step with your business at the same time.

As part of the SEO process you will use Keywords, or phrases, in your website to help search engines focus on what you think is important. These Keywords may need to change over time as your business changes. It is, therefore, always important to remember that your website is a dynamic tool and your SEO should be too.

SEO As a Dynamic Concept

Your business will probably change over time due to internal and external factors. The same is also true of SEO which is not static concept but a dynamic, evolving concept. Changes in SEO usually relate to changes made by search engines as they adapt to our ever changing browsing habits. For example, a few years ago, Google decided to prioritize searches made on mobile devices over those made on desktop devices. It seems obvious now that the priority for search has changed with the growth in mobile device usage over the last ten years.

EverWeb is always looking out for changes in the way the search engine giants change the dynamic around search. One such change, for example, comes in the upcoming EverWeb 3.5 which will automatically add Open Graph Tags if you have purchased EverWeb SEO Power Up addon.

How to Begin with Your SEO Journey…

SEO in EverWeb has always been baked in to the product which means that you usually do not need to focus on it if you do not want to. If you do want to apply SEO to its best effect in your site, the best way forward is to use our SEO for EverWeb Video Course. This concise course guides you through how to apply SEO to your site’s best advantage.

EverWeb gives you most of the tools that you need to implement SEO but you can go further using our SEO Power Up addon. This addon allows you more customization options than ever so that you can prioritize what you think is important for your site’s SEO. The addon also provides more information to search engines about your site’s pages, their importance and priority. Check out the link above for more details.

Using SEO in your site can be advantageous to your business if used in the right way and if you invest in it for the medium to long term. There is no mystery around SEO either, just some easy knowledge building and experience to find out what works best for your site!

One of the most important aspects of web design is your content. The text that you use tells your visitor a lot about your website, your company and its company culture. The way you present your site’s text itself also acts to visually reinforce these characteristics.

There are many ways in which you can style your text in EverWeb, from the simple TextBox to widgets that use the Styled Text Editor to EverWeb’s own blogging environment. Then there is also the Text Inspector which allows you even more styling options for your text.

Why Use the Fonts Panel?

All of the above features allow you to style text and some of these features offer unique properties, such as indented quotes in blog posts, or Text Direction in the Styled Text Editor. There is, however, always one tool that is always available to you at all times: The Fonts Panel.

In addition to its availability being ubiquitous in EverWeb, the other big advantage of the Fonts Panel is that it has the most amount of text styling features that you can find in one place. That is a valuable asset to your workflow when building your website! Save time and effort by doing most of your Text Styling in one place rather than having to flip from, for example, the Text Inspector to the Shape Options tab to Color Picker

Accessing The Fonts Panel

Accessing the Fonts Panel is easy. Click on the Fonts button in EverWeb’s Toolbar. To make things even easier, though, just press the Font Panel’s Command+T shortcut key instead. This will toggle the Fonts Panel on and of at the touch of a button.

You can access the Fonts Panel at any time. You do not have to have any text selected either, so the Fonts Panel can always be sitting there, ready for when you need it. If there is ever a time where you know you have called up the Fonts Panel but cannot find amongst the windows on your desktop, just go to EverWeb’s Window menu. At the bottom of the menu select ‘Fonts’ from the bottom of the list. The Fonts Panel will come to the foreground.

Working with the Fonts Panel

The Fonts Panel dialog box has most of the options that you will ever need to style your text. Choose your text font from the Font Family column, the font weight from the Typeface column and the font size in the Size column. To get exactly the right font size that you want, overtype the number that is highlighted under the word ‘Size’.

Why Use Collections?

You can also collect fonts in the Fonts Panel together in to a Collection, which you can then access from the column on the left hand side of the Fonts Panel. This is useful if you want to have certain fonts and typefaces easily available for your EverWeb website Project. You may, for example, want to have a specific Font Family and Typeface for your page’s title, subheadings, footnotes and so on. Grouping Fonts Family and Typefaces in one Collection gives you a quick, easy solution that will save you time and effort.

Adding A Collection to the Fonts Panel

To create a Collection

1. Click on the ‘+’ symbol in the bottom left hand corner of the Fonts Panel.
2. A new collection called ‘New-xx’ will be created where xx is a sequential number e.g. New-11. Double click on the new Collection name and rename it e.g. with your project file name.
3. Next click on the ‘AllFonts’ collection which is at the top of the Collections column. All the fonts on your system will now be listed.
4. Select a Font Family, and Font Typeface that you want to add to your new Collection e.g. Helvetica, Bold. Use the Search box to quickly find the Font Family if you need to.
5. Your Font Family, Font Typeface should be highlighted in their respective columns.
6. Next, click on the Settings Cog in the bottom left hand corner of the Fonts Panel.
7. Choose ‘Add to Collection’ then click on the name of your collection from the list. The font will be added to your collection.
8. Repeat the process for all the specific fonts styles that you use in your Project file.

You have now added specific Fonts Families and Font Typefaces to your collection. You can now apply these to your text selections. Once you have applied the font family and typeface from the collection, the only thing you will need to do manually is to select the font Size.

Alternatively, you could set up one Collection per Font Family/Typeface to represent your project files page titles, Subheadings etc. For example, you could create a Collection called ‘Title’ that has just a Helvetica Bold font in it. Another Collection, ‘SubTitle’, could have just one item in it e.g. a Helvetica Light Oblique and so on…

Adding a Default Body Text Style

As you may already know, you can set up a default base font family, font style and size in EverWeb so you do not need to add this in to your own Collection.

Use the Format-> Default Styles… menu option. When you click on the Body Text font, the Fonts Panel will appear if it is not already visible on screen, Change the Font Fa mily, Typeface and Size to the new default that you want. If you want to change the font color default, use the specific option ‘Body Text Color’ in the Default Settings dialog box and not the color swatch in the Fonts Panel.

When you have finished, remember to click on ‘Save’ to apply your changes. Any new TextBox, new widget that you add that uses the Styled Text Editor, or new blog post that you create will adopt the new default settings.

Other Uses of the Fonts Panel

One of the useful features of the Fonts Panel and its Collections is that you can immediately see which fonts are web safe. If you have downloaded Google Fonts, you will also immediately which Font Typefaces the font has.

The Fonts Panel is where you can apply other formatting features, such as Strikethrough, to your text. There is also an option for text shadowing so that you do not have to go to the Shape Options tab to achieve the effect that you want. With the Fonts Panel, it is all on one place.

Once you have finished styling your text using the Fonts Panel, just press Command+T to toggle for the dialog box to disappear!