The Complete Divi Course For WordPress

Install WordPress on your computer or web hosting to power a Divi page builder site, log into WordPress, and build pages with Visual Builder using drag-and-drop.

Install WordPress on Windows by installing XAMPP, starting Apache and the database, loading WordPress on localhost, creating the database in phpMyAdmin, and completing the WordPress installation.

Install WordPress on Mac by setting up champ, starting Apache Web server and MySQL, creating a database via phpMyAdmin, loading WordPress on local host, and configuring themes in the dashboard.

Explore the basics of WordPress, including dashboards and pages, and learn how WordPress works to help complete beginners build a basic website.

Explore the WordPress dashboard and admin panel, log in, and navigate posts, media, pages, comments, appearance, plugins, users, tools, updates, and settings.

Learn to create a new WordPress page by logging into the dashboard, adding a title and content, publishing, and viewing or editing, with future styling via the Divi builder.

Discover how WordPress themes define your site’s look, install and activate themes from the repository, and customize headers, colors, and menus with the theme customizer.

Explore how WordPress plugins extend site functionality by adding tools like contact forms, slideshows, and social buttons, installed and managed via the dashboard.

Learn how to get Divi at a discount via an affiliate link with a 24-hour window. Compare the DV plan and DV Pro plan, including yearly versus lifetime options.

Create and publish a home page in WordPress with Divi, set it as the static front page in reading settings, and verify the home path.

Explore the three core Divi building blocks—sections, rows, and modules—and learn how text, image, and button modules are arranged inside rows, including vertical stacking and horizontal layouts.

Explore basic styling in Divi by configuring section height, background color, and background image, then layer a gradient background overlay to enhance a simple boilerplate into a styled page.

Learn to apply background colors, borders, and box shadows to rows and columns, and adjust max width and gutter spacing in the Divi rows/columns basics.

Discover the module basics in Divi, learn to edit image, text, headings, and buttons, and apply color, typography, and alignment to craft a cohesive layout.

Master margins and padding in Divi, learn how borders and spacing affect layout, and practice using negative margins and zero padding to control elements.

Learn to build a demo website using project resources, access the project link, download and extract the image zip, and set up the header and menu.

Design and customize the site header and menu using the theme customizer and Divi builder, applying black, white, and yellow color schemes with color zilla.

Use the theme customizer to adjust the footer layout, remove unused elements, and customize the footer credits and colors before proceeding to the TV builder.

Design the hero section of a WordPress site with Divi's visual builder, creating a two-column layout, background image, text modules, and precise padding and typography.

Discover how to set a default color palette in Divi, pick colors from the page, and apply them to text modules using theme options and the visual builder.

Design the homepage counter in Divi using the visual builder, arrange rows and columns, add a number counter, and refine margins, z-index, fonts, and borders for a polished hero section.

Create a services section on the home page using a three-column blurb layout with icons and centered text, applying Montserrat font and tuned spacing.

Create a two-column home services layout in divi using sections, rows, and a specialty section, then configure text, blurbs, colors, headings, a button, and spacing.

Design and assemble the meet the team section in Divi by creating a two-row, three-column layout with background images, overlays, and centered text for names and roles.

Design a home page help section in WordPress using Divi, guiding you to create a section, set a background with gradient, and add three icon blurbs.

Design a home page testimonial section in Divi by adding a regular two-column row, inserting testimonial modules, and styling headings, descriptions, images, background masks, and colors.

Design the home page call to action to direct users to the contact page, with a centered heading, gradient background, and free consultation button.

Build and customize the about page hero in Divi by enabling the visual builder, setting a background image with a gradient, and adding an SEO-friendly H1 and text module.

Design the about page's why we are the best section in Divi by building a heading, left border, spacing, and three blurbs with icons and a background mask.

Design a quotation section on the about page in Divi with a background image, two text elements, and the author Paul Cookson; copy the section to create the team section.

Learn to build about page with a portfolio section in Divi, adding a heading and description, styling options, a 3-column image gallery with lightbox, and a call-to-action, then save changes.

Build the services page hero and services sections using the visual builder, copying from the about page and customizing background images, icons, and typography.

explore how to build a services page counter section in Divi by adding sections, rows, and headings, configuring four number counters with white text, a colored background, and precise spacing.

Learn to design a contact page in divi using the visual builder, copying sections from the hero to the address and contact form, then customizing backgrounds, fields, and layout.

Master essential web design skills by learning color selection, hover effects, image sizing, entrance animations, and parallax techniques to enhance client sites.

Learn to choose colors for a Divi website by keeping to a simple palette of up to three colors (ideally two) and avoiding overuse, using black, gray, white, and yellow.

Master hover effects in Divi by applying color, background, and text changes to buttons, icons, and blurbs with smooth overlays and shadows to boost interactivity and SEO.

Choose license-free images that match headings, source from Unsplash, compare free and paid options like Shutterstock, and resize images with Photoshop or online tools to optimize load times.

Discover how to apply entrance animations in Divi's visual builder, choosing from fade in, slide, bounce, zoom in, flip, fold, or roll—with guidance on professional use and animation delays.

Apply and fine-tune crawl scrolling animations in divi, including horizontal and vertical motion, scaling, fading, and rotation, by adjusting viewport midpoints and top bottom positions for responsive layouts.

Learn how to apply parallax effects in Divi by configuring section backgrounds, enabling true parallax or CSS parallax, adjusting overlay, and saving changes.

Explore shape dividers in the Divi builder, apply top and bottom dividers, and customize styles and heights to transform sections, adjust z-index, and manage divider arrangement above or below content.

Create and reuse design presets for sections, rows, and modules to save styling and speed up builds, use hero and blurb presets to apply consistent headings, icons, and backgrounds.

Explore global controls in the visual builder and saving a global section to reuse across pages. Update a heading or link once; the library applies changes everywhere.

apply positions and transforms in Divi to create 3d effects, tilt and translate elements, control z-index, and implement hover animations for interactive WordPress pages.

Learn to optimize a Divi WordPress site for mobile by using Chrome developer tools, toggling the device toolbar, and previewing on an iPhone 12 Pro to fix layout issues.

Learn how to make a WordPress site built with Divi mobile friendly by using the visual builder, switching to mobile view, adjusting heading size and alignment, and saving changes.

Learn to optimize the home page for mobile by using the visual builder, switching to the mobile view, and adjusting borders, spacing, and text sizes for a clean, aligned layout.

Master tablet rendering for the home page in Divi by adjusting the four-column layout, removing borders, resizing headings, and aligning background images to top center.

Master mobile and tablet rendering for the about page using the visual builder, adjusting padding, text size, and colors for device-specific readability.

Render the services page for mobile and tablet in the Divi visual builder, adjusting padding, text size, and background masks, and hide mobile content to optimize readability.

Optimize the contact page for mobile and tablet in Divi by adjusting padding and background masks, and set the form width to 100% on both devices.

Explore the Divi theme builder by learning to add custom headers, photos, and footers, with later coverage of the custom body through templates.

Build a customizable header with the divi theme builder by creating a header, adding a dynamic site logo, configuring logo and menu layout, and adjusting padding, colors, and hover effects.

Learn mobile header rendering in Divi: link the logo to home, hide the top logo on phones, and tailor the mobile menu with color and size tweaks across devices.

Build a custom global footer with the Divi theme builder, across pages, adding a logo, description, social icons, and quick links to about, services, and contact.

Optimize the Divi footer for mobile by editing the footer in the theme builder and adjusting column visibility on phones. Preview on mobile and tablet, then save changes.

Enable sticky header in Divi and tailor transitions for logo size, padding, background color, and text color. Apply a drop shadow and save changes for a seamless top navigation.

Create a home page transparent header with the divi theme builder, replacing the default header with a custom header, removing the background color, and adjusting spacing and logo visibility.

Explore how to use Divi filters to adjust a logo in a transparent header, changing contrast, brightness, hue, and saturation without redesigning the logo.

Learners explore why the ecommerce module exists in the Divi course, showing how to convert a site into an ecommerce store with WooCommerce and build cart and checkout pages.

Install and activate the WooCommerce plugin to transform WordPress into a basic e-commerce site, then add products, set up categories, and configure shipping and payment options.

Add five products to your WooCommerce store by uploading images, writing long and short descriptions, setting prices and sale prices, and publishing; preview the shop and cart flow.

Explore basic WooCommerce settings, including store address, country/region options, default customer location or geo locate, currency, coupons, taxes, product and shipping setups, and payment methods.

Walk through placing a demo order on the e-commerce site using an incognito window, completing checkout with US bank details, and administrator updates status and emails the customer and administrator.

Learn how categories create archive pages and single product views in WordPress, assign products by category, and manage a dynamic shop page with Divi.