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

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

69

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

Слайдер изображений Weebly Accordion

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

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

CSS Аккордеонный слайдер

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

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

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

Шаг 1 – Загрузка изображений для слайдера-гармошки

Подготовьте все свои изображения нужного размера. В этом примере мы использовали изображения шириной 640 пикселей. Загрузите все изображения на свой сайт в разделе «Тема> Редактировать 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 не применяются на странице, опубликуйте страницу, чтобы увидеть фактический слайдер.

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

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