Creating lists is essential for organizing any information and content. The WordPress aBlocks List Block is a simple essential tool for organizing information into ordered or unordered lists.
With the WordPress aBlocks List Block, you can build easy-to-read, structured lists in just a few steps, and in the same way, you can make your lists visually appealing and more interactive. Now Let’s start
Using the aBlocks List Block: A Detailed How-To Guide
Log in to your website’s admin dashboard page and add to a new page or post.
Now, you can see the (+) icon and click here.
To add an aBlocks List Block:
- Click the (+) icon to open the blocks menu.
- Scroll through the blocks and select “aBlocks List Block.”
- The default aBlocks List Block will be added to your page.
You can now customize the list to match your style.
Customizing aBlocks list block
Now, here step-by-step see how to use and customize the aBlocks List Block for your website.
General and Advanced
When customizing your aBlocks List Block, you’ll see two sections on the right side: General and Advanced.
General
In the general section, you can see the List of options. The lists option has two default systems, like
- Content
- Style
Content
The Content section has many customized options.
Marker Type: The Marker Type option lets you choose how the list items are marked. Available marker types include:
- Icon: Use a custom icon as the marker for your list of items. Also, you can easily change the position of your icon.
- Disc: A simple filled circle as the bullet point.
- Square: A solid square as the marker.
- Emoji: Use an emoji as the marker for a fun and creative touch.
These options give you the flexibility to match the style of your list with your design needs.
Layout
In the Layout section, you can choose how your list items are arranged. There are two options:
- Vertical
- Horizontal
Vertical: The Vertical Section includes a Vertical Position of your list.
You can easily change your vertical position on the left, center, and right from here.
- Left: Align the list to the left side.
- Center: Centers the list within the block.
- Right: Align the list to the right side.
Horizontal: In the Horizontal Section, you can adjust the Horizontal Position of your list items with the following options:
- Flex Start: Aligns the list items to the left side.
- Center: Align the list items to the center position..
- Flex End: Aligns the list items to the right side.
- Space Between: Distributes the items with equal space between them, with no space at the edges.
- Space Around: Adds equal space around each item, including edges.
- Space Evenly: Distributes equal space between items and at the edges.
These settings give you flexibility in how your list items are spaced and aligned horizontally.
Add item
To Add item in the aBlocks List Block:
- Add New Item: In the block editor, click the Add Item button or simply press Enter after the last list item to insert a new one.
- Edit the Item: Type your text for the new list item.
You can continue adding as many items as needed to your list. After adding new items, you can easily change their Content and Style:
- Content: In the content section, you’ll find a text box and a link box. You can quickly add or edit text in the text box. To insert or customize a link, simply use the link box.
- Style: In this section, you’ll find the Text Color option. Select your preferred color to match your design.
These simple steps allow you to customize each list item to fit your preferences.
Style
In the Style section, you’ll find several customization options.
Color: First, you’ll see the color section. You can choose your preferred color from here to match your design. For advanced details on these options, please refer to the aBlock Advanced Color Settings.
Typography: In this section, you’ll find various customization options. For advanced details on these options, please refer to the aBlocks Typography documentation.
Space Between Horizontal: This option controls the spacing between elements placed horizontally. Adjusting this setting will help you create the desired distance between items, enhancing the overall layout.
Space Between Vertical: This option manages the spacing between elements arranged vertically. You can modify this setting to ensure that vertical elements are appropriately spaced for a balanced design.
Divider: The divider section includes several customization options. By clicking the toggle button, you can access these options, which include:
- Style
- Weight
- Width
- Border Color
Style: Choose the visual style of the divider from the following options:
- Solid: A continuous, unbroken line.
- Double: Two parallel lines for a bolder look.
- Dotted: A line made up of dots.
- Dashed: A line made up of dashes.
Weight: Adjust the thickness of the divider.
Width: Set the width of the divider.
Border Color: Select the color for the divider’s border.