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

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

9

Слайд-шоу заголовков – замечательная функция, которая придает вашему сайту профессиональный вид. Это профессиональная функция Weebly, доступная только для невосприимчивых тем. Бесплатные пользователи также могут использовать альтернативные методы для изменения HTML / CSS и достижения этой цели. В этой статье мы объясняем, как добавить слайд-шоу заголовков Nivo на ваш бесплатный сайт Weebly.

Nivo – популярный слайдер jQuery, и у нас есть бесплатный виджет для добавления слайд-шоу в область содержимого. Здесь мы будем использовать тот же виджет слайдера Nivo с небольшими изменениями, чтобы добавить его в область заголовка адаптивных тем Weebly. Вы можете просмотреть четыре различных стиля демонстрации, нажав следующие кнопки:

В этом примере мы использовали четыре изображения. Второе изображение (up.jpg) связано с веб-страницей и имеет простую текстовую подпись. Четвертое изображение (nemo.jpg) имеет текстовую подпись с гиперссылкой.

Шаг 1. Готовы с изображениями

В приведенных выше демонстрациях используется адаптивная тема Weebly «Ace Soccer – Birdseye», а изображения используются с размером 618 x 246 пикселей. Мы рекомендуем использовать изображения с более высоким разрешением с аналогичным соотношением ширины и высоты для лучшего качества.

Шаг 2 – Загрузите и загрузите файлы слайдера

Загрузите все необходимые файлы слайдера. Войдите на свой сайт Weebly и перейдите в раздел «Тема> Редактировать HTML / CSS> Активы». Создайте новую папку под названием «nivo».

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Создание новой папки в редакторе кода Weebly

Загрузите все файлы слайдеров в папку «nivo». Помните, что в архивном файле есть четыре демонстрационных изображения, вы всегда можете заменить изображения своими собственными.

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Загрузка файлов в Weebly

Нажмите кнопку + напротив вкладки «Тип заголовка» и создайте новый тип заголовка под названием «Nivo-Bar». Мы хотим добавить слайд-шоу заголовка Nivo с темой Bar в этот тип заголовка.

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Создание нового типа заголовка

Скопируйте все содержимое из «no-header.html» и вставьте в заголовок типа «Nivo-Bar.html».

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Новый тип заголовка для слайд-шоу

В макет «Nivo-Bar.html» нужно добавить три части – CSS, скрипты и HTML. Вставьте приведенный ниже CSS в заголовок макета.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

В редакторе это должно выглядеть так:

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Вставка CSS в заголовок

Вставьте приведенные ниже сценарии непосредственно перед закрытием тега body.

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

В редакторе это должно выглядеть так:

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Вставка скриптов в заголовок

Последняя часть – вставить приведенный ниже HTML-код прямо над разделом «main-wrap». Не забудьте заменить URL-адреса изображений и гиперссылок своими собственными.

<div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/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>

В редакторе это должно выглядеть так:

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Вставка 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="/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="/files/theme/nivo/toystory.jpg" data-thumb="/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="/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>

Сохраните изменения и опубликуйте свой сайт.

Если вы хотите, чтобы слайд-шоу заголовка отображалось на странице, выберите тип заголовка «Nivo-Bar» на вкладке «Страницы» для этой конкретной страницы.

Как создать слайд-шоу с заголовком на бесплатном сайте Weebly?

Выбор типа заголовка для конкретной страницы

Слайд-шоу предлагается с 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="/files/theme/nivo/toystory.jpg" data-thumb="/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.

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

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