Black Friday Exclusive

Grab The Deal Before Switching To Annual Plan! *Lifetime Plan Will Not Come Again

Create Perfect Lists with WordPress List Block and aBlocks

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.

navigate aBlocks all block

To add an aBlocks List Block:

  1. Click the (+) icon to open the blocks menu.
  2. Scroll through the blocks and select “aBlocks List Block.”
  3. The default aBlocks List Block will be added to your page.

You can now customize the list to match your style.

aBlocks List Block

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.

Customizing your aBlocks List Block

General 

In the general section, you can see the List of options. The lists option has two default systems, like

  1. Content 
  2. Style

Content

Customize the sections of the List of 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:

  1. Icon: Use a custom icon as the marker for your list of items. Also, you can easily change the position of your icon.
  2. Disc: A simple filled circle as the bullet point.
  3. Square: A solid square as the marker.
  4. 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.

Marker type customizations

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.

  1. Left: Align the list to the left side.
  2. Center: Centers the list within the block.
  3. Right: Align the list to the right side.
Vertical alignment customizations

Horizontal: In the Horizontal Section, you can adjust the Horizontal Position of your list items with the following options:

  1. Flex Start: Aligns the list items to the left side.
  2. Center: Align the list items to the center position..
  3. Flex End: Aligns the list items to the right side.
  4. Space Between: Distributes the items with equal space between them, with no space at the edges.
  5. Space Around: Adds equal space around each item, including edges.
  6. 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.

Horizontal alignment customizations

 Add item

To Add item in the aBlocks List Block:

  1. 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.
  2. 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:

  1. 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.
  2. 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.

Add item in the aBlocks List Block

Style

Customize the sections of the List of 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.

Color customize

Typography: In this section, you’ll find various customization options. For advanced details on these options, please refer to the aBlocks Typography documentation.

Customize the typography of list blocks

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.

Adjust the spacing between items in horizontal and vertical list blocks.

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
Customize the divider style for list blocks

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.
Customize the Style of list blocks

Weight: Adjust the thickness of the divider.

Width: Set the width of the divider.

Border Color: Select the color for the divider’s border.

Adjust the weight and width of list blocks