virusword.com-Wordpress

Learn Wordpress

Home/Videos/How to Create a WordPress Website in 2020 – Divi Theme Beginner's Walkthrough 💜

How to Create a WordPress Website in 2020 – Divi Theme Beginner's Walkthrough 💜



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/

Get the FREE LAYOUTS!
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:
https://divilover.com/courses/how-to-…

Here's a link to the Resources page mentioned in the video:
https://divilover.com/divi-resources/

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

The Course Timeline:

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

LESSON 2
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

LESSON 3
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

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

LESSON 5
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

LESSON 6
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

LESSON 7
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

LESSON 8
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

LESSON 9
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

LESSON 10
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

LESSON 11
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

LESSON 12
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

LESSON 13
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

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

LESSON 15
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 💜

source

Reader Interactions

Comments

  5. This was awesome! Watched it twice and took many notes. QUESTION: If I want to present a portfolio of work, can I just use the blog posts as you show here for each piece of portfolio or should I use the Projects types? Is there any advantage to using the custom project post types instead of the regular post types?

  6. An amazing walkthrough for beginners. Ania gives clear explanations and takes you step-by-step through every aspect of a complete website made with Divi. I especially appreciate the time she took to include stylistic features used in real websites like gradients, hover changes, shadow boxes, etc. Thank you so much!

  10. Thank you so much for your amazing step by step tutorial and dedicated effort and time. It was really helpful. Especially the part for creating the Blog/Archive page template, you made it so clear.
    Looking forward for more amazing tutorials.

    I would appreciate if you could do a tutorial about BuddyPress/BBPress using the wonderful Youzer Plugin.
    Thank you

  12. Wow!…..that was amazing.

    Thank you so much for such for an amazing tutorial . I hope to be upgrading my Theme shortly to Divi and now feel more comfortable with the task ahead.

    Thanks again 👍 and we’ll done.

  21. I bought Divi over a week ago (took less than one minute for Divi to take the money from my credit card)

    Contacting Customer Support has been a nightmare. I got stuck with a guy that simply could not help me get started when I could not activate the Divi app I had uploaded. I asked him a question on hyperlinks and he knew nothing about that either.

    He escalated the problem when I complained. But that has the result of blocking you from Chat and you're left with email support only with its corresponding time delays in responses.

    Until I found @AniaRomanska I too would have asked for a refund. A pity because the Divi theme itself is excellent. The company lets itself down by having very poor tutorials and a dubious customer support system. Maybe it depends whether you get a good agent or not when you go to chat.

    Thanks again, Ania Romanska

    But what would be your advice. Obviously, I'm working through this tutorial. But where can I get specific answers to specific questions. It's frustrating and rather pointless asking Divi support. I really want to learn and use Divi. Maybe Ania or her readers have ideas. Thanks in anticipation.

  26. Thank you for this excellent tutorial about WordPress and divi.
    I will use for development the e-commerces and websites for my customers.
    This site made for you is amazing.
    Thank you.

  27. This is the best tutorial for Divi. Thank you so much! You explain everything very well and I could follow along easily.

  29. I have practiced reproducing websites from other Divi Tutorials, and while they were all good, this tutorial by Ania is by far the best. Ania provided a lot of other useful tips not coveerd in other tutorials. (Just read Gary's comments and he says it better than I did). I highly recommend this tutorial to anyone interested in learning more about Divi. BTW, you will enjoy her accent!!

  30. Why first making pages and after that the divi install. Does that mean that it is for some reason better to create pages on wp and just edit them with divi? sorry i am complete beginner. Thank you for amazing video

  31. @
    Ania Romańska, Thank you for this explanation. You have shown that your understanding goes past those of many and my eyes have been opened to understand in a way that you have shown and explained. Thank you very much for this.

  35. I have wasted soooo much money trying the wrong stuff. I really want to give this a shot. I feel like its too good to be true but i've got nothing to loose (except more money)

  36. Anyone finding their logo is distorting in Chrome if you resize the window? Mine did, but this CSS should solve it. Place the following code in: Divi > Theme Options > Custom CSS:

    #logo {
    width: auto!important;
    }

    Thanks Ania – fab tutorial!

  37. WOW! An amazing tutorial. I have been stuck with DIVI, after watching many days of DIVI YouTube tutorials I was about to throw in the towel and get a refund. Thankfully I found your, recise and patient tutorial. You rock! Thank you.

  44. sorry, I can't find the images you used on this tutorial, I also follow the resources link I don't know why I don't find it. Will you provide me those images?

Explore more

Get our Wordpress Guide Get Plugins Get Connected