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.
- In your WordPress Dashboard, go to Divi > Theme Options > Builder > Advanced
- Enable “The Latest Divi Builder Experience”
- 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
- Follow the instructions above to Install Divi Theme. Be sure Divi is Activated in WordPress before beginning the process below.
- Download the PB3 Child Theme file to your computer.
- 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. - 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.
- 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
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,
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
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:
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.
- In your WordPress Dashboard, go to Divi > Theme Options > Builder > Advanced
- Enable “The Latest Divi Builder Experience”
- 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
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 Shadow – Uncheck
– Display Fixed Header Shadow – Uncheck
Top Bar (Secondary Nav)
– Hide Top Bar on Scroll – Check
– Display Top Bar Shadow – Uncheck
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 Bottom – 100
– Button Padding – 5
– Button Background Color –
– Button Icon/Text Color – #7784d1
– Add Box Shadow – Check
– Button Box Shadow Color –
– 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 –
–Button Background Hover Color – #77d1cb
–Button Icon/Text Hover Color – #ffffff
–Button Border Color on Hover –
–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 Shadow – Uncheck
– Menu Bar Background Color –
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 Size – Large
Mobile Menu
– Make Mobile Menu Fullwidth – Check
– Mobile Menu Animation – Slide in from Right
– Dim Background when Open – Uncheck
– Add Box Shadow – Uncheck
– Mobile Menu Background Color – #ffffff
Mobile Menu Links
– Links Font – Default Theme Font
– Links Font Weight – Regular
– Links Font Size – 15
– Links Letter Spacing – 0
– Links Text Transform – AA
– Links Padding – 15
– Links Color – #7784d1
– Links Bottom Border Color –
– Parent Links Background Color –
– Links Background Color on Hover – #7784d1
– Links Color on Hover – #ffffff
– CTA Item Font – Default Theme Font- CTA Item Font Weight – Bold
– CTA Item Font Size – 15
– CTA Item Letter Spacing – 0
– CTA Item Text Transform – AA
– CTA Item Padding – 15
– 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 Weight – Semi Bold
– Closed Icon Color – #7784d1
– Closed Icon Background Color –
– Submenu Background Color –
– Opened Icon Color – #77d1cb
– Opened Icon Background Color –
Modules Section
Buttons
– Buttons Font Weight – Medium
– Buttons Hover Style – Default-None
divi Theme Customizer
Go to Dashboard > Divi > 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.
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
Adding Images
It is very important to optimize your images for
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
Theme Editing Walk-through Video