Mac SEO Blog

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!