Installing Avanti Child Theme

Before installing this child theme

  • Install the latest version of Divi on a fresh WordPress installation
  • Check if you met all of the hosting requirements settings under Divi > Support Center

Installing this child theme will overwrite the existing website.

You can install Avanti with the one-click demo import tool (this will install all the pages and settings in one go). Or you can choose to install it manually (in very rare cases the one-click demo import doesn’t work in that case, you can use the manual method).

From your dashboard you can download 2 folders:

  • avanti.zip
  • supplementary-files.zip

You only need the supplementary files if you want to install Avanti manually and if you are using WooCommerce and want to import the filters I have used. The supplementary files folder needs to be unzipped and you will find the files inside.

One-click demo import

Step 1: download and import Avanti child theme

  • Download the folder avanti.zip to your computer.
  • Go 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 Avanti Demo Import and click on Easy demo Import

Then click on the button Import Demo Content.

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

That’s it all the demo content is imported now.

If you want to build a wooCommerce shop follow the additional steps under Avanti eCommerce.

Manual Installation

Use the Manual Installation method in case the one-click demo import does not work for you.

Step 1: download Avanti child theme

  • Download the folder supplementary-product-files.zip to your computer.
  • Unpack this folder.

Step 2: install the Avanti child theme

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

Locate the avanti.zip file in the supplementary-product-files folder 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 3: upload the JSON files

  • Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
    Click on Import and upload Avanti Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload Avanti Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload Avanti Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload Avanti Builder Layouts.json.

Step 4: add the pages

  • Go to Pages > Add New. Give your page a name for example Home.
  • Click on Use Divi Builder
  • Click on choose a premade layout
  • Go to the tab Your Saved Layouts
  • Here you will find all the pages from the demo. Load the Home page and publish it.
  • To add the other pages as in the demo you do the same steps.

Step 5: add a menu

  • Go to Appearance > Menus and create a menu and add your page(s) to it.
  • Go to Settings > Reading. Check A static page
  • Set Homepage: to your home page
  • Leave the post page unset

How to…

Change the home page

Go to Setting> Reading > Your homepage displays under homepage you can change the home page.

Change the header

I will be replacing the default header (header V1) with header V2.

Go to Divi > Theme Builder and open the Global Header

  1. Click on the 3 dots to expand the bottom bar
  2. Click on the + symbol
  3. Click on Your Saved Layouts
  4. Check Header And Menu

Now you can choose your header version. Check the demo site on how they look.

Make sure to uncheck the option Replace Existing Content. In the header is also where the slide-in is. You can not see the slide-in from the visual builder you have to switch to wire frame view (left-bottom).

Now switch to wireframe view (left-bottom).

  • Remove header v1
  • Drag header v2 to the top (above the slide-in)

The reason we do this from wireframe view is that otherwise, you can accidentally remove a part of the slide-in.

If this happens no worries we can import the slide-in again.

Go to Divi > Theme Builder > Global Footer.

Then follow the same steps as changing the header instead check footer in the categories.

Change or remove the slide-in

Go to Divi > Theme Builder > Global Footer.

Switch to wireframe view (left-bottom).

Change content

The image below shows that the slide-in V1 has 2 sections. Here you can change all the colors and content of the slide-in.

Remove or change the slide-in

To remove the slide-in just delete the slide-in sections.

To change the slide-in:

  1. Click on the + symbol
  2. Click on Your Saved Layouts
  3. Check Slide-in

Choose your slide-in version.

Add pages to the services side menu

Go to Appearance > Menus

Choose the Services menu.

Add pages to this menu.

Redirect the contact form to thank you page

In my demo I redirect the user to a thank you page after submitting a contact form.

In the import this is removed otherwise it will redirect to the demo site.

To set this up open the contact form module.

Enable Redirect Url under Redirect.

Place you thank you page URL in the field.

Change the content of the flip boxes

To edit the contents of the flipbox you need to open the layer panel.

Hover over any element of the flipbox and right click with your mouse. This will open up a menu with some options click on Go To Layer to open the layer panel.

This will open the layer panel and now you can open the modules inside the flipbox.

Enable/disable kenburn 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

You can find the background image of each flipbox in the column options > background

Go to Appearance > Menus.

Add this after the menu text:

<span class="menu-badge">New</span>

You can change the text New to something else if you want that.

Avanti eCommerce

Setup WooCommerce

Step 1: Install WooCommerce

Go to plugins and install WooCommerce plugin.

Step 2: Change the home page to an eCommerce home page

Follow the steps in the How to… section “Change the homepage

Step 3: Change the header to the eCommerce header

Follow the steps in the How to… section “Change the header

Step 4: Add the shop menu to the eCommerce header

The eCommerce header has 2 menus. You have to change the top-right menu to the shop menu. Just open that menu and change to the shop menu

To add different pages to this menu go to Appearance > Menus. Change to the shop menu and add your pages to it. 

Step: 5 Add some products

When you do not have any products you will see this on the page:

Add some products to populate these areas. Also, you can open the shop modules and change what is visible. For example, if you do not have products on sale then you can show a category instead.

Setup plugins

Product search box

Go to Plugins > Add New

Search for FiboSearch – AJAX Search for WooCommerce – by FiboSearch Team and start the installation process.

Go to WooCommerce > FiboSearch > Search Bar and use the following settings.

Menu cart in header

Go to Plugins > Add New

Search for WooCommerce Menu Cart – by WP Overnight and start the installation process.

Go to WooCommerce > Menu Cart Setup and use the following settings.

Themify – WooCommerce Product Filter

This is the filter that is used on the shop page.

Go to Plugins and add new.

Search for Themify – WooCommerce Product Filter by Themeify

Install and activate this plugin.

In your download folder Supplementary files (unpack this folder) you will find a file named avanti-filters.json

Go to Product filters and click on Import now import the file avanti-filters.

Under Product Filters > About there is a video and an explanation how this plugin works.

Change the product, cart, and checkout page versions

If you are new to the Theme Builder then I recommend to read the Theme Builder documentation on Elegant Themes.

https://www.elegantthemes.com/documentation/divi/the-divi-theme-builder/

Change the product page version and/or contents

Go to Divi > Theme Builder

You will find here the fullwidth product page and the product page with sidebar (both are on the left-bottom).

The product page with the sidebar is red which means it is not active.

To change the template assignment click on the 3 dots and choose Manage Template Assignments.

Check all Products.

This template will now be used for all products.

Change the product page contents

Click on the pencil of the body template to open it.

Change the cart and/or the checkout page version

Go to Divi > Theme Builder

Click on the body pencil of the cart or checkout template.

To change the layout:

  1. Click on the 3 dots to expand the bar symbol
  2. Click on the + symbol
  3. Click on Your Saved Layouts
  4. Check Woocommercee

Choose your template.

Using Prebuilt Elements

Import prebuilt elements

All the prebuilt elements are saved in the Divi library. To import a prebuilt element do the following:

Go to any page and add a new section by clicking on the blue + symbol.

Then click on the Add from library tab.

You will get an overview of all the available sections. Click on the one you like and it will get imported

Colors

Change the global colors

Avanti has a whole palette of global colors.

If you change the global color it will change for the entire site.

For example, I will change the orange color to green (Avanti has a whole palette of global colors in this example I have just 3).

Open any module, row, or section that has this color.

In the image below I do this with the button module. I go to the button background tab that has the orange global color.

  1. Click on Global
  2. Make sure the orange color is selected
  3. Change the color
  4. Click on the cogwheel

Click on Finish Editing Global Colors. 

You should get a warning if you are sure to change this. Clickon Yes.

Go to Appearance > Theme File Editor.

1) at line 19 you can change the arrow color

2) at line 23 you can change the border color

3) at line 29 you can change the gradient background color

Collapsing mobile menu icon

Go to Appearance > Theme File Editor

1) at line 35 you can change the icon color.

2) at line 36 you can change the icon background color.

Go to Appearance > Theme File Editor

1) At line 41 you can change the text color.
1) At line 42 you can change the background color.

2) At line 47 you can change the text color.
2) At line 48 you can change the background color.

Inner line color home page plumber and renovation

Go to Appearance > Theme File Editor

At lines 53, 54, 58, and 59 you can change the line color.

Photography blog background color

Go to Appearance > Theme File Editor

At line 64 you can change the blog background color.

Service side menu

Go to Appearance > Theme File Editor

1) at line 69 you can change the inactive tab text color.

2) at line 70 you can change the inactive tab background color.

3) at line 71 you can change the inactive tab border color.

4) at line 76 you can change the current and hover tab text-color

5) at line 80 you can change the active tab text-color

6) at line 84 you can change the active tab background gradient color

Go to Appearance > Theme File Editor

1) at line 89 you can change the inactive tab text color.

2) at line 90 you can change the inactive tab background color.

3) at line 94 you can change list-icon color.

Portfolio grid navigation

Go to Appearance > Theme File Editor

1) at line 99 you can change the title bar background color.

2) at line 103 you can change the meta background color.

3) at line 107 you can change the active tab background color.
3) at line 108 you can change the active tab text color.

Team member V1 and V2

Go to Appearance > Theme File Editor

1) at line 122 you can change the background color.

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

Colors WooCommerce

Cart menu text color

Go to Appearance > Theme File Editor

1) at line 136 you can change the text color.

Shop hover title image “See Details”

Go to Appearance > Theme File Editor

1) at line 142 you can change the text “See Details”.
1) at line 143 you can change the background-color.

Go to Appearance > Theme File Editor

1) at line 148 you can change the border color.
1) at line 149 you can change the text color.

2) at line 154 you can change the background color
2) at line 155 the text color.

Sale badge

Go to Appearance > Theme File Editor

On line 164 you can change the background color.
On line 165 you can change the text color.

My account button

Go to Appearance > Theme File Editor

on line 170 you can change the background color.
On line 171 you can change the text color.

Variable price

Go to Appearance > Theme File Editor

On line 176 you can change the text color.

Shop filters

Go to Appearance > Theme File Editor

On line 181 you can change the title color.

On line 185 you can change the price bar color.

Updating Avanti

Avanti does not have a traditional 1 click button to update it. The reason for this is that you likely have made some changes in the CSS file (colors, etc). Updating with a 1-click will overwrite these edits.

Bug fixes etc. will be provided through this documentation (in most cases just a little CSS copy/paste).

New layouts are added to the new package.

If you have version 1.1 you do not need to do anything. To check which version you have go to Appearance > Themes and click on Avanti theme.

Update CSS

Below you will find the CSS for the fixes in Avanti 1.1.

Copy/paste the below CSS in:

Divi > Theme Options > CSS

/* ####### Update 1.1 fixes ####### */

/* ####### Menu cart outlining ####### */
li.wpmenucart-display-standard {
	margin-top: 4px !important;
}

/* ####### Sale badge ####### */
.et_pb_shop.shop_module ul.products li.product .onsale,
.et_pb_wc_related_products.shop_module ul.products li.product .onsale,
.et-db #et-boc .et-l .et_pb_shop_0_tb_body.shop_module ul.products li.product .onsale {
	padding: 0px !important
}

/* ####### Product page dropdown attributes ####### */
.woocommerce div.product form.cart .variations td {
	padding: 7px 20px 20px 0 !important;
}

.woocommerce div.product form.cart .variations td:last-child {
	padding-bottom: 0px !important;
}

/* ####### Product page notice box outlining ####### */
.woocommerce-message {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

.woocommerce-message a.wc-forward {
	margin: 0 0 0 auto;
}

/* ### Shop "See Details" fix ### */
.shop_module .et_overlay:before, .et-db #et-boc .et-l .et_pb_shop.shop_module .et_overlay:before {
	font-family: 'Work Sans',Helvetica,Arial,Lucida,sans-serif !important;
	font-size: 18px;
	font-weight: 400;
	position: absolute;
	left: 50% !important; 
	bottom: -1px !important;
	top: unset;
	margin: 0px;
	width: 102%;
	transform: translate(-50%,0%) !important;
	text-align: center;
	padding: 10px 0px 10px 0px !important;
	-webkit-transition: all .25s cubic-bezier(.645,.045,.355,1);
	-khtml-transition: all .25s cubic-bezier(.645,.045,.355,1);
	-moz-transition: all .25s cubic-bezier(.645,.045,.355,1);
	-ms-transition: all .25s cubic-bezier(.645,.045,.355,1);
	-o-transition: all .25s cubic-bezier(.645,.045,.355,1);
	transition: all .25s cubic-bezier(.645,.045,.355,1);
	opacity: 0;
}

/* ### Cart apply coupon button height ### */
.woocommerce-cart .woocommerce-cart-form .coupon {
	display: flex !important;
}

/* ### Team member social media fix ### */
.custom_teammember .et_pb_member_social_links {
	bottom: 100px !important;
}

/* ### Slide-in V4 overlapping ### */
.et-l--footer .et_builder_inner_content {
	z-index: 999999 !important;
}

/* ### Portfolio 4 column fix ### */
@media (min-width: 981px) {
.et_pb_gutters3 .et_pb_column_4_4 .custom_portfolio_grid-4-column .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
	clear: none !important;
}

.et_pb_gutters3 .et_pb_column_4_4 .custom_portfolio_grid-4-column .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n) {
	margin-right: 3% !important;
}

.et_pb_gutters3 .et_pb_column_4_4 .custom_portfolio_grid-4-column .et_pb_grid_item.et_pb_portfolio_item.last_in_row {
	margin-right: 0% !important;		
}}

@media (max-width: 980px) {
.et_pb_column .custom_portfolio_grid-4-column .et_pb_grid_item.et_pb_portfolio_item:nth-child(3n+1) {
	clear: none !important;
}

.et_pb_column .custom_portfolio_grid-4-column .et_pb_grid_item.et_pb_portfolio_item:nth-child(3n) {
    margin-right: 5.5% !important;
}

.et_pb_column .custom_portfolio_grid-4-column .et_pb_grid_item.et_pb_portfolio_item.last_in_row  {
    margin-right: 0% !important;
}}

/* ### Portfolio 3 column fix ### */
@media (min-width: 981px) {
.et_pb_gutters3 .et_pb_column_4_4 .custom_portfolio_grid_3_column .et_pb_grid_item.et_pb_portfolio_item.last_in_row {
	margin-right: 0% !important;		
}

.custom_portfolio_grid_3_column .et_pb_grid_item:nth-child(3n) {
	margin-right: 5.5% !important;
}}

@media (max-width: 980px) {
.et_pb_column .custom_portfolio_grid_3_column .et_pb_grid_item.et_pb_portfolio_item:nth-child(3n+1) {
	clear: none !important;
}
	
.custom_portfolio_grid_3_column .et_pb_grid_item.first_in_row {
    clear: both !important;
}

.et_pb_column .custom_portfolio_grid_3_column .et_pb_grid_item.et_pb_portfolio_item.last_in_row  {
    margin-right: 0% !important;
}

.custom_portfolio_grid_3_column .et_pb_grid_item:nth-child(3n) {
	margin-right: 5.5% !important;
}}

/* ### Portfolio 2 column fix ### */
@media (max-width: 980px) {
.et_pb_column .custom_portfolio_grid_2_column .et_pb_grid_item.et_pb_portfolio_item:nth-child(3n+1) {
    clear: none !important;
}
	
.custom_portfolio_grid_2_column .et_pb_grid_item.first_in_row {
    clear: both !important;
}
	
.et_pb_column .custom_portfolio_grid_2_column .et_pb_grid_item.et_pb_portfolio_item.last_in_row  {
    margin-right: 0% !important;
}

.custom_portfolio_grid_2_column .et_pb_grid_item:nth-child(3n) {
	margin-right: 5.5% !important;
}}

New layouts

Avanti 1.1 also comes with some new layouts. If you are starting with a new website just download the latest package and all are included.

If you do not need these layouts for your site you can skip this.

If you have an existing Avanti website and you want to use one of the new layouts then you can install the Avanti Builder Layouts.json file into your Divi library.

Download the latest Avanti supplementary-product-files.zip folder and unpack it. Inside this folder, you will find the file Avanti Builder Layouts.json

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

You can then use these layouts for new pages.

Need Help?

Email: info@markhendriksen.com