The new Container feature that debuted in EverWeb version 4.4 is a great way to realize your design goals as it’s incredibly versatile. In this post, we are going to show you how to create an effective, customized navigation for your home page.

The Scenario

In this scenario, we are going to create a fictitious online usite for the EverWeb User Manual. You can find the EverWeb User Manual from the link in the bottom left hand corner of the Projects Window when you launch EverWeb or from the Help-> EverWeb PDF Manual menu option. In this scenario we are going to create 12 buttons which will take you to each of the first twelve chapters of the online manual.

There are various different ways in which this project can be achieved, such as using a Text Section widget, but in this instance we are going to use Containers as this will enable us to be more creative with our design.

You can see a what we are going to achieve in the cover image at the top of this post. The twelve buttons are styled with rounded corners. Each button is comprised of two half rounded rectangles in a container. The spacing of the buttons is also something which can be controlled as well. These type of features are not achievable with the Text Section or FlexBox widgets.

Prerequisites

The only prerequisite you will need for this tutorial is to have EverWeb 4.4 or higher, for macOS or Windows installed. If you have a version of EverWeb prior to this, click on the EverWeb-Check for Update… menu option on a Mac or use the Help-> Check for Update… if you are using Windows to update your version of EverWeb.

Creating a Container For The Chapter Buttons

The first thing we need to do is to create a container within which we will add all of the chapter buttons in to, as you can see in the image at the top of the post. To do this, click on the Containers button in the Toolbar and select ‘Responsive Row’. Once you have added the Responsive Row to the page, click on the Settings Cog in the Responsive Row’s Toolbar, then click on Name… and rename the Responsive Row as ‘Chapter Row’.

In this example, we will add margins around the Responsive Row widget. With the widget selected, go to the Metrics Inspector and set top and bottom margins to 20 and the left and right margins to 30 pixels in the Margins & Padding section. We can now start on the button design.

Creating The Button Design

As you can see from the image at the top of the post, the button is comprised of two rectangle shapes ‘joined’ together. The rectangle on the left contains the chapter number. The side of the button has rounded upper and lower corners on the right hand side. The rectangle on the right contains the chapter title and has rounded corners on the upper and lower right hand side. The two rectangles are ‘joined’ together using a Container Row.

Start creating the button by clicking on the ‘+’ button in the center of the Responsive Row widget. From the menu, select the Shapes option then choose the first shape, which is a rectangle. Note that when you use the regular rectangle shape, you can change the look of any of its corners. If you used the next shape option, the rounded rectangle, you would only be able to change all the corners at once, not individually.

The next step is to style the shape as we want. First, click on the Metrics Inspector button so that we can adjust the size of the button. Set the button width at 30 pixels and the height to 35 pixels. Next, click on the Shape Options button and click on the ‘Custom Border Radius’ checkbox in ‘Borders Options’ to activate its settings. Set the upper and lower right borders to 20 pixels.

Finally, click inside the shape and enter the number ‘1’ for chapter one. Now we need to style the text and position it where we want it within the shape. To do this, select the text then go to the Text Inspector. Adjust the font and font size as you want. In our example, we are using Montserrat 18 point regular. To position the number correctly within the shape, go to the Alignment section and choose Right Aligned and Middle. The number will not look properly aligned as we want it so we need to adjust a couple of settings in the Spacing section. Here, set the After Paragraph value to zero and the Insert Margin setting to 5. Depending on the Fonts you use, you might need to experiment a little with these settings to get the alignment as you desire.

To complete the button, you may need to check that the height of the button is still 35 pixels in the Metrics Inspector. If it is not, then change the value back to 35.

Creating the Second Part of the Button

Now that we have created the left side of the button we need to create the right side of the button. Click on an area inside of the Responsive Row widget, then click on the Shapes button in the Toolbar. As before, click on the first shape which is the rectangle. Size this to be 200 pixels wide (to accommodate the chapter title) and 35 pixels in height.

This time we will round the corners of the rectangle on the right hand side. Again, make sure that the rectangle is selected, then go to the Shape Options tab and click on ‘Custom Border Radius’ in the Border Options section, to activate the settings. Set the right hand side upper and lower corner values to 20.

The final step is to add a Chapter Title in to the button. Click inside the button and enter the text ‘Welcome!’ as the title of our first chapter. Style the text using the Fonts that you used for the first button. Once you have completed the styling, highlight the Welcome! text, In the Text Inspector set the Alignment to Left Aligned. The After Paragraph value should again be zero and this time the Insert Margin value should be set to 10. Remember to also check in the Metrics Inspector that the button height is 35 pixels. Adjust the value back to 35 if needed.

If the second shape is to the left of the first shape, just drag and drop it so that it is to the right instead. You should have what looks like a pill shape button composed of two rounded rectangle shapes.

Next Steps…

Now that our button design is essentially complete, we will next add our design in to a Container, tweak the design a little so it looks like the button you see in the image above, then work with EverWeb’s Containers feature to get our navigation completed, tested and published. All this coming in Part Two!

The post Creating a Navigation Menu With EverWeb’s Containers: Part One first appeared on Website Building for Mac OS X | EverWeb Website Builder.

Last September, EverWeb released EverWeb 4.4 for macOS and Window. This was a big release with a lot of new features. One of those features, Containers, is so important that we added it to the Toolbar!

In this post, we are going look at Containers and the Responsive Row widget, what they do, and why Containers are key to your future website designs.

EverWeb and Responsive Web Design

EverWeb enables you to create websites in one of two ways: The first way is as a fixed width page design. This was the only page layout choice available when EverWeb launched back in 2015. That all changed in 2018 when EverWeb version 2.8 debuted introducing Responsive page design. The challenge was a significant one as we did not want to change the way EverWeb worked, or looked, for our existing users, when adding responsive website design features to the product.

The debut of responsive website design in EverWeb heralded the introduction of the Responsive page layout as well as four dedicated responsive widgets: the Responsive Row, Text Section, FlexBox and Responsive Image Gallery widgets. These widgets were specifically designed to help make working with responsive pages easier. Under the hood improvements in other areas of EverWeb also made for a great responsive experience without affecting the existing user experience. Over the years, both the core features of responsive design in EverWeb, and its associated responsive widgets have evolved.

The Importance of the Responsive Row Widget

Since its inception, the Responsive Row widget has been a cornerstone of responsive page design in EverWeb. The widget is unique in that it allows you to add other widgets and objects, such as TextBoxes, Images, shapes, widgets and media, in to it. This ability helps you to add fixed width and responsive elements more easily to your page design, making developing responsive pages easier and more flexible.

EverWeb Introduces The New Container Feature

EverWeb 4.4 introduced the new Containers feature in September 2025. At first glance, it might appear that Containers and the Responsive Row widget are pretty much the same thing. In many respects they are as both are ‘containers‘ in their own right, offering many of the same capabilities. For this reason, both are included in the new Containers Toolbar button.

The main features and differences you will find between Containers and the Responsive Row widget are”

• The Responsive Row widget allows you to wrap objects that are contained within it.
• Containers allow you to nest other Containers within each other.
• You cannot add a Responsive Row widget inside a Responsive Row widget.
• You can add Containers within Responsive Row widgets.
• Containers let you create row, column and free form designs within them.
• The Responsive Row widget aligns objects horizontally or vertically depending on screen size.
• Containers let you group multiple objects together even in a Responsive Row the layout stays the same.
• A Container does not wrap to a new line to align vertically.

Naturally the question that you might be asking is: Which should I be using in my website, Containers or the Responsive Row widget? At the moment, the answer both! We recommend using whichever feature meets the requirement of your website design best. The Responsive Row widget is a great way to align objects horizontally and/or vertically in a responsive page as well as allowing you to wrap objects. Containers on the other hand, give you new ways to design content by nesting design elements, thereby allowing you to stack elements on top of each other. Additionally you also now have more freedom to design vertically and in free format ways within the responsive space.

Now and The Future…

The second question that you are probably asking yourself is, what will happen to Containers and the Responsive Row widget in the future? As a new feature in EverWeb 4.4, the introduction of Containers paves the way to the future. We are working on adding more features and capabilities to Containers in the upcoming EverWeb 4.5 release to further to exploit their potential to the full, giving you unparalleled design capabilities. If you have not tried out Containers yet, we recommend that you do so to become familiar with them. Our Working With Containers video will help you get started.

The Responsive Row widget is not going away though, so your investment in this widget in your website is safe, as always. You can still develop with confidence using its features and capabilities. We recommend thought that you check out Containers, now and when EverWeb 4.5 releases, for exciting new developments and features.

The post EverWeb’s Containers or The Responsive Row Widget, Which Is Best? first appeared on Website Building for Mac OS X | EverWeb Website Builder.

EverWeb’s new Container feature is a powerful design tool, especially when used in the Responsive pages of your site. Introduced in EverWeb 4.4, Containers let you create horizontal, vertical and free format designs easily, with more flexibility than ever before, allowing you to add more features that you want, taking what you conceive into reality on your page!

A Container is an object that contains objects within it. In this post, we will explore one design possibility, other possibilities are down to your imagination!

The Design Concept: Creating a ‘Call To Action’ Container

Our design has two goals to achieve: The first is to explore EverWeb 4.4’s new Container feature, whilst the second goal is to create a ‘Call To Action’ (CTA). The image at the top of the post shows these goals in action. which is to create a Container that contains an item for sale, and a buy button which is our Call To Action. The aim of the CTA is to encourage our visitors to click on the button to purchase the sneaker shown in the image in the Container.

Containers: A Quick Overview

Although you can use Containers in a fixed width environment, we recommend using them in a Responsive Page Layout as this is where their full potential can be realized.

Adding a Container to a page in your site is easy, just click on the Containers button in the Toolbar. Note that there are also other ways of adding Containers to your page.

There are three types of container:

• Container Row – Use this Container type then you want to organize objects horizontally
• Container Column – Use this Container type when you want to organize objects vertically
• Container Free Flow – Use this Container type when you want objects arranged in a free format way

You will also see that the Responsive Row widget is also listed. This widget is included here as it is another form of container that you can add to your Responsive page design.

Additional Container Features

All Containers have a Toolbar positioned either above center or below center, depending on where the Container is on the page. The Toolbar accesses various Container settings. For example, use the Settings Cog to name the Container. You can also set the alignment of objects inside the Container Row or Container Column types. If you find that you want to change the Container type, you can do that as well. Any objects in the Container will automatically adjust.

You will also notice that all containers have a Move icon in their top right hand corners. This compass type icon helps you drag and drop containers without mistakingly moving their contents.

Nesting Containers

Containers are versatile so can be added in to a Responsive Row widget, and can also be nested inside each other, so if you need to you can, for example, have a container within a container with in a container. This will give you a lot more design options. Before starting any design, we recommend that you look at its purpose and how to structure it from a design perspective. For example, you do not want to over design so that you have more nested containers than you need. Keeping your design ‘efficient’ will also mean it will work better, and quicker as it uses less code, when you publish your site later on.

Creating a ‘Call To Action’ Container

In this example, we are going to create a design that will incorporate an image, text and a button which will be our ‘Call To Action’ to encourage our visitors to click on. In. this post, please refer to the image above to see what we are aiming for.

For this design we are using a Responsive page, so either create a new responsive page for your site, or use an existing one.

The next step is to add a Responsive Row widget to the page where you want to add the Call To Action container. Click on the Containers button in the Toolbar, then choose the Responsive Row menu item. Alternatively, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

A Responsive Row will be added to the page. The next step In our example is to add a background color to the widget. To do this, first make sure that the widget is selected on the page. Next, click on the Shape Options tab. If none of the settings are activated, you will need to select the Responsive Row widget to activate them. In the Fill section, click on the dropdown menu which is set currently to ‘None’. In our example we are going to use Color Fill, and choose a light grey color from the color swatch.

Now that we have our full width widget with a light grey background, we can add margins and padding. to the Responsive Row. This will make the Responsive Row and the objects it contains look better on the page, especially when the page is built out to completion. To add top and bottom margins, use the Metrics Inspector.

In the Margins and Padding section, set the top and bottom margins to 40, using the top and bottom outer fields to do so. You will see a grid appear above and below the Responsive Row when you apply the margins.

After adding the margins, we will add some padding to the inside of the Responsive Row. Using the inner box of settings in the Margins and Padding section, add padding of 20 pixels to all of the sides of the Responsive Row.

We can now proceed to add a Container inside the Responsive Row. In this example, we are going to use a Container Column as this suits our design best.

Adding and Styling Objects In The Container

First make sure that the Responsive Row is still selected. Click on the ‘+’ button in the center of the Responsive Row. A menu will appear. Click on the Container Column menu option A Container Column will be added inside the Responsive Row.

This Container will be the ‘background’ on which objects such as TextBoxes, images and shapes will be placed on top of. So we will first color this background Container, in the same way as did for the Responsive Row widget. using the Color Fill option in the Shape Options tab. In this example, we are using a pastel green color.

Next we are going to change the margins of the Container. Make sure the Container is selected, then go to the Metrics Inspector and change the margins from the default setting of 20 to 10.

We are also going to name the Container as it will make it easier to reference it later if we need to. To do this, click on the Settings Cog in the Containers Toolbar then choose the Name option. In our example, the Container will be called ‘Sneaker One’. Click on OK to finish. You will see that the name of the object has changed in the Toolbar.

We want the Container to be wide enough to be displayed on mobile devices. To change the width of the Container, go to the Metrics Inspector, and set the width of the Container to 320 pixels.

You may find that as you add objects in to a Container that its width changes automatically, so check every so often that the Sneaker One container remains at 320 pixels wide. Readjust the Container width as necessary.

Now we are going to add a second layer to the Container. Click on the ‘+’ button in the Sneaker One Container. From the menu, choose Container Column. Again, we are going to change the color of this Container. This time use the Color Fill menu in the Shape Options tab to set the color to a pastel orange. Name the Container ‘CTA Background’.

Adding Text, an Image and a Button To The Container

We now have the background style for the Container Sneaker One set up, we can now add an image in to the CTA Background container. This will be an image of the product that we are selling, in this example, a sneaker.

Again, click on the ‘+’ button inside the Container, then choose ‘Image’ from the menu. Alternatively, click on the ‘+’ button in the Container’s Toolbar. A placeholder image box will appear inside the Container. To add the image of the sneaker that we want to the Container, go to the Shape Options tab in the Inspector Window and click on the Choose button in the Fill section. Select the sneaker image that you want to use. Resize the image within the Container if you want to.

As we are going to be adding more objects in to the ‘CTA Background’ Container, we will take the time now to add a bottom margin of 10 to the image. Use the Metrics Inspector to do this in the same way as we did earlier.

After adding the Image to the Container, we can add a text title above the image. To do this, we will add a TextBox in to the CTA Background Container. First, we will make sure that the CTA Background Container is selected.

Click on the CTA Background Container’s + button in its Toolbar. Choose TextBox. A TextBox will appear. Replace the default text ‘Enter Text’ with the title text that you want, then style the text as desired, preferably using a Paragraph Style. Make sure that you resize the TextBox itself so that it fits properly within the Container. Drag and drop the TextBox so that it sits above the image if required. To finish, set the bottom margin of the TextBox of 10 so there is enough space between the TextBox and the Image beneath it.

Adding a CTA Button

The last objects to add to the Container are a text description below the image, and a Call To Action button.

Click on the CTA Background Container to select it. Next, click on the + button in its Toolbar and choose Shape, then the Rectangle shape. This will be added to the objects inside the CTA Background Container. If the shape is not under the image, drag and drop it so that it is. Next, change the color of the shape’s background. In our example, we made this yellow, and we also rounded the corners of the shape using the Borders settings in the Shape Options tab.

Set the width of the rectangle shape so that it is the same width as the image.

Within the rectangle shape, we are going to add a some text. Click inside the yellow rectangle shape and type in a description of the sneaker. Remember that shapes can always include text inside them. When finished style the text as desired, preferably using a Paragraph Style to do so.

The last step we need to take is to add the CTA button to the CTA Background Container. Select the CTA Background Container if it is not already selected. Use the + button in its Toolbar to add a rectangle shape, which will be used for the button. Style as rectangle shape as desired so that it looks like a button. Add a hyperlink to the button text which will take the visitor to a payment page, or a more information about the sneaker page.

Remember to add a top margin to the button (or a bottom margin to the text description shape) one you have to finished styling the button.

Check to make sure that the outermost container, Sneaker One, is still 320 pixels wide.

The design is now complete. Preview, before publishing, to test.

The post Creating a Call To Action Container in EverWeb! first appeared on Website Building for Mac OS X | EverWeb Website Builder.

As we closeout 2025 and enter 2026, all of us here at #TeamEverWeb wish all of our customers a very happy and prosperous 2026! Here’s a look ahead at what you can expect from EverWeb and website trends in 2026!

More Big EverWeb Releases in 2026!

EverWeb 4.5 is coming soon and we’re super excited! It’s going to be another big release like EverWeb 4.4 for macOS and Windows was. We are currently testing out new features and expanding on some existing features before we’re ready to release a public beta. We are very excited about this release, and we have lots of other plans for future 2026 releases and beyond!

Check out @everwebapp on X which is where we will be teasing out some of the new EverWeb 4.5 features such as fully customizable popup windows!

Stay tuned on this blog too as we will be updating you as to when the EverWeb 4.5 Public Beta will be available for you to try out before the official public release comes out.

EverWeb’s Perfect For 2026’s Website Design Trends

EverWeb 4.3 and 4.4 features marry up to design trends 2026, which pundits predict, will be focused on more human-centric design. This means a more organic approach to site design rather than the structured approach we have seen over the last few years. In reality we are talking about irregular layouts flowing sections, layered gradients and soft masks.

EverWeb 4.4’s new Containers feature is ideal for creating such layouts as you can create row, column or free-flow designs suitable for responsive environments. You can add a gradient fill type to your Containers as well to create the look that you want. To give your page a softer look, you may also find EverWeb’s Borders useful to soften sharp edges!

Check out our posts early in 2026 for exciting EverWeb 4.5 features that will also have a big impact on this 2026 design trend!

Oversized Typography

Oversized typography in your site will also be a key trend for 2026, with highly oversized headlines creating high contrast with the regular sized body text of your pages. EverWeb’s revamped Text Inspector that came in EverWeb 4.0, makes this a breeze to achieve, especially if you have set up Paragraph Styles, which will make supersizing your Headlines just a one click operation!

Tactile Design

Also flagged for 2026 is a more tactile approach to website design. Take for example, the humble Call to action buttons that are found in most websites. Why not animate these types of buttons when your visitors mouse over them? Or change the color of the button? Find out more about Mouse Actions and Transitions from EverWeb’s Shape Options tab.

It does not stop there though, as you can also use EverWeb’s Scrolling Effects to pin CTA buttons and shapes to where you want them on the page. Keep what is important front and center for your visitors at all times with this easy to use feature.

Retro Design Is Back…

Retro design styling is back as is brutalist design. Even anti-AI design style that employs non-perfect, rough textured designs will be a 2026 design trend. Designs though will also need to focus on accessibility as well as part of the mix, for example, designs that help reduce eye strain will gain traction.

Videos Are In For 2026

Adding video backgrounds to your pages, or objects on your page, will be a trend in 2026. EverWeb already makes it easy to add a video background to your page using the Video Fill option in the Browser Background section of the Page Settings tab. To add video fill to objects on the page, use the Video Fill options in the Shape Options tab instead.

Website Speed and Performance Remain Crucial

Whatever approach you take to your site’s design in 2026, you should always test your site out to make sure that its speed of page loading and the performance of each page is good. Over the last year, EverWeb’s continued to optimize these aspects of its code generator so that when you publish your website it will be as best optimized as it can be. However, when creating your page designs, you should make sure that performance draining objects, such as large image files and large videos, are avoided, especially when your site is viewed on a mobile phone.

For image files there are some quick wins here, for example, instead of using .png format image files, use .jpg format files where possible. This will save you a lot of time when the page loads. You can also use fewer images on the page which, again, is an easy solution. Another option is to use EverWeb’s Lazy Load Image option in the Shape Options tab which will only load the selected image when it is required, so avoiding having to load it at page loading time.

For video files, it is often best to use a service like YouTube or Vimeo which your site will link to, rather than having a video directly embedded in your site. This will save you bandwidth and will help speed page and video loading times. If you do need to use a video directly from your site, you may want to consider using a Poster Image which is displayed whilst the video loads in the background. You will find this feature in EverWeb’s Video Widget.

2026 will be an exciting, groundbreaking year for website design and EverWeb in 2026 will give you need design tools and features to make it even easier, and more fun than ever, to create just the site you have always wanted. Now and in the future!

Stay tuned as we will soon be covering the upcoming EverWeb 4.5 early in the new year!

The post Get Your EverWeb Made Website Ready For 2026! first appeared on Website Building for Mac OS X | EverWeb Website Builder.

Tucked away in the new EverWeb 4.4 release is a new option which lets you add an image as a shadow to an object in your website. In this post we will look at how to best use shadows in the pages of your EverWeb made website.

When To Use Shadows in Your Site…

Website trends over the last few years have favored a more ‘flat’ design approach, rather than using the previous skeuomorphic or realistic/rich design approach. Over the years, the flat design style has also changed by becoming softer, incorporating elements previously only found in skeuomorphic design. As such, elements such as using shadowing to your website’s design are coming back in to web design.

Adding shadows in your website can help to add some depth and texture to its design when used wisely – i.e. sparingly. Use shadows to draw your visitors to where you want them to look on the page. If you overuse shadows, you will fail to lead your visitors to where you want them to look. You may also give your visitors the impression that your site was designed years ago when skeuomorphic was in vogue. Again, not a good idea.

Guiding your visitors to so called ‘Call To Action’ items such as buttons, or important text, are areas where shadows can be usefully applied. In addition, you can use shadows to soften your site’s flat design so that it is more appealing and engaging. In this way you will give the impression that your site is modern but also warm and a little more 3D than 2D. When softening your site, the shadows should be subtle and not overt.

It is also important to remember to make sure that your design is accessible to those who are sight impaired. When contrast is reduced between elements on the page, this may make elements on the page more difficult to see. In these instances it may be better to use clear borders instead.

… and When Not To

Using shadows sparingly in your site can be advantageous to your visitors as we have just outlined above. However if you overuse shadows, you may find that your site’s performance is impacted as rendering these elements will take more time, especially on mobile devices.

The second concern is, as we mentioned above, accessibility. Make sure that your site’s as free of visual ‘obstacles’ as possible, poor use of shadowing being one such example. Poor color choices, such as green/red combinations or poor font choices are further examples that may limit your visitors access to your site if not used wisely.

Applying Shadows In Your EverWeb Site

To add a shadow to an object on page in EverWeb, such as a shape, image, button, or container start by selecting it. Then go to the Shape Options tab and check the box in next to the word ‘Shadow’ in the Shadow section to activate its settings. Tip! You can also click on the word ‘Shadow’ which will also activate the settings.

There are two type of shadow that you can choose from: Color and Image Shadow. The default is set to Color, as you can see in the dropdown menu to the right of the ‘Shadow’ section title. If you are using a Color shadow you will have the following options to choose from.

• Offset: The shadow offset from the object by 6 pixels
• Blur: The shadow is blurred with value of 6. You can set a value from 0 (No blur) to 99 (maximum blur). Blur is used to diffuse the shadow.
• Opacity: The default is set at 75% to create the default shadow. Opacity sets the transparency of the shadow. At 100% the shadow will be opaque. At zero it will appear transparent.
• Shadow Color: You can change the color of the shadow using the Color Swatch or Color Wheel.
• Rotation: The rotation wheel adjusts the angle of the shadow relative to the object. It is set at zero by default. Either use the dial or enter a value between 0 and 360 to change the angle of the shadow.

Adjust the values for each setting as desired to achieve the shadow effect that you require. If you are using an Image Shadow, you can use these options as well, plus additional options that are described in detail below.

Applying Shadows to Text

So far, we have discussed adding shadows to objects, but you can also add a shadow to text as well. Simply select the text that you want to add the shadow to, then use the same procedure as described above to add, and customize the shadow to your liking. In addition, you can also add shadow effects using the Fonts Panel in EverWeb’s Toolbar to your selected text if you prefer. The buttons in the Fonts Panel work in the same way as those in the Shadows section of the Shape Options tab.

Adding Image Shadows

If you want to apply an image shadow to your selected object, first change the type of shadow from ‘Color’ to ‘Image’ using the dropdown menu to the right of the ‘Shadow’ section title.

When using an image shadow, you may find that .png files are the best type of image to use as they eliminate the background color of the image being used. For example, if you have an image of a car in a .png file format, you can use the car as the main image and also its background creating a pseudo-3D effect.  

First select the image you want to add the image shadow to. Activate the Shadow settings as described above. You will see the settings shown are the same as for the Color shadow, except that the Color Swatch/Color Wheel has been replaced by a ‘Choose…’ button. Use this button to select the image that you want to use as a shadow. In our car example, the image being used as the shadow will be the same as the main image itself.

Change the Shadow settings as desired. In addition to the settings described above, when using an image as your shadow you have three additional options: Height, Width and Scale. Use the first to options to size the shadow as desire, and use the Scale option to if you want the image shadow displayed as Default (scale), Scale to Fit, Scale to Fill, or Stretch.

When you add a shadow to your page, you will see any changes you make immediately as you alter the Shadow settings. However, it’s always best to preview your page before you publish.

The post NEW EverWeb’s Image Shadow Feature! first appeared on Website Building for Mac OS X | EverWeb Website Builder.

One of EverWeb 4.4’s new features is Scrolling Effects. As its name implies Scrolling Effects give you an easy way to keep headlines, text information, images, and other objects that you want always visible on the pages of your EverWeb made website. It’s also great for when you want to keep reminder information, special offers, legal information or contact forms visible at the bottom of the screen. Scrolling effects are also great for when you want to pin social media icons to the side of your page!

Where To Use Scrolling Effects

To use Scrolling Effects you will need EverWeb 4.4 or higher, for macOS or Windows. If you are using a previous version of EverWeb, you can update it to the latest version using the EverWeb-> Check for Updates… menu on a Mac, or the Help-> Check for Updates… menu if you are using Windows. You can apply Scrolling Effects to objects in both fixed width and responsive pages.

Setting Up a Scrolling Effect

To apply a Scrolling Effect, first select the object that you want to use a Scrolling Effect with on your page. Next go to the Shape Options tab and activate the Scrolling Effects settings. Either click on the text, ‘Scrolling Effects’ or check the checkbox to the left of the Scrolling Effects section title.

After activating the Scrolling Effects settings, the first action you will probably want to take is defining the effect(s) that you want to apply to the selected object. Select one or more effect that you want from the ‘Scrolling Effects’ list. There are seven different types of effect to choose from:

• Blur
• Change Color
• Fade
• Rotate
• Scale
• Scroll Speed

Each Scrolling Effect has a value that you can change to suit your needs. You can also use more than one effect on the selected object if you want. This will give you great flexibility to create just the effect you want.

Activate at Scroll Location

The first setting in the Scrolling Effects section is ‘Activate at Scroll Location’. By default this is set to zero so the scroll effect will activate immediately when your visitor scrolls. If you set the value other than zero, for example 20, the scrolling effect will be triggered when the page has been scrolled down 20 pixels. 

When setting the value for activate at scroll location, you have two additional ways in which to enter a value…

• Use a ‘+’ number: For example, if you enter a value of +50, the scrolling effect will trigger at the current object position plus 50 pixels. 
• Use a percentage, for example, if you enter 10%, the scroll effect will trigger when the object is scrolled to 10% of the top of the browser

Behavior

The Behavior setting defines what type of scrolling effect is applied to the selected object. There are six different scrolling effects available:

• Pin To Top: The object will be pinned in the center of the top of the page
• Pin Stack: The first stacked object will be pinned to the center of the top of the page. Any following stacked pinned objects on the page will stack one under the other as the page scrolls.
• Pin Push: Objects will be pinned to center of the top of the page. As the page scrolls, the first pinned object will be replaced by the second pinned object, the second by the third, and so on.
• Pin To Bottom: The pinned object will appear in the center of the bottom of the screen.
• Pin To Left: The pinned object will appear at the left hand edge of the browser window.
• Pin To Right: The pinned object will appear at the right hand edge of the browser window.

Spacing

The next field is Spacing which sets the amount of space a pinned object is from the edge of the browser. For example, if Spacing is set to a value of 10 for an object that is pinned to the left, it will appear 10 pixels in from the left hand edge of the browser.

Reverse Action on Scroll Up

As its name implies, if you check this setting’s box, as you scroll back up the page, the pinned object will move back to its original location.

After completing the fields in the Scrolling Effects section, preview before you publish to see that the effect you have created is what you require.

The post Introducing EverWeb 4.4’s NEW Scrolling Effects Feature! first appeared on Website Building for Mac OS X | EverWeb Website Builder.

The latest release of EverWeb, version 4.4, is full of new, easy to use, but highly effective features that will add a new dimension to your website’s design. The addition of the new Padding and Margins feature is a case in point. It is simple to use but gives you greater flexibility than ever before when it comes to working with objects such as TextBoxes, images, Containers and a variety of widgets.

Margins and Padding Before EverWeb 4.4

Before the launch of EverWeb 4.4 you were limited in the use of margins and padding options within the pages of your site. You could add left and right margins to full width objects using the Size section of the Metrics Inspector. Additionally, some of EverWeb’s built in widgets also featured some options to control margins and padding. The most notable widget in this respect is the Navigation Bar widget where you have padding and spacing for menu options. The FlexBox, Text Sections and the Responsive Row widget all feature some of these features as well.

With the advent of EverWeb 4.4, padding and margins becomes a universal feature for all objects in your site.

EverWeb’s New Padding and Margins Feature…

The introduction of universal margins and padding in EverWeb 4.4 has led to the reorganisation of the Metrics Inspector. The Left and Right Margins fields in the Size section have disappeared, replaced by the brand new Margins & Padding section. If you have used the margins features of previous EverWeb versions, these settings will be preserved in the new Margins and Padding section. Also, if you have used the margin and padding features found in widgets, these will be unaffected.

The new Margins & Padding section of the Metrics Inspector uses a visual representation of an object. The rectangle has a set of fields on each of its sides, both inside and outside of it. The four fields inside the rectangle represent Padding whilst the fields outside of the rectangle represent Margins. You can apply margins and/or padding to any, or all sides, of an object as required. When you do so, you will see this displayed on the object in the Editor Window.

As already mentioned, padding applies spacing within an object. Typically this will only be useful for adding space to text within a TextBox or Container, and in an image when you have added text on top of the image. When using padding, you will see a dashed line displayed on the inner side of the object you are applying the padding to. When you add a Container to the page, you will see that a 20 pixel padding is applied automatically to all sides of the object.

Whilst padding applies to the inside of an object, margins apply to the outside sides of an object. When applying margins, you will see a grid pattern displayed on the side of the object that you have applied the margin to.

Margins & Padding in Practice

You can use Margins and Padding to objects in both fixed width and responsive pages in your website. Whilst useful for both page types, margins and padding are perhaps more beneficial for those using Responsive pages. Margins are especially useful when used with containers such as the Responsive Row widget and Containers. You can now space fixed width objects out within these object types as you want. You also gain vertical control over objects in these container types as well. In this way you will be able to have objects displayed at different heights within Responsive Rows or Containers.

When using margins on full width objects, they also become a good way to create page margins, which is especially useful when displaying your site on mobile devices where you do not want your content to be edge-to-edge on screen.

Margins and Padding are a very easy visual way to help with your page design in EverWeb!

The post NEW Padding and Margins Settings in EverWeb 4.4 first appeared on Website Building for Mac OS X | EverWeb Website Builder.

November is already here and once again we are celebrating another EverWeb birthday anniversary! This coming week it will be 12 years since EverWeb launched back in 2013! It has been another amazing year with major highlights being the release of EverWeb 4.4 introducing the all new Containers feature! But there have also been a lot of other great new, or improved, features to enjoy as well. Mouse animations and transitions and fully customizable borders being two of our personal favorites!

Here’s a run down of all that’s happened since EverWeb’s last birthday!

EverWeb Releases In The Last 12 Months…

There might have been only two major releases of EverWeb in the last twelve months, but they have been big releases! EverWeb 4.3 debuted in December 2024 introducing the new PayPal Modern widget that enables new payment options as well as using the PayPal button API. We recommend using this widget over the older PayPal widget if possible. EverWeb 4.3 is also notable for ticking off a number of user requested features, such as Justified Text. You can find this new feature in the Alignment section of the Text Inspector

Whilst on the subject of text in EverWeb, version 4.3 also added in the ability to scroll text within a Textbox. Again, it is easy to use, just select your TextBox then check the checkbox next to ‘Scrollable Text’ in the Export Options section of the Text Inspector. When you preview ore publish, the text in the TextBox will be scrollable!

Another small, but handy addition to EverWeb is the ‘QR Code for Mobile Preview’ feature that lets you easily preview your website on a mobile device just by scanning a QR code. Although a small feature, it saves you having to install apps like Xcode (on a Mac) or using developer tools in your favourite browser. Now you can scan the QR code and see the page you want previewed to your mobile device. Works for tablets too, by the way!

September 2025 saw the launch of EverWeb 4.4, our current release, which is packed with major new features and enhancements. Here are the major highlights:

• Scrolling Effects in the Shape Options tab let you pin objects on your page, in one of six different ways: Pin Stack, Pin Push, Pin To Left, Pin To Right, Pin To Top and Pin To Bottom. In addition to pinning, you can also set custom scroll start positions, and add the following scrolling actions: Fade, Blur, Color-swap, Rotate, Remove, Scale, and custom scroll speed.
• Containers, the headline feature for EverWeb this year let you add a single object that groups elements into either a row, a column or in a free flow container.
• Margins & Padding help you finesse your page design as you can now add margin and/or padding to most objects in your page, such as text within TextBoxes, Responsive Rows, Containers and much more!
• Mouse Effects and Transitions let you highlight objects that are Call to Actions in your page. You can add effects for mouse over and/or mouse down actions with a choice of 41 different effects.
• Borders let you easily and simply choose how you want the corners of your objects to look. This is a quick, easy and effective way to give your website design that extra polish!
• EverWeb’s stalwart Navigation Bar Widget gets new abilities with the new Mouse-Down Fill options making your Nav Bar more context sensitive for your visitors.

EverWeb Maintenance and Improvement Releases…

In addition to our big releases there have also been a couple of maintenance and stability releases during September and October 2025, leading us the current EverWeb version – 4.4.3, for macOS and Windows. We always recommend updating EverWeb with these minor releases as they fix issues found in major releases, and also they sometimes will include minor enhancements to EverWeb itself as well!

If you have any comments or issues about the latest releases, please let us know as this helps us make a better product that’s inline with your needs and wishes.

Thank you all for your continued loyalty, support and amazing customer reviews! We’re looking forward to bringing you more awesome features over the next year!

The post Celebrating EverWeb’s 12th Anniversary! Containers, Scrolling Effects, Mouse Animations and More! first appeared on Website Building for Mac OS X | EverWeb Website Builder.

Our recently released EverWeb 4.4 for macOS and Windows, is big on new features: Containers, Border Options, Mouse Transitions and Animations and more! Additionally, there is a great update for EverWeb‘s Navigation Bar widget with some great new options adding more style and focus to navigating your site!

The New Navigation Bar Widget Design…

The first thing to notice when adding a Navigation Bar widget to a page with EverWeb 4.4 or higher, is that the menu options displayed in the Editor Window now features a blue colored rectangle background shape. You can change the color and background shape easily enough if desired. Start, by going to the Shape Options tab in the Inspector Window. In the Fill Section you will see that ‘Color Fill’ is selected and that the color swatch is blue. If you don’t want any background shape displayed, just click on the ‘Color Fill’ menu option and change it to ‘None’. You will see the background shape disappear from the widget in the Editor Window.

If you do use a Color Fill, you have some new options to play with to make your Navigation more fun!

Using A Background Shape In Your Navigation

If you do want to use a background shape for your navigation, but do not want to use the default, rectangle shape, you can choose a different shape if you want. To change the shape used, go to the Shape section at the top of the Shape Options tab. Change the ‘Default’ selection to the shape that you want to use. Note that the Default shape option is the same as the Rectangle shape.

To style the navigation bar use the widget’s Button Options settings, These settings let you adjust the spacing and padding between the each menu item, which may have particular importance to you if you are using a background shape in your navigation. You may also need to adjust the font size of the text used in the navigation which can be done through the Text Inspector’s Font section.

Using Border Options

One of the exciting new options for the Navigation Menu widget is that if you are using either the default, or rectangle shape, you can now change the each corner border to round the corners of the shape as you want. Simply select the Navigation Menu widget, then go to the Shape Options tab. Check that the shape you are using is either the Default or Rectangle shape, then click on the Custom Border Radius checkbox in the Borders section. This will activate the Border Options settings. Next, enter a value in the each corner that you want to change. You will see the Navigation updated as you make your changes.

Using Mouse Transitions & Animations

EverWeb 4.4 also lets you add mouse transitions to your navigation. To activate this feature, check the box to the left of the Mouse Transition & Animations section title. Choose the type of animation effect you want, there are 41 to choose from. It is more likely that you will want to use a mouse over animation for the navigation, but you can also apply a mouse down animation to your navigation if desired.

You can also set a Transition Time so that the effect works immediately when the user mouses over or mouses down on a menu item. When using Transition Time, a value of zero will play the effect immediately. You can set a value up to 500 if desired. The higher the value you choose, the slower the effect will play out.

After you have applied the effect that you want, use the Preview button the EverWeb Toolbar to see the effect in action. When you mouse over, or mouse down, over each menu item you will see the mouse effect in action.

Using The NEW Mouse Down Fill Options…

The last new option for the Navigation Menu widget is located in the Widget Settings of the widget itself. The new ‘Apply Mouse Down Fill’ option in the Appearance section has been a much requested feature we are happy to deliver to you!

The Apply Mouse Down Fill option has three available states: ‘On Mouse Down’, ‘On Current Page’ and ‘On Mouse Down and Current Page.’ A Mouse Down Fill can be applied for the selected state. To set this up, first make sure the Navigation Menu widget is selected, then go to the Shape Options tab.

In the Fill section, the default state is set to ‘Normal’. Change this to Mouse Down. Next, choose the Fill type that you want to apply when the user mouses down on the Navigation. You can also choose to highlight the current page in the navigation if desired. In this example, we are going to use a Color Fill.

You can also apply a Border as well if you are using either the Default, or Rectangle Shape.

Once the Mouse Down Fill has been set, go back to the Navigation Menu widget’s Widget Settings.

By default, ‘Apply Mouse Down Fill’ is set to ‘On Mouse Down.’ To test this, mouse down on one of the menu options in the navigation. The background color and shape borders will change.

Next choose. the ‘On Current Page’ option. you will see the current page highlighted using the shape you have chosen.

The last option, ‘On Mouse Down and Current Page’ combines the ‘Mouse Down’ and ‘On Current Page’ options together.

EverWeb’s New Navigation options bring you a wealth of new options to add extra flair, style and simplicity in navigation to your users!

The post Next Level Navigation Menus with EverWeb 4.4’s New Features first appeared on Website Building for Mac OS X | EverWeb Website Builder.