TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

CSS Floating Slideout Widget для Weebly

25

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



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

CSS Floating Slideout Widget для Weebly

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

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

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

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

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

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

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

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

CSS Floating Slideout Widget для Weebly

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

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

CSS Floating Slideout Widget для 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="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. Вставьте элемент информационного бюллетеня на страницу и опубликуйте свой сайт. Если у вас уже есть существующий элемент информационного бюллетеня, вы можете повторно использовать тот же элемент. Теперь откройте страницу с информационным бюллетенем в браузере, перейдите к представлению разработчика, щелкнув правой кнопкой мыши и выбрав опцию проверки элемента.

CSS Floating Slideout Widget для Weebly

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

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

<div id="slideout"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88392-61320d0b64b6e.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 пикселей, как определено с помощью «top» в CSS-классах #slideout и #slideout_inner. Вы можете изменить высоту на любую необходимую в соответствии с вашими потребностями.
  • Ширина выдвижной части – общая ширина выдвижной части определяется как 300 пикселей. Вы можете настроить ширину, изменив параметр «left» в CSS-классах #slideout, #slideout_inner и slideout: hover.
  • Цвета – отрегулируйте цвет выдвижения, изменив «фон» в классе #slideout_inner.
  • Выдвижное изображение и виджет – вы можете использовать любые собственные изображения и вставлять любой сторонний код виджета вместо элемента информационного бюллетеня, как описано выше.

Источник записи: www.webnots.com

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