Вкладка Peek-a-Boo CTA следует за зрителем, когда он прокручивает ваши веб-страницы, и после нажатия заполняет форму генерации потенциальных клиентов. Вы никогда не знаете, какая часть контента на вашем веб-сайте станет триггером конверсии, и наличие этого добавленного CTA дает вашему зрителю возможность легко совершать покупки независимо от того, где они находятся на вашем веб-сайте.
Ниже приведены HTML, CSS и JavaScript для добавления вкладки CTA Peek-a-Boo.
Шаг 1
Добавьте приведенный ниже HTML-код над страницей, на которой вы хотите разместить CTA.
<div class="side-widget open"> <div class="inner"> <a href="#contact-us" class="btn btn-blue productCheckout">Contact Us</a> </div> <button class="widget-close">X</button> </div>
Шаг 2
Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.
/* Side Widget */ .side-widget.open { margin-right: 0; } .side-widget { width: 57px; z-index: 9; background-color: #fff; background-color: rgba(255, 255, 255, 0.9); position: fixed; right: 0; top: 52%; text-align: center; margin-right: -45px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .btn.btn-blue:hover { background-color: #1f6fa6; } .btn.btn-blue { background-color: #0082ca; } .btn.btn-blue { background-color: #2483c3; color: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover, a:focus, a:active { text-decoration: none; } .btn { font-family: 'proxima-nova', sans-serif; font-size: 22px; font-weight: 600; padding: 12px 35px; border-radius: 0; text-transform: uppercase; letter-spacing: -0.5px; } .widget-close:hover { color: #ccc; } .widget-close { color: #636363; } .widget-close { position: absolute; left: 3px; top: 0; background: transparent; border: none; color: #fff; font-size: 20px; z-index: 1; }
Шаг 3
Добавьте приведенный ниже код JavaScript в cta.js.
$('.side-widget .widget-close').on('click', function() { $(this).parent().removeClass('open'); }); $('.side-widget .inner').on('click', function(e) { var $parent = $(this).parent(); if (!$parent.is(".open")) { e.preventDefault(); } $parent.addClass('open'); }); $(function() { $('a.btn[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });
Шаг 4
Добавьте приведенные ниже элементы на страницу, где будет жить ваш CTA.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="cta.js"></script>
Первоначально опубликовано здесь, в блоге Solodev Web Design
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.