How to Design Background using Elementor in 2021

We all know the importance of a meaningful attention-grabbing background in websites. It’s not as simple as it sounds, it can make or break the worth of your business content display. Some of the key points to keep in mind while design background using elementor with images are:

• Choosing the image that supports the aim of website to accurately convey the information to a user.

• Choose the image of perfect size.

• Choosing an image in such a way that it doesn’t lose its focal point when you run the website to other devices. To do so, you can either choose an image without a focal point, or to keep the focal point always in center.

• Using a consistent color theme throughout the website, and the background must coordinate well with the foreground.

In this article, we are going to design a simple website’s background using Elementor, to enlighten you with the important features of Elementor for handling with background images and the content over them.

Table of Contents

Step 01: Create a Page

From your WordPress dashboard, create a new page and choose Edit with Elementor. Make sure you have Elementor/Elementor Pro plugins installed. Give the page a name of your choice.

Step 02: Prepare Canvas

Under the settings tab located in the bottom right corner, choose the following options:

• Enable the Hide Title toggle button (This will hide the title of your page that you provided during page creation, from appearing)

• Set the Page layout to Elementor Canvas

Now, go to the Style tab:

Under the Body Style section, click on Classic Background Type.
Choose an image from library.
Set the Attachment as Fixed (this will not make the image get stretched with scrolling)
Set the Repeat property to No-repeat.
Set the Size to Cover.

You can see that in the previous snapshot, the image was repeating itself. Setting it to no-repeat with cover size, made it occupy the entire canvas without much stretch.

Step#03: Add Heading Section

It’s finally the time to start adding some content over this image to see the overall look of page.

•Add a single-column structured section on the image.

• From the menu on the left drag-and-drop the Animated Heading widget into the section. (Animated Heading widget is only available in Elementor Pro, if you have only Elementor you can use a simple heading widget).

You can add your text and style the heading with your choice. However, to follow along this article you can adopt our styling. Following are the steps that we went through while designing the main heading:

Go to the Content
Under Headline section, set the Style to Rotating.
Animation => Typing.
Since we wanted a single word heading, so we aren’t adding any Before and After text.
Give the text in Rotating Text
Set the Alignment to Center

Now, go to the style
If you have any Before and After texts, set them from Headline section.
We have only Animated text, so under the Animated Text section give the text color of #EBEDEF
Set the Typography
Family => Ubuntu.
Weight => 400.
Transform => Uppercase.
Style => Normal.
Decoration => Default.
Line Height => 1 EM (This will add some padding within the box)

Step 04: Adding Subtext

To add subtext under your heading, create a new section again of single column structure.

• Under the layout section of this container section, set the Content Width to Boxed and give it a value of 767.

Add a Text Editor widget in this section and drag it below the heading.

In the Content tab, under the Text Editor section add your text.
Now go to the Style
Set the Alignment to Center.
Set the Text Color to #FFFDFD
Tweak the Typography
Family => Roboto.
Width => 400.

You can observe that the heading and text seem to be at the very top of the page. If you want to add some space over the heading. Create a new section and add a Spacer widget into it. Adjust the Space according to your choice. We gave the Spacer a value of 132.

Step 05: Adding the Content Sections

You can now finally start inserting your website body content. We are going to give a three-column structure to our first content section.

Create a new section with 3 columns.
Set the Content Width property to Boxed.

In the first column of this section:

Add the Heading
Give it a Title under the Content tab and set the Center Alignment.
Now, go to the Style
Set the Text Color to #06063E.
Under Typography. Set the Family to Scada and give it a Weight of 400.

In the same column section.

Add a Divider widget, with Style Solid and Width of 100 px.
Then add a Text Editor widget, and enter your text in its Content
Go to the Style tab, set the Alignment to Justified.
Give a Text Color of #FDF9F9.

The outcome will look like this:

You can now copy the widgets of this column one by one and paste them in other two columns using the Navigator. Change the heading and body text afterwards.

This is the time to finalize the look by adding some space between the heading section and the content section. You can do this by simply adding a spacer between them.

Add a Spacer of Width 50 after the Text Editor widget of heading.

Step 06: Check Responsiveness of the Design

On the menu on the left, click on Responsive Mode button, and check your design responding to different types of devices such as Mobile, Tablet, Desktop.

Output

You can now preview the site by clicking on Preview Changes button located beside the Publish button.

Conclusion

This article tried to emphasize on the design process of websites with image backgrounds. We demonstrated the process with a live example in which our web page is designed with a single background image.

However, you can add different images to each section of the web page, just make sure they are coordinating with the theme. We also observed how the foreground content can be placed in different widths and structures over the top of such background. Try out more examples like this and explore Elementor.

Search