Это специальный раздел, в котором вы можете отображать набор логотипов и соответствующего текста, добавляя элементы в список.
В идеале вы можете использовать этот раздел в нижнем колонтитуле вашего веб-сайта для отображения ваших партнеров, брендов, наград и признаний и т. д.
В этой статье:
- Добавить раздел логотипа
- Редактировать раздел логотипа
- Добавлять и редактировать элементы списка
- Элементы списка последовательности
- Управление элементами
- Управление макетом
- Раздел «Стиль логотипа»
Добавить раздел логотипа
- Чтобы добавить раздел, вам нужно добавить страницу на ваш сайт в первую очередь.
- На твоей странице, нажмите на синий + значок чтобы добавить новый раздел.
- Теперь вы увидите опцию категории разделов на левой стороне.
- Выделите Логотип (1) раздел и нажмите на него. Появится экран, позволяющий вам выбирать из различных макеты (2) раздела логотипов.
- Выберите любой макет раздела и нажмите на него, чтобы добавить его на свою страницу.
Редактировать раздел логотипа
После добавления раздела:
- Нажмите на Изменить логотип (1) кнопка открытия настроек раздела.
Добавлять и редактировать элементы списка
Добавить элемент списка
- Нажмите на Добавить элемент (1) кнопка для добавления нового элемента в список.
- Дублировать or Удалить (2) элементы списка.
- Редактировать Заголовок раздела (3) раздела.
Редактировать элемент списка
Нажмите на элемент списка, который вы хотите отредактировать. Откроется параметры редактирования конкретного элемента списка. Отсюда вы можете:
- Загрузить/удалить основное и дополнительное изображение (1)
Вы можете загрузить Вторичное изображение вместе с Основное изображение для каждого элемента списка. Когда пользователь наводит курсор на элемент, будет отображаться вторичное изображение, заменяющее основное изображение. Кроме того, вы можете задать Цвет акцента изображения, который будет отображаться при наведении на изображение. - Добавить Название (2), Подзаголовок (3), и Описание (4) элемента списка.
- Вы можете не найти опцию подзаголовка и описания в определенных элементах списка в зависимости от выбранного вами макета.
Перед добавлением описания ознакомьтесь с этой статьей.
5. Действие при нажатии — заголовок и изображение
В разделе «Логотип» вы можете настроить поведение отдельных элементов при нажатии . Ниже представлены доступные параметры:
- Перейти по ссылке
Выбор этой опции открывает Конструктор ссылок, что позволяет вам добавить гиперссылку на этот элемент. Ссылка может направлять пользователей на другую страницу вашего веб-сайта или на внешний URL. Узнать больше о Конструктор ссылок. - Открыть в лайтбоксе
Эта опция отображает элемент в увеличенном виде. Lightbox вид при нажатии. В этом режиме подзаголовок и Описание связанный с элементом, не будет отображаться в сетке, но будет виден в режиме Lightbox. - Действие отсутствует
Выберите этот параметр, чтобы сделать элемент некликабельным. При выборе этого параметра нажатие на элемент не вызовет никаких действий.
6. Открыть ссылку в новом окне: Настройте открытие ссылки в новой вкладке или в той же вкладке. Эта функция будет видна только в том случае, если в меню «Действия при клике» выбран параметр «Перейти по ссылке».
7. Кнопки и ссылки: Добавьте в элемент списка ссылки любого типа . Вы можете добавить кнопку, изображение, иконку социальной сети или текстовую ссылку. Подробнее.
8. Переопределение стиля карты
Вы можете переопределить глобальные настройки стиля карточек в разделе « Настройки стиля» и настроить внешний вид каждой карточки отдельно в разделе «Цены». Это позволяет применять уникальные стили к различным элементам списка для более гибкой настройки.
Узнайте больше об опции «Карточки» в динамическом разделе.
9. Переопределение стиля формы
Используйте параметр «Переопределение», чтобы назначить каждому изображению в разделе «Логотип» различную форму, что позволит вам лучше контролировать визуальный стиль каждого элемента. Узнайте больше о маске формы.
10. Сохранение: После внесения изменений сохраните их.
Элементы списка последовательности
Вы можете легко изменить последовательность элементов списка, перетаскивая их мышью. Посмотрите, как работает упорядочивание элементов списка с логотипом:
Управление элементами раздела логотипа
В разделе «Логотип» есть вкладка «Элементы» , которая позволяет легко управлять видимостью различных элементов в этом разделе. С помощью простых переключателей вы можете включать или отключать определенные элементы, не удаляя и не изменяя сами элементы.
- Нажмите на Изменить логотип (1) кнопка.
- Выберите Elements (2) вкладка.
- После внесения изменений нажмите кнопку Сохранено (3) кнопка.
- Показать заголовок: Включить или отключить видимость заголовка раздела «Логотип».
- Показать кнопки: Управление отображением кнопок на уровне раздела.
Параметры элементов
- Показать изображение: Переключить видимость изображений.
- Показать заголовок: Управление отображением заголовка.
- Показать субтитры: Включить или отключить субтитры.
- Покажите описание: Управление видимостью описаний элементов.
- Показать кнопки: Решите, следует ли отображать кнопки для отдельных элементов.
Управление макетом
- Нажмите на Изменить логотип Кнопка открытия панели редактирования раздела.
- Выберите Планировка меню.
- Отсюда вы можете легко изменить макет раздела даже после добавления его на страницу.
При изменении макета вверху вы увидите макеты, связанные с разделами.
Помимо этого, вы также можете выбрать макет из других разделов в разделе «Дополнительные макеты».
Раздел «Стиль логотипа»
Вы можете настроить различные аспекты раздела «Логотип», используя различные параметры оформления. Чтобы перейти к параметрам оформления, нажмите кнопку «Редактировать логотип» (1).
- Выберите Стиль (2) меню.
- Измените стиль для элементов раздела и Сохранить (3) ваши изменения.
У вас будет несколько вариантов стиля для раздела:
- Параметры отображения
- Мобильный дисплей
- центровка
- Размер шрифта
- Расстояние
- Заголовок раздела
- Параметры изображений
- Маска формы
- Параметры наведения изображения
- Граница изображения
- Параметры карты
- Параметры тени
- Кнопки и ссылки
Параметры отображения
- Выберите Показать элементы in строки и столбцы / карусель / витрина
- Если вы выбрали строки и столбцы опция, элементы списка будут расположены в строках и столбцах. В этом случае вам нужно указать количество строк и столбцов.
- Если вы выбрали карусель опция, элементы списка будут представлены в виде слайд-шоу. Узнать больше.
-
Showcase предлагает стильный и интерактивный макет в виде карусели, позволяющий отображать изображения по одному с плавными переходами и эффектами. Этот макет придаст вашему сайту современный и захватывающий вид. Узнайте больше.
- Установить Число столбцов для списка изображений. Вы можете выбрать от 1 до 10 столбцов.
- Укажите Пространство между столбцами из пунктов списка.
- Укажите Пространство между рядами из пунктов списка.
Если на шаге 1 выбрана опция «Карусель», вы увидите следующие дополнительные параметры:
- Включить плавную прокрутку: обеспечивает непрерывную прокрутку элементов в карусели для бесшовного и визуально привлекательного просмотра.
- Авто Слайд: Автоматически переключает слайды без взаимодействия с пользователем.
- Показать прогресс автовоспроизведения: отображает индикатор хода выполнения во время автовоспроизведения для лучшей видимости.
- Задержка автовоспроизведения: Устанавливает временной интервал между каждым переходом слайдов при включенном автовоспроизведении.
- Карусельный цикл: обеспечивает непрерывный цикл слайдов, благодаря чему карусель плавно перезапускается после последнего слайда.
- Карусель управления: Выбрать Элементы управления навигацией. Вы можете выбрать «Без элементов управления», «Стрелки — внизу по центру/вверху справа/внизу справа», «Шеврон», «Точки» и «Горизонтальная прокрутка».
- Края затухания: Примените легкий эффект затухания к краям карусели. Он улучшает пользовательский опыт, мягко смешивая изображения, когда они входят в вид или выходят из него.
Если на Шаге 1 выбрана опция «Диаграмма», то вы увидите следующие дополнительные опции:
- Эффекты: Выберите один из пяти эффектов анимации: «Затухание», «Переворот», «Карточки», «Coverflow» (наклонный) или «Coverflow» (плоский), чтобы управлять переходом изображений.
- Включить плавную прокрутку: Обеспечивает непрерывную прокрутку элементов в витрине для бесперебойного и визуально привлекательного просмотра.
- Автоматическое скольжение: Автоматический переход между изображениями без участия пользователя.
- Показать ход автовоспроизведения: Отображает индикатор хода выполнения при активном автовоспроизведении для лучшей видимости.
- Задержка автовоспроизведения: Установите интервал между слайдами при включении автовоспроизведения. Вы можете выбрать любое значение от 1 до 10 секунд.
- Цикл карусели: Включите этот параметр, чтобы карусель зацикливалась бесконечно, обеспечивая непрерывное воспроизведение.
- Управление каруселью: Параметр «Элементы управления каруселью» позволяет вам выбирать, как пользователи будут перемещаться по слайдам, используя такие варианты, как стрелки (внизу по центру, вверху справа, внизу справа), точки или вообще не используя элементы управления.
Мобильный дисплей
- Установите количество Столбцы сетки для мобильных устройств. Вы можете установить максимум 3 столбца.
- Определите Расстояние между сетками (в пикселях).
центровка
- Выравнивать Изображение по горизонтали в разделе. Вы можете установить их выравнивание по левому краю, по правому краю или по центру.
- Выравнивать Текст по горизонтали в разделе. Вы можете установить их выравнивание по левому краю, по правому краю или по центру.
- Выравнивать контент по вертикали в разделе. Вы можете установить их выравнивание по верху, центру и низу.
- Выберите Порядок содержания то есть изображения элементов списка, которые должны отображаться первыми, или связанный с ними текст.
Размер шрифта
- Нажмите на Изменить стиль текста кнопка для посещения Дизайн и управлять размерами и стилями шрифта.
- Установить Название стиль шрифта для элементов списка раздела.
- Установить подзаголовок стиль шрифта для элементов списка раздела.
- Установить по умолчанию Описание стиль шрифта для элементов списка раздела.
- Включите эту опцию, чтобы анимировать любые числа присутствовать в Название и подзаголовок поля. При включении этой функции числовые значения будут отображаться с динамической анимацией подсчета, что сделает их более привлекательными визуально.
Расстояние
- Укажите Ширина изображения для элементов списка.
- Укажите Ширина содержимого для пунктов списка.
- Укажите Пространство под заголовком раздела в пикселях.
- Укажите Пространство под изображениями элементов списка (в %).
- Укажите Пробел под заголовками элементов списка (в %).
- Укажите Пробел под субтитрами элементов списка (в %).
Заголовок раздела
- Горизонтальное выравнивание текст заголовка раздела. Вы можете задать его слева, по центру и справа.
- Включить/выключить Делитель между заголовком раздела и содержанием раздела.
- Установить толщина разделителя (в пикселях).
- Укажите Цвет разделителя из палитры цветов.
- Выбрать Стиль разделителя из выпадающего списка.
- Установить Ширина заголовка чтобы определить ширину отображения заголовка раздела, начиная с минимального значения 50%.
Фотографии
- Выберите Iмаг урожай для элементов списка. Вы можете установить изображения как «Квадрат», «Круг», «Горизонтально», «Портрет» и «Оригинал».
- Выберите общий радиус угла или разный радиус угла для каждой стороны элементов списка и установите число (в пикселях) для Cугловой радиус изображений элементов списка. Узнать больше.
С помощью поля « радиус скругления углов» можно создавать изображения элементов списка различной формы. Если указать значение 500 пикселей, изображения будут отображаться в виде круга.
- Если вы выбрали разделенные углы, вы можете установить разные радиусы углов для каждого угла.
Маска формы
- Маска формы: Включите этот переключатель, чтобы применить маску формы к изображениям в разделе «Логотип». После включения выбранная форма визуально обрежет изображение в этой форме.
- Выберите форму: Выбирайте из различных предопределенных форм для применения к вашим изображениям. Это позволяет вам творчески стилизовать ваш контент, отображая изображения в уникальных формах, таких как закругленные, ромбовидные, каплевидные и т. д.
- Протяжение: Включите эту опцию, чтобы растянуть выбранную фигуру для лучшего соответствия контейнеру изображения. Это гарантирует, что фигура пропорционально заполнит доступное пространство, улучшая визуальное выравнивание на экранах разных размеров.
- Параметр Stretch зависит от макета. – Он может не отображаться в некоторых макетах. В макетах, где текст, такой как заголовок или подзаголовок, отображается поверх изображения, вся опция Shape Mask может быть недоступна.
- Настройка Stretch зависит от множества факторов. - В том числе размер, выравнивание и настройки обрезки определяется на вкладке «Стиль».
- Если для параметра «Обрезка изображения» установлено значение «Оригинал»фактические размеры изображения определят, будет ли оно растянуто по вертикали или по горизонтали.
Изображение Hover
- Выберите Цвет при наведении изображения быть акцентный цвет или быть указанный. Если вы выбрали акцентный цвет, затем укажите непрозрачность. Вы можете указать цвет акцента для каждого элемента из Изменить элемент панели.
- Если вы выбрали укажите цвет затем установите Цвет и непрозрачность наложения.
- Установить Цвет наложенного текста который отображается при наведении курсора.
- Выберите Анимация изображений элементов списка при наведении, нажав Да. Проверьте эту функцию на живой странице.
- Выберите Стиль анимации для изображений при наведении на них курсора.
- Выберите, хотите ли вы разрешить переход изображений при наведении или нет.
- Выберите Стиль перехода для перехода при наведении. Доступные параметры: Fade и Flip.
Граница изображения
- Включить/отключить границу вокруг изображений, переключая переключатель.
- Выберите, чтобы иметь общая граница со всех сторон изображения или вы можете указать границы отдельно с каждой стороны.
- Укажите ширина подачи границы. Если установлено значение 0, граница не появится. У вас также есть возможность установить ширину границы индивидуально для каждой стороны изображения.
- Выберите выделяющий цвет из палитры цветов.
- Выберите предпочтительный Стиль обрамления из выпадающего списка.
- Обозначить ширина границы для мобильных устройств устройств, выровняв его по ширине, выбранной для рабочего стола.
Карты
- Посмотрите, как для управления картами.
Shadow
- Дисплей – Выберите отображение тени за элементами списка всегда или только при наведении.
- Стиль - Выберите из существующих пресетов или создайте собственную тень.
Если вы выбрали вариант «Пользовательский», посетите этот Генератор теней коробки для создания пользовательской тени. Наконец, скопируйте и вставьте тень окна CSS. - Если вы выбрали опцию пресетов, то Выберите стили теней из выпадающего списка.
Кнопки и ссылки
- Посмотрите, как управлять стилем Кнопки и ссылки.
- Сохранено весь стиль меняется.
