Search
Close this search box.

How to Set the Vertical Alignment of the Text Elements on the Elementor Posts Widget when the Image is on the Right/Left

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!

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.