CSS Floating Slideout Widget для Weebly

Есть много причин, по которым вам нужно разместить кнопку призыва к действию на своем сайте. Например, вы можете быть заинтересованы в сборе электронных писем для рассылки информационных бюллетеней. Задача здесь состоит в том, чтобы найти для кнопки привлекательное место, чтобы пользователи нажимали на нее и действовали по ней. Плавающая кнопка – простое решение этой проблемы размещения, которая перемещается в фиксированном положении, когда пользователи прокручивают страницу вниз. Это поможет повысить видимость и рейтинг кликов по кнопке. В этой статье давайте обсудим, как создать плавающий выдвижной виджет CSS, который будет выдвигаться, когда пользователь наводит курсор на изображение плавающей кнопки.

Как будет выглядеть виджет?

Прежде чем двигаться дальше, мы создали демо чтобы показать, как будет выглядеть виджет. Мы разместили плавающее изображение кнопки подписки с левой стороны с кодом элемента информационного бюллетеня внутри слайда. Форма информационного бюллетеня будет выдвигаться при наведении курсора, и пользователи могут легко подписаться.

CSS-виджет плавающего слайда

Вы можете разместить любой собственный код внутри выдвижного окна, и ниже приведены несколько примеров использования:

  • Плавающая кнопка «Связаться с нами» с формой обратной связи, встроенной в выдвижной элемент. Вы также можете отправить пользователей на отдельную страницу контактов, установив ссылку на страницу.
  • Кнопка обратной связи со встроенной формой обратной связи от третьих лиц.
  • Выдвижные виджеты любого типа, такие как часы, погода, календарь и т. Д.

Как создать плавающий слайд-аут CSS с кнопкой призыва к действию?

Виджет состоит из трех компонентов:

  • Картинка
  • CSS код
  • HTML код

Шаг 1 – Подготовка изображения

Ниже показано изображение, которое мы использовали в демонстрационном виджете. Вы можете подготовить аналогичное изображение примерного размера 50 х 200 пикселей.

Кнопка подписки

Вы можете использовать любые инструменты обработки изображений, такие как Snagit или Photoshop, для создания качественных изображений. Кроме того, вы можете использовать такие инструменты, как Paint, которые бесплатно доступны на всех ПК Microsoft. Также вы можете загрузить кнопки Creative Commons из Интернета, которые можно бесплатно использовать на вашем сайте.

Когда изображение будет готово, перейдите к «Тема> Редактировать HTML / CSS> Активы»В вашем редакторе Weebly. Загрузите изображение на свой сайт, и URL-адрес для доступа к изображению должен иметь вид «http://yoursite.com/files/theme/image-name.jpg«.

Загрузка изображения на сайт Weebly

Загрузка изображения на сайт Weebly

Шаг 2 – CSS-код

Есть два способа использования виджета: один – разместить его по всему сайту, чтобы виджет отображался на всех страницах вашего сайта, а второй – разместить виджет только на определенных страницах вашего сайта Weebly.

Для всего сайта скопируйте приведенный ниже код и вставьте его под “Настройки> SEO> Код заголовка»На вашем сайте Weebly и сохраните изменения. Для уровня страницы вставьте код CSS под «Страницы> Выберите страницу> Настройки SEO> Код заголовка” раздел.

<style type="text/css">
/* Slideout outer button */
#slideout {
position: fixed;
z-index: 1;
top: 80px;
left: 0;
padding: 25px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* Slideout inner widget area */
#slideout_inner {
position: fixed;
top: 80px;
left: -305px;
background: #ffeb3b;
width: 250px;
padding: 25px;
height: 200px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
/* Hover alignment */
#slideout:hover {
left: 300px;
}
#slideout:hover #slideout_inner {
left: 0;
}
</style>

Шаг 3 – HTML-код

Перетащите значок «Код для вставки”В любом месте сайта и вставьте следующий HTML-код:

<div id="slideout">
/* Insert Weebly Image */
<img src="https://www.webnots.com/css-floating-slideout-widget-for-weebly/Your Weebly Image URL" alt="Subscribe" />
<div id="slideout_inner">
<div>
/* Insert Code for Content Shown in Slideout */
</div>
</div>
</div>

Если ваш CSS эффективен на уровне сайта, тогда HTML-код может быть встроен на любую страницу вашего сайта. Если ваш CSS-код действует только на определенной странице, вставьте HTML-код на эту конкретную страницу.

Код HTML состоит из двух частей:

  • Изображение – добавьте URL-адрес изображения вашего собственного сайта Weebly из шага 1.
  • Код виджета будет отображаться на выдвижном элементе. Здесь вы можете добавить любые сторонние коды для встраивания как есть. Если вы хотите использовать элементы Weebly по умолчанию, такие как информационный бюллетень или контактную форму, читайте дальше.
Получение HTML-кода элемента Weebly по умолчанию

Здесь мы объясняем с элементом информационного бюллетеня, и процесс остается таким же для других элементов, таких как контактные формы и формы RSVP.

Вставьте элемент информационного бюллетеня на страницу и опубликуйте свой сайт. Если у вас уже есть элемент информационного бюллетеня, вы можете повторно использовать тот же элемент. Теперь откройте страницу с информационным бюллетенем в браузере, перейдите к представлению разработчика, щелкнув правой кнопкой мыши и выбрав опцию проверки элемента.

Копирование кода элемента информационного бюллетеня

Копирование кода элемента информационного бюллетеня

Наведите указатель мыши на код и скопируйте весь блок кода, связанный с элементом информационного бюллетеня. В таких браузерах, как Chrome, вы можете просто щелкнуть первый тег div и нажать «control + v» или «command + v». Это скопирует весь блок кода для выбранного элемента информационного бюллетеня. Узнайте больше о том, как просмотреть исходный код в Google Chrome. Используйте этот код внутри HTML-кода для выдвижного виджета, и полный HTML-код будет выглядеть, как показано ниже:

<div id="slideout">
<img src="https://img.webnots.com/2016/04/Subscribe-Button.png" alt="Subscribe" />
<div id="slideout_inner">
/* START OF NEWSLETTER ELEMENT CODE */
<div>
<form enctype="multipart/form-data" action="https://widgetcode.weebly.com/ajax/apps/formSubmitAjax.php" method="POST" id="form-100440182464484169" accept-charset="UTF-8" target="form-100440182464484169-target-1480443240994">
<div id="100440182464484169-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="100440182464484169-form-list">
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="input-885026583907653749">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="input-885026583907653749" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="_u885026583907653749">
</div>
<div id="instructions-885026583907653749" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="display:none; visibility:hidden;">
<input type="text" name="wsite_subject">
</div>
<div style="text-align:center; margin-top:10px; margin-bottom:10px;">
<input type="hidden" name="form_version" value="2">
<input type="hidden" name="wsite_approved" id="wsite-approved" value="approved">
<input type="hidden" name="ucfid" value="100440182464484169">
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px"><a class="wsite-button" onclick="document.getElementById('form-100440182464484169').submit()"><span class="wsite-button-inner">Subscribe to Newsletter</span></a>
</div>
</form><iframe name="form-100440182464484169-target-1480443240994" id="form-100440182464484169-target-1480443240994" style="display: none;"></iframe>
</div>
/* END OF NEWSLETTER ELEMENT CODE */
</div>
</div>

Вы можете использовать формы обратной связи и RSVP аналогично тому, как описано выше. Убедитесь, что вы не удалили исходный информационный бюллетень или элемент контактной формы с вашего сайта, если исходная форма будет удалена, встроенный код внутри виджета не будет работать. Для реализации на уровне всего сайта вы можете добавить HTML-код в макет нижнего колонтитула сайта, чтобы вам не нужно было встраивать код на каждую отдельную страницу.

Настройка виджета

Код виджета очень гибкий, и вы можете настроить его в соответствии с вашими потребностями, изменив параметры. Вот несколько вариантов, которые могут вам понадобиться для размещения виджета на вашем сайте:

  • Фиксированная высота – фиксированная высота плавающей кнопки составляет 80 пикселей, как определено с помощью «Топ” в #выскользнуть и #slideout_inner CSS-классы. Вы можете изменить высоту на любую необходимую по вашему желанию.
  • Ширина выдвижной части – общая ширина выдвижной части определяется как 300 пикселей. Вы можете отрегулировать ширину, изменив значок «слеваПараметр в #выскользнуть, #slideout_inner и выдвижение: наведение CSS-классы.
  • Цвета – отрегулируйте цвет выдвижной панели, изменив значок «задний план” в #slideout_inner класс.
  • Выдвижное изображение и виджет – вы можете использовать любые собственные изображения и вставлять любой сторонний код виджета вместо элемента информационного бюллетеня, как описано выше.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *