Раздел списка изображений

Используйте раздел списка изображений, если вы хотите отобразить набор изображений и соответствующий текст.

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

В этой статье:

1. Что такое список изображений?
2. Добавление раздела списка изображений на страницу
3. Добавлять и редактировать элементы списка
4. Элементы списка последовательности
5. Удаление элементов списка
6. Изменение макета раздела
7. Варианты стиля
8. Карусельный стиль
9. Живой пример

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

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

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

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

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

• Выберите любой макет раздела и нажмите на него, чтобы добавить его на свою страницу.

Добавлять и редактировать элементы списка

Добавить элемент списка

После добавления раздела:

• Нажмите на Редактировать список изображений (1) кнопка, чтобы открыть панель элементов списка.

• Нажмите на Добавить элемент (2) Кнопка для добавления нового элемента списка.
• Вы можете выбрать Dдублировать или удалить (3) элементы списка.

Изменить элемент списка

Нажмите на элемент списка, который вы хотите отредактировать. Это откроет определенные параметры редактирования элемента списка.

Отсюда вы можете:

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

• Нажмите на иконку Link Builder Ссылка на заголовок (5), чтобы открыть конструктор ссылок, чтобы связать заголовок элемента списка с любой страницей. Узнать больше в отношении Конструктор ссылок.
• Установите ссылку, чтобы она открывалась в новая вкладка или в той же вкладке (6).
• Добавляйте любые виды Ссылка (7) к элементу списка. Вы можете добавить кнопку/ссылку на изображение/значок социальной сети/текстовую ссылку. Узнать больше.
• Сохранить (8) ваши изменения.

См. редактирование элемента списка изображений в действии:

Элементы списка последовательностей

• Вы можете легко перетаскивать элементы списка, чтобы изменить последовательность.

См. последовательность элементов списка изображений в действии: 

Удалить элемент списка

После того, как вы добавили элемент списка, вы можете редактировать и удалять его.

• Нажмите на Удалить значок рядом с элементом списка изображений.
• Нажмите на Удалить кнопку во всплывающем окне подтверждения.
• Наконец, спасти ваши изменения.

См. удаление элемента списка изображений в действии: 

Макет раздела

• Нажмите на Управление списком изображений (1) кнопка.
• Выберите Планировка (2) вкладка.
• Выберите (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. Установить Elements цвет элементов списка раздела.
17. Выберите Анимация изображений элементов списка при наведении, нажав Да. Проверьте эту функцию на живой странице.
18. Выберите Стиль анимации для изображений при наведении на них курсора.

Размер и пространство 

19. Укажите Ширина изображения для элементов списка.
20. Укажите Ширина содержимого для пунктов списка.
21. Укажите Пространство под заголовком раздела в пикселях.
22. Укажите Пространство под изображениями элементов списка (в %).
23. Укажите Пробел под заголовками элементов списка (в %).
24. Укажите Пробел под субтитрами элементов списка (в %).

Текст 

25. Нажмите на Изменить стиль текста кнопка для посещения Проект и управлять размерами и стилями шрифта. 
26. Установить Название стиль шрифта для элементов списка раздела.
27. Установить подзаголовок стиль шрифта для элементов списка раздела.
28. Установить по умолчанию Описание стиль шрифта для элементов списка раздела.

Карты 

29. Посмотрите, как для управления картами.

Shadow

30. Дисплей – Выберите отображение тени за элементами списка всегда или только при наведении.
31. Стиль - Выберите из существующих пресетов или создайте собственную тень.
    Если вы выбрали вариант «Пользовательский», посетите этот Генератор теней коробки для создания пользовательской тени. Наконец, скопируйте и вставьте тень окна CSS.
32. Если вы выбрали опцию пресетов, то Выберите стили теней из выпадающего списка.

Кнопки и ссылки

33. Посмотрите, как управлять стилем Кнопки и ссылки.
34. Сохранить весь стиль меняется.

Карусельный стиль

В стиле карусели элементы списка отображаются в виде слайд-шоу, т. е. элементы списка будут чередоваться один за другим.

Посмотрите, как работает стиль карусели: 

Вот живой список изображений: 

Просмотрите демо-сайт в реальном времени. 

Посмотрите, как работает угловой радиус: 

Статьи по теме:

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