This post is inspired by one of the recent post made by ElegantThemes on their blog.

Checkout the official post by elegant themes here.

In this article, we will learn how to make an attractive and creative divi layout for image behind a text.

With Divi theme, you can fill any text or numbers with an image of your choice easily. But this design needs a good grasp of designing concepts, divi modules and a bit of CSS knowledge. But if you follow our tutorial, you can easily make creative design layout just using Divi Visual builder.

In this tutorial, you will learn how to blend modules, add dividers, match the colors of sections and dividers so that there is a smooth transition between the dividers.

If you feel all these too difficult, then just follow this tutorial. Let’s dive in.

The image above is the sneak peek at what we’re going to build in this tutorial.

To help you complete this tutorial, you will need the following:

  • Divi Theme (installed, active and updated)
  • 4 Images to use for each text background. For best results, I suggest using darker images with a lot of texture and at least 1920×1080 in size.
  • Visual Builder Grid Interaction Mode – Since we are going to be overlapping modules and creating a more complex layout, I suggest using the grid interaction mode so that you can avoid confusion when trying to hover over elements that are overlapping within the visual builder.

Create First Section

Create a new page and deploy the visual builder. Then add a regular section with a one-column row (or just use the one already there by default), and add a text module to the row column.

Update the Text Module Settings

Open the text module settings and update the following:

Content…

Content: 01 (this will be the number used for our background)
Background Color: #ffffff

Design…

Text Font: Poppins
Text Font Weight: Heavy
Text Text Size: 40em (desktop), 25em (tablet), 15em (smartphone)
Text Text Color: rgba(131,0,233,0.65)
Text Orientation: Center
Custom Padding: 288px top, 288px bottom
Border Width: 1px
Border Color: #ffffff
Blend Mode: Screen

Note: The white background and the screen blend mode is what creates the effect of seeing the row background (not created yet) through the text module.

Next add a new one-column row under the current row and then add a call to action module to it.

Update the Call to Action Module Settings

Update the Call to Action module with the following:

Content…

Title: Discover
Button Text: Learn More
Button URL: #
Background Color: rgba(255,255,255,0) (this is transparent)

Design…

Text Color: Dark
Text Orientation: Left
Title Font: Poppins
Title Font Weight: Heavy
Title Font Style: TT
Title Text Size: 70px (desktop), 50px (tablet), 40px (smartphone)
Title Text Color: rgba(0,0,0,0.62)
Title Letter Spacing: 4px

Body Font: Poppins
Body Font Weight: Light
Body Text Size: 32px (desktop), 24px (tablet)
Body Text Color: #333333
Body Line Height: 1.3em

Use Custom Styles for Button: YES
Button Text color: #8300e9
Button Background Color: rgba(255,255,255,0.85)

Custom Margin: -600px top, 40% bottom

Note: I set the top margin with a pixel value because I wanted limited the movement of the module when adjusting browser widths. I set the bottom margin to 40% in order to keep the bottom section from overlapping the row that holds this module. Setting it to a percentage helps adjust the bottom margin on mobile devices.

Update Row Settings

Now that we have our content in place, let’s edit our first row settings as follows.

Content…

Column 1 Background Image: Insert Image

Here is the image …

Design…

Make this Row Fullwidth: YES
Custom Gutter Width: 1
Custom Padding: 10% Top, 7% Bottom
Border width: 1px
Border Color: #ffffff

In the second row, update the settings as follows:

Custom padding: 0px Top, 0px Bottom

At this point we are done with our first successful background text.

We are limited to a white background surrounding the text because of the way the screen blend mode works. But we can add some color by adding some dividers to our section.

Add Dividers to your Section

To add a divider, go to the section settings under the design tab and update the following.

Top Divider…

Divider Style: see screenshot
Divider Color: rgba(131,0,233,0.65)
Divider Height: 127px
Divider Arrangement: On Top of Section Content

Adding the Transition Section

Before we start our next section, we must first create a regular section to serve as a smooth transition of color between the bottom and top dividers. To create the transition, we must use the color of the bottom divider above and top divider below (sorry, that may be a tad bit confusing). With those two colors, we will create a background gradient to transition from the divider above with the divider below.

Go ahead and add a new regular section, but delete the row column because we won’t be using any rows for this section. Then under the content tab, add a background gradient with the first color being the same color we used for the section above: rgba(131,0,233,0.65).

For the second color, use the following: rgba(233,0,255,0.65)

This will be the color of our next section dividers.

At this point, all of the brunt work has been done. All there is left to do to complete the next 3 sections is duplicate the section we already have and update some content and colors.

Create the Second Section

For the second section, copy our first section we created and paste it below the transition section.

Complete the following:

  1. Update the section Top and Bottom Divider Colors to rgba(233,0,255,0.65).
  2. Change the top row 1 column background image.
  3. Update the text module with the number 02, and then change the text text color to rgba(233,0,255,0.65).
  4. Change the blurb module title to read “Design”.
  5. Update the blurb module button text color to #e900ff.
  6. Add another transition section below with these two colors for the gradient background:rgba(233,0,255,0.65) , rgba(12,113,195,0.65)

Creating the Third Section

For the third section, copy one of the sections we already created and paste it below the second transition section.

Complete the following:

  1. Update the section Top and Bottom Divider Colors to rgba(12,113,195,0.65).
  2. Change the top row 1 column background image.
  3. Update the text module with the number 03, and then change the text text color to rgba(12,113,195,0.65).
  4. Change the blurb module title to read “Develop”.
  5. Update the blurb module button text color to #0c71c3.
  6. Add another transition section below with these two colors for the gradient background:rgba(12,113,195,0.65) , rgba(124,218,36,0.65)

Creating the Fourth Section

For the fourth section, copy one of the sections we already created and paste it below the third transition section.

Complete the following:

  1. Update the section Top and Bottom Divider Colors to rgba(124,218,36,0.65).
  2. Update the text module with the text “Go”, and then change the text text color to rgba(124,218,36,0.65).
  3. Change the top row 1 column background image.
  4. Change the blurb module title to read “Deliver”.
  5. Update the blurb module button text color to #68d800.

Finally, we have the final layout…

Here is the official video tutorial by  Elegant themes to explain you much more in Audio-Visual way:

Conclusion:
From the example above, you have learned how to use the blend mode of divi theme and created a creative layout that put an image behind the text. This example is only an inspiration for you.I’m sure after learning this layout, you can create even better versions of it.

This post was inspired by this official blog post from Elegant Themes.