Getting Started With WordPress And Divi

Why does Getting Started with WordPress and Divi makes sense for beginners who are looking to create their own website? If you are looking at the easiest and most economical way to get a website running for business, blogging, ecommerce or for any other reason, WordPress and Divi is a great place to get started. 

You will need hosting, WordPress and Divi – this article will guide you through all of the steps!

What is WordPress?

WordPress is a free and open-source content management system (CMS) that allows you to create a website or blog. It’s the most popular CMS in the world, accounting for 40% of all websites that are live online in the entire world! 

WordPress is so popular because it’s free, versatile, easy to use, and highly customizable with thousands of themes and plugins.

WordPress is the base coding of the website (you will never have to do anything with this coding, so don’t worry!). WordPress itself is like a blank canvas and it need themes and plugins to create the painting, so to speak.

 “Themes” are used to generate the look and feel of the website. There are hundreds of thousands of themes to choose from, however, Divi theme is THE most popular of all of the themes, specifically for its ease of use and huge creative potential, without the need to have coding knowledge. 

A theme overlays a style sheet onto the WordPress coding. This style sheet allows the ability to easily change the look and feel of the website. With Divi, every aspect of how the website looks can be customized without know a line of code!

“Plugins” are tiny pieces of coding that allow various functions. For example, there are plugins for email marketing, ecommerce, generating forms, connecting with Google Analytics and so much more. 

The possibilities for how a plugin can add function to a WordPress website are virtually limitless. If you can think of something you need your website to do, the chances are someone has invented a plugin for it.

There is a huge repository of free themes and plugins available at wordpress.org. Additionally there is a huge number of premium (paid for) themes and plugins available all over the internet. 

Divi is a premium theme and can be purchased through I Heart Business affiliate link here

What is Divi?

Divi is a powerful WordPress theme developed by Elegant Themes.

 It features a visual builder that makes it easy to create beautiful and unique websites without needing to write any code. Many themes have a drag and drop builder that is also visual, but none work the way Divi does. When you build a website with Divi you are actually building on the front end – literally what you see is what you get!

The theme works in a very simple way that allows even novices to create beautiful websites. Getting started with Divi is really easy!

The page layout is set out in sections, rows and columns and modules. A section contains rows and rows contain modules. Rows can easily be adjusted into multiple columns and various layout patterns.

The modules available in Divi include basic items such as images, sliders, galleries, text boxes, accordions, bar counters, woocommerce sections and so much more.

The sections, rows and modules are each very customisable, from sizing and spacing, to background colours and images, to borders, rounding and more. The flexibility with Divi is almost limitless.

Divi also comes with pre-made layouts and modules that help speed up the design process. At last count there were around 1500 beautiful layouts premade and available inside your WordPress dashboard with Divi installed. Every layout is also completely customizable. 

Step 1: Setting Up Your WordPress Site

Choose a Hosting Provider

Before you can use WordPress, you need to choose a web hosting provider. There are many options available, however I recommend:

Gold Phoenix Group

Siteground

Hostinger

Of course, you will also need a domain name. Most hosting providers also sell the domain names and I recommend keeping hosting and domain either in the same place, or using just one company for the hosting and one other company for the domain name registrations. When you start making a few websites it can get too easy to lose a domain or hosting because you have forgotten where it is hosted!

Install WordPress

Once you’ve chosen your hosting provider, follow their instructions to install WordPress. 

This usually involves logging into your hosting account and clicking on an “Install WordPress” button. Different hosting providers have different options for installing WordPress, however they all have the option!

Because WordPress is so popular and hosting providers give easy access to install the software – you will never need to know anything about installing these files yourself! Just click on install WordPress and fill in the details. Be sure to install your WordPress instance into the root folder (not a sub folder).

Step 2: Installing Divi

Purchase Divi

You can purchase the Divi theme from the Elegant Themes website. Once purchased, download the Divi theme files.

Upload and Activate Divi

Log into your WordPress dashboard, go to Appearance > Themes > Add New > Upload Theme. Choose the Divi.zip file you downloaded and click Install Now. After the theme is installed, click Activate.

Once activated the first step should be to add your user name and license keys for the premium use of Divi. To do this go to the wordpress dashboard and look for Divi down near the bottom of the left hand menu column. 

Click Divi > Theme Options > Update (found across the top header in the Theme Options section). Add your user name and API Key. You will find this in your Elegant Themes account. While logged in use the account tab on the main menu and you will find the user name and API Keys in the drop down menu.

getting started with wordpress and divi

Step 3: Customizing Your Site with Divi

Explore Divi’s Visual Builder

Divi’s strength lies in its Visual Builder, a front-end editor that allows you to see changes in real time. Click on Pages > Add New, and press the “Use Divi Builder” button. Start with a blank page or choose a pre-designed layout.

Let’s build from scratch for the sake of this article!

Add a Section

When you first open the “Start Building” editor in a new page it will have one standard section already installed.

Hover your mouse near the base and a small blue “plus” button will appear. Use this button to add a new section. A dialog box comes up for you to choose standard, full width or add from library. Choose full width to make a banner for the top of the page.

Next you will see a dialog box to add a module. Choose image. For now, we will leave it blank. You should find or create a banner image that is 1200 px wide and around 300 to 600px high. 

Hover over the right hand top side of this new section and you will find a handle to grab to drag this section to the top of the page.

Sections can be blue (standard section), purple (full width section), or bright green ( a section you have saved to your library and made it “global” – if you change this section on one page it will change on all pages without taking further actions – very handy feature!) and finally, orange, specialty sections with different layouts of rows and columns.

Rows And Columns

When you click the plus button to create a standard column you will be presented with the opportunity to add a row and columns.

Rows can be divided up into various types and numbers of columns. These can be changed easily by clicking on the column section in the little row toolbar in th4 top left corner of the row. 

Using Divi Modules

Divi comes with numerous modules like text, images, sliders, and buttons. Each can be customized in the Visual Builder by clicking on the module and adjusting its settings.

Like sections and rows, the settings icon is the gear cog in the toolbar for the module. The front end of the setting is for content and you will usually find where to add the primary content you are using the module for. 

The second tab is for the design elements of the module. Design elements can be customised almost infinitely. Text and Heading text can be changed. Margins and padding changed. Borders and rounded corners changed. 

The third tab is for advanced features and for a beginner the only one of these features you might use is the visibility – for example you can make a section, a row, or a module not be seen on a mobile or tablet if you choose, instead creating and alternative of each of these elements for a better user experience.

Customize Your Design

Adjust site-wide settings such as typography and color schemes by going to Divi > Theme Customizer in your WordPress dashboard. Here, you can set your website’s overall look and feel.

Before going to the site wide customizer I like to set my website’s colour scheme in the Divi > Theme Option page. By clicking on the colour swatches here you can adjust the main site colours and this will make it easy to always choose a themed colour throughout your website.

getting started with wordpress and divi

In the Theme Customizer, go through each menu item and set up the way the primary functions need to appear site wide. For example, you can set the header and body fonts, the colours for the fonts, the effects and colours and layout of the header and menu bar, as well as the footer and the colours for elements within the footer.

Step 4: Adding Content

Content is king, and your website’s value hinges on it. Use the Divi Builder to add and format your content easily. You can create pages for your services, about us information, contact forms, and more.

I also usually add a page that will hold my blog posts. One of the modules in Divi is a blog element that will display blog posts with set categories anywhere on your site.

Content should be unique and relevant so that you can rank in Google.

Use a good free SEO Plugin like All In One SEO – utilising an SEO tool like this one will help you understand the impact your content can make to your rankings. If you want to learn more about SEO have a look at this article – 5 Hot Tips For Crushing SEO

Step 5: Going Live

Preview Your Site

A feature of Divi is the ease of reviewing your site’s look on a tablet and phone. While using the Divi Builder, click on the three purple dots at the bottom on the screen and a menu bar will open. On the left side is an icon for web view, tablet view and phone view, simply toggle those. 

Always save your work as you are building. Make a habit of saving every few minutes, or after adding or formatting each element. The save button is hidden in the purple bottom bar, click on the three little menu tabs at the bottom of the screen and the save button is on the right hand side. The first time you save, the button will say “publish” or save draft. Keep saving the draft until you are ready to publish the page!

One of the best features of Divi is the ability to see what your page will look like as you are building it. To see it without the section, row and module settings and line, simply click the Exit Divi Builder in the top website banner. 

getting started with wordpress and divi

I am creating a full suite of courses and a membership area for building Profitable Websites using WordPress and Divi, coming soon, however for the time being have a look at this quick tutorial I made about the ease of building with Divi. 

Getting Started with WordPress and Divi can help you become a WordPress designer in no time flat! As you become more familiar with both tools, you’ll find yourself able to craft increasingly complex and beautiful websites. Remember, every expert was once a beginner, and with WordPress and Divi, you’re already on the path to becoming an expert web designer!