Global styling

Although this tutorial is not an Elementor tutorial, we will refer to specific settings, features and options which only are available in Elementor and necessary for this tutorial. There are tons of Elementor tutorial videos on YouTube.

All fancy animations you see on this page were created using Elementor’s standard settings.

To limit the number of modifications needed on a module level, it’s best practice to use the global settings of Elementor as much as possible, e.g. typefaces, fonts and colors. You can do this in the global settings of the Elementor plugins.

We’ll use the basic integration as starting point (figure 3), which will be using CSS styling to transform it as you can see at the top of this page.

Styling the product page

Styling the page has little to do with Expivi’s configurator, so we can go ahead and change the background color of the page. Because we want to have this background styling on only product pages, we add .single-product to the body element in our CSS code.

body.single-product { 
background-color: transparent; background-image: radial-gradient(at center center, #BDDDDD 20%, #97ACB1 100%); }

This will make it look like this

WooCommerce’s standard layout will have the product name and price above configurator. We don’t want this in our new design, so let’s hide it.

.title-rating-price.xpv_price_top {
	display:none;
}

Changing the column layout of the configurator

WooCommerce’s standard product page 2 column 50/50 layout.

We think the Expivi’s 3D product should standout more, so we change it to a 70/30 layout, making the  column of the options panel narrower and the column of the viewer wider.

Let’s add the following code:

div.expivi_viewer_outer_container {
		width: 69% !important;
		height: 100%!important;
	}
.expivi_viewer_inner_container, #viewer-container {
		width:100% !important;
		height: 70vh !important;
		float:left;
	}
div.summary {
		width: 30%!important;
	}

This will result in the following layout

So what what did we exactly change exactly?

With the CSS styling for div.expivi_viewer_outer_container we make sure that the left column is not 50% but 70%. With the CSS styling applied on div.summary, we make sure that the options column is a bit smaller (30%).

With the CSS styling for .expivi_viewer_inner_container, #viewer-container we make sure that viewer (the window with the 3D product) stretches to full width of the column (70%). While we are at it, we’ve made the viewer much higher with height: 70vh !important;, so the product is shown in its full glory.

To make sure the 2 column isn’t pushed down by the first column, we’ve added float:left; to it.