List
While it's easy to add bulleted and numbered lists in a text editor, the List module offers you an easy way to shape them into beautiful designs.
Last updated
Was this helpful?
While it's easy to add bulleted and numbered lists in a text editor, the List module offers you an easy way to shape them into beautiful designs.
Last updated
Was this helpful?
The List module is based on the Bootstrap concept of a , with optional headings, content, and list marker icons. If you choose to display list markers, they can be to the right or the left of either the headings or the content.
This is the typical bulleted list, but you can choose your list marker and adjust its size. You can choose from the standard circle and square icons that are available as list item markers for standard unordered lists.
The advantage of the List module is that you can style the markers by easily changing the size, adding padding to change their position, and placing them to the right or left of the list.
Unordered lists are represented by the standard <ul> tag in the HTML output.
This is the typical numbered list with an <ol> tag in the HTML output, but you can choose from various ordering notations for the list item marker, such as numeric, alphabetic, or Roman, Hebrew, Armenian, or Greek numerals.
TIP
There's no setting to increase space between list items, but you can add a CSS rule by (we'll call the custom class name my-list-padding) and then :
The four padding numbers are for top, right, bottom, and left respectively.
See the settings below for more information about how to control the placement and style of the headings, content, and markers of items.
The General tab contains three sections: List items, Display, and List item tags.
This is where you add the content and style for individual list items. Click Edit list item to add the first item, after you save click Add list item for additional items. See the section on individual list item settings for details of editing list items.
Generic, Unordered, or Ordered, as described above.
Chose the icon for the list item marker. The choices depend on which type of list you choose, as described in the first section of this article.
Choose where the list item marker will appear. The choices are to the left or the right of the heading or the content. Choosing Right of heading or Right of content places the list item markers flush with the right margin of the list container. You can fine-tune the positioning of the icons by changing the Icon width and Icon padding settings in the Icon style section of the Style tab.
Choose the HTML tag that will be used for the list item's heading. You can choose from <h1> - <h6> or the <span> or <div> tag.
Choose the HTML tag that will be used for the list item's content. You can choose the <div>, <aside>, or <section> tag. If you're not sure, choose the generic <div> tag.
List background color Puts a background color around the entire list.
List padding (responsive) Adds padding between the list border and the list items.
List item padding (responsive) Adds padding around the list items themselves, as shown in this screenshot. If you want even more control over padding around list items, use the List item padding setting on the Style tab for individual list items.
Border around list (responsive) Adds a border, radius, or shadow around the list, using standard Accept Builder border settings.
This section sets style properties for the list item markers selected on the General tab.
Icon color
Icon size Size of the icon, in pixels.
Icon width Determines the width of the icon's boundary box. This setting is useful when some icons in your list are wider than others and you want to vertically align them. To achieve vertical alignment, the Icon width setting must be greater than the sum of icon size + icon right padding + icon left padding.
Icon padding (responsive) Increases padding between the icon and icon's border-box. If you have icons on the left, increasing the left icon padding indents the line and increasing the right icon padding increases the space between the icon and the text.
To adjust the vertical position of the icons, tweak the top or bottom padding.
Heading color The color of the heading text in every list item.
Typography (responsive) The standard Accept Builder Typography section for setting font family, weight, spacing, and so on.
Content color The color of the content in every list item.
Typography (responsive) The standard Accept Builder Typography section.
Item separator style Choices are the same as for borders: None, Solid, Dashed, Dotted, Double.
Line color The color of the separator line.
Separator size (responsive) The height in pixels of the separator line.
There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.
When you edit individual list items, there are additional settings that override the general settings for that specific list item.
Enter the text for the heading of the list item.
Enter the item content. This field is the same as the Text Editor module, where you can set typical WordPress styles on the text that you enter.
These settings override any global settings.
Heading text color
Content text color
Background color
Icon color
List item padding (responsive)
Generic lists let you select from your instead of using standard list markers. They are represented by the <div> tag in the HTML output, with the option to choose an icon from your regular icon set as the marker.