Select Page

Avanti 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:

Shutterstock collection

Installing Avanti 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.

Important: Only install the Divi theme, not the Divi builder (the Divi theme includes the Divi builder if you install both then this can cause conflicts).

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.

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

Step 1: upload avanti child theme

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

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

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

Step 2: import demo content

Navigate to Easy Demo Import Pro and click on Import Demo Content.

After the import you can click on Remove Demo Content and Import Functions.

Step 3: change the home page

By default the business home page is installed. To change the home page go to the home page and enable the visual builder then click on the + symbol.

Then go to the Your Saved Layouts tab and choose the homepage you want to use.

See the demo website for the home page designs:
https://avanti.markhendriksen.com/

Change the header and menu version

Go to Divi > Theme Builder and open the global header.
You will also find the slide-in here. The easiest way to replace the header is to switching to the Wireframe view
Now you can remove the header section (blue top bar).

1 – Click on any blue + dot.
2 – Click on Add from Library
3 – Choose Header and Menu
4 – Choose your header
5 – Drag the header to the top

See the demo website for the variations:
https://avanti.markhendriksen.com/

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.

Go to Appearance > Theme Editor

1) on line 19 you can change the triangle color.

2) at line 23 you can change the line color.

3) At line 29 you can change the background color.

Note: I use a gradient background color from left to right. If you want to use a solid color then you can make both color codes the same.

Services side menu colors.

Go to Appearance > Theme Editor

1) on line 71 you can change the text color.

2) at line 72 you can change the background color.

3) at line 78 you can change the text color.

4) at line 82 you can channge the background color

Note: I use a gradient background color from left to right. If you want to use a solid color then you can make both color codes the same.

Slide-in colors

Go to Appearance > Theme Editor

1) on line 34 you can change the icon color.

Home page plumber, renovation and dentist border color

Go to Appearance > Theme Editor

On line 39,40,44 and 45 you can change the border color.

Homepage consultation arrow icon

Go to Appearance > Theme Editor

At line 51 you can change the icon color.

Homepage web design arrow icon

Go to Appearance > Theme Editor

At line 56 you can change the icon color.

Homepage renovation arrow icon

Go to Appearance > Theme Editor

At line 61 you can change the icon color.

Blog sidebar colors

Go to Appearance > Theme Editor

1} At line 87 you can change the text color.

2) At line 88 you can change the background color.

3) At line 92 you can change the icon color.

Portfolio colors

Go to Appearance > Theme Editor

1} At line 97 you can change the background color.

2) At line 101 you can change the meta background color.

3) At line 105 you can change the filter background color.
At line 106 you can change the filter text color

Pricing table icon color

Go to Appearance > Theme Editor

1) At line 115 you can change the icon color.

 

Team member V1 and V2 social BG color

Go to Appearance > Theme Editor

1) At line 120 you can change the background color.

2) At line 125 you can change the background color.

 

Testimonial V3 star color

Go to Appearance > Theme Editor

At line 130 you can change the star color. 

WooCommerce colors

 

Cart content menu text color

Go to Appearance > Theme Editor

At line 66 you can change the text color.

Shop “See Details” on hover BG color

Go to Appearance > Theme Editor

At line 140 you can change the text.

At line 141 you can change the background color.

Shop pagination colors

Go to Appearance > Theme Editor

1) At line 146 you can change the border color.

2) At line 157 you can change the text color.

3) At line 152 you can change the background color.

4) At line 153 you can change the text color.

Shop sidebar

Go to Appearance > Theme Editor

1) At line 162 you can change the textr color.

1) At line 163 you can change the background color.

2) At line 168 you can change the icon color.

3) At line 173 you can change the background color.

3) At line 174 you can change the border color.

4) At line 179 you can change the background color.

4) At line 180 you can change the border color.

5) At line 184 you can change the icon color.

Product page icon color

Go to Appearance > Theme Editor

1) At line 189 you can change the icon color.

Product page variations

Go to Appearance > Theme Editor

1) At line 194 you can change the background color.

1) At line 195 you can change the border color.

1) At line 196 you can change the text color.

2) At line 204 you can change the text color.

Sale badge

Go to Appearance > Theme Editor

At line 209 you can change the background color.

At line 210 you can change the text color.

Cart page

Go to Appearance > Theme Editor

1) At line 215 you can change the background color.

1) At line 216 you can change the text color.

1) At line 221 you can change the placeholder text color.

2) At line 226 you can change the background color.

2) At line 227 you can change the text color.

3) At line 233 you can change the background color.

3) At line 234 you can change the text color.

4) At line 239 you can change the background color.

4) At line 240 you can change the text color.

Check out V1 and V2 button

Go to Appearance > Theme Editor

At line 258 you can change the background color.

At line 259 you can change the text color.

Notification bar check out V1 and V2

Go to Appearance > Theme Editor

At line 270 you can change the background color.

Icon color check out V2

Go to Appearance > Theme Editor

At line 264 you can change the background color.

Button my account page

Go to Appearance > Theme Editor

At line 275 you can change the background color.

At line 276 you can change the text color.

Change the footer version

Go to Divi > Theme Builder and open the global footer.
You can remove the footer section

1 – Click on any blue + dot.
2 – Click on Add from Library
3 – Choose Footer
4 – Choose your footer
5 – Some footers have 2 section a top and a bottom part you need to add them both and drag them in the correct order.

See the demo website for the variations:
https://avanti.markhendriksen.com/elements/footers/

Customize the slide-in

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

If you want to use a different variation of the slide-in then you can import a new one.

The easiest way to replace the header is to switching to the Wireframe view

The slide-in consists of two sections.
You can remove both sections.

1 – Click on any blue + dot.
2 – Click on Add from Library
3 – Choose Slide-ins
4 – Choose the slide-in you want to use. The slide-ins have 2 section a top and a bottom part you need to add them both and drag them in the correct order.

See the demo website for the variations:
https://avanti.markhendriksen.com/elements/slide-ins/

Enable/disable kenburns effect

Some of the hero headers have a kenburns effect. If you want to remove this effect open that section and go to the advanced tab and remove the class kenburns_header

Customize service side menu

Add new pages to this menu

Go to Appearance > Menus

1) select the services menu

2) add the page to this menu

3) copy/past the font awesome icon

Setting up WooCommerce

Go to Plugins > Add New

Search for WooCommerce and start the installation process.

Setting up the shop page

Go to Divi > Theme Builder

1) Click on the 3 dots to open the assignment tab

2) Click on Manage Template Assignments

3) Check shop

Click save and then click also on the green save button.

Setting up the shop header

To change the default Avanti header to the shop header follow these steps:

https://www.support.markhendriksen.com/documents/avanti#header_and_menu

Setting up the search box

Go to Plugins > Add New

Search for AJAX Search for WooCommerce – by Damian Góra and start the installation process.

After installation go to WooCommerce > Ajax search bar and use these settings.

Setting up the menu cart in header

Go to Plugins > Add New

Search for WooCommerce Menu Cart – by Jeremiah Prummer, Ewout Fernhout and start the installation process.

After installation go to WooCommerce > menu cart Setup and use these settings.

Adding pages to the shop menu

Go to Appearance > Menus

Change the mennu to shopping menu and add your pages to this menu.

Change shop and product template

Go to Divi > Theme Builder

1) This is the template for the shop and product category pages.

2) This is the product page template with sidebar

3) This is the product page template with out a sidebar (currently disabled).

4) To change the template assignment click on the 3 dots.

You can open the custom body to make your edits in the templates.

Change the checkout page

To change the checkout page to version 2 go to the checkout page and enable the visual builder then click on the + symbol.
Then go to the Your Saved Layouts tab and choose checkout page V2 Avanti.

Change the post template

Go to Divi > Theme Builder

Here you will find Post with sidebar and Post fullwidth template. You can change the template assignmnents by hovering over the template and click on the 3 dots.

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