Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?
Слайд-шоу заголовков — замечательная функция, которая придает вашему сайту профессиональный вид. Это профессиональная функция Weebly, доступная только для невосприимчивых тем. Бесплатные пользователи также могут использовать альтернативные методы для изменения HTML / CSS и достижения этой цели. В этой статье мы объясняем, как добавить слайд-шоу заголовков Nivo на ваш бесплатный сайт Weebly.
Слайд-шоу заголовков Nivo
Nivo — популярный слайдер jQuery, и у нас есть бесплатный виджет для добавления слайд-шоу в область содержимого. Здесь мы будем использовать тот же виджет слайдера Nivo с небольшими изменениями, чтобы добавить его в область заголовка адаптивных тем Weebly. Вы можете просмотреть четыре различных стиля демонстрации, нажав следующие кнопки:
Как добавить слайд-шоу заголовка на бесплатный сайт Weebly?
В этом примере мы использовали четыре изображения. Второе изображение (up.jpg) связано с веб-страницей и имеет простую текстовую подпись. Четвертое изображение (nemo.jpg) имеет текстовую подпись с гиперссылкой.
Шаг 1. Готовы с изображениями
В приведенных выше демонстрациях используется отзывчивая тема Weebly «Ace Soccer — Birdseye», а изображения используются с размером 618 x 246 пикселей. Мы рекомендуем использовать изображения с более высоким разрешением и одинаковым соотношением ширины и высоты для лучшего качества.
Шаг 2 — Загрузите и загрузите файлы слайдера
Загрузите все необходимые файлы слайдера, нажав кнопку ниже:
Войдите на свой сайт Weebly и перейдите в раздел «Тема> Редактировать HTML / CSS> Активы». Создайте новую папку под названием «nivo».
Создание новой папки в редакторе кода Weebly
Загрузите все файлы слайдера в папку «nivo». Помните, что в архивном файле есть четыре демонстрационных изображения, вы всегда можете заменить изображения своими собственными.
Загрузка файлов в Weebly
Шаг 3 — Создайте новый тип заголовка
Нажмите кнопку + напротив вкладки «Тип заголовка» и создайте новый тип заголовка под названием «Nivo-Bar». Мы хотим добавить слайд-шоу заголовка Nivo с темой Bar в этот тип заголовка.
Создание нового типа заголовка
Скопируйте все содержимое из «no-header.html» и вставьте в заголовок типа «Nivo-Bar.html».
Новый тип заголовка для слайд-шоу
Шаг 4 — Изменение типа заголовка Nivo-Bar.html
В макет «Nivo-Bar.html» нужно добавить три части — CSS, скрипты и HTML. Вставьте приведенный ниже CSS в заголовок макета.
<link rel="stylesheet" href="https://www.webnots.com/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />
В редакторе это должно выглядеть так:
Вставка CSS в тип заголовка
Вставьте приведенные ниже сценарии непосредственно перед закрытием тега body.
<script src="https://www.webnots.com/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>
В редакторе это должно выглядеть так:
Вставка скриптов в заголовок
Последняя часть — вставить приведенный ниже HTML-код прямо над разделом «main-wrap». Не забудьте заменить URL-адреса изображений и гиперссылок своими собственными.
<div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="https://www.webnots.com/files/theme/nivo/toystory.jpg" data-thumb="https://www.webnots.com/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>
В редакторе это должно выглядеть так:
Вставка HTML в заголовок
Окончательный код типа заголовка «Nivo-Bar.html» должен быть таким, как показано ниже. Помните, что это находится на бесплатном сайте Weebly, и мы использовали тему «Ace Soccer — Birdseye».
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://www.webnots.com/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />
</head>
<body class="no-header-page page-has-banner wsite-theme-dark">
<div class="wrapper">
<div class="birdseye-header">
<div class="nav-wrap">
<div class="container">
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
<label class="hamburger"><span></span></label>
</div>
</div>
</div>
<div class="slider-wrapper theme-bar">
<div id="slider" class="nivoSlider">
<img src="https://www.webnots.com/files/theme/nivo/toystory.jpg" data-thumb="https://www.webnots.com/files/theme/nivo/toystory.jpg" alt="Toy Story" />
<a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a>
<img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" />
<img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div>
</div>
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div><!-- /.wrapper -->
<div id="navMobile" class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script src="https://www.webnots.com/files/theme/nivo/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>Сохраните изменения и опубликуйте свой сайт.
Шаг 5 — Выбор типа заголовка слайдера
Если вы хотите, чтобы слайд-шоу заголовка отображалось на странице, выберите тип заголовка «Nivo-Bar» на вкладке «Страницы» для этой конкретной страницы.
Выбор типа заголовка для конкретной страницы
Настройка слайд-шоу заголовков
Слайд-шоу предлагается с 4 различными темами и 12 эффектами перехода изображения. Тему можно изменить, изменив класс CSS в коде HTML. В приведенном выше примере у нас есть тема пользовательской панели с классом CSS «theme-bar», в качестве альтернативы вы можете использовать «theme-default», «theme-dark» или «theme-light». Вы также можете создать четыре разных типа заголовков и выбрать нужный стиль темы для разных страниц.
По умолчанию к каждому изображению будет применен случайный эффект перехода. Вы можете указать конкретный тип перехода для каждого изображения, используя функцию «data-transition» в HTML. Ниже приведен пример HTML-кода, использующего разные эффекты перехода для каждого изображения с темой по умолчанию.
<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="https://www.webnots.com/files/theme/nivo/toystory.jpg" data-thumb="https://www.webnots.com/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>
Вы можете прочитать полные параметры настройки для изменения эффекта перехода, темы, скорости анимации, элементов управления навигацией и добавления миниатюр.
Ищете слайдер в стиле аккордеон, как показано ниже? Узнайте, как добавить слайдер-гармошку на свой сайт Weebly.
Слайдер аккордеона Weebly
