Divi Handmade Child Theme

Documentation & Support

Docs » Divi Handmade

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Handmade Child Theme by Pee-Aye Creative

Docs » Divi Handmade

Documentation & Support

Divi Handmade

4. Import The Demo Content

After you install and activate the child theme, you will see a new menu item on the left-hand side of your WordPress Dashboard called Divi Handmade. Hover over this and click Easy Demo Import

Review The Import Items

Next, you will see a list of options that are checked by default. These selected items will be imported, installed, and assigned on your website.

Pee Aye Creative Child Theme and Layout Pack Demo Import Options

For a new website installation, we recommend keeping everything selected. This will enable you to instantly have a site that is structured and set up exactly like the demo site. Please consider reviewing this to fully understand what is included in our product and being imported.

Child themes like this are designed for fresh installations of WordPress. If you already have an existing website with any content, pages, menus, styling, etc. on your site, you will want to proceed with caution and pay close attention. The import process will technically not override any existing pages, but it will create some confusion and add everything as new content in addition to anything already existing. To avoid any issues, simply deselect any items that you don't want to import or assign.

Run The Import Process

After reviewing the selected items carefully, you may proceed with the import process. This process may happen quickly or take up to a few minutes, depending on your hosting server speed and internet connection. When you are ready to import the demo content, click the blue Import Demo Content button to proceed. Some visual indicators will show a readout of the progress.

Review Success Screen

After the import process has completed, a success message will appear stating "Import Process Completed."

One important and potentially confusing thing here is a red button that says "Remove Demo Content & Import Functions." Don't worry, this will not remove the demo content! This means it will remove the code function itself that was used to run the import process. Since the code needed for this process has already served its purpose, it can be removed.

Save Permalinks

At this point, it is recommended to go to your WordPress permalink settings at "Settings>Permalinks" and click the blue "Save" button. This is needed any time you make major changes to your site structure in WordPress.

5. Customize Your Site

Review Your Site

The import process is completed, and you can go review the frontend of your website. Your site should now look exactly like our demo site.

Replace Content

Now you can go through your site template and rewrite the text and replace the placeholder images with your own images.

You may customize anything on the site including the logo, images, color schemes, fonts, layout, etc. Divi makes it super easy to do all of this, but some the styling you see is from the CSS file.

Highlight Current Page In Menu

If you want to highlight the current page in the menu, you have two options:

  1. Keep the last menu item highlighted as it already is
  2. Remove the last menu highlight

If you want to keep the last menu highlighted also, then simly add the snippet below to your style.css file.

If you want to remove the highlighted menu item and highlight the page instead, then you can remove lines 131-148 in the style.css file of the child theme and replace it with the snippet below.

/*highlight the current menu item*/

.pa-header-menu .et_pb_menu__menu>nav>ul>li.current-menu-item>a {
color: #ffffff!important;
}

.pa-header-menu .et_pb_menu__menu>nav>ul>li.current-menu-item {
border-left: none;
background: #a78254!important;
}

/*hover color of the current menu item*/

.pa-header-menu .et_pb_menu__menu>nav>ul>li.current-menu-item:hover {
background: #7ea391!important;
transition: all .5s ease;
}

Remove Or Replace The Leaf Images

The images in the top corners are easy to remove or place. You can access those by going to the Divi>Theme Builder header template. Then open the settings for the blue section, go to the Advanced tab, and in the Custom CSS you will find some code in the Before and After code boxes. Those have a URL to the image that is located in the WordPress media library. So first upload your image, then copy the URL from the media library and replace it there in the code. Or of course if you want to remove the images you can remove the code completely.

Divi Handmade child theme top left corner leaves
Divi Handmade child theme top right corner leaves

Photos & Resources

Photos

Our demo uses some stock photos, but it would be illegal for us to include those or give them to you as part of this product. Instead, we have replaced those stock photos with placeholder images. Actually, we do not recommend using stock photos on your site. Instead, you should take and use original photos anyhow, since it has been proven that stock photos are not considered trustworthy or helpful for brand. Your customers want to see your own photos.

However, we like to go the extra mile, so if there are some photos you like on our demo that you want to use, you can still do that by using the links below in the toggle. We tried to use either free or inexpensive stock photos for your convenience.

Free Style Guide

We also include a complimentary style guide for the template. This simply shows some of the color scheme, fonts, and styles used in the demo. Existing customers can download the style guide here.

Theme Builder Templates

Overview

Whenever you activate the child theme and import the demo content, it automatically creates a variety of Divi Theme Builder Templates located in the Divi>Theme Builder area. These templates are each assigned to different pages, posts, post types, archive pages, categories, etc. The Theme Builder is a very helpful feature of Divi, so it is highly recommended that you get to know how to use it. If you are new to the Theme Builder, don’t worry, our guide here will help explain what each of the templates is used for in the child theme.

You can edit any of the templates by clicking the little pencil icon. This opens up the template, and you can customize it to your liking using the Divi Builder.

Default Website Template

This is the first template, and it applies across the entire site. You will notice there are Global Header and Global Footer layouts included in the template. Because they are global, these header and footer layouts apply everywhere on the site, unless they are overridden by another individual template.

All Products

This is the template that is assigned to all the WooCommerce products on the website, which means when you view a product, it will dynamically show the design and the layout from this template. The Divi Woo modules use Dynamic Content to show all the product data in specific modules throughout the layout.

All Product Category Pages

This template is assigned to all the product category pages. This uses a Post/Archive Title module at the top and a Shop module to display the products, and any product category that you click on will dynamically display products within that category.

Shop Page

This template is the main WooCommerce product archive page used to show all products on the site with a Divi Shop module.

All Posts

This is the template that is assigned to all the blog posts on the website, which means when you view a blog post, it will dynamically show the design and the layout from this template. Dynamic Content is used to show the post title, meta, content, etc.

All Category & Tags Pages

This template applies to all the blog post category and tags pages. If you click on any blog category or tag link, you will come to a page that dynamically shows blog posts in that particular category or page.

Changelog

1.0.2 - 2/4/21
-updated gallery lightbox hex colors
-fixed gallery lightbox image padding issue

1.0.1 - 1/27/21
-fixed issue with project page titles position
-fixed WooCommerce shop pagination stacking on mobile
-fixed WooCommerce shop product overlay from being on top of sales badge
-fixed issue due to Divi update where WooCommerce shop product columns changed to 2 columns on mobile

1.0
-initial release

Last updated Oct 25, 2021 @ 3:04 pm

Is This Article Helpful?

Pin It on Pinterest

0

Your Cart