EB Post Grid

With the EB Post Grid block, you can create a stunning and interactive visualization for your blogs and web pages in a grid layout. Your website visitors can view multiple posts or pages from the Grid-styled sections and view them with just a single click. 

Follow this step-by-step guide to design website content using the EB Post Grid block in Gutenberg.

How To Activate EB Post Grid Block?  #

First, install and activate the Essential Blocks for Gutenberg plugin in your WordPress dashboard. This outstanding block library comes with modular control which gives you the freedom to enable only the blocks that you are using. 

Afterward, to activate the EB Post Grid block, navigate to Essential Blocks → Blocks from your WordPress dashboard. Then, toggle to enable this ‘Post Grid’ block. After that, click on the ‘Save’ button. 

EB Post Grid

How To Configure EB Post Grid In Gutenberg? #

Open a new web page where you want to add the EB Post Grid. Then, click on the ‘+’ icon to add a new block. Afterward, find the ‘Post Grid’ from the search option. Simply just click on the block and it will be activated as you can see below.

EB Post Grid

Alternatively, you can also add this block to your web page using another method. Click on the ‘+’ icon from the top left corner then search for ‘Post Grid’. Now, simply drag and drop the block to your web page.

EB Post Grid

General #

Now, click on the block and go to the ‘General’ tab from the right-side panel to customize this block as you want. From the ‘Query’ option select the source, author, categories, and tags as needed. . 

EB Post Grid

By default, your last 6 posts will be added to the post grid. If you want to add any specific post or page you can choose it from the ‘Posts Include’ option. Also, if you want to exclude any specific post or page you can choose it from the ‘Posts Exclude’ option.

EB Post Grid

Then choose how many posts you want to showcase from the ‘Post Per Page’ option and select the ‘Offset’, ‘Oder By’, and ‘Order’ options. 

EB Post Grid

Now, enable the ‘Load More Settings’ to let your users view and navigate more posts after the 6 on display. Select an option from ‘Load More’, ‘Pagination’, or ‘Prev-Next’, then adjust the ‘Button Text’ or icons from there. Also, set the alignment of the buttons from there. 

EB Post Grid

From the ‘Layout Styles’ choose your preferred layout for the post grid. Go to the ‘Templates’ option; you will find 5 different template styles to choose from. Select a style from there and set the total column and adjust the column gap as you want.

EB Post Grid

Toggle on or off the ‘Show Thumbnail?’ option and adjust the height for the thumbnail from there. Also, select the ‘THUMBNAIL IMAGE SIZE’ as needed.

EB Post Grid

Afteward, toggle on or off the ‘Show Title?’ option and select a ‘TITLE TAG’ from there.  Choose how many words you want to showcase on the title from the ‘Title Words’ option.

EB Post Grid

Now, toggle on or off the ‘Show Excerpt?’ option and choose how many words you want to showcase, and adjust the ‘Expansion Indicator’ from there. Enable or disable the ‘Show Read More Button’ options as needed and customize the button text.

EB Post Grid

Similarly, toggle off or on the ‘Show Meta’ option as needed and choose the ‘Header Meta’ for the post grid. Also, choose the ‘Footer Meta’ as you want from there.

EB Post Grid

Now, to provide a more advanced filter option for your visitors, enable the ‘Show Filter By Taxonomy’ option and go to the ‘Select Taxonomy Type’ option. Choose from your posts, pages, or WooCommerce products pages for the Taxonomy filter. After that, choose the specific category type you want to showcase from the ‘Select Taxonomy’ option. 

EB Post Grid

Style #

There are tons of styling options for you to make your Post Grid truly stand out. From the Style tab, you can choose the style of column, thumbnail, title, color, typography, etc to make it more attractive. 

EB Post Grid

From the ‘Columns’ option, adjust the padding and style the background of the grid columns as you want. Choose your preferred background from there and apply different border styles on the Post Grid Block. 

EB Post Grid

From the ‘Thumbnail’ option, adjust the border-radius and margin to sync the block with your website layout. Also, add overlay colors to make the block more visually appealing.

EB Post Grid

Go to ‘Title’ and adjust the color and alignment of the post or page titles. Now, customize the ‘Typography’ and ‘Margin’ as you need.

EB Post Grid

From the ‘Excerpt’ option, customize the color and typography of the excerpt as you like. Also, from the ‘Read More Button’ option style the read more button as you want. 

EB Post Grid

Go to ‘Meta Syles’ then adjust the ‘Header Meta Alignment’ and ‘Header Meta Gap’ and the margin from there. 

EB Post Grid

Now, customize the ‘Footer Meta Alignment’ and ‘Footer Meta Gap’ and margin as you need.  Then adjust the author, date, category, tag, etc. color from there as well.

EB Post Grid

Also, customize the meta ‘Tyhpgraphy’ and ‘Avatar Radius’ and adjust the ‘Load More Style’ similarly. With these customizations, you can make the Post Grid block more attractive to visitors.

EB Post Grid

Afterward, personalize the color of the taxonomy from the ‘Taxonomy Filter Style’ option. You will get options for customizing the color, typography, background, and more from here. 

EB Post Grid

Advanced #

From the Advanced tab, you can adjust the margin and padding. Also, you can choose the background, select border styles from 9 preset, adjust the responsive control and you can also choose an animation from the large list. 

EB Post Grid

Final Outcome #

By following the basic steps and a bit more modifying, you can style the Post Grid however you want. Play around with the settings to design a stunning post grid using Essential Blocks for Gutenberg to amaze your site visitors and make them click on your blogs.

EB Post Grid

This is how you can easily configure and design your EB Post Grid block in Gutenberg.

Getting Stuck? Feel free to contact our dedicated support team for further assistance.

Powered by BetterDocs