How to Add Divi to Your WordPress Website
You’ve decided to build a WordPress website for your business. Congrats! Now comes the part where you need to find a theme that will help you express yourself creatively and professionally.
Fortunately, you’ve landed on the right page. In this article, we’ll take you through the steps to add Divi to your WordPress website.
Step 1: Selecting The Right Theme
The first step is to select the right theme for your WordPress website. Do you want to create a blog for fun and leisure? Or do you want to use WordPress to build a business website?
If you’re building a blog, you’ll want to look for a simple and lightweight theme that you can use to build out your blog quickly and easily.
On the other hand, if you’re building a business or eCommerce website, you’ll want to select a more sophisticated theme that has all the bells and whistles your business or eCommerce website needs.
Another factor to consider is compatibility with the latest versions of WordPress. You don’t want to be building your site on a theme that will become obsolete in a few months. You can always upgrade later, but it’s preferable to find a theme that works with the current and upcoming versions of WordPress.
Step 2: Importing The Theme Files
After you’ve selected the right theme for your WordPress website, it’s time to start importing the theme files. WordPress offers a variety of tutorials on its website that will walk you through the process of importing a theme. Here’s a quick tutorial that will help you get started:
1. Navigate to your WordPress dashboard. You’ll find a link to “Add New”, near the top of the page.
2. Click on “Add New” to take you to the WordPress theme selection page.
3. On this page, you’ll see a variety of themes that WordPress offers. Locate the theme that you’ve previously downloaded from Divi and click on the “Import” button.
4. In the next step, you’ll see a modal popup, letting you know that your theme has been successfully imported.
Step 3: Configuring The Imported Theme
Now that your theme is imported, it’s time to configure it. The great thing about Divi is that it comes with a variety of pre-built templates that you can use to get started. Let’s take a look at how you can use these templates to build out your business or eCommerce website.
1. Once you’ve imported your theme, you’ll see a few options at the top of your WordPress dashboard. One of these is the theme settings page. From here, you can configure various aspects of your theme, including the look and feel of your site.
2. To begin, head to the “Layout” section on the left-hand side of the page.
3. Here, you can configure the look of your site by selecting either the boxed or full-width layout for your WordPress website. If you’ve previously used CSS to design your sites, you’ll feel right at home changing the overall look and feel of your website.
4. To change the color scheme of your site, click on the “Colors” tab and select a new palette from the color picker. Once you’ve made your selection, click on the “Update” button to see the change take place on your site.
5. To change the fonts used on your website, visit the “Fonts” section of the theme settings page. Here, you can choose from a variety of fonts or upload your own.
6. You can use the “Advanced” tab on this page to change various settings, including the background color and texture of your site. Once you’ve made your choice, click on the “Update” button to see the changes take effect.
Step 4: Customizing The Appearance Of Your Site
Now that you have your basic structure in place, you can begin making changes to the look and feel of your website. As stated above, the great thing about Divi is its built-in templates. So, if you’ve ever used it, you’ll have no trouble changing the appearance of your site.
1. To begin, visit the “Appearance” section of the theme settings page. Here, you can change the background colors, images, and more to match your taste.
2. If you’re using a background image, you can choose to have it repeat across the top, across the bottom, or both, using the “Background Image” option on this page.
3. To change the text color, click on the “Colors” tab and make your choice from the color palette.
4. Once you’ve made your selection, click on the “Update” button to see the color swap take effect on your site.
Step 5: Adding More TLC (This Is Content)
Now that your website is looking the way you want it to, it’s time to add more content to it! As the name implies, the purpose of a homepage is to serve as an introduction to the content available on your site. So, what does that mean for you?
1. To begin, visit the “Settings” section of the theme settings page.
2. Here, you can choose to have WordPress automatically generate a sitemap for your business website.
3. If you’d like, you can use the “Sitemap” section of the theme settings page to input the URL of a web page you want to be included in the sitemap.
4. Once you’ve made your selection, click on the “Update” button to see the change take effect.
5. It’s important to note here that if you’ve chosen to have WordPress generate the sitemap for you, it will only do so when you’re posting new content. So, if you’ve been inactive for a while and want to bring your website fully up to date, you may need to either manually generate the sitemap or use a tool to do so.
Step 6: Testing The Configuration
Now that you’ve imported your theme and made some customizations to its appearance, it’s time to test your work. To do this, you’ll need to add some content to your site. For the purposes of this example, let’s add some text and a couple of images.
1. To add content, click on the “Add New” tab at the top of the page.
2. In the “Text” box, enter some content. If you’ve ever used WordPress, you’ll know that it is very easy to add content using the “Visual Editor”.
3. For the sake of this example, let’s add some text and an image before we start working on our website. So, in the “Text” box, we enter: Hello, world! I am an image!
4. Next, we want to add an image. Click on the “Add New” button and select the “Image” option from the drop-down menu.
5. Upload an image and then click on the “Open” button to see your image options.
6. Because we’re on the homepage, we can select the “Full width” layout for our site.
7. Now that we have our content in place, it’s time to configure our theme. On the left-hand side of the page, click on the “Layout” drop-down menu and select “Full width” from the options presented.
8. To change the header image for our website, click on the “Header” button and select an image from the drop-down menu.
9. As you can see, the header image in this example is showing in both the left and right sidebar of our WordPress dashboard. To add a second image, return to the “Header” page and click on the “Add New” button.
10. In the next step, we’ll adjust the color scheme for our site by selecting a new palette from the color picker on the left-hand side of the page.
11. Once you’ve made your selection, click on the “Update” button to see the color swap take effect on your site.