The Posts Block

📝 Note: These blocks are part of the Otter Blocks plugin, which you can get from here.

📝 Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and Patterns.

The Posts block allows displaying a certain number of posts on different pages. It can be useful when you want to showcase only a certain number of posts on the homepage, for example.

Settings Tab

Layout

Post type - from this area, you can select what type of content you want to display. It covers not only WordPress posts but also pages, products, feed categories, etc.
Layout - choose from two available formats: Grid/List.
Columns - control the number of columns in the grid layout.
Content alignment - decide how to align all the elements of the posts.

Settings

Order By - select the order of the posts to be displayed: Newest to oldest / Oldest to newest / A - Z / Z - A.
Categories - display only posts from certain categories, separated with commas or Enter key.
Number of items - choose the number of items to be displayed.
Offset - number of posts to displace or pass over.
Enable Featured Post - will showcase one featured post above the other posts in the layout. it can be the latest post or the sticky post.
Enable Pagination - if the number of items is much smaller than the total number of posts, you can use pagination to allow access to the others easily.

📝Note: Please note that if the feature post is enabled, the pagination will no longer work.

Elements

Customize the Image / Category / Title / Meta / Description
Visibility - control the visibility of the elements by clicking on the 👁️ icon.
Reorder the elements with a drag-and-drop movement.

Under the Elements tab, you will find a lot of options to customize the elements of the post. You can rearrange the order of the posts' elements or change their visibility.

Image

Image Size - adjust the size of the posts images, by choosing a predefined size from the drop-down list.
Crop image to fit - enable this to crop the image.

Meta

This panel contains the available meta and option to enable / disable them: Display post date, Display last updated date, Display author, Display comments, Display Category.

Description

Excerpt Limit - limits the length of the post's content in the block.
Display read more link - enable this option to add the Read More link.

📝 Note: To add more fields, activate the Advanced Custom Fields plugin.

Style Tab

Inside the style tab, you can control the individual posts' style (default/boxed) and typography options for title/description/meta/pagination size. Except for the pagination, all the others can be adjusted for each device (mobile/tablet/desktop).

Colors can be controlled by clicking on the plus sign. In this way, you can select different colors for elements like text, background, border, pagination link/background/border/active link/active background/ hover link. hover background/hover border/active border.

Image settings can also be configured from this place: border-radius or shadow settings.

From the Spacing accordion, you can control the column gap and row gap. content padding, space between posts, pagination gap/padding/container margin.

The border customizations include width settings, radius, pagination border-radius, pagination border width, as well as shadow settings.