Table of Contents
How to Configure & Style EA Post Block #
EA Post Block helps you to display your blog posts with a variety of styles using the power of modern CSS Flexbox. Thanks to its attractive layouts, you can easily use this element to catch the eye of your site visitors & get high traffic on your blog postings.
Table of Contents: #
- How to Activate Post Block
- How to Configure the Content Settings
2.2. Layout Settings
- How to Style Post Block
3.1. Hover Card Style
- Final Outcome
1. How to Activate Post Block #
To use this Essential Addons element, find the ‘EA Post Block‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘EA Post Block’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with this step, this is how the element is going to look like.
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.
2.2. Layout Settings #
You can use the dropdown menu to change the Layout of your Post Grid from out of these two: Default & Overlay. You are able to 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.
3. How to Style Post Block #
Switch to the ‘Style’ tab to style all the features of Post Block and get your desired result.
3.1. Hover Card Style #
From ‘Hover Card Style’ section, you can add an animation on how your hover transition will appear when you move your mouse over a post. Besides, you can change the ‘Post Hover Icon’ and modify its background color.
3.2. Others #
‘Post Block Style’ allows you to set a ‘Background Color’ for your Post Block. You are able to change the ‘Spacing Between Items’ from here. Besides, you can also add Box Shadow & add ‘Border’ styling.
Moreover, you have the flexibility to change alignment, color & typography of ‘Title’, ‘Meta’ & ‘Excerpt’ style from the ‘Color & Typography’ section.
On the other hand, 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.
4. Final Outcome #
By following the basic steps and a bit more modifying, you can style your Post Block content as per your preference.
This is how you can easily display your articles in a visually appealing & interactive layout using EA Post Block.
Getting stuck? Feel to Contact Our Support for further assistance.