Hi everyone, today we will look at another Divi pattern background example taking advantage – as we said in our last friday post – of Svg gradient backgrounds. Let’s get started!

PREPARE THE SVG

First of all we have to prepare our svg background. So we open Illustrator, create a rect and add a gradient background.

Then we go to Export as and we select svg as format. We click on ‘Show code’ and copy the svg code.

CREATE THE LAYOUT

Now we create our Divi section or row (fullwidth), open the settings, go to Advanced and add a css class:

Then, we have to add a Code module, paste our Svg code as content, add a pattern background as image and switch on the Use Parallax Effect option:

Finally we add a css class to the code module:

THE MAGIC OF CSS

PREPARE THE SVG CODE

First of all let’s return for a moment on our svg code we added in the code module. We have, in fact, to edit it a little adding css IDs for each ” element:

jQUERY WAYPOINTS AND THE CSS

Now we can add our css; this time, however, we want to simplify the process by adding it directly inside our jQuery code (using the .css() method). So we go to Divi Theme Options -> Integration -> <head> and add the following code:

All done! This will be our final result:

bg_svg

FINAL THOUGHTS

This is just an example of what you can do working with patterns, Svg gradients and jQuery/css. In the next friday post – the last of this mini series focused on Divi Pattern Backgrounds – we will see a little more complex example of it.

See you next post!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!