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

Як створити слайд -шоу заголовків на безкоштовному веб -сайті Weebly?

2

Слайд -шоу Header – це чудова функція, яка надає професійний вигляд вашому сайту. Це професійна функція у Weebly і доступна лише для тем, що не реагують. Безкоштовні користувачі також можуть використовувати альтернативні методи для зміни HTML/CSS і досягти цього. У цій статті ми пояснюємо, як додати слайд -шоу заголовків Nivo на ваш безкоштовний сайт Weebly.

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

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

Крок 1 – Готові до ваших зображень

У наведених вище демонстраційних версіях використовується адаптивна тема “Ace Soccer – Birdseye" Weebly, а зображення використовуються з розміром 618 x 246 px. Ми рекомендуємо використовувати зображення більш високої роздільної здатності з подібним співвідношенням ширини та висоти для кращої якості.

Крок 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 "тема-панель", ви також можете використовувати "тему-за замовчуванням", "темно-тему" або "тему-світло". Ви також можете створити чотири різні типи заголовків та вибрати необхідний стиль теми для різних сторінок.

За замовчуванням ефект випадкового переходу буде застосовано до кожного зображення. Ви можете згадати конкретний тип переходу для кожного зображення, використовуючи функцію "перехід даних" у 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.

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

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