In this tutorial, we’ll guide you through the steps to create an eye-catching section with a background image blur in the Divi theme. This technique can help make your website more visually appealing and engaging. Let’s get started!
Step 1: Create a New Page
1.1. Log in to your WordPress dashboard.
1.2. Navigate to “Pages” and click “Add New.”
1.3. Give your page a title and click on “Use Divi Builder” to begin building your page.
1.4. Select “Start Building.”
Step 2: Insert a Row with Two Columns
2.1. Inside the Divi Builder, click the “+ Add New Section” button.
2.2. Choose the option to insert a row with two columns.
Step 3: Add Content to the First Column
3.1. In the first column, insert a Text Module.
3.2. Optionally, you can add some text content to the module.
3.3. Go to the “Design” tab and set a background color for the text module (typically a dark color).
3.4. In the “Spacing” section, provide padding to adjust the space around the text.
3.5. Edit the text content, making use of an H1 tag for the title.
3.6. Change the text color to a light color under the “Design” tab.
Step 4: Add Content to the Second Column
4.1. In the second column, insert an Image Module.
4.2. Select the image you want to display and save changes.
Step 5: Set Background Image for the Whole Section
5.1. To create the background image blur effect, select the entire section by clicking on it.
5.2. Click on the gear icon to edit the section settings.
5.3. Under the “Background” settings, provide a background image for the entire section.
Step 6: Apply Custom CSS for Background Image Blur
6.1. Go to the “Advanced” tab and select the “Custom CSS” section.
6.2. In the “Before” text box, write or paste the below CSS code. This code uses the before element to blur the background image and the backdrop filter CSS property to control the blur level. You can adjust the pixel value to control the blur intensity.
content:'';
display:block;
background:rgba(0,0,0,.2);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
backdrop-filter: blur(10px);
Step 7: Customize Text Module Background
7.1. To enhance the visual appeal, customize the background of the text module in the first column.
7.2. Change the background color using RGBA values. You can adjust the alpha value (between 0 and 1) to control the background’s opacity.
Step 8: Save and Publish
8.1. Once you’re satisfied with the design, click “Save” to save your changes.
8.2. Then, click “Publish” to make the page live on your website.
Step 9: Preview Your Page
9.1. To see the final result, exit the visual builder and visit the page on your website.
Conclusion: Congratulations! You’ve successfully created a section with a background image blur in the Divi theme. This adds an elegant and captivating visual effect to your website. Experiment with different background images, blur levels, and background colors to achieve the desired look for your web page.
