1. Home
  2. Docs
  3. Post Elements
  4. Post Block

Post Block EA Element

Post Block EA Element lets you display your blog posts with a variety of styles using the power of modern CSS Flexbox. With the help of its attractive layouts, you can easily use this element to catch the eye of your site visitors & get high traffic on your blog postings. Here in this tutorial, you’re going to learn how to use the Post Block element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Post Block Element

 

»Content

 

Post Block

⇒Source: Select the source post type to fetch posts. If you choose a manual selection, you will get further options to choose posts manually. It can be post or page.

⇒Author: Select the name of the author whose post you want to display.

⇒Categories: Select the category whose post/page you want to view.

⇒Tags: To display posts associated with a particular tag.

⇒Include: If you want to display only certain posts, then you can define the include here.

⇒Exclude: If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

⇒Posts Per Page: You can restrict posts per page to display a specific number of posts on a single page. It takes a numeric value which signifies the number of posts to be displayed at a time.

⇒Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)

⇒Order By: Order your post in a certain manner. You can use different options like Date, Title, etc to filter your post.

⇒Order: Sort your post in ascending or descending order based on the criteria selected in Order By option.

 

Layout Settings

⇒Post Block Style Preset: Set the style preset of the post block either default or overlay.

⇒Show Load More: Show/hide the load more button from the post. If select Show, enter the label text.

⇒Show Image: Show/hide the image from the post. If select Show, customize the image size to fit in the container.

⇒Show Title: Show/hide the title from here.

⇒Show Excerpt: Show/hide the excerpt here. If the ‘Excerpt’ option is enabled, you will able to set the limit of excerpt words and add the expansion indicator.

⇒Show Read More: Show/hide the read more button from the post. If select Show, enter the button text.

⇒Show Meta: Show/hide the meta here. If the ‘Meta’ option is enabled, you will able to change the position of the meta.

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.


»Style

 

Post Grid Style

⇒Animation: Select an animation for the post grid.

⇒Post Hover Icon: Add an icon to the post in hover.

⇒Background Color: Add custom background color to the post grid.

⇒Icon Color: Add custom color to the post hover icon.

⇒Icon Font Size: Customize the icon font size manually for different dimensions.

 

Post Block Style

⇒Post Background Color: Add a custom background color to the post block and customize the opacity.

⇒Spacing Between Items: Generate the space between the post block items. Enter the value for the top, right, bottom and left side the post block for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of each block for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the post block border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the post blocks. You can adjust the border-radius in pixels, % or em.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Content Box Padding: Set the padding value for the top, right, bottom and left around the content box for different dimensions. You can link the values together or customize them individually.

 

Color & Typography

⇒Title Style:

→Title Color: Add a custom color to the post title and customize the opacity.

→Title Hover Color: Add a custom color to the post title and customize the opacity for the hover mode.

→Title Alignment: Customize the title alignment.

→Typography: Set the typography options for the title.

→Title Spacing: Customize the title spacing.

 

⇒Excerpt Style:

→Excerpt Color: Add a custom color to the excerpt and customize the opacity.

→Excerpt Alignment: Customize the excerpt alignment.

→Excerpt Typography: Set the typography options for the excerpt.

→Excerpt Spacing: Customize the excerpt spacing.

 

⇒Read More Style:

→Typography: Set the typography options for the read more button texts.

→Read More Color: Add a custom color to the read more button text and customize the opacity for both normal and hover mode.

→Padding: Set the padding value for the top, right, bottom and left around the read more button for different dimensions. You can link the values together or customize them individually.

 

⇒Meta Style:

→Meta Color: Add a custom color to the post meta and customize the opacity.

→Meta Alignment: Customize the meta alignment.

→Meta Typography: Set the typography options for the meta.

→Padding: Set the padding value for the top, right, bottom and left around the meta for different dimensions. You can link the values together or customize them individually.

 

Hover Card Style

⇒Animation: Select an animation for the hover card.

⇒Post Hover Icon: Add an icon to the post in hover.

⇒Background Color: Add custom background color to the hover card.

⇒Icon Color: Add custom color to the post hover card icon.

⇒Icon Font Size: Customize the icon font size manually for different dimensions.

 

Load More Button Style

⇒Padding: Set the padding value for the top, right, bottom and left around the load more button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the load more button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the load more button.

⇒Text Color: Add a custom color to the load more button text and customize the opacity for both normal and hover view.

⇒Background Color: Add a custom background color to the load more button and customize the opacity for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the load more button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the load more button border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the button. You can adjust the border-radius in pixels, % or em.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Button Alignment: Set the load more button alignment either left, center or right.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Post Block Element.


Was this article helpful to you? Yes No

How can we help?