You can use the "List" block to list out content items on your landing page. Doing so will let you create organized text that's easy to consume for your page visitors.
About the "List" block
The "List" block is available in the right pane of the page editor.
Once this block is added to your page layout, you can:
- Replace the placeholder text with your own
- Add additional items to your list by clicking the plus (+) button in the right pane under "List Items."
- Each item you add here will have default red arrow icon
- Customize the icons by clicking them and selecting a different image from the file manager
- Adjust the width and alignment of the icons
Like other blocks, you can adjust its size, add styling to it as well as add, edit, duplicate, and remove the block from your page layout.
There is no limit to the number of "List" blocks that you can add to a page. By default, a list's font size will be set to Paragraph (<p>). The font size of the Paragraph style can be set in the "Themes" section of your page.
How to add the "Lists" block to your page
To insert the "List" block into your page layout:
- From the page editor, drag the "List" block to your page layout.
- Double-click the block so you can add content to it.
- Type the content you want to display over the default placeholder text. Note that you can use the modal toolbar that appears to apply styling to your text. For example, you can bold, italicize, or underline your content.
- Use the editing options in the right pane to use a different list icon, change the icon width, and change the icon alignment.
- Click the checkmark button in the top right bar to save your content.
To edit the list at a later time, open the page's editor, double-click the list you wish to update and type the new text.
Edit and style the "List" block
You can edit the following items for a "List" block:
Choose whether your block is viewable on mobile, desktop, or both.
Adjust the width of your list. Width is either relative (a percentage) or absolute (to the px). By default, it's set to be px. Click the "px" in the input field if you want to change it to "%."
- List Items
The items to be displayed in a list. There is no limit to the number of items in a given list.
- Icon Width
Dictates the width of a list's icon. By default, the list icon's width is set to 30 px.
By default, list icons are set to align with the center of the list item.
Add as many backgrounds as you wish. Backgrounds stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner spacing
The amount of pixels each value equals is set in your Page's Theme under "Page Layout." Newly added lists do not have inner spacing.
Borders can be set by either px or %. You can choose which sides have borders and set a radius. You can pick one of the three types of borders: solid, dashed, and dotted. Initially, it is set to solid.
Corners are set by either px or %. You can apply a new radius to one, some, or all corners of your block.
- Drop Shadow
Add as many drop shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner Shadow
Add as many inner shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
Duplicate a "List" block
You can duplicate any "List" block on your page. To do so, click the block you wish to duplicate then click the duplicate icon in the top right bar.
Delete a "List" block
You can delete any "List" block from a page. To do so, click the block you wish to remove then click the trash icon in the top right bar.