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(); }; });