Installing our Free Stuff

Cool, you got your FREE STUFF!

“Now how the hell do I use it?”

Don’t worry, I hear ya. Here’s a quick run through how to install and use it.

TO START

First of all, unzip the free giveaway file you downloaded somewhere.

Inside are two folders that should be self-explanatory, named:

1. 1. Custom Modules – Contains a set of folders, one for each of our free Divi custom module layouts.
   2. Plugins – Contains free plugins we are giving away.

CUSTOM MODULE LAYOUTS

Inside each custom module folder is:
1) A JSON file, e.g. Testimonials.JSON
2) a CSS file, e.g. Testimonials.CSS

Some of the modules need some JQuery to work, so for those you will also find:
3) A JavaScript file, e.g. Testimonials.js

Importing the JSON Layout files

You can use the import function either in the Divi Library, or directly on a Divi Page or Section.
When you click on Import, navigate and select the relevant JSON file and bingo, the files are imported!

Install the CSS file/s

You can either:

1. Open the CSS file/s you need, copy the contents and paste into an existing stylesheet, e.g. style.css in your child theme, or add it to the Divi Custom CSS box in the Theme Options
2. Upload the CSS file/s to your website and add code to your functions.php file to load them, like our example below:

This example code shows how to add two CSS stylesheets, one for the Testimonials and one for the Pricing Tables. It assumes the files are saved to two folders underneath our Child Theme folder, named /DiviHype-Modules/Testimonials/ and /DiviHype-Modules/PricingTables/.

function enqueue_divihype_styles() {
  wp_enqueue_style( 'testimonials-stylesheet', get_stylesheet_directory_uri() . '/DiviHype-Modules/Testimonials/testimonial_styles.css' );
  wp_enqueue_style( 'pricingtables-stylesheet', get_stylesheet_directory_uri() . '/DiviHype-Modules/PricingTables/pricingtable_styles.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_divihype_styles' );

If you want to add more stylesheets for other modules, just add another wp_enqueue_style line for each one.

Installing the Javascript File/s

If there’s a Javascript file for the module layouts, you can install it like the CSS by either of these methods:

1. Open the JS file, copy the contents and paste it into an existing script file if you have one, e.g. script.js
2. Upload the JS file/s to your website and add code to your functions.php file to load them, like our example below:

Here’s example code showing how to load two JS files, one for the Testimonials and one for the Pricing Tables. Again, it assumes the files are saved to two folders underneath our Child Theme folder, named /DiviHype-Modules/Testimonials/ and /DiviHype-Modules/PricingTables/.

function enqueue_divihype_scripts() {
  wp_enqueue_script( 'testimonials-script', get_stylesheet_directory_uri() . '/DiviHype-Modules/Testimonials/testimonial_script.js', array( 'jquery' ), '1.0.0', true );
  wp_enqueue_script( 'pricingtables-script', get_stylesheet_directory_uri() . '/DiviHype-Modules/PricingTables/pricingtable_script.js', array( 'jquery' ), '1.0.0', true );
add_action( 'wp_enqueue_scripts', 'enqueue_divihype_scripts' );

FREE PLUGINS

The plugins are simple to install.

1. Keep the plugin file/s zipped
2. Login to your WordPress Admin area
3. Go to Plugins > Add New
4. Click the Upload Plugin button, then Choose file
5. Select the plugin zip file on your machine and click Open
6. Click Import
7. After the plugin is installed, click Activate and you’re all set!

Problems or Questions?

I’ve tried to make sure the modules and plugins work great and the installation instructions are clear, but I’m not perfect and they may also be dependant on the version fo Divi you’re using. I’m sure some of you will have problems, so I’m here to offer my support and help.

Any problems, get in touch via Messenger on the Website (down there in the bottom right corner!) or via the DiviHype Facebook page.

You can also ping me an email if you need.

Enjoy!
Ed