Installation Instructions
Preparation
Before you begin, make sure you have the Divi Theme by Elegant Themes installed and active. This is necessary since our product is based on Divi. After that, go ahead install your new child theme.
Download
After purchase, download the .zip file from your My Account page at https://www.peeayecreative.com/my-account/ or click the download link in your purchase confirmation email and save the file to your computer.
NOTE: If you purchased this product from a 3rd party marketplace such as the official Divi Marketplace, Divi Cake, or Elegant Marketplace, the process of downloading the file may vary slightly. You will always be able to download the file from your account, no matter where you made the purchase.
Child Theme Installation
A child theme is installed just like any other WordPress theme. From your WordPress Dashboard, go to Appearance>Themes>Add New and click on Upload Theme. Locate the .zip file on your computer and click Install Now.
Once the file upload is finished, you can click on Activate. You will then see Divi Handmade as the active theme in your theme panel.
Import The Demo Content
Demo Content Import Process
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.
Next, you will see a list of options that are checked by default. Theses items will import and be assigned during the demo import process.
New Websites
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 just like the demo site. After reviewing the settings, you can click Import Demo Content.
Existing Websites
If you already have content, pages, menus, etc. on your site, you will want to proceed with caution. This will not override any existing pages, but it could affect things like the menus. To avoid any issues, simply deselect any items that you don’t want to import or assign. After reviewing the settings you want, you can click Import Demo Content.
At this point, it is recommended to go to “Settings>Permalinks” and click “Save.”
Your site should now look very similar to the demo at https://demos.peeayecreative.com/divi-handmade.
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.
Photos Used In Demo
https://www.pexels.com/photo/abstract-cloth-colors-cotton-365067
https://www.pexels.com/photo/architecture-bed-bedroom-ceiling-271743/
https://www.pexels.com/photo/architecture-cabinets-chairs-contemporary-279648
https://www.pexels.com/photo/art-board-cooking-flowers-350417/
https://www.pexels.com/photo/art-business-color-colorful-276267
https://www.pexels.com/photo/arts-and-crafts-carpentry-wood-wood-shavings-175709
https://www.pexels.com/photo/assorted-color-flower-bouquet-931171
There are a lot, and we are adding more soon!
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.
Customizing The Site
The only thing left to do is replace the text with your own and the placeholder images with your own images. You may now 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.
Change Highlighted Menu Link
A few people asked for this, so we decided to post it here. If you want to change the highlighted menu item to the active menu item instead of the contact button, you can remove lines 102-119 in the style.css file of the child theme and replace it with the following snippet.
/*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;
}More Customization
If you want us to customize the site to match your branding, content, colors, and niche, please contact us for our current rates and we would be happy to help.