Mac SEO Blog

In the first part of our post on Creating a Navigation Menu using EverWeb’s Containers feature, we designed a button using two rectangle shapes. The button will be used as the basis of our navigation. The two rectangle shapes making up the button were customized and lined up side by side. The rectangle on the left side is used for the chapter number with the right hand rectangle being used for the chapter title.

In this post, we will next add our completed design in to a Container. Then we will tweak the design so that it looks like the button you see in the image above. We will then work with EverWeb’s Containers feature to get our navigation completed, tested and published!

Hyperlinking The Button

Now that we have the text within each of the our rectangle shapes, we set up a hyperlink to the page we want. In this case it would be to the Welcome! Page in our site. In this example, we are not going to hyperlink the chapter number, just the chapter title text. Highlight the text ‘Welcome!’ in the right hand side button then go to the Hyperlinks Inspector. Click on the ‘Enable as Hyperlink’ checkbox to activate its settings, Next, check that the Link To field is set as ‘One of my pages.’ If it is set to e.g. ‘An external page’ change this to ‘One of my pages.’ Next, go to the Page field and set the page to your Welcome! page. Adjust the Hyperlink Formatting colors and underlines to suit your navigation. In this example, we are going to keep the Normal and Visited colors the same and not have any of the hyperlinked text underlined as this will spoil the look of our button. There is another way in which we can highlight the button when we need to…

Using Shape Options: Fill

We can draw attention to the button when a visitor hovers over it, or clicks on it, by using the Shape Options Fill feature. If the text is still highlighted, click on an area in the Responsive Row instead. The rectangle should become selected, If not, click on the right hand button. Now go to the Shape Options tab in the Inspector. In the Fill section, change the ‘Normal’ menu option to ‘Mouse Over’. In the field below, which is set to ‘None’ by default, change this to Color Fill. Next, choose a color that you want to use for when your visitors mouse over the button. Remember that the text color should remain readable when you do so. Once you have selected your mouse over color, try mousing over the button to see it working.

Adding the Button in to a Container

The button is now complete. We will be using this button as our template for all of the others that we are going to use in our navigation, so make sure you have completed all of the styling that you want before you continue.

As we always want to keep the two parts of the button together, we are going to put them together in their own container. First, select both of the rectangle shapes. Once you have done this, right click over one of the shapes. A pop up menu will appear. Mouse down to the Contain As… menu option, then Choose the ‘Row’ option. The buttons will now be contained inside their own Container!

Styling the Container

The Container will take the full width of the Responsive Row, and you will also see a dashed line inside the container which is the 20 pixel padding which is added by EverWeb when you create a container. To start, we are going to reduce the width of the button container. Go to the Metrics Inspector and uncheck the Full Width checkbox. You will now be able to access the Width setting for the Container. Change the value to 250 pixels. This should give you enough space for the Chapter button text. If not use a value that is appropriate to the longest text that you are going tp use. Sometimes, though, it is better to shorten the button’s title rather than having too long a title. In this instance it is a good idea to think as if you were designing a menu using the Navigation Bar widget.

The second thing to look at is also the height of the button. Make sure that there is enough space so that the text looks comfortable inside the button. Not too squeezed and not too much dead space. In our example, using an 18 point font, we decided that a button height of 58 pixels was good.

As the button is comprised of two parts, we also want to make sure that there is a clear, but small division, between the right hand side of the chapter number rectangle and the left hand side of the chapter title rectangle. We can set how much of a gap we want using EverWeb’s Padding and Margins options.

Setting Button Padding and Margins

To add some spacing between the two rectangles, select the Chapter Title rectangle. Next go to the Metrics Inspector. In the Margins and Padding section, set a left margin (the outer left field) to two. This should be enough to create a nice gap between the two parts of the button.

Now we turn our attention to the Container itself. Here the default padding is set at 20 which for our navigation is too much. To change this, click on the container itself then change the padding from 20 to 10. Finally, select the Responsive Row itself and set its left and right margins to 30 and its top and bottom margins to 20.

Completing the Navigation

The navigation is almost complete. The final step is to select the button Container and duplicate it eleven times so that you have the twelve menu items required in the scenario. Here you can just copy the button container, then paste it 11 times in to the Responsive Row.

Change the chapter numbers and chapter titles as required. Don;’t forget to also update the hyperlinks for each chapter, so that the visitor will go to the correct chapter!

You can see how the finished result looks by either reducing the width of the EverWeb UI, or by using the Preview button in the Toolbar. The 12 menu items should wrap as you alter the width of the EverWeb UI or browser window. If it does not do this, select the Responsive Row and make sure that Wrap is selected in the Behaviour field.

Our navigation is now complete. use preview to test out your design. Remember to also use EverWeb’s Preview QR Code feature so that you can see how the design looks on a mobile device.

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!