• Award Winning Design

    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.

  • Flexible Setting

    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.

  • Volume discount

    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.

Call-to-Action Panel

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

Categories

Panels

Share