Text and structure modules

Text and structure modules help you add text to your website and organize specific content. You find the modules under the category Text and structure in the Add module overlay.

1__overview.jpg

  

Text

Use the Text module when you want to include text on your website. On the module you can either edit the module's design or the actual text. Edit the text either by clicking anywhere on existing text and you will be taken directly to the Text Editor, or click on Edit text on the module dropdown.

2__module_dropdown.png

 

Add and edit text 

Once you're editing text on the Text module, the Text Editor will appear just below the Editor's main navigation panel, as illustrated on the image below.

3__Text_p2.jpg


The Text Editor offers you plenty of ways to style and format the text on your website. You can either set any text you have highlighted to inherit one of your predefined text styles from Global Design or you can change the formatting locally. To apply a text style, select one from the Design dropdown in the top left corner of the Text Editor.

4__Text_p3.jpg


The Text Editor supports Google fonts; you can find a list of fonts available here.

Read more about the specific features of the Text Editor here. 

  How to add Global Data in text

Adding information from Global Data to a Text module is simple and ensures that your company information always stays up-to-date everywhere throughout your website. To add Global Data to your text, click on the globe icon in the Text Editor, select Insert, and choose the relevant piece of information from the dropdown.

5_-Text_p4-2.png

The corresponding information from Global Data is automatically injected into your paragraph through a Global Data tag and will update dynamically when you change the corresponding content in Global Data. If, for example, you use the tag [company_name], the Editor will automatically fetch your company name from Global Data. If you subsequently change the name in Global Data, it will immediately be reflected in the text where you have inserted the tag.


Edit module design

Hover the module and select an option from Design in the dropdown menu. Here you can change background, border and spacing for the module.

  • Background: change the background of your module to either a color or an image.
  • Border: add a border around your text and specify style, width, radius and color.
  • Spacing: add spacing either between your text and the module frame (padding) or outside of the module (margin).

 

List

The List module provides a great way of presenting content on your website, such as the services you provide or products you have on offer. Hover the module and click on ContentDesign or Settings in the dropdown menu to edit your list.

 

Content

In the Content section you have the option to choose between using existing lists from Global Data or adding new content directly to the module.

Fetch Global Data content by toggling Use Global Data source. If you have more than one list in Global Data, select the relevant list from the Source dropdown menu.

If you don't use Global Data you can add list items manually by clicking the Add Element button. You can add the following information to each item:

  • Text: add the title/heading of the list item here.
  • Subtext: add a short description of the item.
  • Icon: select an icon here if you want to have different icons for each item on your list.

6__List_p1.png

If you want the same icon for all items on your list, select a general icon from the icon area below the Add Element button. If you've already selected icons individually on one or more of the list items, these will overwrite the icon you select as a general icon.

  Rearrange your list items

Change the order of your items by dragging on the six vertical dots on the left side of each item and moving them to the slot of your choice.

 

Design

The Design section is where you change the background, border and spacing of your List module. For more specific styling options, click on the More local design options. Read our comprehensive guide to styling your website for more design information and tips and tricks.

 

Settings

Here you can change number of columns and the margin between columns.

  • Number of columns: divide your list items into a maximum of 4 columns.
  • Margin between list items: add up to 10 pixels of spacing above and below each of your list items.

 

Accordion

The Accordion module allows you to add blocks of content which can be expanded and collapsed as the visitor clicks on the different elements. Hover the module and click on ContentDesign or Settings on the dropdown to edit your Accordion module.

7__Accordion_p1.jpg

 

Content 

When adding a new element to your accordion, you will see the following content options:

  • Title: the title is the only text visible when the element is collapsed.
  • Icon: this adds a unique item icon to the list element.
  • Text: the text will only be visible when the specific list element is expanded. You can add basic formatting to the text, insert links, add Global Data tags, and more.
  • Image: add an image from your File Library or your computer. You can also input an alternative text for the image for accessibility and search engine optimization purposes. If you have added both text and an image, the image will be placed before the text.
  • Button label: add a button label and a button will automatically be added to your Accordion module. You can link the button to an external URL, an internal page, an email or a file for download. Finally, it's also possible to add an icon to the button.

Once you have added multiple elements to your accordion, you can change the order of them by dragging an element to another slot.

List icon: select an icon in this section if you want to use the same icon for all your list elements.

 

Design 

The Design section is where you change the background, border and spacing of your Accordion module. For more specific styling options, click on More local design options. There you can customize the following:

  • Title: define font type and settings as well as alignment and spacing.
  • Image: in this section you can define image size, alignment and spacing.
  • Button: define background, text styling, spacing, etc. for your buttons on the accordion.
  • Icon: set icon size and color, background color, border properties and spacing.
  • List elements: style the title area that's also visible when an item is collapsed. You can set background, border and spacing.
  • Expanded area: style the area that's visible when an item is expanded. You can set background, border and spacing.

For a detailed walkthrough of all styling parameters, please refer to oustyling guide.

 

Settings

In Settings, you can specify whether you, by default, want one list element to always remain expanded or allow visitors to collapse all of the list elements. Toggle Allow collapsing/expanding all items if you want your list to be completely collapsable, as illustrated below.

8__Accordion_p2.png

 

Link and download

Use the Link and download module to guide your visitors to one or more external links, internal pages, emails or files for download. You can include a single link/download or create a list with multiple links/downloads. Hover the module and click on Content or Design on the dropdown to edit your Link and download module.

9__Link_and_download_p1.jpg

 

Content

Select whether you want to use website links or downloads that you have previously uploaded in Global Data, or add new content directly in the module.

Add Global Data content by enabling the function Use Global Data source. Choose from the dropdown whether you want to include your list from Website links or Downloads in Global Data.

  Two Global Data options

You have the option to include one of two different Global Data sections in your Link and download module. The first section, Websites, include a list of all the website links you've added in Global Data in the section Website links. The second section, Downloads, include a list of all the files you've included in the Global Data section Downloads.

Add content manually to the module by clicking on Add element.

Each added element consists of the following:

  • Title: the title will be visible on your website and will be clickable and linked to either a URL, email or file depending on your link type.
  • Link type: choose between an external URL, internal page, email or upload a file that visitors can download.
  • Open link in new tab: enabling the option Open link in new tab will open your linked content in a new browser tab when clicked.
  • Set "nofollow" property: activate Set "nofollow" property if you don't want search engines to follow the hyperlink. When this setting is enabled, your link will not affect the target's search engine ranking.
  • Icon: add an icon next to the item on your list.

 
 What do the different link types mean?

External URL: add a URL to an external page. This link type will by default activate the setting Open link in new tab to ensure that the visitor doesn't completely leave your website when they click your link.
Internal page: link to a page on your website.
Email: add an email address in the field. When the visitor clicks on the email, their default email client will open.
File: include a file by clicking on Add or drop file to browse your hard drive or drop your file on the outlined area. When visitors click on the file link, they'll download the file.

Add text in the Add note at bottom of list field if you want to include a brief note to visitors at the bottom of your link and download list.

10__Link_and_download_p2.jpg

Select an icon in the List icon section if you want to add the same icon next to all your list elements. Note that any icons you have selected for specific elements on the list will overwrite your general list icon selection.

  Adding both links and downloads in the same module

It's always recommended to use content from Global Data but there is one advantage to using manually added content in the Link and download module. Using manually added content gives you the option to have both website links and downloads in the same list. When using Global Data you can either include website links or downloads, but not both in the same list.

 

Design

The Design section is where you change the background, border and spacing of your Link and download module. For more specific styling options, click on More local design options. There you can style title, link, list icon and note. For a detailed walkthrough of all styling parameters, please refer to our styling guide.

 

Icon list

The Icon list module offers an easy way of visually communicating what products you sell, display important processes, or other elements that you want the visitor to notice on your website. Additionally, you can link your icons to different pages on your website, external websites, emails or files to help visitors quickly get to the information they need.

11_-Icon-list_p1.jpg

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

 

Content

Click on Add element to add an icon to your list and click again on the icon to expand the settings for it.

For each added icon you can set the following:

  • Icon: choose which icon you want to display on the module (remember that you can scroll to view more icon options or use the search function).
  • Link type: add a link on your icon. Choose between an internal page, external URL, email or upload a file that visitors can download when clicking the icon.
  • Open link in new tab: enabling the option Open link in new tab will open your linked content in a new browser tab when clicked.
  • Set "nofollow" property: activate Set "nofollow" property if you don't want search engines to follow the hyperlink. When this setting is enabled, your link will not affect the target's search engine ranking.

  What do the different link types mean?

External page: add a URL to an external page. This link type will by default activate the setting Open link in new tab to ensure that the visitor doesn't completely leave your website when they click your link.
Internal page: link to a page on your website.
Email: add an email address in the field. When the visitor clicks on the link, their default email client will open.
File: include a file by clicking on Add or drop file to browse your hard drive or drop your file on the outlined area. When visitors click on the link, they'll download the file.

You can change the order in which your icons are displayed by dragging on an icon and moving it to a slot of your choice.

 

Design

The Design section is where you change the background, border and spacing of your Icon list module.

For more specific styling options, click on More local design options. There you can apply styling to the icon and decide how you want it to appear. For a detailed walkthrough of all styling parameters, please refer to our styling guide.

  Styling of icons

Please note that any styling added applies to all icons on the module. Icons can't be styled individually.

 

FAQ list

Create a list of questions and answers to help visitors acquire knowledge about your products or services.

faq-site.png

FAQ lists are marked up with Schema.org structured data which makes your web page eligible to have a rich result on Google Search. 

Example of Google Search displaying results that have FAQ markup:

google-serp.png 

 

Hover the module and click on Content or Design in the dropdown menu to edit your FAQ list.
 

Content

In the Content section you have the option to choose between displaying an existing FAQ list from Global Data or adding an FAQ list directly to the module.

Fetch Global Data content by toggling Use Global Data source. If you have more than one FAQ list in Global Data, select the relevant list from the Source dropdown menu.

faq-module-gd.png

If you don't use Global Data you can add FAQ list elements manually by clicking the Add FAQ element button.

You can add the following content to each element:

  • Question: the question that you are going to provide an answer to.
  • Answer: the answer to the question. The answer text can contain basic text formatting as well as hyperlinks.

Change the order of your elements by dragging on the six vertical dots on the left side of each element and moving them to the slot of your choice.

  Element limit

An FAQ list can contain up to a maximum of 50 question-answer pairs. If you want to add more than 50 questions, you need to split them up into two or more FAQ lists. You can create as many FAQ lists as you wish.

  Avoid duplicate markup

According to Google's guidelines on FAQ Schema, if your website contains the same question-answer pair with identical markup more than once, it may potentially lead to all your pages not showing FAQ rich results in the Google search results. In order to comply with these guidelines, make sure that each of your question-answer pairs only show in one place throughout your website. A simple way to achieve this is to simply create a dedicated FAQ page on your website and add all your questions and answers there.


Design

The Design section is where you change the background and spacing on your FAQ list module. For more specific styling options, click on the More local design options. Read our comprehensive guide to styling your website for more design information and tips and tricks. 

Was this article helpful?
0 out of 0 found this helpful