WordPress con Divi

In this «How to Make a Website» tutorial, I will show you how to create a beautiful 5-pages website step by step using WordPress and the powerful Divi theme and the Divi Visual Builder.

Here’s the final result – the website we are going to create: http://samplewebsite.divilover.com/

If you don’t want to follow along and create it yourself (and if you are a Divi Lover subscriber), feel free to download the JSON files and import it into your project with just a few clicks!

Here’s a Full Course Page where you can download the same graphics to easy follow along the tutorial as well as the JSON files to load the completed website version:

Here’s a link to the Resources page mentioned in the video:

-70% Discount for the Siteground Hosting: https://bit.ly/2yJvo0Z
-10% Discount for the Elegant Themes subscription: https://bit.ly/2XhnI08

The Course Timeline:

00:03:03 Get Domain Name and Hosting
00:03:56 Choose a SiteGround Hosting Plan
00:04:32 Choose a domain name

00:07:30 Install WordPress – First Steps in the Dashboard
00:09:45 WordPress Dashboard overview
00:11:47 Removing pre-installed plugins
00:12:47 Manage your User Profile
00:14:17 Secure the website with SSL through SiteGround
00:16:00 Define the permalinks structure

00:16:28 Create Pages and Posts
00:16:53 Add a new page
00:18:13 Add blog posts
00:18:44 Assign a Featured Image to post
00:19:37 Create Blog categories
00:20:45 Assing a Home Page and a Posts Page

00:23:55 Download & Install the Divi Theme
00:25:21 Get 10% discount on Elegant Themes membership
00:26:41 Install Divi

00:27:38 Manage WordPress Menus
00:28:14 Divi Theme Navigation Settings
00:28:50 Create Custom Menu
00:29:56 Change the Menu item name
00:30:14 Create a dropdown menu
00:30:55 Assign a menu as the Primary Menu
00:31:40 Create an External link which opens in a new tab

00:32:45 Divi Theme Options & Theme Customizer
00:33:02 Assign a website logo
00:33:27 Define the default Color palette
00:35:32 Disable CSS/JS minification (during development)
00:35:41 Where to add custom CSS
00:36:33 Disable css caching (during development)
00:37:03 Change the default post meta
00:38:35 Integration tab (add FB pixel or Google tracking code)
00:39:12 Activate Divi to get updates
00:40:10 Divi Theme Customizer settings
00:40:26 Assign a website favicon
00:41:08 Change theme accent color
00:42:48 Check server configuration in the Divi Support Center

00:43:34 Divi Builder Overview
00:43:38 Introduction to Divi Theme Builder
00:44:20 Create a template for global header
00:44:54 Divi Builder interface walkthrough
00:47:05 New Layers panel
00:49:07 Switch the device view
00:49:53 Divi Builder settings
00:50:23 Change the interaction mode (hover, click, grid)
00:51:50 Keyboard shortcuts

00:52:16 Create a fixed header
00:55:02 Change color settings on hover
00:58:50 Add a dynamic page link for a button
01:02:06 Make the header fixed at the top of the browser window
01:07:30 Browser Inspector, adjust the header for mobile
01:08:05 Disabe the builder elements for mobile

01:11:06 Create a global footer
01:12:21 Add a current year to Footer using Dynamic Content feature
01:14:00 Set up global font styles using Global Defaults feature
01:15:50 Copy and paste styles between modules
01:17:40 Set global heading styles for Text modules
01:20:00 Extend styles across different modules
01:21:16 Style the Social Follow module

01:24:44 Design the Home Page
01:25:23 Different section types
01:26:30 Style the Fullwidth Header module
01:29:20 Enable the gradient overlay on the parallax background
01:35:27 WSection dividers
01:40:09 Make module styles default
01:40:40 Style the simple Image module
01:46:40 Style the Testimonial module
01:52:13 Duplicate modules
01:53:56 Style the Call to Action module
01:58:50 Style the Blog module
01:59:14 Copy and Paste modules

02:06:05 Design the About Page
02:06:22 Load an exisitng page
02:10:10 Apply filters to images
02:15:15 Style the Blurb module

02:19:40 Design the Services Page
02:23:46 Use columns for boxed layout
02:25:54 Add transformation on hover
02:28:56 Style the Pricing Tables

02:39:15 Create the Contact Page
02:39:30 Load a pre-made Divi layout
02:43:33 Find & Replace Fonts
02:47:50 Add a scroll-to-section anchor link
02:55:28 Create a separate header for a page
02:59:17 Scroll to a section from a separate page

03:05:29 Customize the Blog and Category Archives
03:10:40 Define a dynamic archives title

03:12:15 Create a Single Post Template
03:14:03 Style the Fullwidth Post Title module
03:16:45 Add a Post Content module
03:22:07 Style the Comments module
03:29:30 Disable the Guntenberg editor
03:30:33 How to log in to the Dashboard 🙂

03:31:10 SUMMARY & using the FREE premade layouts!
Thank you 💜