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

Віджет CSS з плаваючою ковзанням для Weebly

1

Існує багато причин, чому вам потрібно розмістити кнопку заклику до дії на своєму сайті. Наприклад, вам може бути цікаво збирати електронні листи для розсилки інформаційного бюлетеня. Завдання тут полягає в тому, щоб знайти привабливе місце для кнопки, щоб користувачі натискали та діяли на ній. Плаваюча кнопка – це просте рішення цієї проблеми розміщення, яка плаває у фіксованому положенні, коли користувачі прокручують сторінку вниз. Це допоможе збільшити видимість та швидкість натискання на кнопку. У цій статті давайте обговоримо, як створити віджет CSS з плаваючим висувним елементом, який буде вислизати, коли користувач наводить курсор на зображення плаваючої кнопки.



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

Віджет CSS з плаваючою ковзанням для Weebly

Віджет CSS з плаваючим висувним елементом

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

  • Плаваюча кнопка "Зв’яжіться з нами", форма контакту вбудована у висувну сторінку. Ви також можете посилати користувачів на окрему сторінку контактів, посилаючись на сторінку.
  • Кнопка зворотного зв’язку з вбудованою контактною формою будь -якої третьої частини.
  • Будь -які віджети, такі як годинник, погода, календар тощо, як висувний.

Як створити плаваюче розкриття CSS за допомогою кнопки заклику до дії?

Віджет складається з трьох компонентів:

  • Зображення
  • CSS код
  • HTML -код

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

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

Віджет CSS з плаваючою ковзанням для Weebly

Для створення якісних зображень можна використовувати будь -які інструменти обробки зображень, такі як Snagit або Photoshop. Інакше ви можете скористатися такими інструментами, як Paint, вільно доступними на всіх ПК Microsoft. Також ви можете завантажити з Інтернету кнопки Creative Commons, якими можна вільно користуватися на своєму сайті.

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

Віджет CSS з плаваючою ковзанням для 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 за замовчуванням

Тут ми пояснюємо за допомогою елемента інформаційного бюлетеня, і процес залишається незмінним для інших елементів, таких як контактні форми та форми відповіді. Вставте елемент інформаційного бюлетеня на сторінку та опублікуйте свій сайт. Якщо у вас вже є елемент інформаційного бюлетеня, його можна повторно використати. Тепер відкрийте сторінку з інформаційним бюлетенем у браузері, перейдіть до подання розробника, клацнувши правою кнопкою миші та вибравши опцію огляду елемента.

Віджет CSS з плаваючою ковзанням для 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>

Ви можете використовувати контактні форми та форми відповіді так само, як описано вище. Не видаляйте вихідний інформаційний бюлетень або елемент контактної форми з вашого сайту, якщо вихідну форму буде видалено, вбудований код всередині віджета не працюватиме. Для реалізації на веб -сайті можна додати HTML -код у макет нижнього колонтитула сайту, щоб вам не потрібно було вставляти код на кожну окрему сторінку.

Налаштування віджета

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

  • Фіксована висота – фіксована висота плаваючої кнопки становить 80 пікселів, як визначено за допомогою “top” у класах CSS #slideout та #slideout_inner. Ви можете змінити будь -яку необхідну висоту відповідно до ваших потреб.
  • Ширина висувного елемента – загальна ширина висувного елемента визначається як 300 пікселів. Ви можете налаштувати ширину, змінивши параметр “left” у #slideout, #slideout_inner та slideout: hover CSS класах.
  • Кольори – налаштуйте колір висувного матеріалу, змінивши “фон” у класі #slideout_inner.
  • Висувне зображення та віджет – ви можете використовувати будь -які власні зображення та вставляти будь -який код віджета сторонніх виробників замість елемента інформаційного бюлетеня, як описано вище.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі