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

Як додати слайдер зображень акордеона на веб -сайт Weebly?

2

Weebly пропонує традиційний елемент слайд -шоу зображень для додавання повзунків на ваш сайт. На жаль, це нітрохи не наближається до сучасних слайд -шоу, пропонованих сторонніми провайдерами або плагінами. Ви можете створювати красиво виглядаючі повзунки в стилі акордеона, зроблені виключно за допомогою CSS. У цій статті ми розповімо, як створити слайдер зображення гармошки CSS на веб -сайті Weebly

Повзунок зображення Weebly Accordion

Нижче показано, як буде виглядати стильний повзунок на вашому веб -сайті Weebly.

Як додати слайдер зображень акордеона на веб -сайт Weebly?

CSS Accordion Slider

Як додати слайдер зображень акордеона у Weebly?

Тепер, коли ви побачили повзунок, і якщо він виглядає добре, ось покрокова інструкція щодо додавання повзунка на ваш сайт. Процес складається з трьох простих кроків:

  • Завантаження зображень для слайдера
  • Додавання коду CSS на рівні сторінки або сайту
  • Додавання HTML -коду за допомогою вбудованого елемента коду

Крок 1 – Завантаження зображень для слайдера акордеона

Підготуйте всі свої зображення потрібного розміру. У цьому прикладі ми використовували зображення шириною = 640 px. Завантажте всі зображення на свій сайт у розділі «Тема> Редагувати HTML / CSS > Активи> Завантажити файли (и)…».

Як додати слайдер зображень акордеона на веб -сайт Weebly?

Завантажте зображення в редактор коду Weebly

Ви повинні зберегти URL -адреси завантажених зображень, які потрібно використати на кроці 3. URL -адреса завантаженого зображення буде виглядати так:

https://your-site-name.com/files/theme/image-name.jpg

Крім того, ви можете клацнути правою кнопкою миші на зображенні та отримати URL -адресу, яка має виглядати так:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Як додати слайдер зображень акордеона на веб -сайт Weebly?

Отримати URL -адресу завантаженого зображення

Після завантаження всіх ваших зображень натисніть кнопку «Зберегти» та надайте власну назву для вашої теми.

Крок 2 – Додавання коду CSS

Якщо ви хочете додати повзунок лише на певні сторінки, додайте нижченаведений код CSS у розділі "Сторінки> Виберіть сторінку> Налаштування SEO> Код заголовка" потрібних сторінок.

Як додати слайдер зображень акордеона на веб -сайт Weebly?

Додайте код заголовка на сторінку

Якщо ви хочете додати повзунок на кілька сторінок, ми б рекомендували додати його до основного CSS у розділі «Тема> Редагувати HTML / CSS> Стиль> main.less». Ви також можете додати код у розділі «Налаштування> SEO > Код заголовка».

Як додати слайдер зображень акордеона на веб -сайт Weebly?

Додайте код заголовка на рівні сайту Weebly

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

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

Крок 3 – Додавання HTML -коду

Останній крок – додати нижченаведений HTML -код слайдера, перетягнувши елемент коду для вбудовування у область вмісту потрібної сторінки. Не забудьте замінити посилання на зображення власними посиланнями з кроку 1.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Примітка: Після додавання HTML -коду ви можете побачити, що зображення перераховані один під одним у редакторі Weebly. Це нормально, оскільки ефекти CSS не застосовуються до сторінки, опублікуйте сторінку, щоб побачити фактичний повзунок.

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

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