What is a layout?
A layout consists of elements that create the look of a page or post or part of. A layout could be for a homepage or a contact page or for a single section for a contact form. It might include text, images, videos, galleries etc. It can display these in a variety of ways: for example, either 2 columns or six columns. Layouts basically determine how a site looks and functions.
How do Divi Layouts work?
The basic layout of a Divi page (or post) consists of Sections, that contain any number of Rows, that contain an array of columns. Columns house Modules that provide website functionality. Modules provide the ability to add Text, Images, Videos, Gallery, Blog, Blurb and a lot more. Divi has some 40 included modules for adding functionality to your website. Each of these elements can have styling applied to them.
For example, you may want a section with a white background that has two rows. One row with 2 columns and one row with three columns. The first row may have a text module in column one and an image module in column two. The second row may have an image in each of the 3 columns.
Text Module Column 1
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
If you like a section in one layout you can always use it in another. The structure is the key factor. Themed Layouts, for particular business genres, will include images and other modules that are relevant. But the way it looks and is styled can always be used in another business genre – you just have to change the images, text and whatever else is required.
Themed and Non-Themed Layouts
Themed Layouts though are a great way to quickly kickstart your new website. They are more or less ready to go and so save a lot of time and perfect for client mock-ups. You can get a website up and running quickly and over time change images to your own photos. It is always best to be unique so using your own images is the best way to go.
Themed Layouts are also a great way to learn about styling and how things are created in Divi. Once you see how the layout achieved the look you can do it for yourself.
We also provide non themed layouts. These are what we term blank, hence our layout name DiviBlank. This is more like a wireframe and just uses minimum text and colour styling. You can then easily generate your own style a fresh. The elements are in place but the images are blank placeholders and sample text is used. DiviBlank comes with a lot more layouts than a themed version as it has multiple headers, footers, sections, rows and more. Its a toolkit rather than a themed layout and better value.
Either way, layouts are designed to make your website building an easier task than if you had to start with absolutely nothing. As you build you will easily grasp how interchangeable layouts are and how easy it is to make them unique and standout. The power of Divi makes this all possible.
Themed Layout Example
Hover to Scroll
Hover to Scroll
You add layouts to the Divi Library so they can be used in the sites pages and posts. They are single JSON files. You may have a file for a themed homepage or a contact page or you may have a file that has a variety of sections. You merely import what you want to the page or post you want it to go to.
Child Themes also known as Premium Child Themes are different. These are actual sites and you upload them via Appearance/Themes in WordPress. Then all the content and menus are all in place and site navigation works. For layouts and Child Themes to work you need to have your own Divi version installed.
Free Divi Layouts
We have selected a variety of Free Layouts from great Divi developers. So you get the best from these layouts and the best support, we link you directly to their websites