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:
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
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.
Step#03: Add Heading Section
- 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.
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.
Step 05: Adding the Content Sections
- 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
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.