How to Change Section Background with Elementor

From this tutorial you’ll learn how to change section background with Elementor drag-n-drop page builder.

Changing Section Background
  1. First, let’s navigate to Elementor page builder. Log in to WordPress Dashboard and open Pages > All Pages tab on the left. Open one of the pages built with Elementor for editing.
  2. Click on Edit with Elementor button to proceed to Elementor editing page.
  3. Hover on the section with the background you want to change. A thin blue frame will appear around it. You’ll also be able to see the section options (the icons) at the top of the frame.
  4. Click on Edit Section icon to open the editing block on the left. Here switch to Style tab.
  5. Locate Background block. Here you can set your custom background for this section.
  6. Switch from Normal to Hover mode to apply different background options for the section when someone hovers on it. You can customize both, or use the same background for the section. It’s up to your needs.
  7. Now you can select the background type. There are three types of section backgrounds:
    • Classic — represents the classic color or image background. Here you can select the color to apply it to the section background, or select the image from the Media Library. You can as well select the custom image position, attachment, repeat settings and the necessary image size.
    • Gradient — switch to the Gradient mode to apply the gradient for the section background. Here you can select any two colors to use as a gradient and pick the needed location, specify the necessary gradient type and angle.Change Section Background
    • Background Video — here you can add the video as a section background. You can also use a Background Fallback image (select it from the Media Library) to replace the video on mobile or tablet devices.
Background Overlay
  1. To make the text stand out on the vivid background you can use Background Overlay options located in the block under the same name.
  2. Here you can specify overlay for Normal and Hover modes. Switch between them to customize both.
  3. In the Background Type you can select which type of the background you want to use. It can be a classic or a gradient background.
    • Classic — here you can define the color or the image you want to use as the overlay for your main section background.
    • Gradient — here you can select two colors to combine when creating a gradient, and the color location, gradient type, and angle.Change Section Background
  4. Use Opacity option to set your custom overlay opacity. To select the suitable opacity you need to drag the controller rightwards or leftwards.
  5. Feel free to use the section backgrounds to make your page’s content more eye-catching!
This tutorial is based on Movie Responsive WordPress theme.

Was this helpful?