Blue Biz Divi Child Theme Documentation

An Elegant Themes Membership is required to download the Divi Theme. The Divi Theme is NOT included with this child theme.

If you wish to use the predesigned social follow buttons widget in the blog sidebar that comes with Blue Biz, you will need to install the Monarch Plugin from Elegant Themes. Monarch is not included with this child theme.

Ensure you have the Divi Theme installed prior to installing the Blue Biz Child Theme.

To avoid any issues during installation it is highly recommended that you use this child theme on a fresh installation of WordPress.

It is also a good idea for SEO purposes to navigate to Settings > Permalinks and set the “Common Settings” to “Post name”.

Step 1.

After purchase, download the “UNZIPME_blue-biz.zip” file.

Step 2.

Unzip the “UNZIPME_blue-biz.zip” file to your computer, it contains the following files:

blue-biz-v1.0.zip (the Blue Biz child theme files)
iPhone Mockup
Logo – for website header
Logo Vector & PSD Files
Sidebar Banner
Site Icon
READ_ME (Blue Biz Documentation)
style.css (a backup of the Blue Biz style sheet)
license.txt (license terms)

Theme Installation

Step 3.

In your WordPress admin panel navigate to “Appearance > Themes > Add New” and click on “Upload Theme”. Locate the “blue-biz-v1.0.zip” file on your computer and then click “Install Now”.

When the install is complete click on “Activate”, you will then see the Blue Biz Child Theme as the active theme in your theme panel.

Plugin Activation

Step 4.

Above the theme images you will see a notification telling you which plugins Blue Biz requires. Click on “Begin Installing Plugins”.

Next, select the 2 required plugins and click “Install”. This will install the One Click feature to import all the demo content and settings. It will also install the Typed JS plugin that takes care of the animated typing effect in the header.

When both plugins have been installed you should see this screen. Click on “Appearance” in the left hand menu to refresh the page.

Import Settings & Demo Content

Step 5.

You will now see a new submenu item under the “Appearance” menu called “Import Demo Data”. Click on that item.

Next you will see a blue button called “Import Demo Data”. Click the button.

After a few seconds you should get the following message that the demo data has been imported successfully. You can now deactivate and remove the One Click Demo plugin if you wish but you don’t have to (don’t deactivate the Typed plugin though). That’s it!

You will need to install the Monarch Plugin from Elegant Themes. You can download it from your Elegant Themes account. It is not included with this child theme.

Importing the Monarch Settings

To import the Monarch settings, navigate to “Tools > Monarch Settings” and click the two arrows import & export button located at the top right corner of the screen.

Select “Choose File” under “Import Monarch Settings” and select the file called blue-biz-monarch-settings.json from your computer (you can download this file here), then click Import.

After that add a Monarch Follow widget into your sidebar in “Appearance > Widgets”.

You can further customize the social sharing buttons or add/remove other networks in the Monarch settings. If you don’t know how to use Monarch, you can read the Monarch Plugin Documentation.

Just go to Divi Theme Options > General settings and disable the option Fixed Navigation Bar.

By default, the CTA button is set for the SIGN UP link in the navigation. In order to make a different menu link a CTA button, just add the bb-cta-menu CSS class to that particular menu link in the Menu options (Appearance > Menus).

To be able to add a CSS class to a menu link, you will first need to enable this option. In the upper right corner of the screen click “Screen Options” and tick the “CSS Classes” option. This will add a CSS class field to each one of your menu links.

To change the text of the typing effect animation in the fullwidth header module on the homepage, just customize the values of the plugins shortcode in the module’s settings Body field. You will find there the following code:

<h1>[typedjs typespeed=”70″ startdelay=”0″ backdelay=”1000″ backspeed=”18″ loop=”true” cursor=”color:#fff!important;”]New Business Divi Child Theme+ Ready for Download Right Now[/typedjs]</h1>

Hint: As for the speed, the values are in milliseconds, so the lower value you insert, the faster the animation effect will be.

Please note: The typing effect is disabled for tablet & mobile devices, so to change the heading text for mobiles & tablets, you will need to manually change the Fullwidth Header content text on that particular section (the duplicated fullwidth header section that is available for mobiles & tablets only).

Also, if you change the background image, don’t forget to change it on the second section (the one for mobiles & tablets) as well.

In the UNZIPME_blue-biz.zip package, you will find a folder “iPhone Mockup”. Inside this folder you will find an iPhone-mockup01.psd file. Open this file in Photoshop or in an alternative (e.g.: photopea.com). Delete the divi.top text layer. Edit the EDIT ME layer – insert your own graphic into it or as a new layer. Save final image as PNG or JPG. Then locate the iPhone Mockup Image module in the Homepage layout and replace the default image with your custom one. That’s it.

To set up your email optin box in the footer, click to edit the optin module’s settings and in the “Email Account” setting click on choose your email service provider. Then enter your API key and choose your mailing list.

At the bottom of the Contact page, there is a Google map. To add your own Google map, go to https://www.google.com/maps, search for your location, click the Share button, then click “Embed a map” and copy the iframe code.

Then just insert this iframe code into the fullwidth code module’s content field. And this is important: In the code, change the width value to 100%. So if you have width=”600″, change this to width=”100%”. This will make sure that the map will display across the whole width of your page. The height value is up to you.

To change the color of Chrome title bar on mobile to blue, just add the following code into theof your blog. Insert into the “Add code to the <head> of your blog” field in Divi Theme Options > Integration.

<meta name=”theme-color” content=”#2A95D8″ />

To change the text and/or links in the footer, just go to Appearance > Customize > Footer > Bottom Bar and add your text into the “Edit Footer Credits” field. To add a hyperlink, you will need to add it is an HTML code.

If you want to change the colors of this child theme, I recommend you to check these tutorials on the Elegant Themes blog:

https://www.elegantthemes.com/blog/theme-releases/find-and-replace

https://www.elegantthemes.com/blog/divi-resources/how-to-use-divi-to-create-different-color-scheme-mockups-of-your-pages

https://www.elegantthemes.com/blog/divi-resources/how-to-turn-divi-layouts-into-reusable-wireframes

To create a new blog post with the same layout like the Blue Biz predesigned blog posts have, go to “Posts > Add New”. Then enable the Divi Builder. In the Divi Posts Settings choose Page Layout: Full Width and Post Title: Hide.

Finally, just load the Blog Post layout from the Your Saved Layouts Divi Library.

The main colors used in this child theme are the following ones:

Dark blue: HEX #042654 RGB 4,38,84
Light blue 1: HEX #2ea3f2 RGB 46,163,242
Light blue 2: HEX #3ca9f2 RGB 60,169,242
Turquoise: HEX #48b7c4 RGB 72,183,196

Nunito
Ubuntu
Body font: Comfortaa

If you prefer to use the Classic WordPress editor instead of Gutenberg, just go to Divi Theme Options > Builder > Advanced and enable the option Enable Classic Editor.

If for some reason your customizer settings disappear (e.g. you will see a white navigation on the top), just go to the customizer, change something (you can also revert back this change) and then click “Publish”. After this the customizer settings should be back. This seems to be a small Divi Theme glitch.

If you are still having any problems, you can email me at: hello@divitheme.net

I speak English & Spanish fluently.