1. Home
  2. Docs
  3. Dynamic Content Elements
  4. Post Grid

Post Grid

How to Configure & Style EA Post Grid

EA Post Grid places multiple post/blogs in an aesthetic post grid. The purpose of this element is to let you organize and place your posts in one place. With the help of it, you can nicely display the listing of your blog posts.

Table of Contents:

  1. How to Activate Post Grid
  2. How to Configure the Content Settings
    2.1. Query
    2.2. Layout Settings
  3. How to Style Post Grid
    3.1. Post Grid Style
    3.2. Others
  4. Final Outcome

1. How to Activate Post Grid

To use this Essential Addons element, find the EA Post Gridelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Post Grid’ into the Drag widget hereor the ‘+’ section.

Post Grid

After you are successfully done with this step, this is how the element is going to look like.

Post Grid

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will be able to configure ‘Query’ & ‘Layout Settings’.

2.1. Query

From this section, you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your source: Posts, Pages, WooCommerce Products & Manual Selection.

After choosing your preferred ‘Source’, you can filter your contents by ‘Author’, ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add as many authors, categories & tags as you wish. If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

Moreover, you can set the number of ‘Posts Per Page’ and changes its ‘Order By’ option as well. Simply use the order option to pick an ascending or descending layout for the posts.

Post Grid

[Click to See Live Demo]

2.2. Layout Settings

You can change the layout of EA Post Grid from this section. Assign the number of columns in which your blogs will be displayed. You can have a maximum of 6 columns for the grid. You can set the ‘Image Size’ as well.

Besides, you can use the toggle to hide or display ‘Load More Button’, ‘Image’, ‘Title’, ‘Excerpt’ & ‘Meta’. If ‘Excerpt’ option is enabled, you will able to set the limit of excerpt words. You can change the position of ‘Meta’ as well.

Post Grid

3.  How to Style Post Grid

Switch to the ‘Style’ tab to style all the features of Post Grid and get your desired result.

3.1. Post Grid Style

From the ‘Post Grid Style’ section, you can set a ‘Background Color’ for your Post Grid. You are able to change the ‘Spacing Between Items’ from here. Besides, you can also add Box Shadow & add ‘Border’ styling.

Post Grid

3.2. Others

From the ‘Color & Typography’ settings, you can adjust the Title style, Excerpt style, and Meta style separately. On the other hand, ‘Hover Card Style’ lets you add an animation on how your hover transition will appear when you move your mouse over a post. Besides, you can change the ‘Hover Icon’ and add styling to it as well.

Post Grid

You can adjust the Background & Text Color of the button both when it’s in a normal view or a when mouse is hovered over it from ‘Load More Button Style’ section. You are also able to easily customize the ‘Load More Button’ by adding Border, Box Shadow & changing its typography.

Post Grid

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Post Grid as per your preference.

Post Grid

This is how you can easily showcase your blog posts with an attractive & interactive layout using EA Post Grid.

Getting stuck? Feel to Contact Our Support for further assistance.

 

Tags , , , , ,

How can we help?