Item List

About the Item element

GemPages Editor Version 7 provides two elements facilitating the presentation of content lists. The Item List element permits you to showcase content in a list format initiated with an icon selected from the GemPages icon library. If you prefer to upload a custom icon or image, refer to this article on the Advanced List element.

To add the Item list element to your page, please follow the steps below:

Step 1: In the GemPages Dashboard, select your page to enter the Editor.

Step 2: Within the Editor, locate the Item list element under the Content list section. Drag & drop it onto the desired location on the page.

Configure the Settings Tab

Item management

In this first section, you can add or remove items. To add more, hover over the item and click on the Duplicate icon. To remove one, click on the Trash icon of the selected item, then confirm the action.

Icon

Icon type: You have the choice to opt for either consistent or varied icons for each line. Afterward, you can pick your favored icon from our extensive icon library. 

Size: Input your preferred size for the icon. 

Icon Color: Choose the color for your icon from the palette or input the color hex code into the box. 

Text

At this point, you have the ability to edit the typography of the text. Here are the available options:

• Styles: Select your desired style from the pre-defined options, which include 6 heading styles and 3 paragraph styles.
• Font: Choose the font you wish to use for the text. If you want to use a font that is not listed, you can refer to the provided guidance on how to add a custom font in Editor ver 7.
• Size: Adjust the font size by specifying a value in pixels.
• Color: Modify the color of the text to your preference.

Click on the “Show more” button to reveal more customization options. 

Font Weight: Choose your desired font weight from the provided drop-down menu.

Line Height: Adjust the height of the text by specifying a percentage value.

Letter Spacing: Modify the spacing between letters by inputting a value in pixels.

Text Transform: Transform the text in one of the following ways: 

• No transformation applied.
• Uppercase: Convert all text to uppercase.
• Lowercase: Convert all text to lowercase.
• Capitalize: Capitalize the first letter of each word.

Spacing

Modify the space between the two items or the icon and text by using either the slider or entering the preferred number of pixels in the provided box. You can also choose to align the icon in the center or at the top of the text.

Background

At this point, you have the option to select a color or image background for your list of content.

Align

This parameter allows you to determine how the element is positioned on your page. There are three options to choose from left-aligned, centered, and right-aligned.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.