Suppose you have a blog post on your website and use Elementor to build your website. Surely, you’re familiar with Elementor Posts widget. Elementor Posts widget allows you to display a list of any post types in various layouts.
Well, talking about layouts, the Posts widget gives you options to set the image position of your posts, such as the top, left, right, or even no image. Let’s say you want the position of the images on the right or left and display it in one column so the text elements, such as title, excerpt, metadata, etc., will appear beside the image in vertical alignment. Unfortunately, by default, you can’t adjust the position of the text elements.
This article will show you how to custom the vertical alignment of the text elements on the Elementor Posts widget when the image is on the right or left.
How to Custom the Vertical Alignment of the Text Elements on the Elementor Posts Widget when the Image is on the Right/ Left
Before we start the tutorial, we want to inform you that this tutorial will work with the Elementor Posts widget and Elementor Custom CSS. The Posts widget and Custom CSS feature are only accessible on Elementor Pro; ensure you’ve upgraded to the pro version.
Alright. Let’s get started!
Go to your Elementor editor, and we will start everything from scratch, so create a section with a single column. Afterward, please select the Posts widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the Posts widget, you can edit and style up the widget with what you prefer.
In this example, we apply some changes to the Layout section, as shown in the image below:
Note: Please ensure you’ve already posted some posts on your site.
Once you’ve edited and styled the Posts widget, next, we will add the simple CSS snippet.
On the Posts widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.
selector .elementor-post__text{ margin-top: 50px; }
The Code Explanation:
The code above selects the class selector of the text element using the .elementor-post__text
and set the margin top to 50px. You can check the complete list of Elementor widget selectors here. The style of the text element is defined between the curly brackets.
That’s it. As you can see from the image above, once you add the custom CSS, the text element is still in vertical alignment, but the position is no longer aligned with the post image (downwards). You can also edit the position of the text element by editing the margin-top
value on the CSS snippet.
To set the alignment to center (vertically), you can use the margin
property and set the value to auto
. Example:
selector .elementor-post__text{ margin: auto; }
The Bottom Line
Elementor Pro empowers you with vast professional tools that speed up your design. Posts widget and Custom CSS are great features you will get if you upgrade to the pro version.
This article shows how easily you can customize the vertical alignment of the text elements on the Elementor Posts widget when the image is on the right or left. We hope this tutorial is helpful for you. Happy designing!