In this tutorial I show you how to make an amazing website using the Divi theme! I will show you step by step how to create a website using the Divi Theme. An amazing theme that contains a front end editor that makes creating websites easier and faster than ever before! Divi came with a recent update that enables you to make websites even faster! I wil cover that in this tutorial!
Example website:
Demo Files:
Webhosting:
Like me on Facebook:
The Divi builder is a front end editor that shows the result of your editing immediately. The Divi theme comes with 80+ other themes and a few amazing plugins!
Making websites was never so easy as it is this day! If you have a question, please leave a comment!
Overview with Timestamps:
Intro
00:00:15 Overview of the tutorial
00:07:08 For who’s is this tutorial?
00:08:13 Get a domain and webhosting
00:12:53 Install WordPress
00:15:49 Clean Up WordPress
00:16:40 Configure the Permalinks
00:17:24 Remove blogposts
00:17:47 Change User Settings
00:19:23 Create Pages
00:20:53 Create and Assign the menu
00:24:00 Change the homepage to.a static page
00:24:41 Introduction on Themes
00:25:39 Get the Divi Theme
00:25:56 What do you get with the Divi theme?
00:28:25Install the Divi theme
00:29:44 Configure the API Key
00:30:34 Use images I use in the tutorial
00:31:02 Upload a logo and Configure the Theme Options
00:32:25 Social Icons
00:32:25 Other Options
00:33:27 Google Analytics
00:34:27 Change the logo size
The Visual Builder
00:35:10 Explenation of the layout
00:37:05 Creating a blurb
00:39:09 Duplicate Modules
00:39:51 The Editor View
00:40:46 Overview of the options in the Visual Builder
00:42:27 Display options of the Visual Builder
00:42:48 Zoom Out To Drag and Drop
00:43:14 Change to tablet or smartphone view
Create The Homepage
00:43:47 HeaderSlider
00:45:54 How to work with backgrounds
00:49:51 Create a Video Slide
00:54:52 Import Custom CSS to style your website extra
00:57:06 Import Section Options
00:58:18 The Blurb Module
01:03:46 The Video Module Explained
01:04:48 The Text Module Explained
01:07:17 The Gallery Module Explained
01:10:01 The Button Module Explained
01:13:04 Save a Module/Section to your library
01:14:11 Change the look and feel of sections and modules
01:18:11 Use Custom CSS to style your modules
01:23:40 Create a simple clients section
01:25:16 Zoom out to drag and drop areas in your website
01:26:35 Configure the responsive visibility of areas in your website
01:26:55 Work with animations
01:29:04 Load From Library | Pre Made Layouts
01:35:14:16 Divi Theme Settings
01:35:53 Boxed Layout
01:36:20 Website Width
01:36:30 Gutter Width, Section Height and Row Height
01:38:26 Typography
01:40:15 Configure the background of the website
01:41:19 Configure the Menu
01:42:01 The Primary Menu
01:44:27 The Fixed Menu
01:46:25 The Secundary Header
01:48:14 Button Styles
01:48:49 Responsive Settings
01:50:24 Additional CSS
01:50:31 Create beautiful dividers
01:53:12 Verify Your Domain
01:53:50 Add SSL to your website
About Page
01:55:24 Import Pre Made Layouts
01:56:50 Import a Video Background
02:03:24 Create A Custom Footer
02:08:12 Adjust the Socket in the Footer
02:09:08 Add links to your Socket
02:10:54 Change the look and feel of an area in a few clicks
The Services Page
02:13:10 Import a Pre Made Template
02:14:08 Change images using the Divi Filter
02:15:43 Use Fluid Styles to save a lot of time
The Portfolio Page
02:18:36 Create a Portfolio Item
02:20:15 Create a Gallery
02:20:42 Optimise Images | SEO
02:23:16 Create a related projects section
02:26:25 Save your project as a template
02:26:49 Create a second portfolio item
02:29:03 Create a third portfolio item
02:31:18 Configure the portfolio page
The Blog Page
02:36:34 Configure the blog page
02:37:00 Create a fblogpost
02:38:40 The excerpt text
02:39:10 The Text Editor | headers | paragraphs
02:43:22 Style your blogpost
02:46:45 Add a link
02:48:15 Add Images
02:52:17 Use custom CSS to get rid of the sidebar border
02:54:02 Use the live editor to make a blogpost
02:56:32 The Countdown module
02:58:27 Change the postdate or schedule blogposts
03:00:05 Configure the blog page
The Sidebar
03:07:44 Sidebar Widgets
03:08:49 The Facebook Likebox Widget
03:10:33 Blogpost Comments
The Contact Page
03:12:44 Add a free image and optimise it in WordPress
03:15:26. The Call To Action Module
03:16:36 Add 3 blurbs
03:19:30 The Google Maps Module
03:19:43 Get the Google API Key
03:21:11 Configure the Google Maps Module
03:23:19 The Contact Form Module
The Homepage
03:25:19 Add Most Recent Posts on the homepage
03:26:34 Add Most Recent Projects on the homepage
Responsiveness
03:28:05 Make your website even more responsive
03:37:05 What is next?
03:37:22 Thank you so much
Video Source: https://www.youtube.com/watch?v=1l5OnKj_-5Q
Website Design South Wales