Раздел временной шкалы

Этот раздел временной шкалы позволяет пользователям отображать основные этапы и задачи проекта в хронологической последовательности.

Это особенно полезно для освещения хода проекта, иллюстрации процессов подачи заявок, демонстрации достижений, таких как награды, и предложения других настраиваемых параметров.

Он обеспечивает структурированный и визуально привлекательный способ представления информации в формате временной шкалы, улучшая взаимодействие с пользователем и повышая его вовлеченность.

Добавьте раздел на свою страницу

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

Теперь вы увидите опцию категории разделов на левой стороне.
Нажмите на Лента вкладка (1), где вы можете выбрать разные макеты раздела временной шкалы (2).
Раздел будет добавлен на страницу. Нажмите на Сохранено (3) кнопка, чтобы сохранить изменения.

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

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

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

Нажмите на Изменить временную шкалу (1) кнопка, чтобы открыть панель элементов списка.

Нажмите на Добавить элемент (2) Кнопка для добавления нового элемента списка.
Вы можете выбрать Дублировать или удалить (3) элементы списка.
Укажите Headline (4) для раздела временной шкалы.

Редактировать элемент списка

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

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

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

Внимание

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

5. Действие при нажатии — заголовок и изображение

В разделе «Хронология» можно настроить поведение отдельных элементов при нажатии . Ниже представлены доступные параметры:

Перейти по ссылке
Выбор этой опции открывает Конструктор ссылок, что позволяет вам добавить гиперссылку на этот элемент. Ссылка может направлять пользователей на другую страницу вашего веб-сайта или на внешний URL. Узнать больше о Конструктор ссылок.
Открыть в лайтбоксе
Эта опция отображает элемент в увеличенном виде. Lightbox вид при нажатии. В этом режиме подзаголовок и Описание связанный с элементом, не будет отображаться в сетке, но будет виден в режиме Lightbox.
Действие отсутствует
Выберите этот параметр, чтобы сделать элемент некликабельным. При выборе этого параметра нажатие на элемент не вызовет никаких действий.

6. Открыть ссылку в новом окне: Настройте открытие ссылки в новой вкладке или в той же вкладке. Эта функция будет видна только в том случае, если в меню «Действия при клике» выбран параметр «Перейти по ссылке».

7. Кнопки и ссылки: Добавьте в элемент списка ссылки любого типа . Вы можете добавить кнопку, изображение, иконку социальной сети или текстовую ссылку. Подробнее.

8. Переопределение стиля карты

Вы можете переопределить глобальные настройки стиля карточек в разделе « Настройки стиля» и настроить внешний вид каждой карточки отдельно в разделе «Хронология». Это позволяет применять уникальные стили к различным элементам списка для более гибкой настройки.

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

9. Переопределение стиля формы

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

10. Сохранение: После внесения изменений сохраните их.

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

Управление элементами раздела «Хронология»

В разделе «Временная шкала» есть вкладка «Элементы» , которая позволяет легко управлять видимостью различных элементов в этом разделе. С помощью простых переключателей вы можете включать или отключать определенные элементы, не удаляя и не изменяя сами элементы.

Нажмите на Изменить временную шкалу (1) кнопка.

Выберите Elements (2) вкладка.
После внесения изменений нажмите кнопку Сохранено (3) кнопка.

Опции раздела

Показать заголовок: включить или отключить видимость заголовка для раздела «Хронология».
Показать кнопки: Управление отображением кнопок на уровне раздела.

Параметры элементов

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

Изменить макет раздела

Нажать на Изменить временную шкалу Кнопка открытия панели редактирования раздела.
Выберите Планировка меню.
Отсюда вы можете легко изменить макет раздела даже после добавления его на страницу.

При изменении макета вверху вы увидите макеты, связанные с разделами.

Помимо этого, вы также можете выбрать макет из других разделов в разделе «Дополнительные макеты».

Параметры стиля

Нажмите на Редактировать список изображений .
Выберите Стиль (1) меню.
Измените стиль для элементов раздела и Сохранить (2) ваши изменения.

У вас будет несколько вариантов стиля для раздела:

Параметры отображения
центровка
Размер шрифта
Расстояние
Заголовок раздела
Параметры стиля временной шкалы
Параметры изображений
Маска формы
Параметры наведения изображения
Граница изображения
Параметры карты
Параметры тени
Кнопки и ссылки

Вариант отображения

Укажите Пространство между рядами из пунктов списка.

центровка

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

Размер шрифта

Нажмите на Изменить стиль текста кнопка для посещения Дизайн и управлять размерами и стилями шрифта.
Установить Название стиль шрифта для элементов списка раздела.
Установить подзаголовок стиль шрифта для элементов списка раздела.
Установить по умолчанию Описание стиль шрифта для элементов списка раздела.
Включите эту опцию, чтобы анимировать любые числа присутствовать в Название и подзаголовок поля. При включении этой функции числовые значения будут отображаться с динамической анимацией подсчета, что сделает их более привлекательными визуально.

Расстояние

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

Заголовок раздела

Горизонтальное выравнивание текст заголовка раздела. Вы можете задать его слева, по центру и справа.
Включить/выключить Делитель между заголовком раздела и содержанием раздела.
Установить толщина разделителя (в пикселях).
Укажите Цвет разделителя из палитры цветов.
Выбрать Стиль разделителя из выпадающего списка.
Установить Ширина заголовка чтобы определить ширину отображения заголовка раздела, начиная с минимального значения 50%.

Параметры стиля временной шкалы

Включите это, если вы предпочитаете, чтобы каждый второй элемент в разделе был на Заместитель (Обратная сторона.
Выберите Руководство пунктов.
Укажите Ширина разделительной линии для раздела.
Укажите Базовая линия (фон) Цвет разделителя.
Укажите Активная линия (выделено) Цвет разделителя.

Фотографии

Выберите Iмаг урожай для элементов списка. Вы можете установить изображения как «Квадрат», «Круг», «Горизонтально», «Портрет» и «Оригинал».
Выберите общий радиус угла или разный радиус угла для каждой стороны элементов списка и установите число (в пикселях) для Cугловой радиус изображений элементов списка. Узнать больше.

Маска формы

Маска формы: Включите этот переключатель, чтобы применить маску формы к изображению в разделе «Временная шкала». После включения выбранная форма визуально обрежет изображение в этой форме.
Выберите форму: Выбирайте из различных предопределенных форм для применения к вашему изображению. Это позволяет вам творчески стилизовать ваш контент, отображая изображение в уникальной форме, например, закругленной, ромбовидной, каплевидной и т. д.

Заметки

Параметр «Маска формы» зависит от макета – Он может не отображаться в макетах, где текст, например заголовок или подзаголовок, отображается поверх изображения.
Настройка Stretch зависит от множества факторов. – включая параметры размера изображения, выравнивания и обрезки, определенные на вкладке «Стиль».
Если для параметра «Обрезка изображения» установлено значение «Оригинал»фактические размеры изображения определят, будет ли оно растянуто по вертикали или по горизонтали.

Изображение Hover

Выберите Цвет при наведении изображения быть акцентный цвет или быть указанный. Если вы выбрали акцентный цвет, затем укажите непрозрачность. Вы можете указать цвет акцента для каждого элемента из Изменить элемент панели.
Если вы выбрали укажите цвет затем установите Цвет и непрозрачность наложения.
Выберите Анимация изображений элементов списка при наведении, нажав Да. Проверьте эту функцию на живой странице.
Выберите Стиль анимации для изображений при наведении на них курсора.
Выберите, хотите ли вы разрешить переход изображений при наведении или нет.
Выберите Стиль перехода для перехода при наведении. Доступные параметры: Fade и Flip.

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

Включить/отключить границу вокруг изображений, переключая переключатель.
Выберите, чтобы иметь общая граница со всех сторон изображения или вы можете указать границы отдельно с каждой стороны.
Укажите ширина подачи границы. Если установлено значение 0, граница не появится. У вас также есть возможность установить ширину границы индивидуально для каждой стороны изображения.
Выберите выделяющий цвет из палитры цветов.
Выберите предпочтительный Стиль обрамления из выпадающего списка.
Обозначить ширина границы для мобильных устройств устройств, выровняв его по ширине, выбранной для рабочего стола.

Карты

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

Shadow

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

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

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

Не можете найти то, что ищете?

Свяжитесь с экспертом Pixpa.

Свяжитесь с нами