Розділ списку зображень

Використовуйте розділ «Список зображень», якщо потрібно відобразити набір зображень і відповідного тексту.

За допомогою цього розділу ви можете легко пов’язувати різні сторінки на веб-сайті або додавати будь-які посилання, де ви хочете додати зображення та опис для кожного посилання.

У цій статті:

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

Список зображень

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

Додати розділ списку зображень

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

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

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

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

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

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

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

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

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

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

Звідси ви можете:

• Завантажити / видалити зображення (1) для елемента списку. Ви також можете встановити Колір акценту зображення звідси, який відображатиметься при наведенні зображення.
• Додавати назва (2), Підзаголовок (3), і Опис (4) пункту списку.
• Залежно від вибраного вами макета, ви можете не знайти параметр підзаголовка та опису в окремих елементах списку.
  Перш ніж додати опис, перевірте це статті.

• Натисніть піктограму Link Builder Посилання на заголовок (5), щоб відкрити конструктор посилань, щоб зв’язати назву елемента списку з будь-якою сторінкою. Більше інформації про Конструктор посилань.
• Налаштуйте посилання для відкриття в a нову вкладку або в тій самій вкладці (6).
• Додайте будь-який тип посилання (7) до пункту списку. Ви можете додати кнопку/посилання на зображення/іконку соціальної мережі/текстове посилання. Дізнайтесь більше.
• зберегти (8) ваші зміни.

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

Пункти списку послідовності

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

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

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

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

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

Дивіться видалення елемента списку зображень у дії: 

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

• Натисніть на Керування списком зображень (1) кнопка.
• Виберіть макет (2) вкладка.
• Select (3) макет вашого розділу та зберегти (4) зміни.

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

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

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

предмети 

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

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

8. Виберіть Зациклюйте карусель чи ні.
9. У випадку каруселі виберіть Елементи керування навігацією. Ви можете вибрати між «Без елементів керування», «Стрілки – унизу по центру/вгорі праворуч/внизу праворуч», «Шеврон» або «Точки».

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

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

зображень 

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

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

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

14. Виберіть Колір наведення зображення бути акцентний колір або бути зазначений. Якщо ви обрали акцентний колір, потім вкажіть помутніння.
15. Якщо ви вибрали вказати колір потім установіть параметр Базовий колір і непрозорість наведення для елементів списку.
16. Встановіть Елементи колір для елементів списку розділу.
17. Виберіть Анімуйте зображення елементів списку наведіть курсор, натиснувши кнопку Так. Перевірте цю функцію на живій сторінці.
18. Виберіть Стиль анімації для зображень, якщо на них навести курсор.

Розмір і простір 

19. вкажіть Зображення ширини для елементів списку.
20. вкажіть Ширина вмісту для елементів списку.
21. вкажіть Пробіл під заголовком розділу в px.
22. вкажіть Місце під зображеннями пунктів списку (у %).
23. вкажіть Пробіл під заголовками пунктів списку (у %).
24. вкажіть Пробіл під субтитрами пунктів списку (у %).

текст 

25. Натисніть на Змінити стиль тексту кнопку, щоб відвідати дизайн розділ і керуйте розмірами та стилями шрифтів. 
26. Встановіть назва стиль шрифту для елементів списку розділу.
27. Встановіть Субтитр стиль шрифту для елементів списку розділу.
28. Встановити за замовчуванням Опис стиль шрифту для елементів списку розділу.

Cards 

29. Подивіться, як керувати картками.

тінь

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

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

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

Стиль каруселі

Стиль «Карусель» показує елементи списку як слайд-шоу, тобто елементи списку чергуватимуться один за одним.

Подивіться, як працює стиль каруселі: 

Ось список живих зображень: 

Перегляньте демонстраційний сайт. 

Подивіться, як працює кутовий радіус: 

Статті по темі:

• Типи розділів
• Додайте прокладку/роздільник між розділами
• Створіть свій сайт