Elementor WordPress Plugin Backgrounds Usage Guide

This article shares the best user guide & tutorial for working and properly usage with backgrounds in the Elementor WordPress page builder plugin to create top layout designs.

This post will learn about changing the background color simply for the entire page body, sections, columns, and individual elements. So, we will begin with the method for changing background color for the Elementor page on the section.

Introduction to Elementor Backgrounds

Elementor offers several types of backgrounds to customize your web pages, including:

1. Classic Backgrounds: These are simple image or color backgrounds.
2. Gradient Backgrounds: These backgrounds blend two or more colors smoothly.
3. Video Backgrounds: Add dynamic, engaging video backgrounds.
4. Slideshow Backgrounds: Create a rotating series of images as a background.
5. Shape Dividers: Add decorative shapes to the top or bottom of sections.

Each background type can dramatically change the look and feel of your site. Let’s dive into the details of each type and learn how to apply them effectively. The top user guide for working properly with backgrounds in the Elementor WordPress page builder plugin usage to create top layouts.

Section Backgrounds

Click on the “Edit Section” icon in the top middle part of the section. As a result, it opens up the ‘Edit Section’ field to the screen’s left. Choose the background color.

• Firstly, on the Style icon to open the style tab for the Elementor section.
• Secondly, click on the “Classic” option for Background type.
• So, on “Color” to open up the color selector.
• Select the color that you want from the palette for the background of the Elementor section.

Body Backgrounds Elementor Page Usage Guide

Open the Elementor page settings menu. To the bottom left of the screen, click on the Settings icon to open up the settings menu for the Elementor page.

• Firstly click on the Style tab of the Page Settings menu.
• Secondly, select “Classic” as the background type under the “Body Style” dropdown.
  Choose the background color.
• Finally, click on the color icon to open up the color selector and choose the color you want for the page on Elementor plugin backgrounds usage.

The HEX code of your color can also be in the text box below the color palette. After choosing the desired color, it will automatically set to the background of the Elementor page.

Column Elementor Backgrounds Color Edit

Open the Edit Column tab. Right-click on the icon to the upper left point of the Elementor column to bring up the dropdown. From the drop-down, click on the “Edit Column” option. This will bring up the edit column pane to the left of the screen. Choose the background color.

• Once on the Style icon to open the style tab for the Elementor column.
• From on the “Classic” option for Background type.
• Click on “Color” to open up the color palette.
• Finally, select the color that you want from the panel for the Elementor Backgrounds of the column following Elementor WordPress plugin backgrounds.

Individual Element Background Color

Open the editing pane for the Elementor element. Right-click on the icon to the upper right section of the element. Click on the edit element option from the drop-down. This will open up the editing pane to the left side of the window. Choose the background color.

• Firstly, click on the Advanced icon to open the advanced tab for the Elementor element.
• Secondly, open the Background drop-down in the advanced tab.
• Click on “Color” to open up the color palette.
• Select the color that you want from the panel for the background of the Elementor element.

Creating Gradient Elementor Backgrounds

Gradient backgrounds add a modern and stylish touch by blending multiple colors seamlessly.

Step-by-Step Guide

1. Access the Section Settings: Click on the section where you want to add the gradient.
2. Navigate to Style Tab: Click on the ‘Style’ tab in the Elementor panel.
3. Select Gradient: Under ‘Background Type’, select ‘Gradient’.
4. Choose Colors: Select the start and end colors for your gradient.
5. Set Location: Adjust the location sliders to control the gradient direction and blending.

Tips for Gradient Backgrounds

• Subtlety: Use subtle gradients to avoid overpowering your content.
• Color Harmony: Choose colors that complement each other and your site’s overall color scheme.
• Direction: Experiment with different gradient directions (linear or radial) to see what works best for your design.

Utilizing Slideshow: Create Elementor Backgrounds

Slideshow backgrounds can showcase multiple images, providing a dynamic and engaging experience.

Step-by-Step Guide

1. Access Section Settings: Select the section for the slideshow background.
2. Style Tab: Go to the ‘Style’ tab.
3. Choose Slideshow: Under ‘Background Type’, select ‘Slideshow’.
4. Add Images: Upload or select images for your slideshow.
5. Settings: Configure transition effects, duration, and other slideshow settings.

Tips for Slideshow Backgrounds

• High-Quality Images: Use high-quality images for a professional look.
• Relevance: Ensure images are relevant to your content and brand.
• Smooth Transitions: Opt for smooth transition effects to enhance user experience.

Enhancing with Shape Dividers

Shape dividers are decorative elements that add visual interest and help break up sections of your page.

Step-by-Step Guide

1. Edit Section: Click on the section you want to edit.
2. Navigate to Style Tab: Go to the ‘Style’ tab.
3. Select Shape Dividers: Scroll down to ‘Shape Dividers’ and select top or bottom.
4. Choose Shape: Select a shape from the available options.
5. Customize: Adjust the height, width, and color to fit your design.

Tips for Shape Dividers

• Consistency: Ensure the shape dividers complement your overall design.
• Subtlety: Use subtle dividers to avoid distracting from your content.
• Positioning: Experiment with different positions (top or bottom) for the best effect.