I’m sure you’re well aware that WordPress is the leading CMS in the world today. WordPress allows you to create a beautiful looking website or a blog in a matter of minutes. You don’t even have to be a computer geek or a coder to build a great website using WordPress. WordPress comes with hundreds of free and paid themes which you can customize and build your website. In this blog, we are going to see how to create a WordPress website using Divi Theme 2018.
Several WordPress themes are immensely popular with users all over the world. ColorMag, Flash, Spacious, Accelerate, AccessPress are some of the most used WordPress themes in the world today.
While all of these themes work wonderfully well, I am a big fan of the Divi Theme. It is a very versatile and flexible WordPress theme with an easy to use interface. It is also a very powerful theme which offers you all the features and functionality you need. Whatever type of website you’re building – whether it is a business website, a blog or a portfolio site, you can do it using the Divi Theme.
I am such a big fan of the Divi Theme that I use it on almost every single website that I create. Today, I will offer you a step by step guide which will help you create a WordPress website using the Divi Theme. Don’t worry if you don’t know much about WordPress or haven’t used WordPress at all. I’ll offer you detailed instructions that you can follow to create and setup your website in a matter of minutes. There’s a lot of information in this guide, so take your time and make sure that you read completely through to the end!
You can watch the video tutorial here as well
Understand WordPress basics
Before I tell you more about how to build a website using the Divi theme, you’ll need to do some homework first. You’ll need to familiarize yourself with WordPress to not face any problems when you’re building your website.
WordPress is supported by a massive community of users, and it is one of the easiest to use CMS platforms. WordPress is also incredibly user-friendly to beginners, so you should get yourself acquainted with it in no time at all.
I won’t go into much detail about WordPress here, as there are plenty of quality tutorials available on the internet. You can even go through some of my previous posts to learn more about the basics of WordPress. Remember – there’s no need to spend hours trying to teach more or master every aspect of WordPress. Just familiarize yourself with the basics – the admin dashboard, the settings and the themes. Once you’re done, you will be ready to build your first WordPress website using the Divi theme.
Purchase hosting and a domain name
Now that you are familiar with the basics of WordPress, you’re one step closer to creating a gorgeous website. But, before you can do so, you’ll need to purchase hosting and a domain name for your website. I know that some of you may be sceptical about making a purchase. But hey, purchasing a domain name with hosting is actually very cheap. In fact, you can purchase both hosting and a domain name for under $5 per month!
At such prices, you really shouldn’t be considering whether or not to purchase a domain name or hosting. However, if you are adamant on not spending any money at all, you can always get started with a free WordPress website without hosting. Do understand that this free website will contain a ‘.wordpress.com’ Extension after your domain name. While this shouldn’t create any problems, it does look very unprofessional. Unless you just want to get a feel for things, I recommend you to purchase a domain name with hosting.
When it comes to hosting, there are several options you can choose.
I personally use SiteGround to host all my websites as I find it to be the fastest and most reliable. SiteGround also offers a 24/7 support, and their hosting packages are reasonably priced, making them one of the best hosting options.
Image: SiteGround cPanel
Purchasing hosting from SiteGround is pretty straightforward. Think of a domain name that is suitable for your website and checks if it is available. You can do this on SiteGround itself. Once you’ve finalized your domain name of choice, choose a hosting package for your needs. If you’re just starting out with hosting, go with the cheapest yearly package. You can always renew your hosting later on.
Congratulations on having purchased a domain name and hosting! You now own a website, but it is not usable as yet. To build and create your website, you’ll need to install WordPress. Fortunately, SiteGround makes WordPress install very easy. The SiteGround Wizard will help you install WordPress on your hosting package in a matter of minutes!
To install WordPress, login into the client area of your SiteGround dashboard. Scroll down to the autoinstallers section where you will see the WordPress icon. Click on the icon and then click on Install and that’s it – you’ll have installed WordPress on your domain!
Image: WordPress Install
When you install WordPress, you’ll also have to fill out some fields regarding your website. Most of these fields are self-explanatory, so you should have no problems in filling them out. If you’re not sure of any field, just leave it at default, and it should work fine.
Download the Divi Theme
Get 10% Off The Divi Theme Here
Once you’ve installed WordPress on your domain, you will need to download the Divi theme next. The Divi theme is offered by Elegant Themes, and you can download it from their website. I love Elegant Themes because they offer great support and also back their service with a 30-day money back guarantee. Most other theme providers don’t do so.
To download the Divi theme, just complete your registration and signup on Elegant Themes. After signing up, you can download the themes, explore other products and find setup guides on the Elegant Themes website. Everything that you need to get started using the Divi theme on your website will be available to you.
Image: Download Divi Theme
After you download the Divi theme, you’ll also need to upload it to your WordPress website. To do this, just scroll down your WordPress admin dashboard, head to Appearance and then to Themes. Click on the Upload Themes button and choose the Divi theme zip file that you have downloaded. Click on Install Now and when you’re done, activate the theme. Now, your WordPress website will reflect the Divi theme and you will start creating WordPress website Using Divi Theme.
Create a homepage
After installing the Divi theme on your WordPress website, you’ll have a powerful theme to build your website on. But, at this point, your website will be completely blank, and it will look nothing like the Divi theme demo. To update your website, you’ll need to create a homepage.
Thankfully, creating a homepage is very easy using the Divi theme. Just open your website through the WordPress dashboard, and you’ll see an option to Enable Visual Builder in the header section. This will allow you to create any web page from a visual standpoint.
When you open the Visual Builder, you’ll see some boxes and columns. You can create different types of modules in these columns. With the help of modules, you can create different sections for your homepage.
To start off, create a text module in the section which will be the header text of your website. You’ll find a ton of font design and customization options to help your text look just the way you want it. In fact, the Divi theme allows you to create as detailed and well-designed header texts as you want. Add as many text modules as you want to display the content that you want on your website homepage.
Also, create a slider to give your website a modern look. You can find a slider module under the Visual Builder settings itself.
You can also create button modules to link to other pages of your website or a different website altogether. Again, Divi theme offers a lot of flexibility and functionality, and you can design your button modules as you please. You can even add hover effects, add color gradients and change the shape of modules.
What I really love about designing WordPress Website Using Divi Theme is that it allows a great amount of customization. If you choose to spend a few extra minutes, you can design a website homepage that looks (and works) as well as those of big enterprises. You will need to play around with the Visual Builder a little to design a homepage that you really like.
As a tip, I’ll recommend you to try replicating the Elegant Themes demo page which showcases the Divi theme. You’ll learn a lot about how to use the Visual Builder if you do so.
Image: Divi Homepage Example
Create a split screen
Once you’ve created your website homepage and you’re comfortable with the Visual Builder, you can go ahead and create a split screen on your website. If you’re wondering why you need a split screen, it is because it will allow better flow across your website. A split screen is nothing but breaking up your website homepage into different sections. Without a split screen, you’ll still have a functional website, but users may find it slightly difficult to navigate through sections.
To create a split screen on your homepage, click on the plus button located at the bottom. This will allow you to insert a new section into your webpage. The Visual Builder includes a selection of readymade split screen layouts you can choose. Alternatively, you can also add layouts from your library or customize the preexisting layouts.
I recommend you to experiment with different modules on a split screen layout of your choice to find what works best. You can add images, banners, buttons and other modules to make your website more functional. Make sure to include links and call to action buttons along with text to help your users navigate through your website. Again, the key here lies in experimenting with the Visual Builder to create something that you really like. And, if you’re low on creativity or inspiration, just open up one of your favourite websites to see how it has been designed. Try and emulate that website’s look on your website using the Visual Builder.
Image: Divi Split Screen Example
Create overlapping text
If you’ve taken a close look at the demo of the Divi Theme, you’d probably have noticed the overlapping text. This is a really cool feature which you can create using the Divi theme within seconds – something that may otherwise take hours!
To create overlapping text, use the Visual Builder to add a new section to your webpage. Choose the regular layout and add a text module. Again, you can use the tools offered by the Visual Builder to design your text just the way you want.
Once you’ve created the main text, head over to the design tab under the section settings. Scroll down until you reach box shadow and click on it. This will create a border that separates this section of your webpage from other sections. Now, add another text module where you will insert the text which will overlap your main text. Drag and move around both text modules until you create the perfect visual overlap. You may also want to change the opacity and the text color of the modules to give them an attractive look. If you do this properly, you’ll be able to emulate the exact look that is available in the Divi theme demo.
Create double split screens
Double split screens are a great way to organize your webpage and make it look more appealing to your users. Creating a double split screen on your WordPress website using Divi Theme is extremely simple and straightforward. By now, if you’ve played around with the Visual Builder enough, you should have a rough idea of how to do this.
The classic double split-screen layout includes two columns and two rows, with alternating text and image sections. I would recommend you to emulate this layout as it is one of the most popular layouts used in web design today. Use this layout to include all important sections such as testimonials, service offerings and other sections of your website.
As a tip, you don’t need to create multiple split screens using the Visual Builder. You can simply create a single split screen and then replicate it to create multiples. And, the Visual Builder offers you enough flexibility to add buttons or interchange sections and modules according to your needs. To do this, just select any module that you want to replicate and save it to your library. You can recall this saved module from the library anytime you need to.
Image: Divi Double Split Screen
Advanced design settings
By now, I’m sure you’re in love with the Divi Theme and its wonderful Visual Builder. But wait – there’s a lot more than you can do with this theme! The Visual Builder includes several advanced design settings which allow you to manipulate different elements of your website.
Some of the things you can do with advanced design settings including changing the color of a module, changing the gradient type and direction of a module, changing the spacing within a module, adding margins or padding, and creating custom backgrounds and sections. Its really up to you how much detail you want to go. This is also one reason why many web designers and developers prefer the Divi Theme over other WordPress themes.
Now, I don’t recommend that you waste too much time fiddling around with advanced design settings unless you have an idea of what you’re trying to achieve. There are so many options and tools available to you that it is very easy to find yourself wanting to do more. Depending on what type of website you’re trying to create, use advanced design settings accordingly.
Image: Advanced Design Settings
Design the footer
The footer is one of the most important sections of your website, and you must design it properly. Now, with the Divi Theme, there are two ways to design a footer – a standard footer or a custom footer. Creating a custom footer is just the same as creating any section using the Visual Builder. You can use the Visual Builder tools to design a footer just the way you want.
On the other hand, the standard footer comes pre-included with the Divi Theme. If you want to add the standard footer to your website, exit the Visual Builder and head over to the theme customizer in your WordPress panel. Under the theme customizer, head over to widgets where you’ll see footer widgets. The Divi Theme will allow you to add different sections to your footer in a matter of a few clicks. If you need to add plugins to your footer, you can search for them under plugins in your WordPress dashboard. Again, there is a lot of functionality here, and you can add as many elements to your footer section as you like.
Image: Divi Footer Example
Get a website logo
By now, if you’ve followed all the steps mentioned above, you should have a fully functional website. But before you pat yourself on the back, hold on. You’ll need to add a logo to your website to make it look more professional and appealing.
Don’t worry if you don’t know how to design a logo – I’ll offer you a way around it. You can simply head over to any of the freelancing sites such as Fiverr, Upwork or Freelancer.com and request for a logo design job. You’ll immediately have access to a global pool of logo designers, and you can hire someone to create a logo for you. The best part of these websites is that they are incredibly affordable. In fact, you can get a professional logo designed for your site in as little as $5! So, don’t skimp out on this step – it will make a big difference to your website.
Optimize for mobile
To make your WordPress website fully functional, you’ll need to optimize it for mobile viewing. Fortunately, the Visual Builder makes this very simple as well. To optimize your website for mobile, simply open the settings for any selected module and head to the design tab. Alongside all the design settings, you’ll also find a small tablet/mobile icon next to the settings. Click on this icon to see how your website looks on a mobile platform. You can also edit and make any changes if you need to.
Remember – more people view websites on mobile devices than on desktop and laptop computers today. As such, I highly advise you to optimize your website for mobile else you may lose out on many potential viewers.
Image: Mobile Customizer
Add other pages to your website
After completing all the steps above, you’ll have a fully functioning one-page website which will work on all devices. But, you’ll probably want to add more pages to your website depending on your needs. Some pages that you should consider including in your website are an About Page, a Blog Page and a Contact Page.
To add new pages to your website, simply head over to your WordPress dashboard where you’ll find Add pages. Go on and add as many pages as you require. And, to design these pages, you can use the Visual Builder once again. You can simply use the Divi Theme library to replicate any modules or sections that you have designed on your homepage. This will save a lot of time and allow you to create multiple web pages in no time at all!
Image: Divi Library to Create Multiple Webpages
Customize WordPress Website Using Divi Theme
Congratulations! If you’ve followed all the steps I’ve mentioned above, you’ll have created a great WordPress website using the Divi Theme. While you can take your website live, I’ll also recommend you to customize the Divi Theme according to your needs.
Divi is a very powerful theme which offers a lot of customization options to users. Simply head over to the theme customizer, and you’ll be presented with many tools to change the look and feel of your website. I won’t go into much detail about the theme customizer as you’ll learn more about it by playing more with it.
Image: Divi Theme Customizer
So, there you have it! These are my step by step instructions that will help you create a wonderful WordPress website using the Divi Theme. Sure, there are few steps involved in the process, but much of it is fairly simple to follow. Ideally, you shouldn’t run into any problems.
Have you already used the Divi Theme? Do you know of any other WordPress themes that offer as much regarding features and functionality as the Divi Theme? Or do you have any doubts or questions regarding this guide? Please do leave me your comments below and I’ll be happy to hear from you!