Select Page

pb3 child theme for divi

Welcome to Cherie Irwin Design

Thank you for purchasing PB3 Child Theme for Divi.

You will find everything you need to install and edit your child theme on this page.

If you have any technical problems with the installation itself, please use the contact form below for assistance.

1. installing & Using Divi

PB3 is a child theme that uses Divi as the parent theme. The documentation from Elegant Themes should help you with installation, finding your way around and making edits. If you purchased installation with your PB3 Child Theme, we will install Divi for you. If you did not purchase Installation, you will need to purchase and install the latest version of Divi before installing your PB3 Child Theme. 

In both cases, you will need to know how to use Divi to edit your PB3 Child Theme. If you are new to Divi, we recommend starting here

Purchasing Divi

If you did not purchase our theme installation service, you will need to become an Elegant Themes member to gain access to Divi theme. Memberships are available annually for $89 or $249 for a Lifetime membership. Memberships include theme upgrades during your membership, so when Divi releases an update or upgrade, you’ll have access to those updates during the time that your membership remains active. 

If you opted for theme installation with your purchase, Lifetime Divi Theme Updates are included with your theme. You will be responsible for keeping your theme updated, as that is not included in our installation service. If you would like additional support for Divi, including their members’ forum and ticket support, you will need to purchase your own membership.

Installing Divi

Follow this tutorial to learn how to install Divi theme.

Divi BAsics

Check out this page for details on the basics of changing logos, editing menus, fonts and more. 

The divi builder

The Divi Builder is rather intuitive and pretty easy to learn as you go. However, we recommend starting here to learn about both the back-end and visual builder features of Divi.

Divi Theme settings with with WordPress 5.0+

If you are working with WordPress 5.0+, be sure that your Divi is running the most current version of the theme, 3.19 or above.

  1. In your WordPress Dashboard, go to Divi > Theme Options > Builder > Advanced
  2. Enable “The Latest Divi Builder Experience”
  3. Enable “Classic Editor”

2. installing pb3 child theme

We offer a one-step install that creates an exact copy of our demo website. Pages, posts, images, menus are included, but you will have the ability to choose which features of the demo site that you wish to install. For instance, you may opt out of installing pages, but the layouts for those pages may still be imported into your Divi Library area so that they can be applied to your existing pages.

Instructions if you purchased Installation with the Child Theme

Details needed for installation

If you opted for installation of PB3 Child Theme, we will need admin access to an active WordPress installation on your host. Your WordPress site should be up to date with the latest version of WordPress. The theme and demo data will replace your current theme and page content, so it should only be installed on a site that you are not currently using or a staging site that you can later apply after your site edits have been made. 

We will need the following information to begin: 

  • WordPress Login URL
  • WordPress Admin Username
  • WordPress Admin Password

Rather than providing your own admin username & password, it is highly suggested that you set up a new admin account for us that can be deleted after we have finished the installation process.

Please email these details to cherie@cherieirwin.com

DIY Child Theme Installation Instructions

1. Download & Unzip
  1. Follow the instructions above to Install Divi Theme. Be sure Divi is Activated in WordPress before beginning the process below.
  2. Download the PB3 Child Theme file to your computer. 
  3. The file is named UNZIPME-PB3KIT.zip. Unless you saved your file into a specific folder, your zip file is probably in your downloads area. If you are unable to locate it, use your computer’s search function.
  4. Unzip the file – To unzip on a Mac it’s Right click > Open or double click. On a PC Right click > Extract. Some computers may unzip automatically.
  5. Inside the unzipped folder, you’ll find the installable zip file named PB3-child-theme-for-divi.zip, along with a folder of PSD files, JSON Divi Layouts and premium plugins that were included with your Child Theme. (The JSON files and plugins should install with the 1-click import. However, an extra installable set of files will be provided, in case the one-click install fails).

If your hosting company restricts upload sizes, we will also provide you with an optional theme folder and JSON files that you can install manually.

2. Install your child theme zip file

Go to your WordPress Dashboard where you have already installed Divi, and click on Appearance > Themes > Add New

Click Upload Theme

Click on Choose File, navigate to the folder where your PB3 Child Theme Zip folder was saved and select it.

Click Install, and you should see the following message:

Click Activate, and your screen should look like this:

 

 

3. Import Settings & Demo Data - 1 Click Method

After you have imported and activated your child theme, you will see it appear in the left menu just below the top Dashboard link.

The following screen will appear. We suggest checking all of the options, however you must select “Include Options” to include the layouts and theme settings. The other import selections are not required.

This theme comes bundled with recommended plugins, two paid plugins and one from the WordPress repository. You can install and activate those now (or they can be installed later).

4. Install Plugins

If you did not install the bundled plugins with the one-click method, you can find them in the Plugins Folder inside of the UNZIPME-PB3KIT Folder. 

To install them, go to Dashboard > Plugins > Add New. Activate the Plugins. For Premium Plugins, the activation details are included in the ReadMe.PDF file.  

3. Customizing your theme

When you’re just starting out with Divi and WordPress, jumping into the customizations can be overwhelming. So, we’ve compiled a list of things you’ll want to do to get started. 

wordpress settings

1. Go to Dashboard > Settings > General Settings

Here, you’ll set up your Site Title and Tagline. These appear in the Browser Tab for your website, so you’ll want to fill in the text that fits your company, website and SEO goals. You can also set your email address, time zone and date settings here. Click the blue Save Changes button when you have completed this.

2. Go to Dashboard > Settings > Reading

Select A static page and choose the page for your Hompage from the drop down menu. If you have a blog posts page, you can select that too. However we recommend leaving it blank and using the blog page that we have created as your blog archive page.  Click the blue Save Changes button when you have completed this.

3. Go to Dashboard > Settings > Permalinks

Select the Post Name option, as this works well for most websites. Click the blue Save Changes button when you have completed this.

set to Privacy mode or install Under Construction Plugin

Often times, visitors will land on your new site and the internal links lead back to the demo site. To prevent this from happening before your site is completely edited, you need to set your site to private.

If your host does not offer privacy mode for your website, please install an Under Construction plugin and use it until your site is ready to be viewed by the public.

You should be able to find a free plugin in the WordPress repository. To search for a plugin, go to: 

Dashboarad > Plugins > Add New

Enter Under Construction in the search form. Choose a plugin from the list, and click Install Now. Activate the plugin, and go to the plugin settings to configure it. 

divi theme options

1. Go to Dashboard > Divi > Theme Options

2. Under the General Tab, go to the Logo section and upload your logo.

3. Color Pickers Default Palette – You can add the main colors for your website here. These colors will be available throughout the editing screens for easy reference, so it is best to add them before you get to work on making edits.

4. Social Media links can also be added here for Facebook, Twitter, Google+ and RSS feeds. Instagram and other links can be added via another plugin. We’ll cover that later.

Divi Theme settings with with WordPress 5.0+

If you are working with WordPress 5.0+, be sure that your Divi is running the most current version of the theme, 3.19 or above.

  1. In your WordPress Dashboard, go to Divi > Theme Options > Builder > Advanced
  2. Enable “The Latest Divi Builder Experience”
  3. Enable “Classic Editor”
Divi Toolbox Import

Some important features of the PB3 Child Theme were created with the Divi Toolbox Plugin. These features will not automatically import with the one-click install, so they must be manually configured in both the Divi Toolbox Plugin Section and in the Theme Customizer. To do this, go to:

Dashboard > Divi > Divi Toolbox 

On the Divi Dashboard Page, scroll to the bottom and click the “Settings” Gear icon in the Divi Toolbox Page Footer.

Go to Import. Then choose the JSON file inside of the Divi Toolbox Import Folder and click Import.

Click Save Settings.

If after importing, your home page menu bar does not look the demo site, you may need to reinstall the JSON file. Please fill out the form below if you have trouble installing the import file. 

divi Toolbox settings in the Theme customizer - Only use if import file fails

Some important features of the PB3 Child Theme were created with the Divi Toolbox Plugin. These features will not automatically import with the one-click install, so they must be manually configured in both the Divi Toolbox Plugin Section and in the Theme Customizer. To finish the Divi Toolbox Customizations, go to:

Dashboard > Divi > Theme Customizer

The sidebar on the left opens the customization options for the features that we enabled for Divi Toolbox. To match the settings in the sample theme, go through each section and select the options as provided below. 

Header Section

Main Header
Display Menu Header ShadowUncheck
Display Fixed Header ShadowUncheck

Top Bar (Secondary Nav)
Hide Top Bar on Scroll – Check
Display Top Bar ShadowUncheck

Primary Navigation
Links Text Transform – Enable AA
Links Hover Color – #ffdfe8
Links Hover Color on Fixed Nav – #ffdfe8

CTA Button Menu
Button Font – Default Theme Font
Button Font Weight – Regular
Button Font Size – 15
Button Letter Spacing – 0
Button Text Transform – AA
Button Text Color – #ffffff
Button Background Color – #77d1cb
Button Border Color#77d1cb
Button Border Width 2
Button Border Radius – 0
Button Padding – 8
Button Text Hover Color – #ffffff
Button Background Hover Color – #ffdfe8
Button Border Hover Color#ffdfe8
Button Hover Effect – Grow

Footer Section

Footer Bottom Bar
Hide Bottom Bar – Uncheck
Bottom Footer Font – Default Theme Font
Bottom Footer Letter Spacing – 0
– Bottom Footer Text Transform –
Center Align Bottom Bar – Uncheck

Back to Top Button
Button Style – Default Icon
Select Icon – ^
Button Icon Size – 22
Distance from the Right Side – 5
Distance from the Bottom100
Button Padding – 5
Button Background Color – rgba(255,255,255,0.43)
Button Icon/Text Color#7784d1
Add Box Shadow – Check
Button Box Shadow Color – rgba(0,0,0,0.2)
Button Box Shadow Offset-Y  – 0
Button Box Shadow Offset-X – 0
Button Box Shadow Blur – 8
Change Button Border – check
Button Border Radius – 20
Button Border Width – 0
Button Border Color – rgba(255,255,255,0.43)
Button Background Hover Color – #77d1cb
Button Icon/Text Hover Color – #ffffff
Button Border Color on Hoverrgba(255,255,255,0.43)
Button Hover Effect – Default/None

Mobile Section

Mobile Menu Bar
Hide Top Bar (Phone & Email)Uncheck
Enable Fixed Mobile Bar We left this unchecked, but if you would like a fixed mobile menu on your site, feel free to check this option.
Menu Bar Height (PX)55
Logo Height (%75
Add Box ShadowUncheck
Menu Bar Background Colorrgba(255,255,255,0)

Hamburger Icon
Hamburger Icon Color Closed#ffffff
Hamburger Icon Color Closed Hover#7784d1
Hamburger Icon Color Open#ffdfe8
Hamburger Icon Color Opened Hover#7784d1
Hamburger Icon SizeLarge

Mobile Menu
Make Mobile Menu FullwidthCheck
Mobile Menu AnimationSlide in from Right
Dim Background when OpenUncheck
Add Box ShadowUncheck
Mobile Menu Background Color#ffffff

Mobile Menu Links
Links FontDefault Theme Font
Links Font WeightRegular
Links Font Size15
Links Letter Spacing0
Links Text TransformAA
Links Padding15
Links Color#7784d1
Links Bottom Border Colorrgba(0,0,0,0.02)
Parent Links Background Colorrgba(0,0,0,0.01)
Links Background Color on Hover#7784d1
Links Color on Hover#ffffff

CTA Item FontDefault Theme Font- CTA Item Font Weight – Bold
CTA Item Font Size15
CTA Item Letter Spacing0
CTA Item Text TransformAA
CTA Item Padding15
CTA Item Color#ffffff
CTA Item Background Color#77d1cb
CTA Item Hover Color#ffffff
CTA Item Hover Background Color#7784d1

Nested Submenus
Parent Item Font WeightSemi Bold
Closed Icon Color#7784d1
Closed Icon Background Colorrgba(189,200,213,0.2)
Submenu Background Colorrgba(0,0,0,0.02)
Opened Icon Color#77d1cb
Opened Icon Background Colorrgba(0,0,0,0.02)

Modules Section

Buttons
Buttons Font WeightMedium
Buttons Hover StyleDefault-None

divi Theme Customizer

Go to DashboardDivi > Theme Customizer

– The left sidebar menu provides access to settings many areas of your site. Your website preview is shown on the right. As you make changes to the Theme Customizer Settings on the Left, you will see a Live Preview of those changes to your site on the Right.

– Work through each tab, to change your site colors, fonts and other features to match your brand. 

– To change the Footer Credits from our Brand to your own, you will want to go to Footer > Bottom Bar > EDIT FOOTER CREDITS 

– Use the controls in the bottom Left Corner to preview how your site will appear on desktop, tablet and mobile devices. 

– Click on the blue Publish button at the top of the Left Sidebar Menu after making changes on each tab/section to make sure that you don’t lose any of your work.

Editing Links

There are a number of areas within our Child Themes that contain links that use URLs. When you install our demo content, those URLs link back to our demo site or be a dead URL. Be sure to edit the URLs to link to your own content.

To make sure that you haven’t missed any URL updates, click on all of the links throughout your site to test them and see where they take you. If they lead back to our demo site or reload the current page that you’re on, you will know that you missed an edit.

Another way to confirm that you’ve edited all of the links is to search through the source code to make sure you haven’t missed anything. This is easiest to do before you have added a caching plugin that will minify our combine your code and scripts. On Chrome, open up any page on your site. Right click in the page and select View Page Source. With the page source code open, use the Keyboard Shortcut to bring up the search function. This is Control + F on Windows and Command + F on Mac. In the search bar, enter pb3.cherieirwin.com. If there are any matches, you’ll know that you missed a link. 

In our video walk-through, we’ll discuss some of the link modules that you’ll need to update. But, here’s a quick rundown of the three kinds of links within our templates,

  • Navigation Links (Custom Links in the Menu Area of the Site) – These links can be added by going to Dashboard > Appearance > Menus. Then click on Custom Links, fill in the Link Text and URL and Add to Menu. This is where you would add a link to your off-site gallery or booking pages.
  • Buttons Modules, Blurb Modules & Call to Action Modules – Click on these Modules to open them and look for the Link section in the Content Tab of the Module. Be sure to Save Changes to your Module and to your Page before exiting out of the Visual Builder or Backend Page Editor. (Note in PB3, we only use Button Modules with URL links)
  • Anchor (scrolling) Links – Anchor links are used as an alternative to a URL link, as they are designed to take you an area within a page. They usually look like https://abcwebsite.com/#ending at the end of the URL. When you update the URLs for these anchors, you should leave that #ending unaltered because it works with a CSS ID anchor we have included. (Note, there are no anchor links in PB3)
  • You can make your own anchor links by inserting an anchor in the CSS ID setting for a section, row or module and then using that CSS ID with # in front of it to link to that area within the page.

Mass update links using a plugin – if you are designing your new website on a staging platform using a subdomain or a domain that is different from your final site, you may want to do a mass link update to change all of the internal links in your site. You may also want to use this if you are adding SSL to your site later (sometimes the image URLs in Divi do not automatically update to https:// from http://.  In this case, I have used the Velvet Blue Update URLs plugin with success. If you decide to try this method, make sure that you back up and download a copy of your site before making any changes with this plugin. A minor mistake can mess up your site, so you’ll want to be cautious and take your time with this one.

Adding Images

It is very important to optimize your images for web prior to uploading.

Image Sizing – You will want to make sure that your images are sized correctly for the area where they will be displayed.  We recommend that you use the guide below as a starting place for image sizes.

  • Full width images: 1920 x 1080 px
  • Logo Images (on Home Page) 851 px wide
  • Photo Booth Images are 400 x 800 px (the width can vary, but we recommend 800 px tall)
  • Blog post images and images for central content: 1080px (on the longest side)

Image Naming – For SEO purposes, it can be helpful to name your images using keywords and details that describe the image. You should determine these details prior to saving your images or change the names of your images before uploading to WordPress. If you wish to use the images that are already in your template, you’ll want to rename them. You can use a plugin called Media File Renamer to assist with renaming your files instead of downloading, renaming them and uploading them again.

Optimizing File Size for Web – Photoshop has some built-in features to save images for Web that helps to reduce file size. However, it doesn’t do the best job of compressing them without any visible degradation. We recommend running your images through the image optimizer at TinyPNG.com, as it does an excellent job of compression with very little (or no) loss in visual quality.

Go to Media > Media Library.  You will see the images that came with the download – they are there as reference content and are used as a placeholder.  You may continue to use them or update the images with your own.  You can upload your own images files by clicking Add New and using drag and drop or Select Files.

To change images within a module, click the gear icon to open up the module settings. Navigate to the image section of the module and click on the gear icon to open up the Media Library. There, you can either choose an image that is already in the Media Library or upload a new one.

Image Title & Alt Text – In several Divi Modules, there is an option to add Image Titles and Image Alt Text to your images. These are important for SEO (and for site visitors with certain disabilities) Click the gear icon to open up module settings, and go to the Advanced Tab. Fill in Alt Text and Image Titles in under the Attributes Section. Background images do not use Titles or Alt Text.

Theme Editing Walk-through Video

Video explanation of features and divi modules

Need Help?
Give me a shout