Multiple Offering Levels Display
$97 OFFER
This is the information about the Heading
$297 OFFER
This is the information about the Heading
$497 OFFER
This is the information about the Heading
Drop the Funnel
Instructions
- Simply go into Row Settings and Save the Row above.
- Edit the Page where you want the Row
- Select - Rows -> Saved
- Drag and Drop the Row in Place
- Go the Row Setting's Advanced Tab
- Double check that the HTML Element Class input contains "product-description-row" (this may or may not have been lost in the import)
- Go to each of the Column Setting's Advanced Tab
- Double check that the HTML Element Class input contains "product-description-column" (this may or may not have been lost in the import)
- Toggle the Main Menu on the Page
- Select Layout CSS & Java Script
- Paste the snippet below into the CSS editor.
- Save the changes.
- Edit the boxes as you see fit to correspond to your offers.
- Yay!
/* ------ Start CSS snipet ----- */
/* Thin lines in background */
.fl-row.product-description-row
{
background-image: linear-gradient(45deg, #ccc8c8 10%, #ffffff 10%, #ffffff 50%, #ccc8c8 50%, #ccc8c8 60%, #ffffff 60%, #ffffff 100%);
background-size: 7.07px 7.07px;
}
/* Zoom in on hover */
.product-description-column .uabb-photo-content {
overflow: hidden;
}
.product-description-column .uabb-photo-content .uabb-photo-img {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
will-change: transform;
}
.product-description-column:hover .uabb-photo-content .uabb-photo-img {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.product-description-column .product-price-button .fl-button-wrap .fl-button {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
will-change: transform;
}
.product-description-column:hover .product-price-button .fl-button-wrap .fl-button {
width: 100%;
height: 80px;
font-size: 50px;
font-weight: 500;
padding-top: 30px;
text-align: center;
}
/* ------ End CSS snipet ----- */