Bruno Documentation

In order to install this child theme, you must first purchase a membership to Elegant Themes and download the Divi theme package.

This version of Bruno is fully compatible with versions 3.0+. Some features or elements may not be compatible with previous versions. Please ensure that you’ve downloaded the latest version of Divi.

 

INSTALLING CHILD THEME

INSTALLING DEMO CONTENT

BRUNO OPTIONS

GHOST HEADER

ANIMATIONS

SUPPORT

CHANGELOG

Step 1: Install Divi Theme

Once you’ve downloaded the Divi theme package, login to your WordPress website and go to Appearance > Themes.
Find and upload the Divi parent theme and activate it. Next click on the Add New Theme.

 

Step 2: Install and activate Bruno

Click on Upload Theme.

 

 

Click on Choose file.

In the downloaded package find and select Bruno.zip file, then click on the Install Now button. 

 

 

Completing the upload, you will need to activate the theme by clicking on the Activate button.

Step 3: Activate your product

To activate your product and get updates please go to Settings > Bruno Activation and enter your API Key and API Email.

To see your API Keys please login to your account.

 

Step 4: Installing plugins

Bruno theme requires 5 plugins:

On the next screen select all plugins, choose Install from dropdown menu and click Apply.

 

Step 5: Permalinks setup

To make the Contact Form Popups working, Permalinks Settings have to be set to “Post name”.

Go to Settings > Permalinks, select “Post name” and click Save Changes.

 

Step 1: Now you will need to install the library and all theme settings which allows you to have your site just like the demo version.

Go to Appearance > Import Data Demo, and click on the Import Demo Data button.

Note: This may take even several minutes, depends of internet connection speed. Please be patient.

 

 

Step 2: The theme has pre-built contact form. It needs to be imported from download package. Go to the Caldera Forms tab located in your WordPress Dashboard and click Import button. Select “contact-form.json” file located in Contact Form Import folder and click Import button.

 

1 General

Bruno comes with custom options that can be edited in Divi/Theme Options/Bruno

Update Notifications – Enabled/Disabled
Fixed Header On Mobiles – Enable/Disabled
Fixed Header Logo – Upload custom logo for fixed header
Add shadow to fixed header – Enabled/Disabled
Testimonial Archive Page Slug – specify slug for testimonials archive page
Custom Animation in Safari browser – Enabled/Disabled
Social Icons – add more social networks to your Divi website

 

2 Menu Button

Bruno comes with custom Menu Button options that allows you to trigger popup form after button it is clicked. This options support 3 popular form plugins: Caldera Forms, Gravity Forms and Contact Form 7. By default Caldera Forms custom popup is used (contact-form.json).

We can also control menu button appearance displayed on Default Header, Fixed Header and separately for mobile devices.

 

3 Preloader

Bruno comes with custom Preloader options. You can select preloader from 27 predefinied styles and colors or upload your own gif image.

 

 

 

Preloader – Enabled/Disabled
Preloader Image Size – select preloader size
Preloader Images – select preloader image
Preloader Image Uploader – you can upload your own preloader/gif image
Preloader background color – define background color for preloader
Preloader Effects – define effect FadeOut/SlideUp
Preloader Delay time – define preloader delay time
Body Delay time – define body delay time
Preloader Body opacity – define background opacity
Preloader Fadeout speed – define speed of preloader fadeout effect

4 Theme Color

This option allows you to change main theme color globally. Please be advised that Menu Button colors will have to be set up separately.

 

 

Animations

Bruno features custom animations that can be added to each section, row or module. Below are the CSS Class groups for each animation:

Top To Bottom et_pb_animation_top et-animated et-waypoint

Bottom To Top et_pb_animation_bottom et-animated et-waypoint

Right To Left et_pb_animation_right et-animated et-waypoint

Left To Right et_pb_animation_left et-animated et-waypoint

Fade In et_pb_animation_fade_in et-animated et-waypoint

 

 

Please note: Custom animations may not work perfectly in Safari browser. If you are experiencing issues you can disable custom animations in Divi/Theme Options/Bruno/General