Text List Section

Use the Text list section when you want to display a set of text in columns. You can add a Text List section to a page to easily link different pages within the website or to add links with their descriptions.

As you add the list items to this section, the settings and style you have specified will be applied to it. This section will be useful to showcase the team, different products you sell, and for many other purposes.

---

In this article:

1. What is a Text List?
2. Add a Text List section
3. Add and Edit list items
4. Sequencing list items
5. Deleting list items
6. Changing section layout
7. Style options
8. The Carousel Style
9. Live example

---

Text List

• If you are looking to add some text or add a link in a text without any images, you can add a text list section.

---

Add a Text List section

• A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
• On your page, click on the blue + icon to add a New Section to your page.

•  You will now see the section categories on the left panel.
• Choose the List section (1) option and click on the Text List tab (2) where you can choose from different layouts (3).

• Choose any section layout and click on it to add it to your page.

---

Add and Edit List Items

Add List Item

Once you have added the section: 

• Click on the Edit Text List (1) button to open the list item panel.

• Click on the Add Item (2) button to add a new list item.
• You will have the option to Duplicate and Delete (3) the list items.

---

Edit List Item

Click on the list item that you want to edit. It will open the particular List item editing options.

• Add a Title (1), Subtitle (2), and Description (3) of the List Item.
• You may not find the option of Subtitle and Description in particular list items depending on the layout you choose.
  Before adding the description, check this article.

• Click on the Link Builder icon of the Title Link (4) to open the link builder to link the list item title to any page.
• Set the Link to open in a new tab or in the same tab (5).
• Add any type of Link (6) to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.
• Save (7) your changes.

---

See editing a text list item in action:

---

Sequence List Items

• You can easily drag and drop the list items to change the sequence.

---

Delete a List Item

Once you have added a list item, you can edit or delete it.

• Click on the Delete icon next to the List item.
• Click on the Delete button in the confirmation popup.
• Save the changes.

---

Section Layout

• Click on the Edit Text List (1) button.

• Choose the Layout (2) tab.
• Select any layout and Save (3) your changes.

---

Style your section

• Click on the Edit Text List (1) button.

• Choose the Style (2) tab.
• Change the Style of the list items and Save (3) your changes.

---

You will have multiple Style options for this section: 

1. Items Style options
2. Mobile Display
3. Size & Space
4. Section Headline
5. Text options
6. Card options
7. Shadow options
8. Buttons & Links

---

Item Style Options

1. Choose to Show Items in rows and columns or carousel 
   • The list items will be arranged in rows and columns if you have chosen the rows and columns option. In this case, you need to specify the number of rows and columns.
   • If you have chosen the carousel option, the list items will be presented as a slideshow. Know more.
2. Set the number of columns for the text list. You can choose from 1 to 10 columns.
3. Specify the Space between columns of the list items.
4. Align the content in the Text List. You can set them to be left, right or center aligned.
5. Choose to Loop the Carousel or not.
6. In case of the Carousel, choose Navigation Controls. You can choose between No Controls, Arrows – Bottom Center/Top Right/Bottom Right, Chevron, or Dots.

---

Mobile Display Options

1. Set the number of Grid Columns for mobile devices. You can set it to a maximum of 3 columns.
2. Define the Spacing between grids (in pixels).

Device-Specific Column Layout Based on Studio Settings:

---

Size & Space

1. Specify the Content Width for the list items.
2. Specify the Space below Section Headline in px.
3. Specify the Space below the titles of the list items (in %).
4. Specify the Space below the Subtitles of the list items (in %).

---

Section Headline

1. Enable/Disable the Divider between the section headline and the section content.
2. Set the thickness of divider (in px).
3. Specify the Divider Color from color picker.
4. Horizontally Align the section headline text. You can set it to Left, Center, and Right.

---

Text Options

1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
2. Set the Title font style for the list items of the section.
3. Set the Subtitle font style for the list items of the section.
4. Set the default Description font style for the list items of the section.
   Also Check: Website Text style.

---

Card Options

• See how to manage cards.

---

Shadow Options

1. Display – Choose to show the shadow behind the list items always or on hover only.
2. Style – Choose from existing presets or create a custom shadow.
   In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.
3. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

---

Buttons & Links

• See how to manage the styling of buttons & links.

---

The Carousel Style

The Carousel style shows list items as a slideshow i.e., the list items will be cycled after each other.

See how the carousel style works: 

---

Show text list item as Card

• When you choose to show card over your text list, the list items will have a background with the card color that you have specified in the Design section.
  Also See: Website colors and spacing.

Have a look: 

---

Here’s a live Text List: