Home WordPress How to Create an Impressive Image Background in Elementor

How to Create an Impressive Image Background in Elementor

Image is a crucial element of a design, including web design. Not merely adding, how you decorate an image also plays a role in giving a good impression to your visitors. In Elementor, you can add an image and decorate it by implementing certain settings. In this article, we will show you how to add a solid background of an image. To make it looks more impressive and appealing, we will shift the image. We will also add an animated effect to the image when you hover it.

To give you an overview, the following is an example of what we are going to create.

To be honest, the design above is inspired by the blog page of Learndash. Turns out, you can also get the same image decoration with Elementor. So, why not?

In Elementor, the Image element itself is available on both the free version and the pro version. In other words, you don’t need to upgrade to the pro version only to get a design style like we are going to create below. But, if you want to upgrade to the pro version to unlock more features, that’s a good idea.

  • To get started, create a new post/page and edit it with Elementor.
  • Add a new section by clicking the plus button on the Elementor canvas and choose the structure you want.
  • Add an image by dragging it from the Elements panel (the left side panel) to the canvas.
  • Select/activate the column that hosts the image by clicking it on the Navigator.
  • Go to the Style tab and set the background on the Background section. Set the background on the NORMAL and HOVER option. Make sure to use different colors. In this example, we choose the soft blue and a darker blue.
  • Select/activate the image by clicking it on the Navigator.
  • Go to the Advanced tab and set the margin on the Advanced section. We will set the margin to shift the image to a bit to the right-down. In this example, we use the following margin settings.
  • Switch to the Style tab and click the HOVER option on the Image section and select the HOVER animation of your choice. We use Sink in this example.

Done.

You can implement the image decoration like we have covered above on a team page, about page, contact page, or even the front page of your website.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

MOST-READ THIS WEEK