Build a Wordpress website using Divi : a step-by-step guide

Name: Build a Wordpress website using Divi : a step-by-step guide
Rating: 4.9 (4 reviews)

The complete step-by-step guide for beginners to get familiar with Divi / No coding skills needed

Created byMouna Ghorbel

Last updated 2/2024

English

English [Auto],

What you'll learn

Install and configure Divi theme and builder
Create a professional website using Divi without coding
Design pages using Divi builder
Be familiar with the Divi builder structure and main options ( sections , rows, modules, animations etc)

Course content

11 sections • 40 lectures • 3h 54m total length

Introduction1:55
" Build your website using the Divi theme and builder " is a course for beginners with divi. In this course we won't cover the wordpress part, it means that you should at least know how to configure your wordpress installation to start working with Divi.
In this videos series, you will learn the following aspects :
a general overview of Divi
How to install and configure the theme
How to customize the theme
How to use the visual builder and its different modules
Some tips and options
You will learn step by step following a showcase template.

How to install Divi ?2:46
Before starting to build your website you need to download the divi theme and builder file to install it in your wordpress admin dashboard.
In this video you will find the simple steps to do it.
How to add your API key ?2:08
The API key is mandatory to keep receiving updates of Divi and to access to the layouts and packages.
To have an API key, you must buy the Divi license before.

The theme options tab3:24
Explore the Divi theme options from general settings and typography to navigation, builder, layout, ads, SEO, integrations, and updates, all managed in the Divi options panel.
The theme builder tab2:56
Explore the theme builder tab to create and manage header, body, and footer templates, and export, import, and customize layouts from scratch or via the Divi library.
The theme customizer tab10:42
Explore the Divi theme customizer to tailor header, footer, typography, colors, and layouts with a live preview; adjust site identity, menus, widgets, and mobile styles without coding.
Divi role editor, library and support center5:57

Add your logo and color palette5:08
Replace the Divi header logo by uploading a logo in Divi Options panel, enable fixed navigation, and set a ColorZilla-inspired color palette for Divi Builder, then add Facebook social icons.
Add your site icon1:14
Customize your header : primary menu8:55
Customize the Divi header by configuring the primary menu bar’s colors, typography, and logo visibility for clear branding, and tailor dropdown styles and header formats.
Customize your website's header : secondary menu6:55
Create and assign a secondary menu in WordPress using Divi, above the primary header. Customize fonts, colors, and fixed navigation in the theme customizer, and add items with custom links.
Customize your website's footer7:57
Customize the footer with the Divi theme customizer, choosing a layout and colors for bottom bar. Add widgets to footer areas and tweak fonts and social icons, then publish changes.
Apply text styles5:39
Explore typography settings in the Divi theme, adjusting body and header fonts, sizes, line height, letter spacing, and colors to customize text across the site.
Set your default buttons styles6:44
Learn to set default button styles in the Divi theme customizer, using two tabs for button style and hover style to adjust text, color, border, radius, font, and icons.
Set your home page1:49

The visual builder's structure7:13
Explore how the Divi visual builder organizes pages with sections, rows, columns, and modules, and use global styles and colors. Save and reuse sections via the library.
Examples8:41
Learn to use the Divi visual builder to add text and images, customize typography, and arrange sections, rows, columns, and modules, including standard, full width, and specialty layouts.
The visual builder's buttons2:11
Use the visual builder buttons to save layouts to the Divi library, export/import JSON, publish changes, delete, view history, apply pre-made or saved Divi layouts, and preview across devices.

Fullwidth header16:03
Learn to build a WordPress header using Divi's full width header module, configure background image, title, subtitle, buttons, and scroll icon, using full width section and Divi Builder from scratch.
Text module4:57
Explore how to create and style text modules in Divi, customizing headings, colors, sizes, spacing, and alignment within sections and a three-column layout.
Blurb module6:46
Learn to use the Divi blurb module to display text with an image or icon in a three-column row, enabling you to highlight services, features, and step-by-step processes.
Button module8:09
Add a button module in Divi, edit the content and link, and customize its normal and hover styles, including icons. Adjust alignment, colors, borders, and fonts to create cohesive buttons.
Background options9:07
Video module6:50
Learn to add a video in Divi, using a regular section and a full-width row workaround, with customized play icon, overlay color, background, and text styling.
Make a regular section fullwidth7:57
Learn to convert a regular two-column section in Divi into full width by adjusting width scale to 100%, removing padding, and aligning styles across text, button, and image modules.
Image module4:05
In this video we are using the image module for each column, but you can also try it with the gallery module.
Blog module11:24
Explore how the blog module in Divi for WordPress displays posts, pages, and projects and lets you tailor design with layout options, overlays, and borders.
Create a footer with the Theme Builder6:43
The theme builer is an amazing tool to build footers, headers, posts templates etc

Duplicate elements4:35
Save time in Divi by duplicating sections, rows, columns, and modules, and repositioning with drag-and-drop. Learn two ways to reuse layouts and save elements to the library.
Use Divi layouts4:24
Create a new contact page using a premade Divi layout from the Elegant Themes library, then customize modules like text, contact form, email opt-in, and Google Maps module.
Save in the Divi library8:49
Save time designing with the Divi Library by saving sections, rows, modules, or whole layouts to the library or Divi Cloud, then load and reuse them across sites.
Animations4:08
Transform option5:59
Explore Divi’s transformation option in the visual builder to adjust size, translate, rotate, skew, and transform origin. Apply effects to sections, rows, columns, and modules with hover and device responsiveness.
Responsive design4:36
Layers option3:25

Requirements

No coding skills are needed
The participant should have an idea of how to install and configure Wordpress,
The tabs of wordpress admin dashboard
How to add pages and install a theme on wordpress

Description

If you run a wordpress website or are looking to create a new one for your business or maybe you are a wordpress freelancer and you want to save time and learn a new no code tool ? But you have no design or coding skills then the divi theme and divi page builder could be the ideal solution for you.

Divi allows anyone to create a Professional and stunning wordpress website, and by the end of this course you will be able to create and customize your web site by yourself. It will be simple and easy.

This course will cover only the DIVI part, so you need at least know how to install and configure wordpress on your hosting with your domain .

You will learn the following aspects :

First of all we will go through a general overview of what is Divi, how much its costs and what are its main features .

Next we will go directly to the practical part and I will show you step by step how to download, configure and customize the Divi.

After that I’m gonna take a Divi layout example and will guide you through all the steps to build a web page using Divi builder from scratch.

Finally I will give you some other options of Divi to enhance your website to the next level.

Who this course is for:

Beginners in wordpress and page builders
non techies wanting to create their website
Wordpress and webdesign freelancers
Business owners and entrepreneurs
No code enthusiasts

Build a Wordpress website using Divi : a step-by-step guide

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Divi : General overview2 lectures • 12min

Install and activate Divi theme and builder2 lectures • 5min

Divi tabs overview4 lectures • 23min

Start building your website with Divi1 lecture • 1min

Customize your theme8 lectures • 44min

Explore the visual builder3 lectures • 18min

Start building your page10 lectures • 1hr 22min

Divi tips7 lectures • 36min

How to create a portfolio using the projects option1 lecture • 9min

Requirements

Description

Who this course is for: