Search

How to Make Images Larger than Text in Elementor Single Post Template

If you’re building your WordPress site with Elementor and looking for an idea to highlight your image content on your website posts, making the images larger than the text in the Single Post template is one of the ways we recommend.

By increasing the size of the images, you can create a visually striking design that captures the attention of your website visitors. It tends to be more eye-catching and can evoke stronger emotional responses.

In this tutorial, we will show you how to create an Elementor Single Post template that emphasizes images and make them larger than the accompanying text.

Steps to Make Images Larger than Text in Elementor Single Post Template

First, before we start the tutorial, we want to ensure that you’ve already upgraded to the Elementor Pro. Because the Single Post template itself is one of the features of Theme Builder, which is only accessible on the Pro version.

Step 1: Add or Edit the Single Post Post Template

On your WordPress dashboard, navigate to Templates -> Theme Builder. Once you enter the Theme Builder window, click the Single Post menu to add a new template or select the existing one.

In this example, we will edit our existing single post template. Insert the Post Content widget into the canvas area if creating a new single post template.

As you can see from the GIF above, by default, the images in your Post Content widget will not exceed the size of the text; the width can be the same or even smaller.

Step 2: Add the Custom CSS

We will add the simple CSS snippet once you add the Post Content widget.

Go to your Post Content widget settings, and navigate to the Advanced tab -> Custom CSS. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.

@media (min-width: 768px) {
    .elementor-widget-container h1,h2,h3,h4,p,li,ul {
        padding: 0px 75px;
    }
}

The Code Explanation:

  • @media (min-width: 768px) { … }: This is the beginning of a media query rule. It specifies that the enclosed CSS styles will only apply when the viewport width equals or exceeds 768 pixels (tablet and desktop).
  • .elementor-widget-container h1, h2, h3, h4, p, li, ul { … }: This is a selector that targets multiple elements within the .elementor-widget-container class. The targeted elements are heading one to four, paragraphs, order, and unordered lists.
  • padding: 0px 75px;: This is a declaration that sets the padding of the selected elements. The value 0px 75px represents the padding values for the top/bottom and left/right, respectively. This means the elements will have no padding on the top and bottom and 75 pixels on the left and right.

Once you add the CSS snippet to the Post Content widget, the images displayed are larger than any text elements (headings, paragraphs, etc.), and the changes are only applied on tablet or desktop screens.

That’s it. If you’re happy with the result, keep it like this and publish or update your single post template. But if you want to modify the padding value (right and left), you can edit the padding property value on the CSS snippet.

The Bottom Line

This article demonstrates how simple it is to change the Elementor Single Post template such that the images are larger than the text. Using this aesthetically pleasing design, you may create fascinating single-post pages for your website. Always keep things in balance, and make sure the layout is aesthetically pleasing and user-friendly.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
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 save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?