Вкладка 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 — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.
