Welcome to the documentation for the Divi Pizza child theme! On this page, you will find all the steps you need to set up and use our template. Please be sure to follow all of these steps and access the additional resources as needed.
1. Prepare Your Divi Site
Install And Activate Divi
Before you begin, make sure you have the Divi Theme by Elegant Themes installed and active. This is necessary since our product is completely based on Divi.
Disclosure: The link to Elegant Themes is an "affiliate link" which means if you click on the link and purchase anything, we will receive a commission.
2. Download Divi Pizza
After completing the purchase, download the child theme file to your computer. The zipped folder ends with ".zip" at the end of the filename.
Purchased From Pee-Aye Creative
If you purchased the product here on our website, you can download the file from your Account page at https://www.peeayecreative.com/account/ or click the download link in your purchase confirmation email and save the file to your computer.
Purchased From Divi Marketplace or Divi Cake
If you purchased this product from a 3rd party marketplace such as the official Divi Marketplace or Divi Cake, 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.
3. Install The Child Theme
4. Import The Demo Content
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.
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.
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.
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.
Photos & Resources
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
Theme Builder Templates
Whenever you activate the child theme and import the demo content, it automatically creates a Divi Theme Builder Template located in the Divi>Theme Builder area. Some child themes have many templates, but in this case we only have one simple template for the footer. 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. The Global Footer template applies across the entire site.
How To Use The Tabbed Menu
The tabbed menu on the “Menu” page is actually using the Divi Tab Module. Inside each tab is a specific Divi Library layout that correlates to the tab title text. The content of the tabs (the four menu categories shown in the demo) are each separate section layouts saved in the Divi Library and inserted with the use of the “Simple Divi Shortcodes” plugin that is recommended when importing the demo content. The tabbed menu will not work properly without this plugin. It is important to understand that all edits and changes to the menu items will take place in the Divi Library, not in the tabs themselves.
To Add A Section To The Tabs
Best practice would be to duplicate the Divi Library Layouts that come with the child theme/layout pack. Please see this article to see how to duplicate Divi Library layouts.
Next, find the ID of the layout by looking in your address bar. You will see a series of numbers (usually 2-4 total). This is the number that needs to be added to the shortcode inside the tabbed content.
Go to the Tabs module and duplicate a tab. Rename the tab to the desired name. Edit the number inside the shortcode to match the number you found in the previous step from the layout ID.
Once this is correct, the layout will appear and you are finished.
To Add A Quantity of Tabs Other Than Four
In the CSS that is included with the child them/layout pack, you will see that starting on lines 385 are some snippets that style the tabs module. If you would like 5 tabs, for example, you would need to edit the numbers there accordingly based on the instructions given in comments in the CSS. For example, the four tabs in the demo are 23% wide with a 2% gap, since we divided 100 by 4. This is the basic math that needs to be done to make the tabs equal. Let us know if you need help with this.