Divi shows a WSYWIG version of the page which generally makes editing faster and more responsive.
Pages are organised into:
Sections (Blue or Purple), which contain Rows (Green), which contain modules (Grey). To edit one of these simply hover over the area then click the little cog.
The Settings windows that appears contains loads of design options. This window can be resized. If you don’t like your edits simply click the cross. To accept edits, click the tick. You also have the undo and redo options.
General Page Settings
At the bottom of the editing page is a purple circle with three dots. This opens into a general page settings menu – allowing you to save the page, import/export, rename the page and many more options.
The image to the left has a subtle drop shadow around the outside to lift the image. Subtle effects like this can add emphasis to areas and attract the readers eye. This row has a wider image then two narrow text blocks. The blocks of text don’t have to match the height of the image but if they are similar it can look better.
This text is deliberately very short. It negatively affects the balance of the design.
Text sizes can differ but using too many sizes can ruin the look of a page.
This text is sitting on top of a background image. The image moves ‘behind’ the page and text.
Some counter examples….
- Bar Counter 1 50% 50%
- Bar Counter 2 75% 75%
- Bar Counter 3 25% 25%
Some hover over examples, move your mouse over the images…