Mac SEO Blog

The latest version of EverWeb – version 4.4 – adds a number of important design tools that will help you create even more incredible websites! From Containers to borders and scrolling effects to navigation menu fill types, we believe that our latest update will give you immense creative freedom.

One extra set of new features comes with the addition of the new Mouse Transitions and Animations feature. This is located in the revamped Shape Options tab section of the Inspector Window on the right hand side of the EverWeb UI.

Why Use Mouse Transitions and Animations?

Using mouse transitions and animations can be a great way to help focus your visitors on either your content or on the ‘Call to Actions’ within your pages. The key to using this kind of feature is to use it sparingly. This is for a couple of reasons: the first reason is that you will want to alert your visitors to what is important (from your perspective) as they are mousing over the page. If you have too many transition or animation effects in place, then what you want your visitor to focus on will be lost. So, in this instance, less is more. The second reason for using these effects sparingly is that the more effects you use, the more it will drag down the performance of your page. Keeping your page performance snappy is always good as this helps keep your visitor in your site. In situations where a page is slow to load, you are more liable to have your visitor click away from your site.

Mouse Transitions and Animations In Action

You can add a mouse transition or animation to virtually any object. Typical case uses are for call-to-actin type scenarios e.g. buttons or text that you want visitors to be aware of when they mouse over them. Simply select the object that you want to use an animation or transition with then go to the Shape Options tab in the Inspector Window. Check the checkbox to the left of the section title “mouse Transitions & Animation to activate the settings.

The first field to look at is Transition Time which is the time that it takes the effect to complete. You can set the value for this field from zero to 500. The higher the number, the slower the effect plays out. The next two fields are both dropdown menus with the same contents in each. The Mouse Over and Down Animation dropdown menus have 41 different effects to choose from. You can trigger the effect for either a mouse over or mouse down event, or for both events if you want. As previously mentioned, using these effects sparingly is often more effective, so our recommendation is to use one effect only on an object rather than both.

When applying effects, be careful of the object that you apply them to, and the type of effect that you use. For example, applying an effect to a Navigation Bar Widget may be more annoying than entertaining… With this in mind, we recommend that you test out your animation effects before you publish your site to make sure that the effect you have chosen is appropriate to the object on the page. Once you have tested, and are happy with the effect, publish your site.

Other Useful Mouse Over and Mouse Down Effects

Whilst Mouse Transitions and Animations Effects are new to EverWeb, there are also some effects that can be used from earlier EverWeb versions. Whilst in the Shape Options tab, take a look at the Fill section near the top of the settings. Here you will see a dropdown menu, which by default is set to ‘Normal’. This dropdown represents the state of the mouse when it is not in a mouse over or mouse down state. If you click on the dropdown, you will see options for ‘Mouse Over’ and ‘Mouse Down’. If, for example, you set the dropdown menu to Mouse Over, you can now set options in the Shape Options tab for this specific mouse state.

The easiest example is where you have a button on your page that you want to change color when your visitor hovers, or mouse overs it. To make this happen, first select the button shape then change the Fill section’s dropdown menu from Normal to Mouse Over. Next, change the Fill menu from ‘None’ to ‘Color Fill’. Once you have done this, change the color swatch to the color you want when the visitor mouses over the button. You are now all set! You can test this out directly in the Editor Window just by hovering over your button shape to see it change color.

EverWeb’s new Mouse Transitions and Animation feature is super easy to use and when combined with existing effects, also expands your page design possibilities.

The new Containers feature which recently debuted in EverWeb 4.4 brings you new ways in which you can add unique content to your website. EverWeb Containers are flexible so you can design features for your site in whatever way you want. This may lead you to the question of whether you should be using Containers in your site or widgets. In this post we will explore your options.

What Is Your Design Goal?

The most important decision you will need to make when choosing to use either a widget or a Container is what do you want to achieve? What is your design goal? For example, if you are wanting a Call To Action button, you may prefer to use a Container so that you can add Mouse Actions and Transition effects. If you are wanting images to scale you may want to use a widget instead using, for example a Text Section or FlexBox widget.

Getting To Know EverWeb’s Features

As well as knowing what your design goal is, getting acquainted with the features of EverWeb that can make this goal achievable is beneficial. In this respect, getting EverWeb’s FlexBox and Text Section widgets will help you. There may also be useful third party widgets too that could be of use to you. The FlexBox and Text Section widgets offer built in features all in one place which may be to your advantage as they offer flexibility as well as ease of use. It is also important to know the differences between the them. Sometimes, though, you might need to experiment using both widgets and Containers to see which one suits your design goal best. For starters, check out our videos on the two EverWeb widgets to see what they offer and how they differ.

EverWeb’s built in widgets have been around since EverWeb 2.8 so many EverWebbers will already have experience using them. When it comes to Containers, this is a completely new feature that has only recently debuted in EverWeb 4.4 so there are a lot of new possibilities to explore.

Containers: Add Action To Your Design

One of the main reasons as to why you would use Containers instead of widgets is when you want to add some kind of action to elements of your design. The new features of EverWeb 4.4 make this very easy to achieve. You can add, for example, add Mouse Transitions and Animations or Scrolling Effects to specific design elements, such as making a button jiggle, in order to bring attention to that feature of the Container. Take a look at our video on website design and Containers to see some of the possibilities.

Adding “action” to specific objects in Containers is a key differentiator between Containers and widgets. Another differentiator is that you can design elements horizontally, vertically or in a free-form manner in responsive pages. The FlexBox and Text Section widgets also allow for horizontal and vertical layouts but in a more restricted way. If you need more of a free-format design in your responsive page, Containers are probably the way to go.

Where widgets shine, though, is that they offer a structured approach and are responsive, whereas Containers are fixed width in nature, even though you can also use them as full width objects with a maximum width setting if desired.

Layout Types and Layering Content

One area where Containers really come in to their own is the fact that you can layer containers on top of each other to provide the effect that you want e.g. the creation of layered backgrounds that content sits on top of. The other factor here is that you can also mix and match layout types as much as you want e.g. you can include columns, rows and even free flow Containers as much as you like.

Mixing Media Types

The Text Section and FlexBox widgets allow you to mix text, images, buttons and video content. Most times this is probably sufficient, but if you want more options on using your existing media, or want to include other media in your design, Containers are likely to give you the additional flexibility that you need. And, of course, you can still use text, images, and video within a Container.

For example, you can use Shape Fill options in a Container which will give you many extra features for images. You can use Map Fill, Video Fill or SlideShow Fill and have more options your disposal than if you used a widget.

Scaling Images

If you are using images in your design, you will need to decide whether you want them to scale. If you do, then you will likely choose to use the FlexBox or Text Section widget in favor of a Container, as these widgets offer you minimum, default and maximum width options e.g. set the image width to 50% and it will scale as you change the width of the browser window.

Remembering Responsiveness

One of the main advantages of using the FlexBox and Text Section widgets is that they are fully responsive, whereas with Containers you will need to remember that they are essentially fixed width which may limit you in your design goal. We will be adding more features to Containers in future, so the scope of what Containers can do may change in the future.

Conclusions

When it comes to using widgets or Containers, widgets can be seen as an out of the box solution with responsiveness, a structured approach and generally design flexibility to suit most needs. Where Containers have the advantage is when you need more flexibility such as using different media types, or if you need to use a free-flow approach in your design. Containers are easier to directy edit as well, especially, for example, when using text, or when using margins.

Our recommendation is that if you are not clear as to what will work best for your website, then experiment with widgets and Containers to see which needs your needs best. In some instances it will be clear that a widget is better, in other instances, a Container could clearly be better. In other circumstances, you could use either, and it is then down to personal preference as to what you use.

https://youtu.be/2JKs8XgVib8

The recently released EverWeb 4.4, for macOS and Windows, features a great new way to group objects together in your website – Containers! Containers are perfect for use in both fixed width and especially responsive EverWeb sites. In this post, we will be looking at how easy it is to work with them.

Introducing EverWeb’s Containers Feature

Containers allow you to group objects together within your site’s pages in an easy, flexible way. You can use this feature in fixed width page layouts but Containers are probably at their most useful when added to a Responsive page layout. You can add Containers inside the Responsive Row widget, and you can even nest containers inside each other. As such Containers are a boon to Responsive page designs adding ways to create vertical design features, as well as complex layered design possibilities. Objects in a Container can be arranged in either a Column, Row, or Free Flow format

You can add virtually any object in to a Container, except for the Responsive Row widget. So, you could add, for example, a widget, image, shape, video, and even other containers, in to a container, to get the design you desire.

Creating a Container

There are a number of ways in which you can create a Container and add objects in to them:

• Using EverWeb’s Toolbar: EverWeb 4.4 adds a Container icon to its Toolbar. When you click on this, you will see a dropdown menu with four choices: Container Column, Container Row, Container Free Flow and Responsive Row. The inclusion of the Responsive Row widget on this list is logical as it is, in itself a container as it holds objects within it.
• Using the Object Label Toolbar: Use the ‘+’ (Add) button to add a container to the current object. You will find the ‘+’ button in the Object Label Toolbar of the Responsive Row widget and in any Container object.
• Using Contain As: To create a Container using ‘Contain As…’, select two or more objects on the page that you want to group together. Next, right, or secondary, click and choose the ‘Contain As’ menu option. Choose the type of Container that you want to add the selected objects in to, i.e. Column, Row, or Free Flow.
• Right, or Secondary, Mouse Click: In many instances, you can easily add a new container to the page just by right mouse clicking. Depending on the context, you can either use the ‘Add To Page’ option, or the ‘Add to “selected container”‘ option to a container.
• The last option in the list is the Insert-> Container menu option. Choose the Container type that you want to add from the list.

Container Features

Once you have added a Container to the page, you will notice that it has a number of features:

• Object Label Toolbar: The Object Label Toolbar lets you easily add objects in to the Container using the ‘Add’ button, or change the Container’s layout type, object alignment within the Container, or change the name of the Container using the ‘Settings Cog’ icon. The Toolbar also includes context sensitive up/down arrows so you can easily move the Container up or down the page. There is also a Trashcan icon to delete the Container. Alternatively, make sure the Container is selected then just used the Backspace key on your keyboard to delete it.
• Move Icon: In the top right hand corner of any Container, is the Move icon. This allows you to easily move the Container around your page without accidentally moving objects that may be within the Container itself. If you have nested Containers, i.e. Containers within Containers, you can easily move them in and out of each other. However, if you are trying to move a Free Flow container out of an another container, you will need to hold down the Command key on a Mac, and the Ctrl key in Windows, when drag and dropping the Container using the Move icon.
• Padding Rectangle: By default, EverWeb adds in 20 pixels of padding to the inside of the Container. If you want to change this, go to the Metrics Inspector. Use the Margins and Padding section to change the default values to the ones that you want to use.
• The ‘+’ Button: Simply click on the Add button then choose the Container type that you want to add in to the existing Container.

Adding, Moving and Deleting Objects in a Container

Once you have added a Container to your page, you will see that in the middle of the it is a large ‘+’ button that encourages you to add an object in to the Container! This button is the same as the one you will see if you add a Responsive Row widget to the page. Just click on the button and add the object that you want from the dropdown list.

You will only see this button when you first add a Container (or Responsive Row widget) to the page. You do not have to use it to add your first object in to a Container. You can use the following methods instead at any time to add an object:

• The ‘+’ button in the Object Label Toolbar: Click on the icon in the Container’s Toolbar, then choose the object that you want to add.
• Right, or secondary click: Easily use your mouse to add objects. Right, or secondary, click inside the Container then select the Add to Container menu option. Choose the object you want to add.
• Drag and Drop: Simply drag and drop the object you want to add in to the Container.
• The Insert Menu: With the Container selected, click on the Insert menu and choose the object you want to add.

Once you have added the objects that you want to the Container, you can manipulate them in the same way as you would if they were just in the design canvas. As you would expect, in a Container Column, you can only move objects up or down, and in a Container Row, from side to side.

You can move objects out of a Container just by drag and dropping them or by right mouse clicking and choosing the Remove from Container option. If you are using a Container Free Flow, you will need to hold down the Command key on a Mac, or the Ctrl key in Windows, when dragging an object out of a Container.

As you would expect, to delete an object in a Container, just select it then hit the backspace key.

Naming Containers

If you are using a large number of Containers in your page, we recommend that you name them for ease of reference. This is especially useful if you are nesting containers within each other or using Containers in conjunction with other objects such as the Responsive Row widget.

Nesting Containers

One of the great features of Containers is that you can nest containers within containers. You can nest to as many levels as required. Nesting Containers also means that you can mix the Container types that you use within each other if you need to. Nesting Containers means that you can layer your design, for example, you could create a product sales Container with the outside Container being a column Container acting as the background. Inside this Container, you could have a TextBox title and description, an image, and a button shape. You could also have buttons in a row Container acting as a visual rating system for the item you’re selling (e.g. the item rates 3 stars out of 5.)

Nesting Containers give you many design possibilities. Note though that containers are fixed width so make sure that you design with this in mind. We usually recommend a width of about 320 pixels. You can, however, use EverWeb’s Full Width feature to make your design more versatile, for example, by setting the outer most container as Full Width in the Metrics Inspector, but with a Maximum Width value set to, for example 600 or 800 pixels.

EverWeb’s new Containers will revolutionise your responsive designs and we’re hoping to add more capabilities in the future! Stay tuned for more developments!

We are thrilled to announce the immediate release of EverWeb version 4.4 for macOS and Windows. Our latest update is packed with lots of new features! Containers, Scrolling Effects, Mouse Effects, Padding and Margins and much much more! See below for a full list of what is new, updated and fixed our latest EverWeb release.

Which Version of EverWeb is for You?

EverWeb 4.4 is available to you on the following Operating Systems:

• If you are running Microsoft Windows 10 or 11.
• If you are running an Intel Mac running macOS High Sierra, Mojave, Catalina, Big Sur, Monterey, Ventura, Sonoma or Sequoia.
• If you are running an Apple Silicon Mac running macOS Ventura, Monterey, Big Sur or Sonoma, EverWeb will run natively without the need to use Rosetta 2.

Older Operating Systems can run the following versions of EverWeb:

• If you are running OS X 10.10 – macOS 10.12 (OS X Yosemite, OS X El Capitan, macOS Sierra) EverWeb 3.4.2 is for you.
• If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 2.9.1 is available for you.

EverWeb 4.4 Includes…

New Features

• [NEW] All New Web Framework Engine –We have revamped and re-written the entire EverWeb website framework. Your websites will load faster and are much more efficient. All shape elements and borders use CSS instead of images.
• [NEW] Scroll Effects Engine – Pin elements (top/right/bottom/left), pin-stack, pin-push, set custom scroll start positions, and add live scroll actions: fade, blur, color-swap, rotate, remove, scale, and custom scroll speed.
• [NEW] Container Object – A single control that groups elements as Row, Column, or Free Flow. Convert multiple selections via Right-click, Contain As or Arrange, Contain As.
• [NEW] Selection Label & Inline Actions – Drag from the new element label; quick-access Delete, Settings, and “+” (adds items inside Responsive Rows/Containers).
• [NEW] Margins & Padding (Inspector, Metrics) – Per-element margin/padding, including text inside textboxes.
• [NEW] Mouse Effect Transitions & Live Preview – Hover or click to trigger animations; effects now preview inside the EverWeb Design Canvas.
• [NEW] Rectangle Per-Corner Radius – Independent control for each rectangle corner radius.
• [NEW] Image Shadow – New image based shadows in addition to color shadows.
• [NEW] Navigation Bar Selected-Page Style – Use Mouse-Down fill as an active-page state for your navigation bar.
• [NEW] Contact Form “Show Password” – Toggle to reveal hidden input.
• [NEW] Drag-and-Drop Video Fill – Drop video files, YouTube, or Vimeo URLs directly onto Video fill objects; dropping an image sets the thumbnail for the video
• [NEW] Head-Code Validator – Flags common mistakes next to the Head Code field in Site Publishing Settings.
• [NEW] Caching Improvements on Publish – Image files should appear more reliably after publishing websites avoiding browser caching issues.
• [NEW] Expanded Mouse-Effect Properties – Shadows, opacity, borders now supported for different mouse states.
• [NEW] Improvements to Google Fonts – updated and improved Google Fonts support
• [NEW] You can now rename your Project file directly from the Projects Window
• [NEW] When creating new websites, the default name NEW WEBSITE now increments e.g. NEW WEBSITE 1, NEW WEBSITE 2 etc.

Changes

• [CHG] Border & Stroke Options Combined – Unified in one panel.
• [CHG] Toolbar Icons Unified – Consistent Mac/Windows artwork; Rotate and Mask buttons removed. Add new Containers button.
• [CHG] Insert Menu Shortcuts – Quick add: Video, Map, Slider elements.
• [CHG] Site Search Widget – Performance improvements.
• [CHG] Localization – Most new features localized.

Fixes

• [FIX] Parallax Scrolling – Works on mobile; multiple bugs fixed.
• [FIX] Responsive Row Rotation of Embedded Elements– EverWeb Design Canvas matches browser output.
• [FIX] Responsive Row Image Fill + Opacity – Accurate rendering below 100% opacity.
• [FIX] Navigation Bar Height (Responsive) – Correct size calculation.
• [FIX] Link Menu Children – No ghost sub-pages after folder deletion from link menu.
• [FIX] Hidden Objects & Inset Margins – Behave correctly in Responsive Rows.
• [FIX] Copy/Paste Reliability – Works across pages/projects, maintains positions, handles Containers.
• [FIX] “Do Not Publish” on Main Page – Bug preventing re-enabling is resolved.
• [FIX] Linking With Scroll Positions – fixed creating a link with a scroll position to another pages

How To Update EverWeb for Windows

You can easily update EverWeb for Windows by either:

1. Launching EverWeb then opening a project file. From the Help menu at the top of the screen select ‘Check for Update’ or by
2. Downloading EverWeb from the EverWeb website.

After downloading EverWeb, double click on the EverWebSetup.exe file. Note that the file name may have the version number appended to it and that you may need to initially trust the file to be able to download it.

Follow the instructions in the Installation Wizard until the installation is finished. You can delete the EverWebSetup.exe file afterwards by dragging it to the Recycle Bin.

How To Update EverWeb for macOS

You can easily update EverWeb for macOS 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.

About Your EverWeb Update

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 update period from your EverWeb-> Preferences… window on macOS, from your Edit-> Options menu on Window,s 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 its 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.