How to Use the Divi Builder to Easily Create Your Own Stunning Website

Have you ever wanted to create a beautiful, professional website for your business or brand, but lacked the coding skills or budget to make it happen? With the Divi Builder, anyone can now build an eye-catching, customized website with no prior experience needed.

Divi is a popular WordPress theme and page builder made by Elegant Themes. With Divi’s easy-to-use drag and drop builder and included layout packs, you can create any type of website you can imagine in just a few clicks.

In this beginner’s guide, we’ll walk through how to:

  • Set up Divi and create pages
  • Use the Divi Builder to add sections and content
  • Customize your site’s design with colors, fonts and spacing
  • Optimize for mobile and SEO
  • Recreate website templates or build your own from scratch!

Let’s dive in and see just how easy it is to bring your website vision to life with Divi.

Getting Started with Divi

To use the Divi Builder, you’ll first need to have the Divi Theme installed on your WordPress site. There are two options:

  1. Install Divi on your existing WordPress site
  2. Sign up at ElegantThemes.com to access Divi and 20+ other premium WordPress themes and plugins. You can build your site right on their easy web builder starting at only $89/year.

Once Divi is activated, you’ll see a new “Divi” menu appear in your WordPress dashboard. This is where you can access the Divi Builder to start designing pages.

When you create a new page or post in WordPress, you’ll have the option to “Use the Divi Builder” to launch the visual editor. You can also use existing pages with the builder by clicking “Edit with Divi Builder.”

Now let’s look at how you can use this intuitive builder to create absolutely any layout you can imagine.

Using the Divi Builder Step-by-Step

The key to mastering Divi is learning how to use Sections, Rows and Modules to build your webpages.

Sections

Sections are the highest-level building blocks in Divi. They stretch the full width of the page and allow you to split pages up into logical sections. A single page may contain 1 or multiple sections.

You can customize a section’s appearance by setting backgrounds, borders or spacing values. Sections are the containers that hold your rows of content.

Rows

Rows live inside of Sections and are used to divide sections into logical rows of content. You can choose 1 column or up to 6 columns per row. Rows contain Columns where you add individual Modules of content.

Use Row settings to control column widths, gutter widths and other row-specific design elements.

Modules

Modules are the content elements that make up your page. Text, images, buttons, videos and more are all added via modules. Every element you see on a Divi site is a module that can be edited.

By combining Sections, Rows and Modules, you can construct any layout imaginable with the Divi Builder. Now let’s look at some of the design customization you can do.

Customizing Your Website Design

Divi gives you precise control over every element in your site design. You can tweak the following design elements and more:

Set Section Backgrounds

Easily add background colors, videos, gradients and images to sections with the Section Settings. Creative backgrounds bring your pages to life.

Adjust Text Styles

Customize text color, size and family on a per module basis. Set line heights, letter spacing and text shadow too. Use headings for proper structure.

Choose Global Colors

Create globally available color palettes in the Theme Customizer to maintain consistency. Use them on multiple elements.

Refine Spacing

Precisely control margins, padding and element spacing throughout your site with the spacing controls. Fine tune layouts down to the pixel.

Pick Button Styles

Make sleek buttons with complete control over colors, borders, hover effects, gradients, shadows and corner rounding.

The beauty of Divi is that it empowers anyone to create complex, customized designs with no coding required. Let’s look at some more benefits.

Why Divi is the Perfect Theme for Building Your Own Website

Here are some of the best features that make Divi the ideal theme for DIY website building:

Intuitive Page Builder

Divi pioneered the visual “what you see is what you get” page builder concept. Just click and drag to build pages.

600+ Premade Layouts

Choose from hundreds of pre-made layouts for every site type imaginable to get started fast.

Responsive Design

Divi websites look fantastic on all devices. Adjust styles and settings for desktop, tablet and mobile.

Incredible Flexibility

Virtually limitless combinations of sections, rows and modules means unlimited design potential.

Easy Global Control

Change site-wide styles and settings in one place via the Theme Customizer. Brand with ease.

Built for Speed

Divi generates ultra lean code for blazing fast load times. Less bloat for better performance.

While Divi does have a learning curve for tapping into its more advanced capabilities, anyone can equip themselves to build a great looking website in very little time.

Let’s look at how we can use these features to recreate website templates or build custom designs from the ground up.

Using Divi to Recreate Existing Website Templates

One of the easiest ways to master Divi is by recreating existing site designs that you like. This lets you dissect how the layouts and styles were achieved as you build up your Divi skills.

For example, this Divi tutorial video walks through reconstructing a landing page template design step-by-step:

The host starts by analyzing the example layout to identify sections, rows and modules. He downloads any necessary assets like images, then starts rebuilding the site in Divi piece by piece.

He begins with the header area, adding a gradient background and sizing rows properly. He then styles the text and button modules using global colors.

Moving through each section, he duplicates image modules for the logo grid, adds icons and intelligently copies styles between elements for efficiency.

By the end, he has replicated almost the entire template from scratch using Divi’s vast array of design options. With a bit of practice, you too can dissect and reproduce website templates as a way to rapidly improve your Divi skills.

Now let’s look at how to use Divi in a more creative way – building a custom website design based on your own vision.

Creating Your Own Unique Website Designs with Divi

Divi’s flexibility makes it the perfect tool for constructing your own website design from imagination into reality. You have complete control over the sizing, layout, styles, elements and beyond.

Follow these steps to start building a custom site from scratch:

1. Plan Your Site’s Structure

Like remodeling a house, begin your Divi design with the framing by planning your sections and rows. Sketch page layout ideas to decide what types of content modules you’ll need in each section.

Group related elements into logical sections separated by rows. This will make your site easy to navigate and process for visitors.

2. Choose an Inspiring Color Palette

Set the tone of your site with an inviting color palette. Use a tool like Adobe Color to find combinations that evoke the right mood. Add them as Global Colors in Divi.

3. Select an Appropriate Header Style

Your header is like the first impression of your site. Evaluate different header styles and choose one that matches the rest of your design. Keep it consistent on all pages.

4. Build Your Layout Section-by-Section

Now comes the fun part – bringing your vision to life! Add sections and rows, populate them with customized text, graphics and more. Divi’s page builder is intuitive enough for anyone to figure out.

5. Refine the Design Details

Make sure individual elements are sized, aligned and styled for maximum appeal. Balance white space between sections. Use background imagery when possible. Finesse every detail!

6. Make Your Site Mobile Friendly

Optimizing for mobile is critical – over half of web traffic comes from phones now. Enable Divi’s responsive settings and adjust elements as needed per device size.

7. Add Final Touches for Polish

Finally, incorporate those nuances that really make your site shine. Pick complementary fonts, add edge-to-edge background graphics, enable animations on scroll and more.

As you can see, Divi has all the tools required to design a custom website from start to finish tailored exactly to your unique brand. Let your creativity run wild!

Start Building Your Divi Website Today

We’ve just scratched the surface here of all the amazing things you can build using the Divi page builder. Whether you’re looking to recreate existing site templates or construct amazing new layouts based on your own vision, Divi provides all the tools you need to craft professional sites yourself.

The key is to simply dive in and start experimenting! Add some Sections and Rows. Drag in some Modules. Before long, you’ll be customizing like a pro.

So don’t wait any longer – start using Divi to finally make the website of your dreams a reality on your own!

What are you waiting for?