Skip to main content

Create and Build a Page with Divi 5 using a Premade Layout

Learn how to create a page in Divi 5 using a premade layout and customize it with your own text, images, and branding.

Updated yesterday

This article shows you how to create and build a page with Divi 5 using a premade layout. You’ll learn how to add a new page, open the Divi 5 Visual Builder, choose a premade layout pack, load a layout, replace the demo content with your own, and publish the page.

Before you start

Make sure:

  • Divi 5 is installed and active on your site.

  • Your Elegant Themes account is connected so that Divi can download layout packs from the cloud.

  • You’re logged in to WordPress as an Administrator.

Premade layouts are included with your Elegant Themes membership and are downloaded into your site when you use them.

Step 1: Create a new page in WordPress

  1. In your WordPress dashboard, go to Pages → Add New.

  2. Enter a page title (for example, Home, About, or Services).

⚠︎ Note: For core site pages, always use Pages, not Posts. Posts are better for blog articles and news.

Step 2: Enable the Divi 5 Visual Builder

With your new page open in the editor:

  1. Click Use Divi Builder.

  2. WordPress reloads the page on the front end with the Divi 5 Visual Builder active.

Divi now shows a three-option modal:

  • Build From Scratch

  • Choose A Premade Layout

  • Build with AI

For this article, click Choose A Premade Layout.

Divi 5 - Open the Premade Layouts Library

⚠︎ Note: If you changed the default so the modal doesn’t appear, you can still open the layout library later using the purple + icon in the Divi toolbar.

Divi 5 - Manually open the Premade Layouts Library

Step 3: Browse the premade layout library

Divi 5 - Browse the Premade layouts

When you choose Choose A Premade Layout, Divi opens the layout library. Here you’ll see:

  • A tab for Premade Layouts (by Elegant Themes).

  • Tabs for Your Saved Layouts and Your Existing Pages, which you can ignore for now.

In the Premade Layouts view, you can:

  • Search layouts by keyword.

  • Filter by category (business, services, online store, etc.).

  • Click a layout pack to see all the page layouts it includes (Home, About, Contact, etc.).

Each layout pack is a set of matching page designs built around one style, so your site looks consistent if you use several layouts from the same pack.

You can view the entire collection of the Premade layouts inside the Load from Library modal or on Elegant Theme's website.

Step 4: Choose and load a premade layout

Once you find a layout pack you like:

  1. Click the layout pack to open it.

    Divi 5 - Choose a premade layout pack

  2. On the right, you’ll see a list of all available page layouts in that pack (for example: Home, Landing, About, Contact).

  3. Click the page layout you want to use (for example, "Landing").

    Divi 5 - Choose a page layout inside of a premade layout pack

  4. Click the Use This Layout button.

    Divi 5 - Import the selected page layout to your page

Divi downloads the layout (including its images and design settings) and applies it to your page. This may take a few seconds, depending on your connection.

You can only apply one premade layout to a page at a time. If you need multiple pages (Home, About, Contact, etc.), you’ll repeat this process on separate pages for each layout.

⚠︎ Note: Newer layouts will come with Design Presets. After clicking the Use This Layout button, you will be prompted to Import Presets. This is optional; however, we recommend importing the Design Presets as well.

Divi 5 - Import premade page layout with presets

Step 5: Understand what the layout gives you

Once the layout is loaded, you’re looking at a fully designed page made of normal Divi building blocks:

  • Sections – main horizontal slices of the page.

  • Rows and columns – control the grid.

  • Modules – Text, Images, Buttons, Blurbs, Forms, etc.

A premade layout includes:

  • Demo text and headings as placeholders.

  • Demo images and icons from Elegant Themes’ design team.

  • Spacing, colors, and fonts set to match a specific style.

Step 6: Replace the demo content with your own

Work from top to bottom and replace the content section by section.

Edit text

  1. Click directly on any text in the Visual Builder and start typing, or

  2. Click the gear icon on a Text (or Heading, Blurb, etc.) module to open its settings.

In the Content tab, update:

  • Headings (H1, H2, H3, etc.).

  • Paragraph text.

  • Lists and links.

Use your own clear, short copy. Try not to leave any placeholder text on the page.

Replace images and icons

For each Image or Blurb module:

  1. Click the module itself or on the gear icon to open settings.

  2. Replace the image with one from your media library, or upload a new one.

  3. Update alt text to describe the image for accessibility and SEO.

Do the same for background images applied to sections or rows (check the Background settings in the section/row Content tabs).

Update buttons and links

For each Button module:

  1. Open module settings (gear icon).

  2. Change the Button Text (“Get Started”, “Contact Us”, etc.).

  3. Add the correct Button Link (another page on your site or an external URL).

Social follow, or icon modules that link to external profiles.

Step 7: Adjust the layout and design if needed

Once your content is in place, you can tweak the layout to fit your needs better.

Here are simple edits that are safe for beginners:

  • Reorder sections – Use the Layers panel or drag-and-drop the section handles up or down to change the order.

    You can open the Layers panel by clicking on the Layers icon from the left sidebar.

  • Remove sections you don’t need – Click the trash icon on the section, row, or module you don’t want.

  • Duplicate useful blocks – Use the copy/duplicate icons to reuse a row or module and then edit its content.

To align the layout with your brand:

  • Use the Design tab on modules, rows, and sections to adjust colors, fonts, and spacing.

  • Keep these changes small if you already set up your basic design system (colors, fonts, buttons) in the Theme Customizer and Theme Options.

If you don’t like a change, use the Undo button or open History to step back.

Step 8: Save, exit the builder, and publish your page

When you’re happy with the page:

  1. Click the Publish or Save button in the Divi's top toolbar.

  2. Click the Exit button in Divi's top toolbar to see the page as a regular visitor.

Optional:

  • Go to Appearance → Menus to add the page to your navigation menu.

  • Go to Settings → Reading to set this page as your homepage, if it should be the front page of your site.

Tips for working with premade layouts in Divi 5

When you create and build pages with Divi 5 using premade layouts:

  • Use one layout pack for your main site pages (Home, About, Services, Contact) so everything shares the same style.

  • Set your basic design system (colors, fonts, buttons) first; it makes customizing premade layouts much faster.

  • Save heavily customized pages as layouts in your Divi Library so you can reuse them later.

  • If a premade layout fails to import or gets stuck, check the official troubleshooting guide for common issues like memory limits or firewall blocks.

Once you’re comfortable creating and building a page in Divi 5 using a premade layout, you can mix premade layouts, your own saved layouts, and scratch-built sections to build sites faster without sacrificing control.

Did this answer your question?