Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.
Description: Simple rotator for Call-to-Action panel. This examples uses additional JavaScript code for supplementary animation.
Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.
WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.
Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool
<!-- CTA Panel -->
<div class="container">
<div class="row cta-panel">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<div class="livicon-evo" data-options="
name: trophy.svg;
style: lines;
size: 120px;
strokeColor: #fff;
strokeWidth: 4;
eventOn: none;
autoPlay: true;
delay:2;
drawTime: 1;
drawStagger: 0;
eraseTime: 1;
eraseStagger: 0;
colorsOnHover: none
"></div>
</div>
<div class="col-md-7">
<ul class="list-unstyled">
<li class="first" data-livicon="trophy">
<h3>Award Winning Design</h3>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
</li>
<li data-livicon="settings">
<h3>Flexible Setting</h3>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
</li>
<li data-livicon="piggybank">
<h3>Volume discount</h3>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
</li>
</ul>
</div>
<div class="col-md-3">
<p class="text-center">
<a href="javascript:" type="button" class="btn btn-lg">Purchase</a>
</p>
</div>
</div>
</div>
</div>
</div>
/************ CTA Panel *************/
.cta-panel {
padding: 40px 0 40px 0;
background: #0097A7;
}
.cta-panel h3 {
color: #ffffff;
font-size: 24px;
font-weight: 400;
}
.cta-panel p {
color: rgba(255,255,255,0.7);
font-size: 16px;
font-weight: 400;
}
.cta-panel .livicon-evo {
margin: 0 auto;
opacity: 0.9;
}
.cta-panel ul {
position: relative;
height: 100px;
margin-top: 10px;
}
.cta-panel li {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.cta-panel li.first {
opacity: 1;
}
.cta-panel .btn {
margin-top: 35px;
color: #ffffff;
border-radius: 0px;
background: #00838F;
line-height: 1.5;
font-weight: 900;
font-size: 14px;
padding: 12px 26px;
text-transform: uppercase;
}
@media (max-width: 991px) {
.cta-panel h3 {
text-align: center;
}
.cta-panel p {
text-align: center;
}
}
//Call-to-Action Panel Slider
$(document).ready(function () {
var list = $('.cta-panel li'),
i = 0,
j = 1;
if ( list.get(0) ) {
function slider () {
if ( list[i] === undefined ) { i = 0; };
if ( list[j] === undefined ) { j = 0; };
TweenMax.to( list[i], 1, {top:'50', autoAlpha:0, delay:6, onComplete: function () {
i += 1;
},
onStart: function () {
$('.cta-panel .livicon-evo').changeLiviconEvo({name: $(list[j]).data('livicon')});
}});
TweenMax.set( list[j], {autoAlpha:1, top:0} );
TweenMax.from( list[j], 1, {top:'-50', autoAlpha:0, delay:7, onComplete: function () {
j += 1;
slider();
}});
};
slider();
};
});