EN
Searching...

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. Manage Elements
  8. Style options
  9. The Carousel Style
  10. 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.

Note

  1. You can manage the section width from the section settings and the content width from the content style.
  2. Keep the titles, subtitles, and descriptions short and crisp.
  3. In the description field, hit the Enter button to give a line break and the Shift+Enter button to start from the very next line.

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.

4. Action on Click

You can customize the click behavior of individual items in the Text List section. Below are the available options:

  • Go to a Link
    Selecting this option opens the Link Builder, allowing you to add a hyperlink to this item. The link can direct users to another page within your website or an external URL. Know more about Link Builder.
  • Open in Lightbox
    This option displays the item in an enlarged Lightbox view when clicked. In this mode, the Subtitle and Description associated with the item will not appear in the grid view but will be visible in Lightbox mode.
  • No Action
    Choose this option to make the item unclickable. When selected, clicking on the item will not trigger any action.

5. Open Link in New Window: Set the Link to open in a new tab or in the same tab. This will only be visible when Go to a Link option is selected under the Action on Click menu.

6. Buttons & Links: Add any type of Link to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.

7. Save: After making the customizations, save the 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.

Note

List items once deleted can not be recovered.

Section Layout

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

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

Manage Elements of Text List

Text List section includes an Elements tab that allows you to manage the visibility of various elements within the section with ease. Using simple toggle switches, you can enable or disable specific elements without having to delete or modify the elements themselves.

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

  • Choose the Elements (2) tab.
  • After making the changes, hit the Save (3) button.

Section Options

  1. Show Headline: Enable or disable the visibility of the headline for the Text List section.
  2. Show Buttons: Control whether buttons are displayed at the section level.

Items Options

  1. Show Title: Control whether the title is displayed.
  2. Show Subtitle: Enable or disable subtitles.
  3. Show Description: Manage the visibility of item descriptions.
  4. Show Buttons: Decide if buttons for individual items should be shown.

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. Display options
  2. Mobile Display
  3. Alignment
  4. Text size
  5. Spacing
  6. Section Headline
  7. Card options
  8. Shadow options
  9. Buttons & Links

Display Options

  1. Choose to Show Items in rows and columns or carousel 
    • If you have chosen the rows and columns option, the list items will be arranged in rows and columns. 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. Specify the Space Between Rows of the list items.

If Carousel option is selected in Step 1, then you will see the following additional options:

  1. Enable Smooth Scrolling: Enables continuous scrolling of items within the carousel for a seamless and visually appealing experience.
  2. Auto Slide: Automatically rotates through slides without user interaction.
  3. Show Autoplay Progress: Displays a progress indicator while autoplay is active for better visibility.
  4. Autoplay Delay: Sets the time interval between each slide transition when autoplay is enabled.
  5. Carousel Loop: Enables continuous looping of slides, so the carousel restarts seamlessly after the last slide.
  6. Carousel Controls: Choose the Navigation Controls. You can choose between No Controls, Arrows – Bottom Center/Top Right/Bottom Right, Chevron, Dots and Horizontal Scroll.

Mobile Display

  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:

Alignment

  • Content Alignment: Align the content horizontally in the Text List. You can set them to be left, right, or center aligned.

Text Size

  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.

Spacing

  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. Horizontally Align the section headline text. You can set it to Left, Center, and Right.
  2. Enable/Disable the Divider between the section headline and the section content.
  3. Set the thickness of divider (in px).
  4. Specify the Divider Color from color picker.
  5. Choose a Divider Style from the dropdown.

Card Options

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.

Note

The style settings will be applied to all the items in the section. They cannot be altered for each list item individually.

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: 

View a live demo site. 

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us