pb3 child theme for 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.

Follow this tutorial to learn how to install Divi theme.

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

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.

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”

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.

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:

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).

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.  

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.

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. 

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.

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”

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. 

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 – 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 Hover – rgba(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 Shadow – Uncheck
– Menu Bar Background Color – rgba(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 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 – rgba(0,0,0,0.02)
– Parent Links Background Color – rgba(0,0,0,0.01)
– 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 – rgba(189,200,213,0.2)
– Submenu Background Color – rgba(0,0,0,0.02)
– Opened Icon Color – #77d1cb
– Opened Icon Background Color – rgba(0,0,0,0.02)

Modules Section

Buttons
– Buttons Font Weight – Medium
– Buttons Hover Style – Default-None

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.

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.

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.