Как создать слайд-шоу с заголовком на бесплатном сайте 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>

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