Post List

The Post List Block is suitable for displaying the posts of your site in a list form. By default, it displays the post with the thumbnail, post title, and date.

After you have chosen the Post List Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:

General Settings #

It comes with the following options listed below:

General #

• Preset: It refers to how the blog posts are organized or rearranged. Currenlty, the Post List block provides two layout styles with various styles on each layout for displaying the post.
  • Layout 1: You can choose from the preset styles: Style 1, Style 2, and Style 3. Style 1 is the default style, where posts are listed in vertical alignment. If you choose Style 2, you can align the post into columns. You can also set the number of columns to 2 or 4. Similarly, Style 3 aligns the featured image on one side, and the post title, date, and excerpt/details are on the other.
  • Layout 2: It aligns your posts vertically, highlighting the feature images of each post.

• Content Alignment: It sets the position of the content to be on the Left, Center, and Right positions. Moreover, you can set the position of the content to be different on various devices (Desktop, Tablet, and Mobile).
• Vertical Alignment: It sets the position of the content to be on the Top, Center, and Bottom Vertically. Moreover, you can set the position of the content to be different on various devices (Desktop, Tablet, and Mobile).
• Horizontal Alignment: This setting allows you to align the content to the Left, Center, or Right horizontally within the post block. Additionally, you can configure different horizontal alignment settings for various devices (Desktop, Tablet, and Mobile) to ensure optimal responsiveness and design flexibility.

Query #

The Query section provides powerful filtering controls to determine exactly which posts appear in your list:

• Category: Select specific categories to display from here.
• Tag: Filter posts by tag so that post with defined tags only appears as the latest post.
• Order By: Sort posts by a specific attribute like Date, Title or Random.
• Order: Choose between “Ascending” or “Descending” order for the post. Currently the post are displayed in descending order for the the “Date”.
• Excluded Category: Specify categories to omit.
• Authors: Filter to show posts from specific authors only.
• Post Count: Slider to control how many posts appear (currently set to “4”).
• Offset: Skip a specific number of posts from the beginning of results (currently “0”).

Heading #

The Heading area refers to the Title that gets displayed at the top of the posts and comes with the following option to customize it:

• Enable: Switch the Toggle to the right area to enable the heading on your site. Enabling the option will display the Heading on your end.
• Label: Change the label of the post, the default label is “Latest”.
• Preset: The Preset refers to the styles for displaying the heading area. Currently, it has eight layout styles with various styles on each layout for displaying the heading.

Image #

The option is for customizing the images of the post that appear while using the Post List block. It comes with the following customization options:

• Enable: Switch the Toggle to the right area to enable the featured image. Enabling the option will display the Featured Image of each post
• Position: It determines the position of the post list featured image.
• Hover Animation: It adds the animation effect while the featured image is being hovered on your end.

Meta #

Meta refers to the metadata that gets displayed on the post, such as Date, Views, read time, and so on. The Meta section controls what supplementary information appears with each post listing:

• Position: Choose between different locations for meta information display.
  • You can choose the meta data to appear above or below the post title.

Meta Elements

• Date: When enabled (toggle on), shows the publication date for each post.
• Read Time: When enabled (toggle on), displays estimated reading time (e.g., “0 min read”).
• View Count: When enabled (toggle on), shows how many times a post has been viewed.
• Separator: When enabled (toggle on), adds dividers between meta elements.
• Separator Type: Drop-down to select divider style (set to “Horizontal Dash”).
• Icon: When enabled (toggle on), displays icons next to meta information.

Note: Separators will only be seen after you enable multiple meta elements. 

Excerpt #

An Excerpt is a summary or brief description of a post that provides readers with a quick overview of the content, allowing them to decide whether they want to read more. The Excerpt displays below the meta with the following options;

• Enable: Switch the Toggle to the right area to enable the Excerpt. Enabling the option will display the Excerpt text on your end.
• Limit: By default, the featured post blocks limit excerpts’ length upto 20 words. You can increase or decrease the excerpt length on your preference.

Read More #

The Banner Posts Block allows displaying the Read More tag on the post. Clicking the read more button will display the full contents of your post. It comes with the following options:

• Enable: Switch the Toggle to the right area to enable the Read More. Enabling the option will display the Read More tag below the excerpt text.
• Text: It allows you to change the Read More Label. By default, the label is read more, which can be changed.

View All #

The View All section lets you configure a button that links to a complete archive of posts:

• Enable: Toggle switch (currently on) to display or hide the “View All” button
• Text: Customize the button label (currently set to “View All”).
• View Button Position: Control button placement from here.
• Enable Icon: The toggle switch (currently on) will show an icon alongside the text.
• Icon: Select your preferred icon from here. As you hover on the icon, you’ll see Change icon option. Click on it and select teh preferred icon from the pop-up.
• View More Link: It’s a URL field to set the destination page for the View All link.
• Open Link in a New Tab: Toggle to control link behavior, when enabled the link will be opened on a new tab of the user’s window.
• Nofollow Link: Toggle to add nofollow attribute for SEO purposes.

Pagination #

Pagination is a way of splitting the contents of your site into multiple pages. Banner Posts Block allows Pagination on the site with the options listed below:

• Enable: Switch the Toggle to the right area to enable the Pagination on your site. Enabling the option will display the Pagination below the page.
• Alignment: It sets the alignments for the Pagination. You can set the alignments as Left, Center, and Right. Moreover, you can also set the pagination position on different devices (Desktop, Tablet, and Mobile).

Number List #

The Number List section provides options to add numerical indicators to your post listings, creating a ranked or sequential appearance:

Enable: Toggle switch (currently on/purple) to activate or deactivate post numbering When enabled, each post in your list is accompanied by a sequential number (1, 2, 3, 4…) as shown in the red-highlighted area of the screenshot above.

Number Layout

• Square (currently selected): Displays numbers in square-shaped containers.
• Other common options include Circle, Zero at the front of the number or the default style with plain number.

Number Layout Style

• With Image (currently selected): Positions numbers alongside post thumbnails.
• With Text: Positions numbers alongside post title.

Post Separator #

Enable this option to add visual dividers between posts in your list.

Note that separators are only functional when using "Style 2" from Layout 1 in the Preset settings. This limitation exists because other styles already include built-in spacing or design elements that naturally separate individual posts

Style Customization #

Under the style option, you’ll find the following options available:

General #

• Gap: It refers to the space between the posts displayed on your site. You can enter a number straight into the field or use the slider to change the gap value in pixels. Moreover, you can set the gap value to be different on various devices (Desktop, Tablet, and Mobile).
• Padding: It adds gaps between the posts. You can increase or decrease the gap by entering a value in pixels. You can also set the padding for various device.

Post Box #

• Background: It sets the background color for the post box. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.

• Box Shadow: It adds a shadow effect around the box. When you enable the Box Shadow option, you will get the following customization options:
  • Color: It allows you to select the appropriate box-shadow color for the section block.
  • Horizontal-X: It displays the box shadows in the horizontal position.
  • Vertical-Y: It displays the box shadows in the vertical position.
  • Blur: You can set up the blur value of the box shadows appearing.
  • Spread: The shadow’s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site’s requirements.
  • Position: You can set the position of the box shadows as Inset or Outline.

Heading #

• Heading Color: It allows you to change the color of the heading Text in Normal and Hover modes.
• Border Color: It allows you to change the color of the heading Border in Normal and Hover modes.
• Background Color: It allows you to add the background on the heading area. You can add an image or use the color to set the background.

Heading Style Options

The Heading section allows you to customize the appearance of the Post List Block title (shown as “Latest” in the example):

• Heading Color: Click to open a color palette and choose any color for your heading.
• Typography: Opens typography controls (pencil icon). You can modify font family, size, weight, and other text properties.
• Normal/Before Tabs:
  • Normal (active): Customize the default heading appearance.
  • Before: Style a decorative element that appears before the heading.
• Type: Controls the border style around your heading.
• Radius: Add rounded corners to your heading background or border. Enter pixel values to control the amount of rounding.

Image #

• Height: It sets the Height of the feature image. You can enter a number straight into the field or use the slider to change the image height in pixels. Moreover, you can set the height value to be different on various devices (Desktop, Tablet, and Mobile).
• Width: It sets the Width of the feature image. You can enter a number straight into the field or use the slider to change the image width in pixels. Moreover, you can set the width value to be different on various devices (Desktop, Tablet, and Mobile).
• Radius: It sets the curve of the images on the corners. Moreover, you can set the border-radius value to be different for various devices (Desktop, Tablet, and Mobile).

Post Title #

The options work for the post title of the Post Title block and provide the following options:

• Typography: It controls the Post title Font Family, Weight, Font Size, Line height, Letter spacing, Style, Decoration, and Transformation.
• Text Color: It allows you to change the color of the post title on Normal and Hover Mode.

Meta #

The Meta section provides visual customization for the post metadata elements (like dates, read times, and view counts):

• Icon Color: It allows changing the icon’s color to represent the metadata.
• Link Color: It allows changing the color of the link representing the metadata.
• Separator Color: It’s a color picker for the dividers between metadata items.
• Typography: Opens detailed text controls (pencil icon):
  • Adjust font properties for metadata text.
  • Modify size, weight, line height, and other text attributes.

Excerpt #

The Excerpt section controls how post summaries appear in your list display:

• Text Color: It allows you to set the Excerpt Text color.
• Margin: It manages the margin value of the excerpt text.

Read More #

• Text Color: It allows you to change the color of the Read More label on Normal and Hover Mode.
• Background: It allows you to add a background for the Read More Tag. You can add an image or use the color to set the background.
• Spacing: It manages the spaces between the content above the Read More tag.
• Padding: It sets the padding value for the Read More Tag.
• Border: It customizes the Border area added around the Read More Tag.

View All #

The View All section provides comprehensive styling options for the “View All” button (visible as a blue button with arrow at the bottom of the post list):

• Text Color: Color picker for the button text.
• Background: Opens styling controls for the button background.
• Spacing: Sets outer margin to control distance from surrounding elements.
• Padding: Sets inner spacing to determine button size and text placement.
• Border: Toggle switch to enable border styling.
  • Normal/Hover Tabs: Switch between styling for default and hover states.
  • Type: Click to set different types of border.
  • Radius: Controls corner rounding creating the soft-cornered appearance.
  • Box Shadow: Toggle and click on the pencil icon for further settings.
• Icon Size: Control the silder to set pixel value to adjust the arrow icon size.

Pagination  #

• Text Color: It allows you to change the color of the pagination on Normal and Hover Mode.
• Background: It allows you to add the background for the Pagination. You can add an image or use the color to set the background.
• Padding: It sets the padding value for the Pagination.
• Border: It customizes the Border area added around the Pagination.

Number List #

The Number List section provides detailed customization for the numerical indicators that appear next to each post:

• Typography: Click on the edit icon to adjust number text appearance:
  • Modify size, weight, and other properties of the numbers themselves.
• Number Color: Color picker for the numerical text.
• Left Spacing: Adjusts horizontal position to control how far from left edge. Negative values pull numbers further left, creating the column effect seen in the image.
• Top Spacing: Sets vertical position to align numbers with post content.
• Background: Opens styling controls for number container.
• Border: Opens border styling options. You can add borders around number indicators for additional definition. It offers different types of border and other options for the border like radius and shadow.

Advanced Settings #

The Advanced section consists of four options for the Post List block.

Spacing #

Under the spacing section, you can find the following options available:

• Block Margin: According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
• Block Padding: According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).

Z-Index #

It allows you to set the priority of the Banner Posts block according to the site requirement.

Responsive Condition #

Using the option, you can enable/disable displaying the block on various screen sizes:

• Hide on Desktop – It hides the Featured Post block on the Desktop.
• Hide on Tablet – It hides the Featured Post block on Tablet.
• Hide on Mobile – It hides the Featured Post block on Mobile.

Advanced #

Under the option, you can set the CSS ID and Classes for this particular Post List block. The available options are listed below:

• Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.

• CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
• Additional CSS Class(es) – It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.

For example, if you want to change the width of the Banner Posts block only, you can add a class such as post-list-width to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

.post-list-width{
width:70%
}

Upon adding the code, it will make the changes only to this particular Post List block and not other blocks.