List Module

Lists can help you keep data readable and organized in your website. It is possible to find the List Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.

 


Edit the List Module

To open the editing menu, double-click on top of the module you wish to modify or hover the mouse on top of it to find the blue Module menu and click on the Edit option.

 

1. Content

1.1. Use Lists from Global Data

Instead of manually adding your list to each module, you can use the lists you have added in Global Data. To activate this option, simply toggle on in the right side. When you use the Lists from Global Data you only need to input the lists once and you can then use them in your website as many times as you want. Learn more about Global Data here!

 


1.1.1. Show Lists

It is only possible to show one list per module. Therefore, when enabling the lists from Global Data you must choose from the dropdown menu which list you want to show.

 

1.2. Manually Adding List


1.2.1. Title

In this section you should add the title of the list.

 

1.2.2. Add Element

To add one or more elements simply click on the Add Element field.


1.2.3. Text

In this section you should add the main text of each list element.


1.2.4. Subtext

For each list element it is possible to add the main text and a smaller subtext. If not relevant, simply leave the field blank.


1.2.5. Icon

If instead of having an overall icon you wish to specify an individual link to each element it is possible to do it in this section. So if you want one single overall icon, define it as described in section 1.2.7.; if you wish to add a specific icon to a list element, do it in this section.

 

1.2.6. Change order & Delete Element

To change the items order simply click on the three vertical dots on the left side of each item and drag it to your preferred position. To delete an item of a list, simply click on the x icon on the right side.

 

1.2.7. Icon

At the bottom of the Content tab you will find the Icon section. The icon you define in this area will be applied to all your list elements - if you wish to define a specific icon for each list element, check section 1.2.5.

Please note that if you are using a Structured List from Global Data it is not possible to define different icons for the elements, but you must apply an overall list icon in this section. Click on it once to apply it.

 

2. Styling

 

2.1. Title

Style the title in terms of font color, size, family, weight, decoration, line height, uppercase letters, alignment and spacing. 

 

2.2. Text

Style the text in the list elements in terms of font color, size, family, weight, decoration, line height, uppercase letters, background and spacing.


2.3. Subtext

Style the subtext underneath the main list elements in terms of font color, size, family, weight, decoration, line height and uppercase option.


2.4. Icon

Style the list icon in terms of width and height, color (both in normal and hover state), the overall icon size, background color in all states, border color, style, width and radius, as well as spacing in terms of margin.


2.5. List Elements

Style the list elements in terms of background color, spacing, border color, width, style and radius.


2.6. Border

Here you can define the border color, width, style and radius of the module.

 

2.7. Background

With this option you can choose a solid color or upload an image as the background for the module.


2.8. Spacing

When styling the spacing you can define the margin - which adjusts the space outside of an element; and padding - which adjusts the space inside of an element.

 

3. Settings

3.1. Columns

In this section you can define whether you want your list to be one single column or multiple ones. Type down the number of columns you want your list to have or use the slider to increase/decrease the value.

 

3.2. Margin Between

Define the margin between elements in this section.

 

4. Global Styling

It is possible to style all the Lists modules simultaneously with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Lists menu. Click here to read all about Lists Global Styling!

 

Anything we’ve not covered?

Contact Us