Creating seamless background design transitions between Divi elements is a great way to elevate the design of your Divi website. The idea is to create matching background designs (both for a row and a section) that share the same size and position respective to the browser width (using vw length units). This allows you to seamlessly transition a background gradient, pattern, and mask between a row and section in creative ways. For example, you could have a pattern or mask transition into different colors without losing the overall alignment and symmetrical aspect of the design.
In this tutorial, we are going to use Divi’s built-in background design options to create a seamless background design transition between a Divi section and row. The application and versatility of this design are boundless, taking Divi’s background design options to a whole new level!
Let’s get started.
Sneak Peek
Here is a quick look at the design we’ll build in this tutorial.
Here are a few more example designs that are possible with just a few simple changes to the background masks and patterns.
Download the Layout for FREE
To lay your hands on the design from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the section layout to your Divi Library, do the following:
Once done, the section layout will be available in the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
After that, you will have a blank canvas to start designing in Divi.
Creating a Seamless Background Design Transition Between a Divi Section and Row
Part 1: Creating a Heading as Mock Content
Before we start designing our backgrounds, we need to add a heading as mock content. To begin, add a one-column row to the default section of the page.
Then add a text module to the row.
Add an H1 heading to the body content.
Under the design tab, update the Heading Text design however you like. For this design, it helps to add a VW length unit for the size of the heading text so that it will scale fluidly with the rest of the design.
2. Designing the Section Background
Adding VW Padding to the Section
Once the mock heading is in place, open the section settings and update the spacing as follows:
Adding the background Gradient to the Section
Now that we have more space to work with, we are ready to add our background design to the section. Under the gradient tab, add the following gradient stops:
Adding a Background Pattern to the Section
Under the Pattern tab, update the following:
Note: Make sure to use the VW length unit for the pattern width and height. And, also make sure to set the repeated origin to “center”. This will keep the background pattern in the same place as the background pattern we will add to the row later on.
Adding a Background Mask to the Section
Under the Mask tab, add the following:
Note: Just like with the pattern, we must give the mask a size using the VW length unit. We must also give the mask a center position.
3. Designing the Row Background
Copy and Paste the Section Background to the Row Background
To speed up the process of designing the row background, copy the section’s background settings.
Then paste the background to the existing row.
At this point, you can already see how the background pattern and mask on the row as a seamless transition to the section background. It looks like the row has a transparent background, but it is actually the same pattern and mask used in the section with the same size and position.
Adjust Size and Padding of the Row using VW
Next, we need to give our row a custom width using the VW length unit. Update the following:
Overview of Spacing and Sizing in VW Length Units
So far, we have been adding spacing and position values in our layout using the VW length unit. Here is a quick illustration of the values currently being used.
So far, we have a seamless transition between the row background and the section background for the patterns and masks. Next, we are going to update the background gradient of the row so that it is seamless as well.
Adjust Gradient Stops on Row
Next, we need to adjust the gradient stops on the row background for a seamless transition into the section background gradient. Under the gradient tab, we are going to keep the three middle gradient stops inherited from the section background) and delete the first and last gradient stop. Then position the first stop at 0% and the third stop at 100%. Once done, you should have the following gradients.
Add Box Shadow to Row
To give the design a bit of elevation and to emphasize the seamless transition of the background, we can add a box shadow to the row.
Adjust the Row Background Pattern Color
Now that we have all the background elements in their proper place, we can start adjusting the colors for a more creative design. Under the pattern option for the row, update the following:
Adjust the Row Background Mask Color
We can also update the mask color for the row to really make the design pop! Under the mask tab, update the following:
Final Result
Let’s check out the final result.
More Possibilities
Here are a few more example designs that are possible with just a few simple changes to the background masks and patterns.
Final Thoughts
The key to creating seamless background design transitions in Divi is to use those VW length units wisely. First, we need to create a section background design that scales with the browser viewport width (from a centered position on the page). Once done, we can use the same background design on a row. After that, we just have a make a few adjustments to the gradient and colors for an amazing design. Hopefully, this technique will add another useful design skill for future projects
I look forward to hearing from you in the comments.
Cheers!
This content was originally published here.