WordPress – Appearance Setup

Purpose

The Appearance section in WordPress contains the global appearance settings for how your website will look. It begins by installing and activating a theme, then continues with design settings that should follow your corporate color scheme and establish a homogeneous look and feel.

Solution

Prerequisites

  • A valid domain
  • Web-hosting
  • WordPress installation
  • WordPress Settings setup

Appearance Setup

Themes

Log in to the admin page of your WordPress website which should take you to the Dashboard
Near the bottom of the left-hand menu pane hover over Appearance and select Themes
To the right of the Add Themes title click on the Upload Theme button
Click on the Choose File button
Navigate to the zip file containing your theme (i.e. Divi.zip) and click the Upload button
Once the theme is installed successfully click on the Go to Themes page link
You theme will now appear in the list of themes
Hover over your theme and click on the Activate button
Click on each of the remaining themes and click the Delete button

Child Theme

Whenever you need to make modifications to your Divi theme, it is best practice to create a child theme that inherits the design and functionality of that parent theme. One important reason to create a child theme is to preserve the modifications you make when updating the parent theme. Whenever you update Divi, all of the theme files are updated so if you have made any changes to these files, those changes will be erased. So, instead of modifying Divi’s theme files directly, you can create additional theme files within a child theme so that when Divi is updated, those child theme files remain unchanged. Therefore, if you plan on making advanced customizations to your theme like modifying page templates and/or adding large amounts of CSS/JavaScript, and/or adding new functions, it is best to make these changes to your child theme without ever having to touch the parent theme files.

Creating The Child Theme

Using your web browser  go to divi.space’s Child Theme Builder
In the Theme Name field type -child-theme
In the Description field type child theme for Divi
Int the Theme Website field type <https://yourdomain.com>
In the Author field type in your proper name
Under the Theme Screenshot section upload a 1200 x 900 PNG image for your custom child theme
In the Your Email Address field type <admin@yourdomain.com>
Click on the GENERATE button
Divi.space will email the link to the generated child theme
From your Downloads folder transfer the Divi Child Theme zip file to a proper storage location

Installing Divi Child Theme

Log in to the admin page of your WordPress website which should take you to the Dashboard
Near the bottom of the left-hand menu pane hover over Appearance and select Themes
To the right of the Add Themes title click on the Upload Theme button
Click on the Choose File button
Navigate to the zip file containing your Divi Child Theme and click the Upload button
Once the theme is installed successfully click on the Go to Themes page link
You theme will now appear in the list of themes
Hover over your theme and click on the Activate button

Installing the Divi Booster plugin

Near the bottom of the left-hand menu pane hover over Plugins and select Add New
Near the top-left of the window click on the Upload Plugin button
In the expanded area click on the Choo File button
Navigate to the divi-booster-zip file and click on the Upload button
Click on the Install Now button
Once the plugin is installed click on the Activate Plugin button
Near the bottom of the left-hand menu pane hover over Divi and select Divi Booster
Click to expand the Header section
Click to expand the Main Header section
Check the check-box next to Hide header bottom boarder
At the top-right of the window click on the Save Changes button

Installing Fonts in Divi

To install fonts without a plugin you can click on this Elegant Themes page
Divi also includes an icon font library. For a list of icons and codes click here

Elegant Icon Font

In your web browser open a new tab and go to the Elegant Icon Font page
Scroll down the page and click on DOWNLOAD THE ICONS button
In your computer, inside your Downloads folder extract the elegant_font.zip file
Hover over Pages and select All Pages
Hover over Sample Page and click Edit
Click on the Use The Divi Builder button
Hover over the main body text and click on the Settings Sprocket
Click on the Design tab
In the Text section click on the down-arrow to expand it
Under Text Font click on the pull-down menu and click on the UPLOAD button
In the Font Name field type Elegant Icon Font
Click on the CHOOS FONT FILES button
Navigate to your Home > Downloads > elegant_font > HTML CSS > fonts and choose eleganticons.ttf
Click on the Upload button
In the next window click on the Upload button
Under Text Font click on the pull-down menu and select Default and click the green-check-box to Save

Customize

Near the bottom of the Left-hand menu pane under Appearance click on Customize
You are now in the Customizer where you can setup all of the global setting for your theme

General Settings
Site Identity

In the Customizer in the left-hand menu click on General Settings then click on Site Identity
Under the SITE ICON section upload a 512 x 512 PNG image of your company logo
Click on the Publish button to save changes
Near the top of the left-hand menu click on the back arrow next to Site Identity

Layout Settings

In the left-hand menu pane click on Layout Settings
Set WEBSITE CONTENT WIDTH to 1224 (this covers a tabloid size page of 17 inches)
Set WEBSITE GUTTER WIDTH to 1
Set SECTION HEIGHT to 0
Set ROW HEIGHT to 0
Set THEME ACCENT COLOR to a bright color within your corporate color pallet
Click on the Publish button to save changes
Near the top of the left-hand menu click on the back arrow next to Layout Settings

Typography

In the left-hand pane click on Typography
On your browser open a separate tab and visit the Google Fonts site to aid you in choosing a font
Click on the pull-down menu under HEADER FONT and select a bold font that reflects your branding
Click on the pull-down menu under BODY FONT and select a easy to read font that reflects your branding
Adjust the BODY TEXT SIZE to make the font more readable
Adjust the HEADER TEXT SIZE to make the header stand out appropriately
Under BODY LINK COLOR click on the Select Color bar and choose a color (some shade of blue is recommended)
Under BODY TEXT COLOR click on the Select Color bar and choose a color (a dark shade of gray is recommended)
Under HEADER TEXT COLOR click on the Select Color bar and choose a color (a lighter shade of black is recommended)
Click on the Publish button to save changes
Near the top of the left-hand menu click on the back arrow next to Typography

Background

In the left-hand pane click on Background
Under BACKGROUND COLOR click on the Select Color bar and choose a bright color within your corporate color pallet 
Click on the Publish button to save changes
Near the top of the left-hand menu click on the back arrow next to Background
Near the top of the left-hand menu click on the back arrow next to General Settings