Using Premade Layouts In Divi
Divi ships with tons of great premade layouts that you can use to jumpstart your design.
Where to Find Them
To get started you will want to add a new page or project and enable the visual builder. At the bottom of the page you will notice a purple circular icon with three dots in a horizontal line. Click this to expand the visual builder’s page settings.
The plus icon in that expanded menu is where you can add items from the Divi Library, including a large variety of premade layouts we have included to help kickstart just about any kind of webpage you need to design.
Premade Layouts List
Clicking the plus icon will bring up a full list of Divi’s premade layouts for you to scroll through and select. You can either load a premade layout into a blank page, an existing layout, or you can replace existing content. See More about saving and loading custom layouts in Divi.
Loading A Premade Layout
By clicking on any of the predefined layouts, you will load that content into your page. Below is an example of a premade layout once it has been loaded onto a previously blank page.
By replacing each element on the page with your own content you can have a beautiful, custom site in just minutes. In this example we will replace the slider title, image, and button, the banner text, the blurbs, and the promo title to create a simple landing page for a culinary community. With the visual builder making these changes is simple. Hover over any area you want to make changes to and the settings for it will appear. If you’d like to change text, simply select the text and start typing. To see more details on how to edit elements with the visual builder, see our post on getting started with the Divi Builder. Below is a possible result you can get from using this particular layout.
The beauty of these layouts is that you can edit them however you would like. For example, if you like this particular layout, but would rather not have a Call to Action at the bottom, simply delete it by clicking on the trash can icon for that row and its gone! Look at the image below to see how deleting the Call to Action would effect the appearance of your layout.
If you like this change you can hit “command + save” (or click the save button). If you don’t like the change you can hit “command + z” to undo it (or use the editing history button to roll back multiple actions all at once!).