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