When users come to your page, they’ll have some kind of reaction. Whether it’s positive or negative, in large part, is determined by what they see. Since vision is the strongest human sense, images are one of the fastest ways to grab a user’s attention. Visual communication has the supreme power of directly connecting with a user in a flash: bold, graphic, and intentional imagery helps to engage the user.
In this article, we’ll walk you step-by-step through the process of adding, setting up and customizing images using 2 widgets available in Elementor: Image and Image Box. Also, in the final section, we’ll find out how to add a text overlay over the image.
For the purpose of this tutorial we’ll create a simple layout for a page which contains 5 images:
1 primary image (hero image) located at the top
3 secondary images with descriptions and links to the site’s section
1 marketing image with a text overlay
The purpose of this page is to tell a story about augmented & virtual reality and prepare viewers for the next steps. The wireframe for our page will look like this:
The top area of the page is dedicated to the main image. The main image