- \n
- Introduction<\/a><\/li>\n\n\n\n
- Step 1: Get a Domain Name and Web Hosting<\/a><\/li>\n\n\n\n
- Step 2: Setup SSL (HTTPS) for your domain (FREE)<\/a><\/li>\n\n\n\n
- Step 3: Install WordPress CMS system (FREE)<\/a><\/li>\n\n\n\n
- Step 4: Install the Divi theme<\/a><\/li>\n\n\n\n
- Step 5: Install a free Divi layout pack<\/a><\/li>\n\n\n\n
- Step 6: Customize the look and feel of your website<\/a><\/li>\n\n\n\n
- What’s next?<\/a><\/li>\n<\/ul>\n\n\n\n
Introduction<\/h2>\n\n\n\n
Having over a decade of experience in web design, I\u2019ve built hundreds of websites for clients. These days I am fully committed to building Divi child themes and Divi layouts<\/a> for the Divi community. <\/p>\n\n\n\n
You can see my designs and layout packs on my Divi marketplace<\/a>.<\/p>\n\n\n\n
Right now, my designs are used by thousands of other web designers across the globe. But not all of us have the same technical expertise. And to be honest, that doesn\u2019t really matter when it comes to building a website. Yes! You\u2019ve read right! At this point, anyone can build a website.<\/p>\n\n\n\n
You don\u2019t need to have any experience or technical skills to do that. With the wide range of incredibly efficient web designing tools and platforms- there\u2019s never been an easier time to make a website on your own.<\/p>\n\n\n\n
In the following section, you will find a step-by-step guideline for building your very first Divi website.<\/p>\n\n\n\n
Step 1: Get a domain name and a Web hosting plan<\/strong><\/h2>\n\n\n\n
In order to get started with WordPress, you will need two important things-<\/p>\n\n\n\n
A domain name (which is the web address of your site, something like (thenameofyoursite.com)<\/p>\n\n\n\n
Hosting (the service that\u2019ll connect your online platform to the internet)<\/p>\n\n\n\n
Choosing the right web hosting platform is perhaps one of the most essential parts of starting a website. <\/p>\n\n\n\n
Here, you should make it a point to choose a platform that is not only reliable and backed by excellent customer support but is also equally affordable.<\/p>\n\n\n\n
I would recommend SiteGround<\/a> as a hosting platform (this is one of the hostings I use) because of its simplicity and user-oriented services. Here are some more reasons that\u2019ll convince you why I\u2019m vouching for it.<\/p>\n\n\n\n
See also this recommended list for finding a great Divi host<\/a>.<\/p>\n\n\n\n
- \n
- Lets you install WordPress in a single click.<\/li>\n\n\n\n
- Free Let\u2019s Encrypt SSLs (secures your website).<\/li>\n\n\n\n
- Offers 24X7 customer support.<\/li>\n\n\n\n
- Loads your website really fast.<\/li>\n\n\n\n
- SiteGround is recommended by Elegant Themes (the company behind Divi)<\/li>\n\n\n\n
- 80% discount<\/strong><\/li>\n<\/ul>\n\n\n\n
Now that you\u2019re aware of the benefits this platform comes to offers, here\u2019s how you can start out on SiteGround<\/a>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/SiteGround-banner.jpg\")
<\/a><\/figure>\n\n\n\nStep 1: Go to SiteGround<\/strong><\/h3>\n\n\n\n
Go to the website of SiteGround<\/a>\u2013 In order to get started with this hosting solution, you\u2019ll first have to head to the website of SiteGround and click on the choose plan\u2019 option.<\/p>\n\n\n\n
![\"SiteGround](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/SiteGround-hosting-for-Divi-theme.jpg\")
<\/figure>\n\n\n\nStep 2: Choose your plan<\/strong><\/h3>\n\n\n\n
For this next step; you\u2019ll have to choose a hosting plan for your website. Having said that, don\u2019t stress out about the different packages, because you can always upgrade them as and when you need them.<\/p>\n\n\n\n
If you\u2019re a beginner, you can always try the StartUp package. This is a great choice for new websites and right now it is available at a discount of 80%<\/strong>. Once you\u2019ve chosen this hosting package, click on the option called “Get Plan”. This will redirect you to the option of selecting a domain name.<\/p>\n\n\n\n
![\"SiteGround](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/SiteGround-hosting-packages.jpg\")
<\/figure>\n\n\n\nStep 3: Choose your domain name<\/strong><\/h3>\n\n\n\n
The domain name of your site is going to be the web address via which people are going to identify you and access your website. In other words, your site\u2019s domain name is websitename.com.<\/p>\n\n\n\n
In case you have a domain name already, check the box called I have a domain name already. After this, click on proceed to carry on with the remaining process. If, however, you don\u2019t have a domain name of your own; click on the option called Register for a new domain\u2019.<\/p>\n\n\n\n
![\"Choose](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/choose-domain-name.jpg\")
<\/figure>\n\n\n\nWhile you might already have some ideas for selecting your very first domain name, here are some additional guidelines for the ones starting out:<\/p>\n\n\n\n
- \n
- If you are making a website for your company, use a domain name that syncs with your company name. If however, you are making it for yourself, then add your name in the domain name section.<\/li>\n\n\n\n
- Do not use any extra characters other than alphabets (including hyphens)<\/li>\n\n\n\n
- If available, use .com, because this is the easiest for people to remember.<\/li>\n<\/ul>\n\n\n\n
Step 4: fill in your Details<\/strong><\/h3>\n\n\n\n
This is the section where you add your contact details and pay for your web hosting plan. Here, right under the purchase information, click on the option called hosting services.<\/p>\n\n\n\n
There, you will find yet another option called data centers. In this section, choose the location of your nearest data center. If your customer base is primarily from USA, then choose USA in this section.<\/p>\n\n\n\n
![\"Siteground](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/purchase-info.jpg\")
<\/figure>\n\n\n\nWhile you create your first domain name, you will also get the option of adding domain privacy. (This will keep your personal information (including your name and address anonymous).<\/p>\n\n\n\n
You can also add an SG site scanner for scanning your website for malicious software. Both of these options are optional.<\/p>\n\n\n\n
Things to do before the next step<\/strong><\/h3>\n\n\n\n
- \n
- Choose a domain name and set up a hosting package. I recommend choosing SiteGround<\/a> as your hosting.<\/li>\n<\/ul>\n\n\n\n
Step 2: Set Up your Domain\u2019s SSL<\/strong><\/h2>\n\n\n\n
Once you\u2019ve purchased your domain name and have set up a proper hosting plan, you\u2019re one step closer to building your website. In the second step, we will focus on securing your website with SSL (https).<\/p>\n\n\n\n
Right now you might be wondering what exactly is SSL and how is it going to impact your website. I\u2019ll keep it simple. SSL is the acronym for Secure Socket Layers.<\/p>\n\n\n\n
As evident from the name, an SSL certificate in your hosting account is going to provide much-needed security for your website. When your website is secure, you will see a green padlock icon in your address bar, and instead of starting with HTTP; your web address will now start with HTTPS. Here, the S stands for security.<\/p>\n\n\n\n
![\"SSL](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/SSL.jpg\")
<\/figure>\n\n\n\nIf your website starts with HTTP instead of HTTPS\u2019; the Google Chrome browser will automatically flag it as a non-secure site. Here, even if you\u2019re not accepting payments via your site, seeing the non-secure icon is not really going to provide a great user experience.<\/p>\n\n\n\n
![\"Website](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/SSL-not-secure.jpg\")
<\/figure>\n\n\n\nYou\u2019re already aware of how difficult it is to garner people\u2019s attention. And having something negative is definitely going to add an adverse impact on this attention. But how exactly does one set up their SSL? Well, with SiteGround this is super easy to do.<\/p>\n\n\n\n
Visit the SiteGround<\/a> website and click on the login option (top right corner).<\/p>\n\n\n\n
Right after you\u2019ve logged in, head to the Websites tab.<\/p>\n\n\n\n
![\"Go](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Go-to-websites.jpg\")
<\/figure>\n\n\n\nOn your next screen, you will see all of your available domain names and hosting packages in your case this will be likely just one. Click on the option Site Tools.<\/p>\n\n\n\n
![\"SiteGround](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/SiteGround-websites-tab.jpg\")
<\/figure>\n\n\n\nOn the following screen, navigate to Security > SSL Manager. From here choose your domain name from the drop-down and select Let’s Encrypt and click on the Get button. The installation will hardly take a minute and will soon let you access your SSL certificate.<\/p>\n\n\n\n
![\"Install](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Install-a-SSL-certificate.jpg\")
<\/figure>\n\n\n\nThings to do before the next step<\/strong><\/h3>\n\n\n\n
- \n
- Set up an SSL certificate and secure your website.<\/li>\n<\/ul>\n\n\n\n
Step 3: Install WordPress<\/strong><\/h2>\n\n\n\n
Now that you\u2019re done with the SSL certificate, it\u2019s time to finally install WordPress. It’s super easy to install WordPress with SiteGround.<\/p>\n\n\n\n
Navigate to WordPress > Install & Manage. From here select WordPress, if you want to start an eCommerce website then you can also install WooCommerce. But for this tutorial, we will just install WordPress.<\/p>\n\n\n\n
Then you have to create a login for your WordPress site. I disable the option “Install with WordPress Starter”, this option will autoinstall a popular WordPress theme and plugins, but we are going to use the Divi theme so we do not need those.<\/p>\n\n\n\n
![\"Install](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Install-WordPress.jpg\")
<\/figure>\n\n\n\nYour WordPress website is now been installed and you can access it by clicking on the button Admin Panel.<\/p>\n\n\n\n
You can also access your website admin panel by visiting your website and entering wp-admin after your URL, which should be something like www.yoursite.com\/wp-admin<\/p>\n\n\n\n
Then you just enter your login information to access your WordPress dashboard.<\/p>\n\n\n\n
![\"Success](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Success-message-installing-WordPress-website.jpg\")
<\/figure>\n\n\n\nThings to do before the next step<\/strong><\/h3>\n\n\n\n
- \n
- Installing WordPress on your domain name<\/li>\n<\/ul>\n\n\n\n
Step 4: Install the Divi theme<\/strong><\/h2>\n\n\n\n
After you\u2019ve finally installed WordPress on your domain, you will find a pretty basic and clean website.<\/p>\n\n\n\n
![\"Basic](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Basic-WordPress-Theme.jpg\")
<\/figure>\n\n\n\nBut having said that, you don\u2019t really want your website to look like your competitors\u2019 websites; isn\u2019t it? And that is exactly why you\u2019ll need a good theme and design template that\u2019ll keep your site an edge ahead of others.<\/p>\n\n\n\n
I have specialized in the Divi theme from Elegant Themes and it is for me the #1 theme out there. I build all of my client\u2019s websites with the Divi theme.<\/p>\n\n\n\n
Divi has tons of customization options and you can literally build any type of website with it. And the best part is that it has a live page builder.<\/p>\n\n\n\n
To keep up to date with the latest Divi features I recommend checking out my own customized Divi changelog<\/a>. This one is a bit simpler to follow than the original one on Elegant Themes.<\/p>\n\n\n\n
Setting up the Divi theme<\/strong><\/h3>\n\n\n\n
Divi pricing<\/a> plans offer 2 packages. The difference between the 2 is lifetime access, updates, and support.<\/p>\n\n\n\n
Head over to Elegant Themes<\/a>.<\/p>\n\n\n\n
<\/p>\n\n\n\n
![\"Elegant](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Elegant-Themes-pricing.jpg\")
<\/figure>\n\n\n\nIf you choose yearly access then it doesn\u2019t mean that your website won\u2019t work anymore after that year. It will just keep working you just don\u2019t have access to new updates and features after that year.<\/p>\n\n\n\n
You can check this link for the latest Divi discount codes<\/a> if there are any available at the moment.<\/p>\n\n\n\n
Not only do you get access to the Divi theme but you get hundreds of free website templates + all of their plugins.<\/p>\n\n\n\n
With most of the premium themes out there, you can only use them once per website. With Elegant Themes, you can use the Divi theme as many times as you like on as many clients as you want.<\/p>\n\n\n\n
So this is a pretty sweet deal.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-theme-banner-pricing.jpg\")
<\/a><\/figure>\n\n\n\nInstalling Divi<\/strong><\/h3>\n\n\n\n
When you finished the signup process head over to their website en log in. In your member area, you can download the Divi Theme.<\/p>\n\n\n\n
You will see 2 options here, the Divi theme which includes the Divi builder plugin, and the stand-alone Divi builder plugin.<\/p>\n\n\n\n
You could use the Divi builder plugin<\/a> for another WordPress theme if you wanted to.<\/p>\n\n\n\n
But for this tutorial, we are going to use the first option the Divi theme.<\/p>\n\n\n\n
![\"Download](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Download-Divi-Theme.jpg\")
<\/figure>\n\n\n\nSave it somewhere on your computer.<\/p>\n\n\n\n
Now head back to the dashboard of your website and go to appearance > Themes.<\/p>\n\n\n\n
And click on add new<\/p>\n\n\n\n
![\"Add](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/add-new-theme.jpg\")
<\/figure>\n\n\n\nThen click on Upload Theme.<\/p>\n\n\n\n
![\"Upload](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/upload-theme.jpg\")
<\/figure>\n\n\n\nOn the next screen, you can upload your theme. Click on Choose file and find your downloaded Divi theme. Then press install now.<\/p>\n\n\n\n
After the upload process has finished you can then activate the Divi theme.<\/p>\n\n\n\n
![\"Activate](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/02\/activate-theme.jpg\")
<\/figure>\n\n\n\nThings to do before the next step<\/strong><\/h3>\n\n\n\n
- \n
- Installing and activating the Divi Theme<\/li>\n<\/ul>\n\n\n\n
Step 5: Install a free Divi layout pack<\/h2>\n\n\n\n
Now that the Divi Theme is installed, we have to set some basic settings first, before we can install a layout pack.<\/p>\n\n\n\n
In WordPress navigate to Pages > Add New.<\/p>\n\n\n\n
![\"Add](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-new-page.jpg\")
<\/figure>\n\n\n\nGive this new page the name Home and publish it.<\/p>\n\n\n\n
![\"Create](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Create-a-new-home-page.jpg\")
<\/figure>\n\n\n\nNow navigate to Appearance > Menus.<\/p>\n\n\n\n
Fill in a name for your menu and check the option, Primary Menu. After that click on the button Create Menu.<\/p>\n\n\n\n
![\"Create](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Create-a-menu-for-your-website.jpg\")
<\/figure>\n\n\n\nCheck Home and click on the button Add to Menu, after that click on Save Menu.<\/p>\n\n\n\n
![\"Add](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-pages-to-the-menu.jpg\")
<\/figure>\n\n\n\nWe have just created a Home page and a menu for our website.<\/p>\n\n\n\n
Now navigate to Settings > Reading.<\/p>\n\n\n\n
Enable A Static Page and choose Home from the dropdown. Then click on Save Changes.<\/p>\n\n\n\n
![\"Make](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Make-the-home-page-static.jpg\")
<\/figure>\n\n\n\nSo this is what we just did. We created a new home page and a menu Then we added the home page to this menu.<\/p>\n\n\n\n
And we made the home page the first page of our website, so when you visit your domain name for example www.mycompany.com then you land on the home page.<\/p>\n\n\n\n
Install a free layout pack<\/h3>\n\n\n\n
Divi comes with hundreds of free layout packs that you can use to build your website. To access them go to your home page (on the front end) and enable the visual builder.<\/p>\n\n\n\n
![\"Enable](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-visual-builderr.jpg\")
<\/figure>\n\n\n\nA new screen will pop up and choose the option Choose a premade layout.<\/p>\n\n\n\n
![\"Choose](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Choose-a-premade-layout-option.jpg\")
<\/figure>\n\n\n\nIn the next window, you can choose a premade layout pack. On the left side, you can use the filter options.<\/p>\n\n\n\n
![\"Choose](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Choose-a-premade-layout-pack-in-Divi-theme.jpg\")
<\/figure>\n\n\n\nAfter you click on a layout, you get the page options for that layout pack. This is the home page so I will choose the home page layout and then click on the button Use This Layout.<\/p>\n\n\n\n
![\"Choose](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Choose-a-page-layout-to-import.jpg\")
<\/figure>\n\n\n\nAnd there you go you have successfully imported a complete page layout.<\/p>\n\n\n\n
You can do the same process for other page layouts.<\/p>\n\n\n\n
Create a new page in WordPress (Pages > Add new). Then add that page to your menu in Appearance > Menus<\/p>\n\n\n\n
After that go to your page in the front end and enable the visual builder and import a page layout.<\/p>\n\n\n\n
Things to do before the next step<\/strong><\/h3>\n\n\n\n
- \n
- Set some basic settings in WordPress<\/li>\n\n\n\n
- Installing and uploading a free layout pack<\/li>\n<\/ul>\n\n\n\n
Step 6: Customizing the appearance of your website<\/strong><\/h2>\n\n\n\n
Now that you\u2019ve completed installing a layout pack for your site, it\u2019s time for you to customize its colors and content. The process is easy and is usually completed at the front end of your site. To start out, simply click on enable visual builder and you\u2019ll soon find options for customizing your site.<\/p>\n\n\n\n
![\"Divi](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-builder-interface.jpg\")
<\/figure>\n\n\n\nThis is your Divi builder interface and it uses sections, rows, and modules. You can customize any element of your website.<\/p>\n\n\n\n
Divi comes with a great collection of video tutorials. To understand the basics of Divi I recommend watching at least the basic video tutorials. You can find them here.<\/p>\n\n\n\n
Basics Divi builder<\/strong>
https:\/\/www.elegantthemes.com\/documentation\/divi\/visual-builder\/<\/a><\/p>\n\n\n\nFull documentation<\/strong>
https:\/\/www.elegantthemes.com\/documentation\/divi\/<\/a><\/p>\n\n\n\nI have built a library of step-by-step Divi Tutorials and Guides<\/a> from beginner to advanced levels. This is a great way to learn Divi and become a better web designer.<\/p>\n\n\n\n
What’s next?<\/h2>\n\n\n\n
There is an incredible community of third-party developers for the Divi Theme and I encourage you to explore them.<\/p>\n\n\n\n
The Elegant Themes marketplace is a great place to discover new Divi plugins<\/a> which will add additional features to your Divi websites. From additional hover options to custom drop shadows.<\/p>\n\n\n\n
Or if you want to create a WooCommerce website then you can find amazing custom Woocommerce modules with interactive elements, custom cart, and checkout pages with advanced custom fields.<\/p>\n\n\n\n
Not only can you find Divi plugins on the marketplace but also Divi child themes<\/a>. Child themes are custom templates with more advanced options to create websites. They come often with custom templates for the theme builder such as a header and footer layout, a custom post template, and a search results page.<\/p>\n\n\n\n
To gain a deeper understanding of web design in general, I recommend reading my article on outlining website<\/a>. It provides insights on how to initiate the website-building process.<\/p>\n\n\n\n
Create your own Divi child theme<\/h3>\n\n\n\n
When you become better at building websites then you can start creating a Divi child theme<\/a>.<\/p>\n\n\n\n
I recommend following my tutorial for creating your own Divi child theme. This tutorial will explain what it is and how you can create one yourself.<\/p>\n\n\n\n
Other Elegant Themes Products<\/h3>\n\n\n\n
With your Elegant Themes membership, you have access to other products as well.<\/p>\n\n\n\n
- Installing and activating the Divi Theme<\/li>\n<\/ul>\n\n\n\n
- Installing WordPress on your domain name<\/li>\n<\/ul>\n\n\n\n
- Set up an SSL certificate and secure your website.<\/li>\n<\/ul>\n\n\n\n
- Choose a domain name and set up a hosting package. I recommend choosing SiteGround<\/a> as your hosting.<\/li>\n<\/ul>\n\n\n\n
- Step 1: Get a Domain Name and Web Hosting<\/a><\/li>\n\n\n\n