Layouts and Effects


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.

Module Settings

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. 

Text 1 – Animation

This text block should slide in from the left. There are various animation effects that can be used. Warning: too many effects can look really bad! Keep any effects subtle and use sparingly.

Text 2 – Dividers

Above this text is a divider that looks wavy and the header at the top has a downward arrow divider. There are various dividers that can be used but some formats don’t work with them.

Text 3

This text should fade in after a short delay. Below this text is a slightly different divider to above. Text in short punchy blocks is quick and easy to read.

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….


Number Counter

  • Bar Counter 1 50% 50%
  • Bar Counter 2 75% 75%
  • Bar Counter 3 25% 25%


Circle Counter

Some hover over examples, move your mouse over the images…

This page demonstrates just some of the possible formats and effects
that can be achieved…