Розділ відео

Додайте розділ «Відео» на сторінку, щоб легко додавати відео з YouTube/Vimeo, які відтворюватимуться на сторінці. Це чудовий спосіб зацікавити відвідувачів вашого веб-сайту.

Pixpa підтримує вбудовування відео з YouTube або Vimeo. Ви не можете безпосередньо завантажити відео на свій вебсайт. Окрім цього розділу, ви також можете додавати свої відео до Галереї або Банера.

Pixpa дозволяє вам ділитися своїм профілем YouTube або Vimeo у посиланнях на соціальні мережі . Ви також можете додавати свої музичні файли, розміщені на Soundcloud, у розділі «Музика».

Моменти, на які слід звернути увагу:

  • Ви можете завантажити файл .gif скрізь, де підтримуються відео.
  • Якщо відео, яке ви додали, часто завантажується, натисніть кнопку відтворення та призупиніть його на кілька хвилин. Потім відновіть відео. Таким чином, він завантажується краще з меншою буферизацією.

У цій статті:

  1. Що таке розділ «Відео»?
  2. Додати розділ відео
  3. Додавання та редагування елементів списку
  4. Послідовність елементів списку
  5. Видалення елементів списку
  6. Керування елементами
  7. Зміна макету розділу
  8. Варіанти стилю
  9. Повна картка та текстова картка

Розділ відео

Список відео – це колекція відео, до якої можна додати опис відео та додати посилання або кнопку, щоб зв’язати список відео з будь-якою іншою сторінкою на веб-сайті чи будь-яким іншим посиланням.


Розділ «Додати відео»

  • До сторінки можна додати розділ. Ви можете або додати розділ до вже існуючої сторінки, або створити нову сторінку на вашому веб-сайті.
  • На вашій сторінці, натисніть на синій + значок додати а Новий розділ на свою сторінку.

  • Тепер ви побачите категорії розділів на лівій стороні.
  • Натисніть на зміст (1) варіант і Відео (2) вкладка.
  • Тепер ви побачите різні макети в Розділ відео (3).

  • Виберіть макет будь-якого розділу та натисніть на нього, щоб додати його на свою сторінку.

Додавання та редагування елементів списку

Додати елемент списку відео

Після додавання розділу

  • Натисніть на Редагувати вміст (1), щоб відкрити панель елементів списку.

  • Натисніть Додати елемент (2), щоб додати новий елемент списку.
  • У вас буде можливість Створити копію та видалити (3) пункти списку.


Редагувати елемент списку відео

Клацніть елемент списку, який потрібно редагувати. Відкриються параметри редагування конкретного елемента списку.

  • додавати посилання на ваше відео з YouTube/Vimeo (1).

Примітка:

Щоб додати відео на свій веб-сайт Pixpa, вам потрібно завантажити відео на YouTube або Vimeo та ввести URL-адресу тут.

  • Налаштуйте відтворення відео в a лайтбокс або лише на сторінці (2).

  • Завантажити або видалити (3) ескіз для елемента списку.

  • Додавати назва (4), Підзаголовок (5), і Опис (6) пункту Переліку. Ви можете не знайти параметрів «Підзаголовок» і «Опис» у певних елементах списку, залежно від вибраного вами макета.

7. Дія при натисканні

Ви можете налаштувати поведінку кліків окремих елементів у розділі «Список відео» . Нижче наведено доступні опції:

  • Перейдіть за посиланням
    Вибір цієї опції відкриває Конструктор посилань, що дозволяє додати гіперпосилання до цього елемента. Посилання може спрямовувати користувачів на іншу сторінку вашого веб-сайту або зовнішню URL-адресу. Більше інформації Про бренд Конструктор посилань.
  • Дія відсутня
    Виберіть цей параметр, щоб зробити елемент неактивним. Якщо об’єкт вибрано, натискання на нього не запускатиме жодних дій.

8. Відкрити посилання в новому вікні: Налаштуйте відкриття посилання в новій вкладці або в тій самій вкладці. Це буде видно лише тоді, коли в меню «Дія після кліку» вибрано опцію «Перейти до посилання».

9. Кнопки та посилання: Додайте будь-який тип посилання до елемента списку. Ви можете додати посилання на кнопку/зображення/значок соціальної мережі/текстове посилання. Дізнайтеся більше.

10. Перевизначення стилю картки

Ви можете змінити глобальні налаштування стилю картки в розділі « Налаштування стилю» та налаштувати картку кожного елемента окремо в розділі «Список відео». Це дозволяє застосовувати унікальні стилі до різних елементів списку для кращого налаштування.

Дізнайтеся більше про опцію «Картки» в динамічних розділах.

11. Перевизначення стилю фігури

Використовуйте опцію «Перезамінити», щоб призначити різну форму кожній мініатюрі окремо в розділі «Список відео», що дасть вам більше контролю над візуальним стилем кожного елемента. Дізнайтеся більше про маску форми.

12. Зберегти: Після внесення налаштувань збережіть зміни.


Перегляньте редагування елемента списку відео в дії:


Елементи списку послідовності

  • Ви можете легко перетягнути елементи списку, щоб змінити послідовність.

Видалити елемент списку

Додавши елемент списку, ви можете редагувати його та видаляти.

  • Натисніть на видаляти поруч із пунктом Список відео.
  • Натисніть на видаляти у спливаючому вікні підтвердження.
  • Зберегти ваші зміни.

Примітка:

Видалений елемент списку не можна відновити.


Керування елементами списку відео

Розділ «Список відео» містить вкладку «Елементи» , яка дозволяє легко керувати видимістю різних елементів у розділі. За допомогою простих перемикачів можна вмикати або вимикати певні елементи, не видаляючи чи змінюючи їх самі.

  • Натисніть на Редагувати вміст (1) кнопка.

  • Виберіть Елементи (2) вкладка.
  • Після внесення змін натисніть Зберегти (3) кнопка.

Параметри розділу

  1. Показати заголовок: увімкніть або вимкніть видимість заголовка для розділу "Список відео".
  2. Показати кнопки: керування відображенням кнопок на рівні розділу.

Параметри елементів

  1. Показати відео: перемикання видимості відео.
  2. Показати заголовок: керування відображенням заголовка.
  3. Показати субтитри: увімкнення або вимкнення субтитрів.
  4. Показати опис: керування видимістю описів предметів.
  5. Показати кнопки: Вирішіть, чи мають відображатися кнопки для окремих елементів.


Макет розділу

  • Натисніть на Редагувати вміст (1), щоб відкрити панель редагування списку відео.

  • Виберіть макет (2) вкладка.
  • Виберіть Макет для свого розділу та Зберегти (3) ваші зміни.


Стилізуйте свій розділ

  • Натисніть на Редагувати вміст (1), щоб відкрити панель редагування списку відео.

  • Виберіть стиль (2).
  • Змініть стиль для елементів розділу та Зберегти (3) ваші зміни.

Ви матимете кілька варіантів стилю для розділу:

    1. Параметри відображення 
    2. Мобільний дисплей
    3. Вирівнювання
    4. Розмір шрифту
    5. Відстань
    6. Заголовок розділу
    7. Параметри зображення
    8. Форма Маска
    9. Параметри наведення зображення
    10. Варіанти кордону
    11. Варіанти карток
    12. Параметри тіні
    13. Кнопка та посилання

 


дисплей

  1. Виберіть Показати елементи in рядки та стовпці or карусель 
    • Якщо ви вибрали рядки та стовпці пункти списку будуть упорядковані в рядки та стовпці. У цьому випадку потрібно вказати кількість рядків і стовпців.
    • Якщо ви вибрали карусель пункти списку будуть представлені у вигляді слайд-шоу. Більше інформації.
  2. Встановіть Кількість стовпців для списку відео. Ви можете вибрати від 1 до 10 стовпців.
  3. Вкажіть Відстань між колонками елементів списку.
  4. Вкажіть Відстань між рядами елементів списку.

Якщо на кроці 1 вибрано параметр «Карусель», ви побачите такі додаткові параметри:

  1. Увімкніть плавне прокручування: дозволяє безперервно прокручувати елементи в каруселі для бездоганного та візуально привабливого досвіду.
  2. Авто слайд: автоматично обертається між слайдами без участі користувача.
  3. Показати прогрес автовідтворення: для кращої видимості відображає індикатор прогресу, коли активовано автовідтворення.
  4. Затримка автовідтворення: встановлює інтервал часу між кожним переходом слайдів, коли ввімкнено автоматичне відтворення.
  5. Петля каруселі: вмикає безперервне повторення слайдів, тому карусель плавно перезапускається після останнього слайда.
  6. Елементи керування каруселі: Виберіть Елементи керування навігацією. Ви можете вибирати між елементами керування, стрілками – унизу по центру/вгорі праворуч/внизу праворуч, шевроном, крапками та горизонтальним прокручуванням.


Мобільний дисплей

  1. Встановіть кількість Стовпці сітки для мобільних пристроїв. Ви можете встановити максимум 3 стовпці.
  2. Визначте Відстань між сітками (у пікселях).

Макет стовпців для певного пристрою на основі налаштувань Studio:


Вирівнювання

  1. Вирівняти Вміст по горизонталі у списку відео. Ви можете налаштувати їх вирівнювання по лівому, правому або центральному краю.
  2. Вирівняти Вміст по вертикалі у списку відео. Ви можете налаштувати їх вирівнювання вгорі, по центру та внизу.
  3. Виберіть Порядок вмісту тобто зображення елементів списку, які будуть відображатися першими, або відповідний текст.


Розмір шрифту

  1. Натисніть на Змінити стиль тексту кнопку, щоб відвідати Дизайн розділ і керуйте розмірами та стилями шрифтів. 
  2. Встановіть назва стиль шрифту для елементів списку розділу.
  3. Встановіть Субтитр стиль шрифту для елементів списку розділу.
  4. Встановити за замовчуванням Опис стиль шрифту для елементів списку розділу.
  5. Увімкніть цю опцію, щоб анімувати будь-які числа присутні в назва та Субтитр поля. Після ввімкнення числові значення відображатимуться з динамічною анімацією підрахунку, що зробить їх візуально привабливішими.


Відстань

  1. Вкажіть Зображення ширини для елементів списку.
  2. Вкажіть Ширина вмісту для елементів списку.
  3. Вкажіть Пробіл під заголовком розділу в px.
  4. Вкажіть Місце під зображеннями пунктів списку (у %).
  5. Вкажіть Пробіл під заголовками пунктів списку (у %).
  6. Вкажіть Пробіл під субтитрами пунктів списку (у %).


Заголовок розділу

  1. Горизонтальне вирівнювання текст заголовка розділу. Ви можете встановити його вліво, по центру та праворуч.
  2. Увімкнути/вимкнути дільник між заголовком розділу та вмістом розділу.
  3. Встановіть товщина розділювача (у пікселях).
  4. Вкажіть Колір розділювача із засобу вибору кольорів.
  5. Вибрати Стиль роздільника з випадаючого.
  6. Встановіть Ширина заголовка щоб визначити ширину відображення заголовка розділу, починаючи щонайменше з 50%.


Параметри зображення

  1. Виберіть обрізання зображення для елементів списку. Ви можете встановити зображення як квадрат, коло, пейзаж, портрет і динамічність.
  2. Виберіть загальний радіус кута або інший радіус кута для кожної сторони елементів списку та встановіть число (у пікселях) для кутовий радіус зображень елементів списку. Більше інформації.

Чайові

Використовуючи поле радіуса кута , ви можете створювати зображення елементів списку різних форм. Якщо вказати тут 500 пікселів, зображення відображатимуться у формі кола.

  • Якщо ви вибрали розділені кути, ви можете встановити різний радіус кута для кожного кута.


Форма Маска

  1. Форма маски: Увімкніть цей перемикач, щоб застосувати маску форми до мініатюр відео в розділі «Список відео». Після ввімкнення вибрана фігура візуально закріпить ескіз у цій формі.
  2. Виберіть форму: Вибирайте з різноманітних попередньо визначених форм для застосування до своїх ескізів. Це дозволяє творчо стилізувати ваш вміст, відображаючи зображення в унікальних формах, як-от закруглені, ромбові, краплі тощо.

примітки

  • Параметр Shape Mask залежить від макета – Він може не відображатися під макетами, де текст, наприклад заголовок або підзаголовок, відображається поверх зображення.
  • Налаштування Stretch залежить від багатьох факторів - у тому числі розмір зображення, вирівнювання та налаштування кадрування визначений на вкладці Стиль.
  • Якщо для параметра Обрізання зображення встановлено значення Оригінал, фактичні розміри зображення визначатимуть, чи буде воно розтягнуто вертикально чи горизонтально.


Параметри наведення зображення

  1. Виберіть Колір наведення зображення бути акцентний колір або бути зазначений. Якщо ви обрали акцентний колір, потім вкажіть помутніння. Ви можете вказати колір акценту для кожного елемента з Редагувати елемент .
  2. Якщо ви вибрали вказати колір потім установіть параметр Колір і непрозорість накладення.
  3. Встановіть Колір накладеного тексту який відображається при наведенні.
  4. Виберіть Анімуйте зображення елементів списку наведіть курсор, натиснувши кнопку Так. Перевірте цю функцію на живій сторінці.
  5. Виберіть Стиль анімації для зображень, коли на них наводиться курсор.


Границя зображення

  1. Увімкнути/вимкнути рамку навколо зображень, перемикаючи перемикач.
  2. Виберіть мати a спільний кордон на всіх сторонах зображень або ви можете вказати межі окремо для кожної сторони.
  3. Вкажіть ширина кордону. Якщо встановлено значення 0, то межа не з’явиться. У вас також є можливість встановити ширину рамки окремо для кожної сторони зображення.
  4. Оберіть виділяє колір із засобу вибору кольорів.
  5. Виберіть потрібний Прикордонний стиль з випадаючого.
  6. Визначте ширина рамки для мобільних пристроїв пристроїв, вирівнявши його за шириною, вибраною для робочого столу.


Варіанти карток


Параметри тіні

  1. дисплей – Виберіть, щоб тінь відображалася за елементами списку завжди або лише під час наведення курсора.
  2. стиль – Виберіть із існуючих стилів або створіть власну тінь.
    Якщо ви вибрали спеціальний варіант, відвідайте це Генератор тіні коробки щоб створити власну тінь. Нарешті, скопіюйте та вставте box shadow CSS.
  3. Якщо ви вибрали параметр попередніх налаштувань, тоді Виберіть Стилі тіней з випадаючого.


Кнопки та посилання

  1. Подивіться, як керувати стилем Кнопки та посилання.
  2. Зберегти всі зміни стилю.


Повна картка та текстова картка

Коли ви вмикаєте Повна/текстова картка над вашим списком відео елементи списку матимуть контур і фон із кольором картки, який ви вибрали в Дизайн .
Також див. Кольори та інтервали на сайті.

Повна картка

Якщо вибрано опцію «Повна картка», колір картки буде застосовано до всієї картки, тобто мініатюри відео та тексту з ним.

Гляньте: 

Текстова картка

Якщо вибрано опцію текстової картки, колір картки буде застосовано лише до тексту, який міститься в мініатюрі відео.

Гляньте: 


Не можете знайти те, що шукаєте?

Зв’яжіться з експертом Pixpa.

Pixpa Studio щойно оновлено. Ми зараз оновлюємо всі скріншоти довідкових статей.