Раздел «Добавить видео» на странице позволяет легко добавлять видеоролики с YouTube/Vimeo, которые будут воспроизводиться на странице. Это отличный способ удержать внимание посетителей вашего сайта.
Pixpa поддерживает встраивание видео с YouTube или Vimeo. Вы не можете напрямую загрузить видео на свой веб-сайт. Помимо этого раздела, вы также можете добавить свои видео в галерею или баннер.
Pixpa позволяет делиться ссылками на ваш профиль YouTube или Vimeo в социальных сетях . Вы также можете добавить свои музыкальные файлы, размещенные на Soundcloud, в раздел «Музыка».
Следует отметить:
- Вы можете загрузить файл .gif везде, где поддерживаются видео.
- Если добавленное вами видео сильно загружается, нажмите кнопку воспроизведения и приостановите его на несколько минут. Затем возобновите просмотр видео. Таким образом, он загружается лучше с меньшей буферизацией.
В этой статье:
- Что такое раздел «Видео»?
- Добавить раздел «Видео»
- Добавлять и редактировать элементы списка
- Элементы списка последовательности
- Удаление элементов списка
- Управление элементами
- Изменение макета раздела
- Варианты стиля
- Полная карта и текстовая карта
Раздел видео
Список видео — это коллекция видео, в которую вы можете добавить описание видео и добавить ссылку или кнопку, чтобы связать список видео с любой другой страницей веб-сайта или любой другой ссылкой.
Раздел «Добавить видео»
- На страницу можно добавить раздел. Вы можете добавить раздел на уже существующую страницу или создать новую страницу на вашем сайте.
- На твоей странице, нажмите на синий + значок добавить Новый раздел на вашу страницу.
- Теперь вы увидите опцию категории разделов на левой стороне.
- Нажмите на Контент (1) вариант и Видео (2) вкладка.
- Теперь вы увидите разные макеты Раздел видео (3).
- Выберите любой макет раздела и нажмите на него, чтобы добавить его на свою страницу.
Добавить и изменить элементы списка
Добавить элемент списка видео
После того, как вы добавили раздел
- Нажмите на Редактировать контент (1) кнопка, чтобы открыть панель элементов списка.
- Нажмите Добавить элемент (2) кнопка для добавления нового элемента списка.
- У вас будет возможность Дублировать и удалить (3) элементы списка.
Редактировать элемент списка видео
Нажмите на элемент списка, который вы хотите отредактировать. Это откроет определенные параметры редактирования элемента списка.
- Добавить ссылка на ваше видео на YouTube/Vimeo (1).
Чтобы добавить видео на свой сайт Pixpa, вам нужно загрузить видео на YouTube или Vimeo и ввести здесь его URL-адрес.
- Установите видео для воспроизведения в лайтбокс или только на странице (2).
- Загрузить или удалить (3) миниатюрное изображение элемента списка.
- Добавить Название (4), Подзаголовок (5), и Описание (6) пункта списка. Вы можете не найти параметры «Подзаголовок» и «Описание» в определенных элементах списка в зависимости от выбранного макета.
7. Действие по щелчку
В разделе «Список видео» можно настроить поведение отдельных элементов при нажатии . Ниже представлены доступные параметры:
- Перейти по ссылке
Выбор этой опции открывает Конструктор ссылок, что позволяет вам добавить гиперссылку на этот элемент. Ссылка может направлять пользователей на другую страницу вашего веб-сайта или на внешний URL. Узнать больше о Конструктор ссылок. - Действие отсутствует
Выберите этот параметр, чтобы сделать элемент некликабельным. При выборе этого параметра нажатие на элемент не вызовет никаких действий.
8. Открыть ссылку в новом окне: Настройте открытие ссылки в новой вкладке или в той же вкладке. Эта функция будет видна только в том случае, если в меню «Действия при клике» выбран параметр «Перейти по ссылке».
9. Кнопки и ссылки: Добавьте в элемент списка ссылки любого типа . Вы можете добавить кнопку, изображение, иконку социальной сети или текстовую ссылку. Подробнее.
10. Переопределение стиля карты
Вы можете переопределить глобальные настройки стиля карточек в разделе « Настройки стиля» и настроить внешний вид каждой карточки отдельно в разделе «Список видео». Это позволяет применять уникальные стили к различным элементам списка для более удобной персонализации.
Узнайте больше об опции «Карточки» в динамических разделах.
11. Переопределение стиля формы
Используйте параметр «Переопределить», чтобы назначить каждому миниатюрному изображению в разделе «Список видео» различную форму, что позволит вам лучше контролировать визуальный стиль каждого элемента. Узнайте больше о маске формы.
12. Сохранение: После внесения изменений сохраните их.
См. редактирование элемента списка видео в действии:
Элементы списка последовательностей
- Вы можете легко перетаскивать элементы списка, чтобы изменить последовательность.
Удалить элемент списка
После того, как вы добавили элемент списка, вы можете отредактировать его и удалить.
- Нажмите на Удалить значок рядом с элементом списка видео.
- Нажмите на Удалить кнопку во всплывающем окне подтверждения.
- Сохранено ваши изменения.
Элемент списка после удаления не может быть восстановлен.
Управление элементами списка видео
В разделе «Список видео» есть вкладка «Элементы» , которая позволяет легко управлять видимостью различных элементов в этом разделе. С помощью простых переключателей вы можете включать или отключать определенные элементы, не удаляя и не изменяя сами элементы.
- Нажмите на Редактировать контент (1) кнопка.
- Выберите Elements (2) вкладка.
- После внесения изменений нажмите кнопку Сохранено (3) кнопка.
Опции раздела
- Показать заголовок: Включить или отключить видимость заголовка для раздела «Список видео».
- Показать кнопки: Управление отображением кнопок на уровне раздела.
Параметры элементов
- Показать видео: Переключить видимость видео.
- Показать заголовок: Управление отображением заголовка.
- Показать субтитры: Включить или отключить субтитры.
- Покажите описание: Управление видимостью описаний элементов.
- Показать кнопки: Решите, следует ли отображать кнопки для отдельных элементов.
Макет раздела
- Нажмите на Редактировать контент (1) кнопка, чтобы открыть панель редактирования списка видео.
- Выберите Планировка (2) вкладка.
- Выберите макет для вашего раздела и Сохранено (3) ваши изменения.
Стиль вашего раздела
- Нажмите на Редактировать контент (1) кнопка, чтобы открыть панель редактирования списка видео.
- Выберите Стиль (2) вариант.
- Измените стиль для элементов раздела и Сохранено (3) ваши изменения.
У вас будет несколько вариантов стиля для раздела:
Дисплей
- Выберите Показать элементы in строки и столбцы or карусель
- Если вы выбрали строки и столбцы опция, элементы списка будут расположены в строках и столбцах. В этом случае вам нужно указать количество строк и столбцов.
- Если вы выбрали карусель опция, элементы списка будут представлены в виде слайд-шоу. Узнать больше.
- Установить Число столбцов для списка видео. Вы можете выбрать от 1 до 10 столбцов.
- Укажите Пространство между столбцами из пунктов списка.
- Укажите Пространство между рядами из пунктов списка.
Если на шаге 1 выбрана опция «Карусель», вы увидите следующие дополнительные параметры:
- Включить плавную прокрутку: обеспечивает непрерывную прокрутку элементов в карусели для бесшовного и визуально привлекательного просмотра.
- Авто Слайд: Автоматически переключает слайды без взаимодействия с пользователем.
- Показать прогресс автовоспроизведения: отображает индикатор хода выполнения во время автовоспроизведения для лучшей видимости.
- Задержка автовоспроизведения: Устанавливает временной интервал между каждым переходом слайдов при включенном автовоспроизведении.
- Карусельный цикл: обеспечивает непрерывный цикл слайдов, благодаря чему карусель плавно перезапускается после последнего слайда.
- Карусель управления: Выбрать Элементы управления навигацией. Вы можете выбрать «Без элементов управления», «Стрелки — внизу по центру/вверху справа/внизу справа», «Шеврон», «Точки» и «Горизонтальная прокрутка».
Мобильный дисплей
- Установите количество Столбцы сетки для мобильных устройств. Вы можете установить максимум 3 столбца.
- Определите Расстояние между сетками (в пикселях).
Расположение столбцов для конкретного устройства на основе настроек Studio:
центровка
- Выравнивать контент по горизонтали в списке видео. Вы можете настроить их так, чтобы они были выровнены по левому краю, правому краю или по центру.
- Выравнивать контент по вертикали в списке видео. Вы можете настроить их выравнивание по верху, центру и низу.
- Выберите Порядок содержания то есть изображения элементов списка, которые должны отображаться первыми, или связанный с ними текст.
Размер шрифта
- Нажмите на Изменить стиль текста кнопка для посещения Дизайн и управлять размерами и стилями шрифта.
- Установить Название стиль шрифта для элементов списка раздела.
- Установить подзаголовок стиль шрифта для элементов списка раздела.
- Установить по умолчанию Описание стиль шрифта для элементов списка раздела.
- Включите эту опцию, чтобы анимировать любые числа присутствовать в Название и подзаголовок поля. При включении этой функции числовые значения будут отображаться с динамической анимацией подсчета, что сделает их более привлекательными визуально.
Расстояние
- Укажите Ширина изображения для элементов списка.
- Укажите Ширина содержимого для пунктов списка.
- Укажите Пространство под заголовком раздела в пикселях.
- Укажите Пространство под изображениями элементов списка (в %).
- Укажите Пробел под заголовками элементов списка (в %).
- Укажите Пробел под субтитрами элементов списка (в %).
Заголовок раздела
- Горизонтальное выравнивание текст заголовка раздела. Вы можете задать его слева, по центру и справа.
- Включить/выключить Делитель между заголовком раздела и содержанием раздела.
- Установить толщина разделителя (в пикселях).
- Укажите Цвет разделителя из палитры цветов.
- Выбрать Стиль разделителя из выпадающего списка.
- Установить Ширина заголовка чтобы определить ширину отображения заголовка раздела, начиная с минимального значения 50%.
Варианты изображения
- Выберите обрезка изображения для элементов списка. Вы можете установить изображения как Квадрат, Круг, Пейзаж, Портрет и Динамический.
- Выберите общий радиус угла или разный радиус угла для каждой стороны элементов списка и установите число (в пикселях) для угловой радиус изображений элементов списка. Узнать больше.
Tип
С помощью поля « радиус скругления углов» можно создавать изображения элементов списка различной формы. Если указать значение 500 пикселей, изображения будут отображаться в виде круга.
- Если вы выбрали разделенные углы, вы можете установить разные радиусы углов для каждого угла.
Маска формы
- Маска формы: Включите этот переключатель, чтобы применить маску формы к миниатюрам видео в разделе «Список видео». После включения выбранная форма визуально обрежет миниатюру в этой форме.
- Выберите форму: Выбирайте из различных предопределенных форм для применения к вашим миниатюрам. Это позволяет вам творчески стилизовать ваш контент, отображая изображения в уникальных формах, таких как закругленные, ромбовидные, каплевидные и т. д.
- Параметр «Маска формы» зависит от макета – Он может не отображаться в макетах, где текст, например заголовок или подзаголовок, отображается поверх изображения.
- Настройка Stretch зависит от множества факторов. - В том числе размер, выравнивание и настройки обрезки определяется на вкладке «Стиль».
- Если для параметра «Обрезка изображения» установлено значение «Оригинал»фактические размеры изображения определят, будет ли оно растянуто по вертикали или по горизонтали.
Параметры наведения изображения
- Выберите Цвет при наведении изображения быть акцентный цвет или быть указанный. Если вы выбрали акцентный цвет, затем укажите непрозрачность. Вы можете указать цвет акцента для каждого элемента из Изменить элемент панели.
- Если вы выбрали укажите цвет затем установите Цвет и непрозрачность наложения.
- Установить Цвет наложенного текста который отображается при наведении курсора.
- Выберите Анимация изображений элементов списка при наведении, нажав Да. Проверьте эту функцию на живой странице.
- Выберите Стиль анимации для изображений при наведении на них курсора.
Граница изображения
- Включить/отключить границу вокруг изображений, переключая переключатель.
- Выберите, чтобы иметь общая граница со всех сторон изображения или вы можете указать границы отдельно с каждой стороны.
- Укажите ширина подачи границы. Если установлено значение 0, граница не появится. У вас также есть возможность установить ширину границы индивидуально для каждой стороны изображения.
- Выберите выделяющий цвет из палитры цветов.
- Выберите предпочтительный Стиль обрамления из выпадающего списка.
- Обозначить ширина границы для мобильных устройств устройств, выровняв его по ширине, выбранной для рабочего стола.
Варианты карт
- Посмотрите, как для управления картами.
Параметры тени
- Дисплей – Выберите отображение тени за элементами списка всегда или только при наведении.
- Стиль - Выберите из существующих пресетов или создайте собственную тень.
Если вы выбрали вариант «Пользовательский», посетите этот Генератор теней коробки для создания пользовательской тени. Наконец, скопируйте и вставьте тень окна CSS. - Если вы выбрали опцию пресетов, то Выберите стили теней из выпадающего списка.
Кнопки и ссылки
- Посмотрите, как управлять стилем Кнопки и ссылки.
- Сохранено весь стиль меняется.
Полная карта и текстовая карта
Когда вы включаете Полная/текстовая карта над вашим списком видео элементы списка будут иметь контур и фон с цветом карты, который вы выбрали в Дизайн .
Также см: Цвета и интервалы на сайте.
Полная карта
Когда выбран вариант полной карты, цвет карты применяется ко всей карте, т. е. к миниатюре видео и тексту с ней.
Посмотрите:
Текстовая карта
Когда выбрана опция текстовой карточки, цвет карточки применяется только к тексту, присутствующему на миниатюре видео.
Посмотрите:
