Elementor — the Pro version — has a native Posts widget which is dedicated to displaying content on your website. You can use the widget to display a wide range of content types. From blog posts, pages, to custom content of custom post types.
Just like other Elementor widgets, the Posts widget also comes with many built-in styling options to allow you to create a beautiful-looking blog page — or other pages depending on your use case. If you want to add a certain style and it is not available on the styling options list, you can achieve it via custom CSS.
In case you still don’t know how to add custom CSS in Elementor, we have a separate article you can read first. In this post, we will share some useful CSS snippets you can add to the Posts widget.
By the way, if you are looking for a blog page template for Elementor, we have some items you can take a look at.
Handy CSS Snippets for Elementor Posts Widget
— 1. CSS Snippet Make Text Content Vertically Centered
In Elementor, you can easily display blog posts in a list style by simply setting the column number to 1 and set the thumbnail position to left or right. If you use these settings, the thumbnail and post title will be in a parallel position. by default. Take a look at the following screenshot.
In case you want to make the post title — and other text content (excerpt, meta, and read more) to be vertically centered — with the thumbnail as the pivot — you can use the following snippet.
selector .elementor-post__text{
margin: auto;
}
Here is the result of the above snippet.
You can read this post for more detailed instructions to use the above snippet.
— 2. CSS Snippet to Add Zoom Effect on Hover on Thumbnail
The Posts widget has a built-in setting to apply hover effect on post thumbnail. However, the options are limited to CSS filters only such as blur, contrast, brightness, and so on. There is no option to add a zoom effect. If you want to add a zoom effect, you can use the following snippet.
selector .elementor-post__thumbnail:hover{
transition: all .50s ease-in-out;
transform: scale(1.05);
cursor: pointer;
z-index: 1;
}
The above snippet will result in the following effect.
You can read this post to learn more about how to apply hover effect to post thumbnail on the Posts widget.
— 3. CSS Snippet to Turn Read More Text into a Button
The Posts widget allows you to add the read more link element to your content feed. The styling options for the read more link element are limited. You can only set the typography (font size, style, and so on), text color, and spacing. There is no option to turn it into something that is more appealing. A button, for instance.
If you want to turn the read more link into a button, you can use the following CSS snippet:
/*normal state*/
selector .elementor-post__read-more{
padding: 6px 12px;
border: solid 1px #4732ca;
background: #4732ca;
transition: all .5s;
border-radius: 0px;
}
/*hover state*/
selector .elementor-post__read-more:hover{
padding: 6px 12px;
color: #4732ca;
border: solid 1px #4732ca;
background: #F9F9FA;
transition: all .5s;
border-radius: 0px;
}
The above snippet is divided into two sections: the normal state and hover state. Here is the result of the above snippet.
Feel free to change the color, border radius, and size. For more detailed instructions on how to change the read more link of the Posts widget into a button, you can read this post.
— 4. CSS Snippet to Add Border to Numbered Pagination
There are three pagination types you can use on the Posts widget: numbered, load more (on click), and infinite load. You can read our previous post to learn how to add pagination in Elementor.
If you use the numbered pagination, you can only set the typography as well as the text color, just like read more link above. The following snippet will add border to each pagination number.
/*normal state*/
selector .page-numbers{
padding: 10px 20px;
background: #140E26;
transition: all .5s;
border-radius: 0px;
}
/*hover state*/
selector .page-numbers:hover{
padding: 10px 20px;
color: #2c263c;
background: #f0f3f6;
transition: all .5s;
border-radius: 0px;
}
/*active state*/
selector .page-numbers.current{
padding: 10px 20px;
color: #2c263c;
background: #f0f3f6;
transition: all .5s;
border-radius: 0px;
}
The above snippet is divided into three sections: normal, hover, and active. The above snippet will result in the following outcome:
You can read this post to learn more about how to further style up the numbered pagination in Elementor.
— 5. CSS Snippet to Add Underline on Hover on Post Title
There is no built-in option to add a hover effect to the post title element on the Posts widget. The only way you can do to do so is by adding custom CSS. The following snippet will add a simple hover effect to the post title in the form of underline.
selector .elementor-post__title:hover{
text-decoration: underline #FD63FD 4px;
}
You can change the underline color by replacing the hex code. To set the underline thickness, you can replace the default value (4px).
Here is the result of the above snippet:
— 6. CSS Snippet to Add Zoom Effect to Individual Blog Post
Want to apply a zoom effect to individual blog post on your content feed? You can use the following snippet, then.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.01);
cursor: pointer;
z-index: 1;
}
Here is the outcome of the above snippet:
You can read this post to learn more about how to add hover effect to individual blog posts in the Posts widget of Elementor.
The Bottom Line
The Elementor Posts widget is a widget dedicated to displaying your content on a page on your WordPress site. You can use the widget whether to display default content (Posts and Pages) or custom content of custom post type. There are some built-in styling options you can use to style up your content feed. If you can’t find an option for a certain style, you can use custom CSS achieve it.
On some Elementor hosting services, you might need to clear the cache in order for your custom CSS to apply. Also, you might need to clear the cache on your web browser.
