HOW TO SERIES

How to design your website quick & easy with WordPress

STEP 2 – Configuration . Part 1

How to Setup and Configure Divi 2024

Now that Divi Theme is installed onto the website, you can start configuring on a theme level.  Setting the website up properly at the very beginning is very important, trust me, it’ll make your life much easier when you start the design process.

In order to setup the site properly before you start, we recommend that you at least take the following steps.  This step will be divided into 3 parts, they all govern parts of the website’s styling, hence, consistency of how the website looks.

Theme Options

    • Updates – Install Divi API Key (This is required for future updates)
    • Logo Upload – For the default your header menu
    • Color Palette – Setup a Color Palette that you’ll use throughout the website

Theme Customizer

    • Site Identity (Favicon – little icon appears on browser tab, Site Title, etc.)
    • Menu – Create a new navigation menu
    • Footer

Theme Builder

    • Global Body: Setup your default styling for your webpages
    • Global Header (Optional): Setup your custom header menu
    • Global Footer (Optional): Setup your custom footer

divi theme banner long 0001 | by Bluehands, One of the Best Melbourne Web Design, SEO, Digital Marketing, Brand Strategy Company Agency

Don't have Divi yet? Get it here today!!!

Theme Options

Installing Divi API Key

Installing your API Key enables you to update your Divi Theme in the future when there are new functionalities, enhancements, fixes, etc. being released.  It is highly recommended to always keep your theme up-to-date for compatibility and security reasons.

Login to your Elegant Themes account (the company that created the Divi Theme) 

From Your Elegant Themes account

What’s required to setup DIVI properly:  User Name (Step 3) and API Key (Step 6)

  1. In the Members Area, go to the My Account tab
  2. On the left of your My Account screen, you’ll find API Keys button, click on that
  3. On the API Key page, you’ll see Your Username field, copy that, we’ll need this Username to setup your site properly
  4. If there’s no API Keys generated yet (e.g. the long string of numbers+characters shown in step 6), then you’ll need to click on Generate New API Key to generate a new one.
  5. Optional: You can always give your API Key a label so that you know which website you’ve used it on.  Any name will be fine.
  6. Finally, this is when your API has been created successfully, click on the API Key field like step 6 in the below image to copy it.

Now go to your WordPress account

  1. Go to Theme Options
  2. Click on Updates at the Theme Options screen
  3. Copy the Username and API Key from your Elegant Themes account
  4. Paste them into their respective fields
  5. Click Save Changes

 Logo Setup

  1. Go to Theme Options
  2. On the General screen
  3. Navigate to Logo
  4. Click Upload, and the Media Library panel will appear
  5. Select the logo image you want to appear on your top menu, and the click Set As Logo at the bottom right hand corner
  6. After you’re done, click Save Changes

 Setup Color Palette

  1. Go to Theme Options
  2. On the General screen
  3. Navigate to Color Pickers Default Palette
  4. Click on the color circles and pick your color.  If you have a specific color, you can also enter the HEX color code (e.g. #b3b3b3, #ffffff, etc.).  Divi allows you to pick 8 theme color for common use, which is plenty.
  5. After you’ve selected all the colors, click Save Changes

What’s Next? Part 2 . Theme Customizer >>>

Other Helpful Articles…

Web Hosting Companies We Recommend for 2024

 

Hostinger Horizontal White | by Bluehands, One of the Best Melbourne Web Design, SEO, Digital Marketing, Brand Strategy Company Agency

For Startups and Small Business Websites

Highly Affordable + Great Server Performance

Siteground logo white | by Bluehands, One of the Best Melbourne Web Design, SEO, Digital Marketing, Brand Strategy Company Agency

For Growing Businesses Looking for a company to support them

Great Server Performance + Great Local Support

WPX Logo Orange and Yellow 01 | by Bluehands, One of the Best Melbourne Web Design, SEO, Digital Marketing, Brand Strategy Company Agency

For Businesses that needs High Performance to accelerate in their online presence

Great Server Performance + Support for Great Cause