Розділ хронології

У цьому розділі шкали часу користувачі можуть відображати віхи та завдання проекту в хронологічній послідовності.

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

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

Додайте розділ на свою сторінку

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

Тепер ви побачите категорії розділів на лівій стороні.
Натисніть на Хронологія вкладка (1), де ви можете вибрати різні макети розділу шкали часу (2).
Розділ буде додано на сторінку. Натисніть на Зберегти (3) кнопка для збереження змін.

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

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

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

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

Натисніть на Додати товар (2) кнопку, щоб додати новий елемент списку.
Ви можете вибрати Створити копію або видалити (3) пункти списку.
Вкажіть a Headline (4) для розділу шкали часу.

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

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

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

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

Примітка:

Перш ніж додати опис, перевірте це статті.

5. Дія при кліку – заголовок і зображення

Ви можете налаштувати поведінку клацання окремих елементів у Хронологія розділ. Нижче наведено доступні варіанти:

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

6. Відкрити посилання в новому вікні: Налаштуйте посилання для відкриття в a нову вкладку або в тій самій вкладці. Це буде видно лише тоді, коли Перейдіть за посиланням параметр вибрано під Дія при натисканні .

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

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

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

Детальніше про параметр Картки в динамічному розділі.

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

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

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

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

Керування елементами розділу часової шкали

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

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

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

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

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

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

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

Змінити макет розділу

Натисніть на Редагувати шкалу часу кнопку, щоб відкрити панель редагування розділу.
Виберіть макет .
Звідси ви можете легко змінити макет розділу навіть після додавання його на сторінку.

Під час зміни макета вгорі ви побачите макети, пов’язані з розділами.

Окрім цього, у вас також є можливість вибрати макет з інших розділів у Більше макетів заголовок.

Параметри стилю

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

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

Параметри відображення
Вирівнювання
Розмір шрифту
Відстань
Заголовок розділу
Параметри стилю часової шкали
Параметри зображень
Форма Маска
Параметри наведення зображення
Границя зображення
Параметри карт
Параметри тіні
Кнопки та посилання

Опція відображення

Вкажіть Відстань між рядами елементів списку.

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

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

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

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

Відстань

Вкажіть Зображення ширини для елементів списку.
Вкажіть Пробіл під заголовком розділу в px.
Вкажіть Космос над зображеннями пунктів списку (у %).
Вкажіть Простір навколо роздільника горизонтально елементів списку (у %).
Вкажіть Пробіл під заголовками пунктів списку (у %).
Вкажіть Пробіл під субтитрами пунктів списку (у %).

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

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

Параметри стилю часової шкали

Увімкніть це, якщо ви бажаєте, щоб кожен другий елемент у розділі був на Заступник (протилежний бік.
Оберіть Керівництво елементів.
Вкажіть Ширина лінії розділення для розділу.
Вкажіть Базова лінія (фон) Колір для роздільника.
Вкажіть Активна лінія (виділено) Колір для роздільника.

зображень

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

Форма Маска

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

примітки

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

Наведення курсора зображення

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

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

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

Cards

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

тінь

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

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

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

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

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

Контакти