Page navigation modules

With page navigation modules you make it easier for visitors to locate and navigate to information they need. Find these modules under the category Page navigation in the Add module menu.

0_-Overview.jpg

 

Button

Use buttons to guide your visitors to other pages on your site or to an external URL - or for downloading files and sending an email.

1__Button_p1.jpg

 

Content

Start by adding a text on your button. You can also add a concise title tag if you wish. Using a title tag provides more context about your website and can help improve search engine visibility. Additionally, most web browsers display the title tag on mouseover to allow visitors to see where the link will take them before they click on it.

You can link your button to either an external URL, a page on your website, an email, or a file.

  Creating a "click to call" button

You can set up a button to call a phone number when a visitor clicks it. The button triggers the device's default call application and dials the number. In order to create a "click to call" button, select External URL and type in "tel:" followed by a phone number.

2__Button_p2.png

If you want to use the phone number you have entered in Global Data, input the following: tel:[phone]. Remember, you can hide buttons on specific viewports if you don't want them to show up (in this case, it might not make sense to have a "click to call" button on desktop viewport while it's more relevant on mobile view). Read more about adapting your website to viewports here


When linking it to an email, the visitor's default email application will open when they click the button and create a new email message with the email you entered in the "Email" field as the recipient.

When linking to a file for download, the visitor's browser will trigger the download when they click the button.

  Supported file formats

If you're linking your button to a file download, keep in mind that only the following formats are supported: .png, .gif, .jpeg, .jpg, .xls, .xlsx, .doc, .docx, .pdf.

Finally, you can add an icon next to the text on your button by selecting one from the list.

 

Design

Apart from aligning your button left, right or center within the column you can also set the button to float, adjust the width, and determine the margin.

  • Float: use this feature for wrapping text around your button. You can float the button to the left or the right. Floating multiple elements will align them side by side.
  • Width: instead of having the button's size dependent on its content, it's possible to define a fixed width for it. The percentage is related to the width of the column where the button is inserted; this means a button width of 25% occupies exactly a quarter of its column.
  • Margin: adjust the amount of spacing outside of the button.

  Adjustments after adding float to a button

When adding float to your button it's recommended to set some margin on the right or left depending on the float direction. Add margin to the bottom to push the wrapped element away from the floated element.

Example of float:

3__Float_Left.png

Click More local design options for additional styling options. You can, among others, adjust background color, border and text in various states. For more information on styling, read our dedicated guide here.  

 

Settings

It's possible to track how many times visitors have clicked the button. Give your button a name for tracking purposes and write it in the field Custom tracking name. The data will feed into the statistics overview on your dashboard. Read more about visitor statistics here.

 

Button 2 & 3

Buttons are essential components for visitor navigation and you will likely have quite a lot of them plotted around your website. For the same reason, it might not be enough for you to only have one button style. To help you add more visual diversity to buttons, the Editor allows you to design alternate button styles thanks to the Button 2 and Button 3 modules.

 

How are Button, Button 2 and Button 3 different?

The three button modules are completely alike in functionality. The only difference between Button 2 and 3 is that Button 3 inherits the Global Design properties from Button 1 while Button 2 doesn't inherit any styling.

The idea of Button 3 inheriting styling from Button 1 is that you can have two types of buttons that look similar but differ in a few parameters such as text color or size of the button. This makes it easier for you to differentiate design elements on a more granular level, without needing to style elements locally.

You could then style Button 2 completely differently from Button 1 and 3. For example, you could style it in light colors so you can use it on darker backgrounds where Button 1 and 3 might not be ideal.

 

Example

Your default Button is styled with a dark background color so it's clearly visible on rows with light colors. However, you have a few images in dark colors and you would like to put buttons on them. Obviously, the dark button would hardly be visible on those images so you design an alternate button style - Button 2 - and make it white so that it stands out on darker backgrounds.

4__button_2.png

 

Here's another example. You have many images on your website, some bigger and some smaller. You'd like to place a big button under your larger images and a small button to be placed under smaller images.

In this case, you may have styled your Button in Global Design to be bigger in size and your  Button 2 to be smaller. Doing it this way, you don't have to spend time making individual changes locally when you want to differentiate button styling.

 

Search

The Search module enables visitors to search for specific content on your website. The search can be done across your whole website or limited to showing hits on pages, shop products or blog post titles.

5__Search_p1.jpg

 

Hover the module and click on Design or Settings on the dropdown to edit your Search module.

  Search module behavior in preview mode

A website is only fully searchable once it has been published. The Search module is therefore not functional on the preview version of your website. Publish your website before trying out your Search module.

 

Design

The Design section is where you change the background, border and spacing of your Search module. Click More local design options for additional styling options. For more information on styling, read our dedicated guide here.

 

Settings

Define which content categories you want to be included in search results when your visitors search your website. The settings will by default include all content categories - change it by selecting or deselecting the following categories:

  • Content on pages
  • Content in product descriptions
  • Content in blog post titles

6__search.png

 

  Searched content

Search results will include content from the following modules and features:

  • Text modules
  • Src and alt attributes of Image modules
  • Map
  • Gallery
  • Image list
  • Link and download
  • HTML
  • Offers
  • Review
  • List
  • Pricelist
  • Accordion
  • Content of E-commerce products (content in product descriptions)
  • Blog posts (titles only)

 

Navigation

The Navigation module is your website's menu and enables visitors to move between pages. You can only have one navigation added at a time on your website.

  This is a header and footer-only module

The Navigation module can only be inserted in the header or footer of your website and you will therefore not be able to select it from the Add module menu anywhere else on your website.

 

Design

Apart from aligning your navigation left, right or center you can also adjust the following:

  • Float: use this feature for wrapping text around your website's menu. You can float the menu to the left or the right.
  • Slide direction: in case you've enabled hamburger menu, it's possible to decide whether the page tree overview should slide from the right or left once someone clicks on the hamburger menu icon.
  • Spacing: adjust the amount of spacing between the module and it's frame (padding) and outside of the module (margin).

Click More local design options for additional styling options. For more information on styling, read our dedicated guide hereOutlined below are the design settings unique to the Navigation module.

Hamburger menu icon: adjust color in normal and hover state, as well as the icon size.

7__Navigation_p1.jpg

 

Top level and sub level menu: the top level menu refers to pages that are immediately visible on the navigation while sub level menu includes subpages visible in a menu dropdown.

8__Navigation_p2.jpg

 

For both these types of menus you have a wide range of styling options available, including text styles, background color, border, and spacing.

  What are text transitions?

When styling your navigation text (both on top level and sub level) you will come across a setting called Transition type. This enables you to add a small effect on text when visitors hover over the text and it switches from normal to hover state. Read more about transition types here. 


Icon:
 set font color, icon size and margin for your page icon. You make the icon appear in your navigation by selecting one for the relevant page in the page settings menu.

9__Navigation_p3.jpg

 

Side menu: the side menu slides in if you have enabled the hamburger menu and a visitor clicks the hamburger menu icon. For the side menu, you can adjust font color, background color and padding.

10__Navigation_p4.jpg

 

  Hiding specific pages from the navigation

If you don't want one or more of your pages to show up on the navigation, you can hide them in the Page Settings menu. You can even decide which viewports you want to hide them on. Read this article for more information about hiding pages.

 

Settings

Enable hamburger menu icon: tick the box in order to collapse your navigation into a hamburger menu.

Push content when menu slides in: with this option disabled, when the menu slides, it covers the right or left side of the page. When this option is enabled, when the menu slides, it pushes the existing page to the right or left.

Show parent link as active: if enabled, when a visitor is on a subpage, the top-level page will also be shown as active. For example, imagine the following page structure: Contact > Booking info. When the visitor is on the Booking info page, the Contact page will be shown as active on the navigation menu.

11__rental-parent-as-active.gif

 

Breadcrumb

Use the Breadcrumb module to make it easier for visitors to navigate back and get an overview of where they are on your website.

12__Breadcrumb_p1.jpg

 

Hover the module and click on Content or Design on the dropdown to edit your Breadcrumb module.

  This is a header and footer-only module

The Breadcrumb module can only be inserted in the header or footer of your website and you will therefore not be able to select it from the Add modulemenu anywhere else on your website.

 

Content

Select an icon for visually separating your the pages in your breadcrumb - you have six different styles to choose from.

Tick the option Hide breadcrumb if only one page if you want to hide your breadcrumb module when your visitor is on a top level page, e.g. Home, About, Contact, etc. The breadcrumb will only start appearing when a visitor is on a second-level page, for example About > How to get here.

 

Design

The Design section is where you change the background, border and spacing on your Breadcrumb module. Click More local design options for additional styling options. For more information on styling, read our dedicated guide here.

 

Language selector

The Language selector module lets your visitors select which language they wish to view your website in. You need to have a multi-language website in order for the Language selector to work. Read more about adding and managing languages here. You can only have one Language selector added at a time on your website.

  This is a header and footer-only module

The Language Selector module can only be inserted in the header or footer of your website and you will therefore not be able to select it from the Add module menu anywhere else on your website.

 

Design

Tick the box Only show flag if you only want visitors to see the flag associated with the language and not the actual name of the language. A flag icon will only appear if you have selected one for each of your languages in the language settings menu.

Apart from aligning your Language selector left, right or center you can also adjust the following:

  • Float: use this feature for wrapping text around your Language selector module. You can float the module to the left or the right. 
  • Margin: adjust the amount of spacing outside of the selector.
  • Padding: adjust the amount of spacing between the selector and module frame.

Click More local design options for additional styling options. For more information on styling, read our dedicated guide hereOutlined below are the design settings unique to the Language selector module.

Flag size: adjust the size of flag icons by dragging the slider or inputting a number in the box.

 

Vertical navigation

The Vertical navigation module enables you to display your page structure to visitors on any page of your choice and allows the page structure to expand vertically, as opposed to the horizontal drop downs in the main navigation menu. A vertical navigation is particularly useful when you have several subpage levels on your website as it offers visitors a full overview of the website's page structure.

13__Vertical-navigation.jpg

 

Hover the module and click on Design or Settings on the dropdown to edit the Vertical navigation module.

 

Design

The Design section is where you change the background, border and spacing of your Vertical navigation module. Click More local design options for additional styling options. For more information on styling, read our dedicated guide here.

 

Settings

The Vertical navigation module is by default only showing subpages within the particular page it's added to. If you don't have any subpages on the page, the module will remain blank.

If you want your vertical navigation to show more than subpages, toggle the option Show all menu points and all pages and subpages will be included in the navigation. You also have the option of enabling Include top level navigation itemswhich looks similar but will only show subpages from the specific page it's included on.

14__Vertical_navigation.gif

 

Additionally, you have the following settings for the navigation:

  • Display icons: display page icons next to your pages. An icon will only show if you have selected one for the individual pages in Page Settings.
  • Expand sideways: expand subpages sideways instead of downwards.
  • Expand direction: this setting only applies if you've enabled Expand sideways. Select in what direction you want your subpages to be expanded.
Was this article helpful?
0 out of 0 found this helpful