Would you like to create custom background patterns using the Gradient Repeat option of Divi ?
The background options of Divi offer many ways to create background patterns. You can even create background patterns using only gradients. The Gradient Repeat option makes this simple and easy.
In this article we will see how to use the Gradient Repeat option of Divi to create custom background patterns.
Let's start.
See also: Divi: How to create a contact form that appears after clicking on a button
What is gradient repeat
The Gradient Repeat option creates a pattern based on the Gradient Stops. Gradient stops are measurements that determine where colors appear and stop in the gradient. Divi and its Gradient Builder use these stops to create the pattern.
The last color tells the gradient where the breakpoint is in the gradient. You can have as many colors as you want before this breakpoint.
Le Gradient Builder will then repeat it to fill the screen that creates the pattern. The option can be added to any section, row, column or module, and they can be used together.
Activate the “Background Gradient” option
To activate the option Gradient Repeat, open the section's settings by clicking its gear icon. It also works with rows, columns and modules.
Scroll to background . Select tab Gradient background And click Add Background Gradient.
Below the gradient stop bar is a setting called Gradient Repeat . This is disabled by default. Just click on it to activate it.
The gradient will now repeat, creating a pattern based on your gradient stops and your other gradient settings, such as the gradient unit.
Gradient units
The gradient unit is the measurement unit. This specifies what the gradient stop numbers on the gradient bar indicate, which determines how gradient stops are measured. This affects the pattern created by the repeat option.
Divi's background gradient generator offers 15 units. Let's look at an example of the four most popular options. As we will see in our examples, the result will change depending on your number of gradient stops and your settings.
Percent (percent)
Percentage measures gradient stops in percentage. This calculates the gradient points based on the parent element. The smaller the last gradient stitch, the tighter the pattern created. When adjusting the position of one of the colors, that color moves while the others remain in place.
pixels (px)
Pixels measures the number of pixels for each gradient stop. This gives the gradient a smaller pattern than most other unit types. Moving the position of the first or last color changes the position of each color.
Window height (vh)
The viewport is the area of the browser window that is visible. It is measured in height and width separately. Window height uses gradient stops to measure the percentage of window size height. Adjusting the position of the first or last color affects all colors.
Window width (vw)
Window width uses gradient stops to measure the percentage of window size width (or browser width). The adjustments change depending on the width. As you adjust the number larger or smaller, that specific color changes position while the others remain the same.
Examples of using the "Gradient Repeat" option
Read also: Divi: How to create a tablet with scrollable teaser content
For our examples, we use the Call-to-Action section of the home page of the free acupuncture layout pack available in Divi.
We will need to make an adjustment to the first column of the section. Open them line parameters by clicking on its gear icon.
Then select the gear icon for the first column.
column one gradient
The first column has its own background gradient. It's part of the layout. We will not change that. We will use this same gradient in our four examples. Here are the settings in case you need them.
- Gradient Stops:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Gradient settings
- Gradient Type: Linear
- Gradient Position: 180 degrees
- Repeat Gradient: NO
- Gradient Unit: Percent
- Square Gradient Above Background Image: NO
Spacing
We will add spacing to the left of the column. Access the tab Design, scroll to Spacing and select the tablet icon to open device options.
Add 5% left padding for desktop and tablet tabs. Choose the phone tab and delete the left padding. Leave Top and Right at their current settings.
- Padding
- Top: 180px
- Left: 5%
- Left: 80px
example one
Our first example creates a diagonal repeating pattern with thin lines.
This one has three gradient stops.
- Gradient Stops:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Use the following settings.
- Gradient Type: Linear
- Gradient Direction: 156 degrees
- Repeat Gradient: YES
- Gradient Unit: pixels
- Square Gradient Above Background Image: no
Second example
Our second example creates a diagonal repeating pattern with larger lines.
This one has three gradient stops.
- Gradient Stops:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
For gradient settings,
- Gradient Type: Linear
- Gradient Direction: 156 degrees
- Repeat Gradient: YES
- Gradient Unit: pixels
- Square Gradient Above Background Image: NO
Example three
Our third example creates a repeating circular pattern with medium-sized circles.
This one has three gradient stops.
- Gradient Stops
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Apply the following gradient settings
- Gradient Type: Circular
- Gradient Position: Bottom
- Repeat Gradient: YES
- Gradient Unit: Percent
- Square Gradient Above Background Image: NO
Example 4
Our fourth example creates a circular pattern with large circles.
This one has three gradient stops.
- Gradient Stops:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
For Gradient settings, change as follows:
- Gradient Type: Circular
- Gradient Position: Center
- Repeat Gradient: YES
- Gradient Unit: Percent
- Square Gradient Above Background Image: no
Download DIVI Now!!!
Conclusion
This is our look at how to use the option to Gradient Repeat from Divi to create custom backgrounds. Many adjustments in the gradient settings affect the design of the gradient.
Gradient Repeat works well with all of these tweaks to easily create interesting custom background patterns.
We recommend trying out the examples we've provided here and making changes to see how the gradients are affected and creating your own custom background gradients.
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
