Julianna Carlson-van Kleef  |  14/03/2024

Navigating Success: Crafting a well-designed template to guide and convert website visitors

This post covers: The importance of navigation and conversion elements when designing website templates and how to style these.

As part of our blog series on template creation best practices, this blog post covers: 

 

 

 

Create a user-friendly page navigation to guide website visitors to the content and information they need

 

As more and more small and mid-sized businesses (SMBs) create a digital presence online, competition for attention has also grown. With short attention spans and a sea of options, a website’s success is determined by its ability to build trust, guide, drive engagement, and convert visitors.  One way to make a website stick out is to provide an exceptional user experience.

 

In How to refine your website’s user experience (UX) strategy, Google notes:

 

“When it comes to design, remember that users are impatient – so organise your site so that it’s easy for people to find and do what they want. Focus your homepage and navigation on connecting users to the content they’re looking for... Understand your customer journeys and let users convert on their own terms. Provide a seamless, frictionless conversion experience through easy-to-use forms.”

 

Yet, thankfully for agencies and digital resellers who build hundreds – if not thousands – of websites, this does not mean reinventing the wheel for each and every new website. Many websites already conform to standard structure to help website visitors navigate around the page.

 

For example, if you are on a homepage, where is the menu to guide you around the site? Where is the company logo, if there is one? What do the contact forms look like? Or, if you are visiting a webshop, where is the shopping cart icon?  In many cases, you can think of standard, set places for both navigation and conversion elements on the website.  

 

This uniformity bodes well for template creation. Here a standard, well-functioning structure is an asset – not a detriment. Afterall, there are two main goals for a website: 1. Build trust. 2. Drive conversions.

 

In this blog post, we will cover how to set up a template that facilitates easy navigation of a website, incorporates conversion elements to drive tangible results, and that can be modified easily. Since as we have discussed in Global Editing: Quickly fulfill websites with sitewide edits, the true time-saving power of website templates is the ability to easily modify them.

 

How easily you can modify the templates you create is dependent on the site builder you use. For the following examples, we will look at how we can set up our website template in Mono Editor by linking standard sections to or removing pages from the navigation menu, linking elements to pages, as well as styling customizable contact forms and navigation menus.  

 

 

 

Adding and styling a contact form

 

When building websites at scale, you need to think about your customer’s varying wants and needs. How do your client’s want website visitors to get in touch? By dropping by the office? Or by phone, email, contact form, or other?

 

And while it is important to think about how your SMB (Small and Midsize Business) clients would want potential customers to get in touch, it is also important to think about how the website visitors would prefer to contact these businesses. Some website visitors prefer to call, others email, and some will make use of a website contact form, if available.

 

So when creating a universal template, it is important to consider these many varying wants and needs. It is quicker to set up a template that incorporates the many different contact options first, and then modify these than to create all of this from scratch every single time.

 

In Mono Editor, you can add pre-designed contact pages or form rows that include all of these different contact options, or you can style your own rows or pages with the information needed and add a form module.

 

Whether you are creating your contact page or form row with pre-designed content or starting from scratch, one helpful tip is to add an email address in Global Data where form responses will be received. When creating a template, and not a specific company site, you can add a placeholder email here and then update when needed.  

 

Watch the video to see more tips, tricks, and step-by-step instruction on how to set-up your contact forms.

 

 

Once you have a preliminary structure of your main content pages, rows, and conversion elements, you can set anchors to important rows to provide a guided experience for website visitors.  

 

 

 

Enable anchor rows in Mono Editor 

 

Anchor rows are specific sections of a webpage that, once enabled, can be linked to navigation menus, buttons, text, hyperlinks, images, etc. When enabled and linked, the anchor row creates a unique URL for the row it directs to, so users can swiftly jump to the relevant information without the need for excessive scrolling. Many use anchor rows to link within a page, but in Mono Editor, you can also link to anchor rows across pages.

 

For example, you could link your Contact button on the homepage to a form further down the page, or link to a form on the contact page.  

 

In addition to connecting the different areas of a website and improved usability, anchor links aid in creating a more organized and structured content hierarchy, influencing a website’s visibility and ranking.  

 

By default, rows are not automatically enabled as an anchor row, as you may not want to link to every single row on your site.

 

To enable the anchor row setting in Mono Editor, simply open the row settings and toggle on Anchor Row and give the anchor a name. You then have the option to:

  • Hide the anchor from the navigation menu in the header.

  • Place the anchor on the same level as the page in the navigation menu.

 

 

Why would you want to hide the anchor from the navigation menu?

 

You might choose this option if you want to link to a button or other CTA, but do not want this to appear in your top menu navigation bar. For example, if you want to have a distinct Contact CTA button in the header that is set apart from the rest of the menu.  

 

 

Why would you place the anchor on the same level as the page in the navigation menu?

 

Anchor rows are often used to link content on the same page. By default, an anchor row is then a subsection of a page, and appears in the dropdown submenu of the page, rather than on the top page level of the menu.

 

By selecting the option to move the anchor row to the page level, the anchor label will then appear in the top menu. This feature is especially handy when you have a landing or single page site, so websites visitors can easily jump to the sections on the page that interest them.  

 

Watch for step-by-step instruction on how to enable row anchors in Mono Editor: 

 

 

Interested in how to link to your anchor rows? Watch this video on how to link to a same-page anchor via a button:

 

 

 

 

Apply global design to the navigation menu

 

Whether your navigation menu consists of links to anchor rows or pages, you will want to style the menu to fit in with the rest of the template – and in a way that is easily customizable.

 

In Mono Editor, you can set extensive global design properties for the navigation menu.

 

Style the top level and sublevel menu text; determine the menu alignment, padding, and margins; as well as set the background and border properties for normal, hover, and active states. What’s more, you can also set the style of the hamburger menu icon and side menus here.

 

When styling the menu colors, we recommend using colors from the global color palette. In this way, when you update the color scheme of the template, your navigation menu will update accordingly.  

 

Watch the video for step-by-step instruction on how to set up the menu bar’s extensive properties in the video below: 

 

 

Need a refresher on how you set up your global colors? Watch how to set up your sitewide color scheme:

 

 

 

 

Remove pages from the header navigation

 

An important factor to consider when styling your main menu bar is what information you do not want to include. We touched upon this topic when covering why you might choose to exclude an anchor row from page navigation.

 

But how do you – and why would you - exclude a page from your site navigation menu?

 

First and foremost, you want to limit the overall menu options, so the website visitor does not become overwhelmed. Stop decision fatigue. Fewer options makes it easier for the website visitor to spot the relevant section they are interested in. By limiting top level options and strategic structuring of the website, it also makes it easier for you to guide website visitors to higher conversion areas of the site. 

 

So it is important to limit top-level menu items – as well as sublevel menu items. 

 

By default, you automatically start with the homepage in Mono Editor. And this, along with any other parent- or subpage added to the template, are automatically set to appear in the main navigation menu.  

 

Depending on your template – or company site – this could be a lot of pages.

 

Thankfully, removing pages from page navigation in Mono Editor is easy.  

 

In the left-hand menu, click on Pages and hover over the page you wish to remove from the main navigation menu. Click on the settings icon and then click Edit settings. Once in the page menu, scroll down to and expand the Hide page in navigation section. You have the option of hiding the page when viewed on desktop, tablet, or mobile – but you can also select all three if you don’t want this page to appear at all in the menu.  

 

If you want it completely removed from the navigation menu, select all three.  

 

Watch how to remove pages from the navigation menu: 

 

 

In addition to limiting options, another reason to remove a page could be due to changing practices in web design. For example, while some businesses still include a Home menu option to aid visitors in navigating to their website's homepage, many do not. Instead, these companies link to the homepage either through the company name or logo in the header and therefore choose to exclude the Home option from the navigation menu.

 

There are valid arguments for both design decisions. What works best for your template, and the eventual end-users, will also depend on the placement of the company name/logo and navigation menu in the header as well. However, whether companies include a Home option or not in their navigation menu, many tend to link the company name or logo to the homepage.

 

Which brings us to our next point: