So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
Alternatively
You can download the complete template here
The Following are the css class names I used in the tutorial:
reboot-slider
reboot-bar
reboot-changing-widget
reboot-changing-widget
reboot-changing-widget
reboot-side-slider
reboot-slider-left
reboot-slider-right
The Following code goes into the Slider Container (reboot-slider):
selector{
background: #fff;
--background-speed: 0.5s;
}
selector .elementor-background-slideshow{
display: none;
}
selector .reboot-slider-background,
selector .reboot-slider-background img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s ease-in-out;
}
selector .reboot-slider-background img{
object-fit: cover;
opacity: 0;
transform: scale(1.1);
}
selector .reboot-slider-background img.prev,
selector .reboot-slider-background img.currentBackward,
selector .reboot-slider-background img.currentForward{
opacity: 1;
transform: scale(1.1);
}
selector .reboot-slider-background img.currentBackward,
selector .reboot-slider-background img.currentForward{
z-index: 1;
opacity: 1;
animation: bgNext var(--background-speed) linear;
transition: all 1s ease-in-out;
transform: scale(1);
}
selector:before{
z-index: 2;
}
selector > .elementor-element{
z-index: 3;
}
selector .reboot-bar,
selector .reboot-slider-left,
selector .reboot-slider-right{
opacity: 0;
transition: all 0.8s ease-in-out;
}
selector.loaded .reboot-bar,
selector.loaded .reboot-slider-left,
selector.loaded .reboot-slider-right{
opacity: 1;
}
/*selector .ds-slider-left a:focus,*/
/*selector .ds-slider-right a:focus{*/
/* outline: none !important;*/
/*}*/
@keyframes bgNext {
0% {opacity: 0; transform: scale(1.1);}
100% {opacity: 1; transform: scale(1);}
}
@media (min-width: 768px){
selector .reboot-bar,
selector .reboot-slider-left,
selector .reboot-slider-right{
position: relative;
}
}
@media (max-width: 1380px) and (min-width: 768px){
selector{
padding-left: 4%;
padding-right: 4%;
}
}
@media (max-width: 767px){
selector .reboot-slider-left{
left: calc(50% - 300px/2) !important;
}
selector .reboot-slider-right{
right: calc(50% - 300px/2) !important;
}
}
The Following code goes into the Scroller (reboot-bar):
selector{
--dot-size: 23px;
--line-color: #B0B7D04D;
--dot-color: #B0B7D0;
--dot-color-active: #B0B7D0;
color: #fff;
font-size: 13px;
font-weight: bold;
}
selector{
height: 80vh;
height: var(--min-height);
max-height: 80vh;
min-height: 0 !important;
}
selector .dot{
height: var(--dot-size);
width: var(--dot-size);
background: var(--dot-color);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transform: scale(0.3);
transition: all 0.3s ease-in-out;
cursor: pointer;
}
selector .dot-number{
opacity: 0;
transition: all 0.3s ease-in-out;
}
selector .dot.active{
transform: scale(1);
background: var(--dot-color-active);
}
selector .dot.active .dot-number{
opacity: 1;
}
selector:before{
content: "";
position: absolute;
top: 50%;
height: calc(100% - 20px);
max-height: 90vh;
width: 1px;
background: var(--line-color);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
@media (max-width: 767px){
selector{
transform: translateX(-50%);
flex-wrap: nowrap !important;
}
selector:before {
width: calc(100% - 20px);
height: 1px;
}
}
The Following code goes into the Text Content Container:
@media (max-width: 1750px) and (min-width: 1381px){
selector{
padding-left: 8%;
padding-right: 12%;
}
}
@media (max-width: 1380px) and (min-width: 768px){
selector{
padding-left: 0.5%;
padding-right: 5.5%;
}
}
The Following code goes into the Heading Container (reboot-changing-widget):
selector{
--speed: 0.8s;
--gap: 40px;
}
selector{
transition: all 0.3s ease-in-out;
height: var(--h);
--height: calc(var(--h) + var(--gap));
overflow: hidden !important;
}
selector .elementor-widget{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
selector .elementor-widget .elementor-widget-container{
transform: translateY(calc(-10 * var(--height)));
transition: none !important;
}
selector .elementor-widget.prev .elementor-widget-container{
animation: prev var(--speed) ease-in-out;
transform: translateY(calc(-1 * var(--height)));
}
selector .elementor-widget.next .elementor-widget-container{
animation: next var(--speed) ease-in-out;
transform: translateY(var(--height));
}
selector .elementor-widget.currentUp,
selector .elementor-widget.currentDown{
z-index: 1;
}
selector .elementor-widget.currentUp .elementor-widget-container{
animation: currentUp var(--speed) ease-in-out;
transform: translateY(0);
}
selector .elementor-widget.currentDown .elementor-widget-container{
animation: currentDown var(--speed) ease-in-out;
transform: translateY(0);
}
@keyframes prev {
0% {transform: translateY(0);}
100% {transform: translateY(calc(-1 * var(--height)));}
}
@keyframes next {
0% {transform: translateY(0);}
100% {transform: translateY(var(--height));}
}
@keyframes currentUp {
0% {transform: translateY(var(--height));}
100% {transform: translateY(0);}
}
@keyframes currentDown {
0% {transform: translateY(calc(-1 * var(--height)));}
100% {transform: translateY(0);}
}
The Following code goes into the Text Container (reboot-changing-widget):
selector{
--speed: 0.5s;
--gap: 40px;
}
selector{
transition: all 0.3s ease-in-out;
height: var(--h);
--height: calc(var(--h) + var(--gap));
overflow: hidden !important;
}
selector .elementor-widget{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
selector .elementor-widget .elementor-widget-container{
transform: translateY(calc(-10 * var(--height)));
transition: none !important;
}
selector .elementor-widget.prev .elementor-widget-container{
animation: prev var(--speed) ease-in-out;
transform: translateY(calc(-1 * var(--height)));
}
selector .elementor-widget.next .elementor-widget-container{
animation: next var(--speed) ease-in-out;
transform: translateY(var(--height));
}
selector .elementor-widget.currentUp,
selector .elementor-widget.currentDown{
z-index: 1;
}
selector .elementor-widget.currentUp .elementor-widget-container{
animation: currentUp var(--speed) ease-in-out;
transform: translateY(0);
}
selector .elementor-widget.currentDown .elementor-widget-container{
animation: currentDown var(--speed) ease-in-out;
transform: translateY(0);
}
@keyframes prev {
0% {transform: translateY(0);}
100% {transform: translateY(calc(-1 * var(--height)));}
}
@keyframes next {
0% {transform: translateY(0);}
100% {transform: translateY(var(--height));}
}
@keyframes currentUp {
0% {transform: translateY(var(--height));}
100% {transform: translateY(0);}
}
@keyframes currentDown {
0% {transform: translateY(calc(-1 * var(--height)));}
100% {transform: translateY(0);}
}
The Following code goes into the Testimonial Carousel (reboot-side-slider):
selector{
--radius: 8px;
--height: 320px;
--active-height: 410px;
--overlay: 0.75;
}
selector{
opacity: 0;
transform: translateX(100px);
transition: all 0.8s ease-in-out;
}
selector.loaded{
opacity: 1;
transform: translateX(0);
}
selector .swiper-wrapper{
height: var(--active-height);
align-items: center;
}
selector:not(.loaded) .swiper-wrapper{
transition-duration: 0s !important;
}
selector .swiper-slide{
display: flex;
align-items: flex-end;
border-radius: var(--radius);
height: var(--height);
box-shadow: 0 0 50px rgba(0,0,0,0.15);
}
selector.loaded .swiper-slide{
transition: all 0.3s ease-in-out 0.2s;
}
selector .swiper-slide.swiper-slide-active{
height: var(--active-height);
}
selector .swiper-slide:before{
content: "";
position: absolute;
top: 0;
left: 0;
background: rgb(0,0,0);
background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 100%);
height: 100%;
width: 100%;
z-index: 1;
}
selector .elementor-testimonial__footer{
display: block;
}
selector img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius);
}
selector .elementor-testimonial__cite{
z-index: 2;
position: relative;
}
selector .elementor-testimonial__name{
margin-bottom: 5px;
}
selector .swiper-pagination,
selector .elementor-swiper-button{
display: none;
}
selector .swiper-container{
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1024px){
selector{
--height: 180px;
--active-height: 250px;
}
}
@media (max-width: 767px){
selector{
--height: 80px;
--active-height: 105px;
width: 100% !important;
max-width: var(--container-widget-width, 300px) !important;
}
selector .elementor-testimonial__cite{
opacity: 0;
}
}
The Following code goes into the HTML widget: