Divi can help you produce complex pages with the content arranged in a more controlled way. It is invaluable for creating layouts which reliably reformat themselves to work on all devices and various sized screens. It also enables use of multi layer backgrounds, easy control of spacing, animated effects, image transparency and so much more that can bring your website to life. It enables much of the same capability as a full blown page layout program does to printed graphics.
To start, select New Post or Page from the Dashboard menu as normal. Then click the purple Use The Divi Builder button. Having created a Divi Post or Page you cannot reliably return to the simple WordPress method of editing – you will most likely lose the content you entered. Divi and non-Divi Pages and Posts can quite happily coexist on the same website.
Divi works by creating a new structure layer of Sections, Rows and Modules which floats above the actual content. The main function of Sections (blue) and Rows (green) is to organise the positioning of the Modules (black). Your content is mainly held inside the Modules and there are many sorts of module which are each designed to present particular types of content. Some are self explanatory, others you will learn by and by.
The text module behaves much like the simple WordPress text area with similar editing controls. The image module enables precise control over size and positioning of images.
1. Section
The Section is where you can group your content, add your row and add your modules for adding text, etc. With the section, you can add a background colour or background images to make your website stand out.
-What can we do in the section element?
With the section, you can add.
Background images
You can add your own custom background to your website.
Background Colours and Gradient Backgrounds
With this feature in section settings, you can add colours to your background and add background gradients. You can also add a colour/gradient background over your background image to make the website eye-catching.
Parallax effect
With this feature in section settings, you can enable this effect and give your website a 3D effect when scrolling down.
Shadows
You can add inner shadows to your section, to give it a 3D look.
Animations
Adding animations to your website can make your website pop by giving it a 3D effects just like the Shadow feature.
2. Rows
When you add a row, you can put it together by adding a module in a column and dividing your rows to add more columns.
How does the Row element Work?
With the row element, you can divide it into how many columns you want and add modules like texts, a blog post for your blog page, Images, Forms, etc.
With the Row Section, you can.
Add Background Color/Gradient.
Add Margins and Padding.
Add Shadows.
Add Borders.
Add animations.
Add multiple columns.
The last element is Modules.
3. Modules
The Divi Module section has over 63 modules you can use to add to your website. The Modules is like sections and rows, you can edit the background, add borders, shadows, animations in each module like Text, Buttons, Bar counters, Circle Counters, Audio and much more!
How Does The Module Element work?
The Module Section allows you to use 63 elements like text, Buttons, Bar counters, Circle Counters, Audio, etc.
and in each element in the module section, you can edit the background, add borders, shadows, animations and a lot more!