Divi Position Options

Position Options enables you to move elements freely around the page through a highly intuitive new visual interface.

Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

Choosing the Position

Assign any element Position Options in Module Settings > Advanced > Position tab and choose between:

Relative – Adjusts an element’s position without changing the relationship to the elements around it, which means that there will be an empty space where the element used to be - after it is moved (the original block element does not collapse)

Absolute – Move the element relative to its parent container (element position will be “restricted” to the parent container area). Absolute positioning will remove the element from its natural position inside the parent container and the parent container will “collapse” as if there is nothing inside it

Fixed Position – Can be used to create “sticky” elements such as fixed headers and floating banners that stay visible as you scroll down the page. This option will also remove the element from its natural position inside the parent container - the parent container will “collapse” as if there is nothing inside it, and it will position it within the browser viewport (visible area) instead.

Controlling element Base Location & Horizontal/Vertical Offset

Along with choosing a position for the element you can choose a base location with our new visual location interface - depending on which location your select, new X and Y Offset controls will become available. These will allow you to further adjust your element’s location across its location axis.

Z-Index (stacking) ordering

Changing element’s Position Options will naturally create situations where other elements may “overlap” it (or it overlaps other elements) and that is where the z-index setting kicks in and allows you to fine-tune the element stacking order in the layout. You can move the element “under” or “above” other elements using negative or positive z-index values respectively.

Drag and drop anywhere on the page

While using the absolute or fixed position you can move the object around freely without opening its settings modal - simply hover over the object (module, row, or section) and a small icon will appear in the upper right of the element container enabling you to drag it anywhere on the page.

Did this answer your question?