Select Page

Customizing Divi slider –  CSS

01 - Custom slider 1

This place is a true gem !
The food is exquisite, delicate and refined.
We stumbled upon this restaurant and were truly delighted.
This is the best table in limone and we spent an amazing evening.

AMINE GUELZIN
Italy

02

Sweetness varies from very dry to medium-sweet. Their rich fruitiness is typically balanced with a crisp acidity. Ideal for toasts, socialising and buffets, or to accompany shellfish, fish and vegetable dishes. Sweetness varies from very dry to medium-sweet. Their rich fruitiness is typically balanced with a crisp acidity. Ideal for toasts, socialising and buffets, or to accompany shellfish, fish and vegetable dishes.

3b Blanc de Blancs Brut Nature 2021
Filipa Pato

03

Our task must be to free ourselves by widening our circle of compassion to embrace all living creatures and the whole of nature and its beauty.

ALBERT EINSTEIN
physicist

Custom Slider (animations disabled, bottom arrows):

1. Disable Theme options > (General) Performance > Dynamic Icons

2. Open slider settings > advanced >
→ add css class: tgs
→ add to Custom Css slider description > animation-name: none;

3. Add Custom css below as you prefer:
→ use code module (add css inside tags  <style></style>
OR
→ in Divi Theme options > general, custom css

OR
→ in Divi Child Theme css file

.tgs .et-pb-arrow-prev::before {
content: "\23";
position: relative;
font-size:35px;
}

.tgs .et-pb-arrow-next::before {
content: "\24";
position: relative;
font-size:35px;
}
  
.tgs .et-pb-arrow-next {
opacity: 1;
right: 3%;
position:absolute;
top:95%;
}
.tgs.et_pb_slider:hover .et-pb-arrow-next {
right: 3%;
}
.tgs .et-pb-arrow-prev {
opacity: 1;
position:absolute;
top:95%;
left:85%;
}
.tgs.et_pb_slider:hover .et-pb-arrow-prev {
left: 85%;
}

@media only screen and (max-width: 600px) {
.tgs .et-pb-arrow-prev {
left:70%;
.tgs.et_pb_slider:hover .et-pb-arrow-prev {
left: 70%;
}
.tgs .et-pb-arrow-next {
right:4%;
}
.tgs.et_pb_slider:hover .et-pb-arrow-next {
right:4%;
}
}

Custom slider 2

01 - custom slider 2

This place is a true gem !
The food is exquisite, delicate and refined.
We stumbled upon this restaurant and were truly delighted.
This is the best table in limone and we spent an amazing evening.

AMINE GUELZIN
Italy

02

Sweetness varies from very dry to medium-sweet. Their rich fruitiness is typically balanced with a crisp acidity. Ideal for toasts, socialising and buffets, or to accompany shellfish, fish and vegetable dishes. Sweetness varies from very dry to medium-sweet. Their rich fruitiness is typically balanced with a crisp acidity. Ideal for toasts, socialising and buffets, or to accompany shellfish, fish and vegetable dishes.

3b Blanc de Blancs Brut Nature 2021
Filipa Pato

03

Our task must be to free ourselves by widening our circle of compassion to embrace all living creatures and the whole of nature and its beauty.

ALBERT EINSTEIN
physicist

Custom Slider (animations disabled, bottom arrows):

Follow the same instructions as above + Change css to: tgs2

/* custom slider arrows for DIVI theme */

 .tgs2 .et-pb-arrow-prev::before {
content: "\23";
font-size:35px;
}

.tgs2 .et-pb-arrow-next::before {
content: "\24";
font-size:35px;
}
.tgs2 .et_pb_slider {
    position:relative;
  }

.tgs2 .et-pb-arrow-next {
opacity: 1;
position:relative;
  left:87%;
  top:0px;}
  
.tgs2.et_pb_slider:hover .et-pb-arrow {
left: 87%;
}
.tgs2 .et-pb-arrow-prev {
opacity: 1;
position:relative;
left:85%;
  top:0px;
}
.tgs2.et_pb_slider:hover .et-pb-arrow-prev {
left: 85%;
  }

@media only screen and (max-width: 600px)
{
.tgs2 .et-pb-arrow-prev {
left:70%;
}
.tgs2.et_pb_slider:hover .et-pb-arrow-prev {
left: 70%;
}
}

@media only screen and (max-width: 600px)
{
.tgs2.et_pb_slider:hover .et-pb-arrow-prev {
left: 70%;
}
.tgs2 .et-pb-arrow-next {
left:75%;
}
.tgs2.et_pb_slider:hover .et-pb-arrow-next {
left:75%;
  }
}

Custom slider 3 – customized arrows, slider image on the right + image on the top (mobile), custom h3, custom list style; plus more

Skin-Strengthening Hyaluronic Acid Super Serum

A Hyaluronic Acid serum with an Adaptogenic complex that strengthens skin and boosts radiance.

  • list-item 1
  • list-item 2 when you have text in two rows

$95.00

Order

The Ultimate Skincare Kit

A collection of daily essentials featuring our customer-favorite formulas for hydrated, healthy-looking skin.

  • list-item 1

$125.00

Order

Up-The-Moisture Skincare Starter Set

A 3-step set of skincare essentials to help intensively hydrate and visibly replenish dry skin.
Set Contains:

  • Ultra Facial Cleanser 75ml
  • Hyaluronic Acid Pure Serum 30ml
  • Ultra Facial Cream 28ml

$110.00

Order

Custom Slider (animations disabled, bottom arrows):

1. Disable Theme options > (General) Performance > Dynamic Icons

2. Open slider settings > advanced >
→ add css class: tgs3
→ add to Custom Css slider title > animation-name: none; float:left;

3. Add Custom css below as you prefer:
→ use code module (add css inside tags  <style></style>
OR
→ in Divi Theme options > general, custom css

OR
→ in Divi Child Theme css file

 
/* custom slider arrows for DIVI theme */

.tgs3 .et_pb_slide_image {
animation-name:none;
right: 0px;
margin-right:0px;
  }
  
.tgs3  .et_pb_slide:first-child .et_pb_slide_image img.active{
    animation-name:none;
  }
  
 .tgs3 .et-pb-arrow-prev::before {
content: "\23";
font-size:35px;
   background: white;
padding: 1% 2%;
}

.tgs3 .et-pb-arrow-next::before {
content: "\24";
font-size:35px;
  background: white;
padding: 1% 2%;
}
.tgs3 .et_pb_slider {
    position:relative;
  }

.tgs3 .et-pb-arrow-next {
opacity: 1;
position:relative;
  left:0%;
  top:3px;}
  
.tgs3.et_pb_slider:hover .et-pb-arrow-next {
left: 0%;
}
.tgs3 .et-pb-arrow-prev {
opacity: 1;
position:relative;
left:0%;
  top:3px;
}
.tgs3.et_pb_slider:hover .et-pb-arrow-prev {
left: 0%;
  }
  
  .tgs3 .et_pb_slide_description h3 {
    font-size:25px;
  color:black;
  border-bottom:6px rgba(165,128,0,0.53) solid;
  display:inline-block;
  padding-bottom:0px
  }
  
.tgs3 .et_pb_slide_description li::before {
  content: "\4e";
  font-family: Etmodules;
  position: absolute;
margin-left: -20px;
  color:#a57f00;
  font-weight:bold;
  display:list-item;
}
  .tgs3 .et_pb_slide_description ul {
    list-style:none;
  }
  .tgs3 .et_pb_slide_description ul {
    margin:5px;
  }


@media only screen and (max-width: 600px)
{
.tgs3 .et-pb-arrow-prev {
left:0%;
  }
  .tgs3.et_pb_slider:hover .et-pb-arrow-prev {
left: 0%;
}
  .tgs3 .et-pb-arrow-next {
left:0%;
}
  .tgs3.et_pb_slider:hover .et-pb-arrow-next {
left:0%;
  }
  .tgs3 .et_pb_slides .et_pb_slider_container_inner {
  vertical-align: top;
}
  .tgs3 .et_pb_slides .et_pb_slider_container_inner {
  vertical-align: top;
}
 
.tgs3 .et_pb_slide_image { 
  display:block !important;
width:80%;
margin:10px auto;
  }
}

  
@media (min-width: 601px) and (max-width: 1024px) 
{
.tgs3 .et-pb-arrow-next {
left:0%;
}
  .tgs3.et_pb_slider:hover .et-pb-arrow-next {
left:0%;
  }
  .tgs3 .et-pb-arrow-prev {
left:0%;
}
  .tgs3.et_pb_slider:hover .et-pb-arrow-prev {
left:0%;
  }
}

Thanks for your Order!

img OK