How To Add Text Over Image in Elementor

How To Add Text Over Image in Elementor

Adding text over images with Elementor can be accomplished in several ways. In this document you will learn two of the most common methods to accomplish this.

Using Negative Margin on the Text

Drag and drop an Image Widget into a column and select your image from the media libraryDrag and drop a Heading Widget below the image and edit your textIn the Advanced Tab, unlink the margin properties and apply a negative top margin (example: -40%)Set the Z-Index to a number greater than the image (example: 5)

Using the Text Over a Background Image

Drag and drop a Heading Widget to a column or section and edit the textFrom the column Style Tab > Background use the image option. Select an image from your library or upload a new imageSet the background size to Contain, or Cover (some cropping of the image will occur when using this option)In the Advanced Tab, unlink the padding properties and apply a top and bottom padding (example 40%). This will allow the image to retain its shape for tablet and mobile responsivenessAdd margin to increase the gap between the background image and the container

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注