Команда Повзунок Розділ у Pixpa дозволяє додавати візуально привабливу область на ваші сторінки, одночасно покращуючи SEO. Незалежно від того, чи працюєте ви над галереєю, сторінкою, папкою, альбомом клієнта чи блогом, банер допомагає задати тон і виділити важливий контент.
Якщо ви хочете просто показати текстове повідомлення у верхній частині веб-сайту, скористайтеся Панель оголошень. Або якщо ви хочете створити спливаюче вікно, яке з’являється, коли відвідувачі переглядають ваш веб-сайт, ви можете спробувати Маркетингове спливаюче вікно.
У цій статті
- Що таке банер
- Додати банер на сторінку
- Редагувати розділ банера
- Банерний контент
- Налаштування банера
- Макет банера
Що таке банер
Банер використовується для показу зображення/слайд-шоу зображень/відео на всю ширину вгорі/внизу вашого контенту.
Перевірте демоверсію в реальному часі Банер
Додати банерний розділ на сторінку
- До сторінки можна додати розділ. Ви можете або додати розділ до вже існуючої сторінки, або створити нову сторінку на вашому веб-сайті.
- На вашій сторінці, натисніть на синій + значок додати а Новий розділ на свою сторінку.
- Тепер ви побачите категорії розділів на лівій стороні.
- Виберіть Розділи героїв (1) категорію та натисніть на Повзунок вкладка (2), де ви можете вибрати різні макети в банер (3) розділ.
- Виберіть макет будь-якого розділу та натисніть на нього, щоб додати його на свою сторінку.
Редагувати розділ банера
Якщо розділ вже додано на сторінку, ви можете легко його редагувати.
- Наведіть курсор на розділ і натисніть на нього Редагувати вміст (1) кнопка.
- Відкриється бічна панель, з якої ви зможете Редагувати (2) розділ банера.
- Натисніть Зберегти (3) після внесення змін.
Вміст розділу банера
Команда Вкладка «Вміст». У розділі «Редагувати банер» ви можете додавати та налаштовувати вміст вашого банера, незалежно від того, чи це зображення, чи відео.
Тип банера
Виберіть тип банера. Ви можете вибрати будь-який із наведених нижче варіантів.
- натиснувши кнопку «Слайди» – Виберіть параметр «Слайди», якщо ви хочете відображати зображення на банері. Ви можете додати кілька слайдів із зображеннями під один банер.
- Відео – Якщо ви хочете відображати відео як слайди-банери, виберіть цей варіант. Під кожним банером можна додати кілька відеослайдів.
Ви можете додати до 25 слайдів у розділ банера.
Слайди зображень
Якщо в розділі «Тип банера» вибрано «Слайди», можна створити слайд-шоу, завантаживши кілька зображень як слайди-банери.
- Додайте кілька слайдів, натиснувши + Додати слайди .
- Зміна порядку їх за допомогою ручок перетягування.
- Редагувати або видалити окремі слайди за допомогою відповідних значків.
Редагувати зображення/текстовий слайд
- зображення
- Натисніть на Завантажити кнопку, щоб змінити зображення/слайд. Натисніть на видаляти кнопку, щоб видалити слайд.
- Змініть фокус зображення, просто клацнувши зображення в будь-якому місці.
- Мобільне зображення – Завантажте зображення мобільного банера. Радимо додавати сюди портретні зображення.
- Вкажіть текст заміщення для слайда зображення. Це допомагає для цілей SEO.
- Текст слайда – Введіть текст слайда, який з’явиться на слайді. Ви можете зробити текст напівжирним, курсивом, підкресленим, зробити посилання на нього та багато іншого.
Також див. Текстовий редактор Pixpa.
- Посилання на слайд
-
- Клацніть піктограму налаштувань і введіть накладене посилання для слайда.
- Ви можете вказати будь-яку сторінку всередині/зовні вашого веб-сайту, свою електронну пошту чи контактний номер.
Також перевірте: Текст посилання/кнопка
- Button & Посилання
-
- Додайте до вмісту слайда до 10 кнопок/посилань.
- Ви можете додати звичайну кнопку, текстове посилання або використовувати зображення/піктограму як кнопку.
Також перевірте: Кнопка та посилання
- Вдарте Зберегти , щоб зберегти зміни.
Повний слайд буде перетворено на посилання лише тоді, коли Текст банера та кнопки вибрано параметр як Різні для кожного слайда.
Відео слайди
Коли Відеослайд вибрано опцію , ви можете вбудувати відео з YouTube або Vimeo у свій банер. Доступні такі параметри конфігурації:
1. Посилання на YouTube/Vimeo – Введіть пряме посилання на ваше відео. Підтримувані формати включають:
- YouTube: https://www.youtube.com/watch?v=XXXXXXXXXXX
- Вімео: https://vimeo.com/XXXXXXXXXXX
2. Показати відео – Виберіть, як відео відображатиметься на вашому сайті:
- Автоматичне відтворення: Відео буде вбудовано безпосередньо та автоматично відтворюватися на всіх пристроях (за замовчуванням звук вимкнено).
- Автозапуск – лише для комп’ютерів: Відео буде вбудовано безпосередньо та автоматично відтворюватися лише на комп’ютері (за замовчуванням звук вимкнено).
- Відкрити в лайтбоксі: Натискання на попередній перегляд відео відкриє його у спливаючому вікні.
3. Мобільне зображення – Завантажте резервне зображення, яке відображатиметься на мобільних пристроях, де автоматичне відтворення відео може не працювати або не підтримуватися. Це гарантує, що ваш банер залишатиметься візуально привабливим на екранах усіх розмірів.
4. Вкажіть тег Alt (необов'язково) – Додайте тег alt для покращення SEO та доступності. Він описує резервне зображення для програм зчитування з екрана або у випадках, коли зображення не може бути відображене.
5. Текст слайда – Введіть текст слайда, який з’явиться на слайді. Ви можете зробити текст напівжирним, курсивом, підкресленим, зробити посилання на нього та багато іншого.
Також див. Текстовий редактор Pixpa
6. Посилання на слайд
- Клацніть піктограму налаштувань і введіть накладене посилання для слайда.
- Ви можете вказати будь-яку сторінку всередині/зовні вашого веб-сайту, свою електронну пошту чи контактний номер.
Також перевірте: Текст посилання/кнопка
7. Кнопка & Посилання
- Додайте до вмісту слайда до 10 кнопок/посилань.
- Ви можете додати звичайну кнопку, текстове посилання або використовувати зображення/піктограму як кнопку.
Також перевірте: Кнопка та посилання
8. Зберегти – Вдарте Зберегти кнопка для збереження змін
Текст банера та кнопки
- Укажіть, чи будуть текст і кнопки однаковими для всіх слайдів чи різними для кожного слайда. Коли ви вибираєте Те саме для всіх слайдів варіант, Текст банера та Кнопки буде використовуватися.
- Коли ви виберете Різні для кожного слайда буде використано текст і кнопки, визначені для певного слайда.
Текст банера
- Введіть текст банера, який буде загальним для всіх слайдів.
Також див. Текстовий редактор Pixpa
Кнопки та посилання
- Ці кнопки/посилання з’являються над слайдами вашого банера (загальні для всіх слайдів).
Також перевірте: Кнопка та посилання - Після внесення змін натисніть кнопку Зберегти кнопку у верхньому правому куті, щоб застосувати їх до вашого банера.
Налаштування банера
У вкладці «Налаштування банера» ви отримаєте такі опції:
- Режим відображення банера
- Елементи керування відображенням слайдів
- Стилізація банерів
- карусель
- Кнопки
- Соціальні Іконки
Режим відображення банера
-
- Масштаб і підгонка – Зображення вміщатимуться в ширину та висоту банера.
- Підгонка по ширині (Лише для робочого столу) – зображення буде масштабовано до ширини банера. Висота банера успадкує висоту зображення.
- Висота банера на робочому столі – Укажіть висоту банера робочого столу, якщо ви вибрали повна кровотеча or масштаб і підгонка у полі Режим відображення.
- Висота мобільного банера – Вкажіть висоту мобільного банера.
Елементи керування відображенням слайдів
Ці параметри дозволяють налаштувати вигляд слайдів та перехід між ними в розділі банера.
-
Стиль переходу слайдів – Виберіть, як мають змінюватися слайди. Ви можете вибрати такі параметри, як Згасання, Горизонтальне або вертикальне ковзання для плавного переходу між слайдами.
-
Слайдів у рядку – Вкажіть, скільки рядків слайдів мають бути видимими одночасно.
- Слайдів у колонці – Визначте, скільки стовпців слайдів має відображатися. Це контролює, скільки слайдів відображатиметься поруч у кожному рядку.
- Простір між слайдами – Налаштуйте проміжок між окремими слайдами за допомогою цього параметра. Ви можете збільшити проміжок у пікселях, щоб контролювати візуальне розділення між слайдами.
- Позиція вмісту – Вкажіть положення контенту всередині банера.
- Ширина вмісту – Укажіть ширину вмісту банера.
Стилізація банерів
- Колір фону – Встановити колір фону для банера.
- Колір накладання – Установіть колір накладання для банера.
- Стиль навігації – Вкажіть стиль навігації банера. Ви можете вибрати шеврон, довгі стрілки та короткі стрілки. Виберіть «Немає», якщо ви хочете вимкнути елементи керування навігацією.
- Колір навігації – Укажіть колір навігаційних елементів на банері.
- Увімкнути стрілку прокручування вниз – Виберіть цей параметр, щоб відобразити стрілку прокручування вниз над банером.
- Кутовий радіус – Налаштуйте заокруглення кутів слайда банера. Ви можете застосувати однаковий радіус до всіх кутів або вказати різні значення для кожного кута окремо.
карусель
Ці налаштування визначають, як слайди переміщуються та поводяться автоматично в розділі банера або каруселі.
- Увімкнути плавне прокручування – Увімкніть цей параметр, щоб зробити переходи між слайдами плавнішими для безперешкодного прокручування.
- Увімкнути автовідтворення слайдів – Якщо ввімкнено, слайди автоматично переходитимуть між собою без втручання користувача.
- Показати прогрес автовідтворення – Відображає візуальний індикатор, що показує час перед наступним переходом між слайдами.
- Затримка автовідтворення – Встановіть часовий інтервал між автоматичними переходами між слайдами (наприклад, кожні 4 секунди).
- Карусельний цикл – Увімкніть цю функцію, щоб слайди безперервно циклічно поверталися до першого слайда після останнього.
Кнопки
Ці опції дозволяють налаштувати кнопки, що відображаються в банері.
- Розмір кнопки – Виберіть розмір кнопки з доступних варіантів, таких як маленький, середній або великий.
- Вирівнювання - Встановіть вирівнювання кнопок у розділі (ліворуч, по центру або праворуч).
- Простір між кнопками – Налаштуйте горизонтальний інтервал між кількома кнопками для збалансованого розташування.
- Простір над кнопками – Визначте вертикальний простір між текстом і кнопками (вимірюється в пікселях).
- Розмір текстового посилання – Встановіть розмір шрифту для будь-яких текстових кнопок або посилань.
- Розмір кнопки зображення – Налаштуйте розмір кнопок, що містять значки або зображення.
- Ширина кнопки – Виберіть ширину відображення кнопки, вибравши такі варіанти, як «за замовчуванням», «велика», «дуже велика» або «повна ширина».
Дізнайтеся більше про стилізацію кнопок і посилань.
Соціальні Іконки
Ці налаштування дозволяють налаштувати зовнішній вигляд та стиль значків соціальних мереж, що відображаються в розділі банерів.
- Розмір значка – Відрегулюйте розмір значків соціальних мереж (у пікселях) відповідно до загального дизайну банера.
- Тип значка – Виберіть стиль значка (наприклад, класичний, контурний або суцільний), щоб він відповідав темі банера.
- Колір значка – Виберіть, як визначається колір значка. Варіанти включають:
- Текст посилання – Використовує той самий колір, що й текст посилання розділу.
- На замовлення - Дозволяє вручну вибрати власний колір.
- Колір бренду – Застосовує офіційний колір бренду кожної платформи (наприклад, синій для Facebook).
- Виберіть колір – Якщо вибрано «Налаштування», ця опція дозволяє вибрати певний колір для значків.
Макет банера
Ви можете легко змінити макет банера. Більше інформації про макети банерів.
