Select Page

Vision Documentation

Support

Any questions? Send an email to info@markhendriksen.com

Images

The images are replace due to licensing. You can get the images here:

Installing Vision Child Theme

Requirements

Before we begin, make sure you have Divi installed on WordPress before installing this child theme. Do this on a fresh WordPress installation.

When building the website I recommend not to use any caching plugins. When finished building the website you can install them.

The Divi theme is not included in this package. To download Divi, you must have an Elegant Themes Membership.

Install Vision on a fresh WordPress installation. Installing this child theme will overwrite the existing website.

Step 1: install Divi and Vision

Install the Divi theme on a new WordPress installation.

After installing Divi, navigate to Appearance > Themes and click on Add New.

Locate the Vision.zip file on your computer and then click Install Now.

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

Step 2: import demo content

Navigate to Vision Demo Import and click on Easy Demo Import.

If you want to use WooCommerce on your site then make sure all 3 plugins are checked. If you do not need WooCommerce then you can uncheck and these plugins will not be installed.

Click on Import Demo Content

Your website is ready to use. For WooCommerce there are some additional settings. You can find them below.

Setting up WooCommerce

For WooCommerce there are some additional steps to take.

Step 1: assigning the shop, cart, checkout and my account pages

Go to WooCommerce > Settings > Advanced
(If WooCommerce is not visible after the import, refresh your page)

Assign the cart, checkout and my account page here.

If one of the pages do not show up in the dropdown then save click on save and try again.

Step 2: Settings for cart (menu)

Go to WooCommerce > Menu Cart Setup

Select here the Shop menu and click on save.

Step 3: Settings for product search

Go to WooCommerce > FiboSearch

The first time you will see this.

You can choose any option I just skip it.

Search bar

These are the settings I used.

Make sure show advanced settings are enabled.

Color codes

Search input background: #293979

Search input text: #ffffff

Search input border: #293979

Search submit background: #ff2a66

Search submit text: #ffffff

Customize header V1 + hamburger menu

Go to Divi > Theme Builder and open the global header.

You will see 2 headers. The top one is for desktop and the bottom one is for tablet and mobile.

Hamburger menu

Switch to wireframe view (left bottom)

The highlighted part is the content of the hamburger menu.

Hamburger menu scroll bar color

Go to Appearance > Theme Editor.

1) Around line 112 you can change the scroll bar handle color.

2) Around line 108 you can change the scroll bar background color.

Hamburger icon Desktop

Around line 165 you can change the icon color
Around line 169 you can change the background color

Mobile menu toggle icon color HEADER V1

Around line 148 you can change the toggle icon color for header v1.

Customize header V2

Go to Appearance > Theme Editor.

1) Around line 117 you can change the background color.

2) Around line 123, 128, and 133 you can change the background color and text color of the active and hover state.

Header V2 dropdown

Around line 138 you can change the border color.

Around line 142 you can change the text color.

Mobile menu toggle icon color HEADER V2

Around line 154 you can change the toggle icon color for header v2.

Customize header V3

Mobile menu toggle icon color HEADER V3

Around line 160 you can change the toggle icon color for header v3.

Change the header and menu version

Go to Divi > Theme Builder and open the global header.

1) Click on the + symbol

2) Go to Your Saved Layouts tab

3) Choose your header version

Enable/disable fixed header

Go to Divi > Theme Builder and open the global header.

Open the section and go to the advanced tab.
Under scroll effects you can choose to stick or not to stick.

Customize horizontal tabs

Switch to wireframe view (left bottom).

You will see 4 rows with “Tab 1 Content”, “Tab 2 Content” etc.

Tab 1 is for tab content 1, tab 2 is for tab content 2 etc.

Change horizontal tab colors

Go to Appearance > Theme Editor

Around line 24 you can change the active background color:
Around line 30 you can change the active arrow color:
Around line 36 you can change the active title color:

Change colors

Most colors can be changed in the sections, rows and modules. Some colors need to be changed through swapping out color codes in the stylesheet. This is easy to do and in this section I will describe how to do this.

Text underline

Through out the site you see this purple underline.

Go to Appearance > Theme Editor

Around line 18 you can change the border color:

Horizontal tab

Go to Appearance > Theme Editor

Around line 24 you can change the active background color:
Around line 30 you can change the active arrow color:
Around line 36 you can change the active title color:

Checkout page

1) Review order background color around line 41

2) Payment background color around line 46

3) Notice bar background color around line 51

4) Notice bar text toggle link color around line 58

Cart page

All button hover colors around line 68

Pricing table V2 icon color

Around line 74 you can change the icon color.

Pricing table V1 active tab color

Around line 80 you can change the active background and text color.

Blog meta

1) Around line 86 you can change the meta background and text color.

2) Around line 91 you can change the category background and text color.

Opt-in page icon color

Around line 97 you can change the icon color.

Hamburger menu scroll bar color

1) Around line 112 you can change the scroll bar handle color.

2) Around line 108 you can change the scroll bar background color.

Header V2

1) Around line 117 you can change the background color.

2) Around line 123, 128, and 133 you can change the background color and text color of the active and hover state.

Header V2 dropdown

Around line 138 you can change the border color.

Around line 142 you can change the text color.

Mobile menu toggle icon color HEADER V1

Around line 148 you can change the toggle icon color for header v1.

Mobile menu toggle icon color HEADER V2

Around line 154 you can change the toggle icon color for header v2.

Mobile menu toggle icon color HEADER V3

Around line 160 you can change the toggle icon color for header v3.

Hamburger icon Desktop

Around line 165 you can change the icon color
Around line 169 you can change the background color

Customize shop, product, checkout, category, my account and cart template

Go to Divi > Theme Builder

Here you will find all the templates.

To edit any template open the custom body and make your edits.

If you are new to the Theme Builder you can find the documentation here:
https://www.elegantthemes.com/documentation/divi/the-divi-theme-builder/

Edit the post template

Go to Divi > Theme Builder

Here you will find the Post template.

To edit the post template open the custom body and make your edits.

If you are new to the Theme Builder you can find the documentation here:
https://www.elegantthemes.com/documentation/divi/the-divi-theme-builder/