Business Inc Documentation

Customizations

Changing logo and header information
Change the colors
Changing font sizes
Fly-in animations
Add icons to menu
Add Facebook share button

Custom pages

Create your own custom page
Edit 404 Page

Installing Business Inc Child Theme

Requirements

Before we begin, make sure you have Divi and Bloom (plugin) installed on WordPress before installing this child theme. We recommend doing this on a fresh WordPress installation.

The Divi theme and Bloom plugin are not included in this package. To download Divi and Bloom, you must have an Elegant Themes Membership.

The page links from buttons and logo are removed, so you need to relink those to the right pages.

Step 1

Download and unzip the ‘Business_Inc_Child_Theme.zip’ file to your computer.

Step 2

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the Business Inc.zip file in the Business_Inc_Child_Theme folder on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see the Business Inc Child Theme as the active theme in your theme panel.

Step 3

After activating Business Inc, you will see at the top:

This theme recommends the following plugin:  Widget Importer & Exporter.

Begin installing these plugin by clicking on Begin installing plugin.

On the next screen, you need to check all the plugins and choose to install in the dropdown. Hit apply, and the progress will begin.

When the progress has finished click on “Return to Required Plugin Installer.”

Now you need to activate the plugin.

Step 4

Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
Click on Import and upload Business Inc Theme Options.json.

Go to Divi > Theme Customisation. Click on the import/export options (up/down arrow).
Click on Import and upload Business Inc Customizer Settings.json.

Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload Business Inc Builder Layouts.json.

Go to Appearance > Widgets. If there are widgets in the Sidebar, then remove them all. Create two new Sidebars. The first sidebar is for the blog name it something like “Blog,” the second sidebar is for the 404 page, name it something like “404 sidebar”. If you accidentally made the 404 sidebar first, then the widgets that will be imported in the next step will be automatically placed in the wrong sidebar. This is no big deal just swap the widgets in the right sidebar after you have them imported in the next step.

Go to Tools > Widget Importer & Exporter.
Choose the file Business Inc-widgets.wie. Click on Import Widgets.

Optional (if you have Bloom)
Go to Bloom > Import & Export
Import the file Business Inc Bloom.json

Step 5

Go to Pages > Add New. Give your page a name for example Home.

In the Divi Builder Click on Load from Library then click on Add From Library.

Here you will find all the pages from the demo. Load the Home page and publish it.

Don’t forget to add a menu and set the Home page as static.

Some images we used in the demo website are paid versions, so we have those replaced with free ones.

Assign menu and sidebar to 404 and category page

You need to assign the correct menu and sidebar for the 404 and category pages.

Go to Divi > Divi Library and open the 404 page open the Fullwidth Menu Module this is a global section. And choose your Menu.

And change the sidebar in the Sidebar module.

Do the same for the category page.

Enable Bloom

There are two opt-in forms in bloom, Free Ebook, and Free Ebook Pop-up (The Free Ebook Pop-up appears when you click on the button at the bottom of the opt-in page).

For both opt-in forms, you need to fill in the form integration options in the setup (in Bloom).

And you need to fill in the redirection to your Thank you page in “success action.”

Don’t forget to make both of them active!

Go to the opt-in page and assign the opt-in form Free Ebook in the text module (Remove the one that is in there).

For the Pop-up opt-in no further actions are required.

Changing logo and header information

We made the header as a global section. This means that every page that has this global section will be the same. So if you adjust one, then all the pages that have the same global section will be changed as well.

In this design, I made the top header (social icons and CTA button), header, and menu as a global section. You can notice this by the yellow/green color of these sections.

As you can see in the image below I made two headers, one is only visible to the desktop and the other one is only visible for mobile and tablet.

So don’t forget that you have to change the logo and edit the info in both of these sections.

At the moment that I’m writing this, there is a small bug. For the desktop header, you can’t open the third module (office hours Desktop). But you can edit this from the front-end visual builder.

Changing colors

Most colors you can change inside the modules and customizer.

The colors that can’t be modified from the modules are:

• Menu background color
• Drop down background color
• Hover dropdown background color
• Mobile hamburger
• Blog button
• Sidebar widgets
• Footer button and links

To change these colors go to appearance > editor.

Under CHANGE COLORS you can modify the color codes.

If you don’t know wich HEX/RGBA colors you need, then you can use this tool https://color.adobe.com

Changing font size

The most font sizes you can adjust in the Divi customizer and inside the modules.

The rest of the font sizes you can find in the CSS file appearance > editor.

Fly-in animations

You can give any module, row, or section a fly-in animation when scrolling down. To do this, you need to give the module, row or section a particular class.

The classes are as follow:

From top to bottom:
et_pb_animation_top et-animated et-waypoint

From bottom to top:
et_pb_animation_bottom et-animated et-waypoint

From right to left:
et_pb_animation_right et-animated et-waypoint

From left to right:
et_pb_animation_left et-animated et-waypoint

Fade:
et_pb_animation_fade_in et-animated et-waypoint

Credits for these animations goes to Geno Quiroz and Nathan Weller.

Add icons to menu

To add icons to you menu you do the following:

Choose the icon you want on http://fontawesome.io/icons/

Click on the icon and on the next screen you find the code an example below:

<i class="fa fa-home" aria-hidden="true"></i>

Go to Appearance > Menu and place the code before you page name in Navigation label field.

Add Facebook Share Button

To add a Facebook share button to the thank you page you need to create one on the Facebook developers page.

https://developers.facebook.com/docs/plugins/share-button

Add both of the code snippets in the code module on the thank you page.

Important

Place in the excerpt box the text that you want to show on the blog page or blog grid page.

You find this box under the Divi page builder in the post page.

Create your own page

If you want to create a custom page, but you want to use the same top header, header, and menu. You can easily achieve this by following these steps:

Go to Pages > Add New.
Click on the Divi Page Builder button.
Click on Add From Library and load Top Bar Global.
Do the same with Logo Global, Logo Mobile Global and Menu Global.
Arrange them in the right order.
Now you can create the other sections/rows that you want.

404 Page

To edit the content of the 404 page, you go to Divi > Divi Library.

Then you open the 404 page. You can make your edits here.