Додавання панелі вкладок.

Вивчення DXPR BuilderСтворення сторінокДодавання вмістуМакет

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

Три вкладки послуг із мітками Web design, Branding і Marketing, із відкритою Web design над її текстом

Додавання панелі вкладок

  1. Наведіть курсор на стовпець і натисніть + на його панелі керування або + посередині порожнього стовпця, щоб відкрити вибір елементів.
  2. На вкладці Layout натисніть Tabs. Елемент з’являється із однією вкладкою з міткою Title.
  3. Наведіть курсор на панель вкладки й відкрийте More > Settings. Введіть ім’я в полі Tab title і натисніть Save.
  4. Натисніть + усередині панелі, щоб додати вміст, наприклад елемент Text.
  5. Щоб додати вкладку, наведіть курсор на мітки вкладок і натисніть Add tab на панелі керування Tabs. Нова вкладка стає першою, перед іншими. Назвіть її й наповніть так само.

Що ви бачите

Рядок міток вкладок міститься над вмістом відкритої вкладки. У попередньому перегляді й на опублікованій сторінці натискання мітки показує вміст цієї вкладки й ховає решту. Кожна вкладка містить власні елементи, тож одна вкладка може містити текст, а інша набір карток. На екранах, вужчих за 768 пікселів, вкладки перетворюються на складені заголовки, що відкриваються як згортальна панель.

Налаштування вкладок

Елемент Tabs має три налаштування. Відкрийте їх через More > Settings на панелі керування Tabs, яка показується, коли ви наводите курсор на мітки вкладок.

Налаштування Що робить Стандартно
Tab direction Де містяться мітки: Default (над вмістом), Left або Right Default
Style Вигляд міток: Default (лінія під мітками), Modern (заокруглені картки) або Accordion (заголовки з розділювальними лініями) Default
Mobile friendly Показує вкладки як згортальні заголовки на екранах, вужчих за 768 пікселів On

Кожна вкладка має власні налаштування в розділі More > Settings на її панелі. Tab title це текст мітки. Tab description це необов’язковий короткий рядок під міткою відкритої вкладки.

Керування вкладками

  • Reorder: перетягніть мітку вкладки на нове місце серед міток. Її вміст переміщується разом із нею.
  • Rename: наведіть курсор на панель вкладки, відкрийте More > Settings, змініть Tab title і натисніть Save.
  • Remove: наведіть курсор на панель вкладки, відкрийте More і виберіть Delete. Усе всередині вкладки видаляється разом з нею.

Обмежуйте мітки одним-трьома словами й зупиняйтеся приблизно на п’яти вкладках, щоб мітки вміщалися в один рядок.

Якщо елемент не відображається

  • Нова вкладка перша замість останньої. Add tab завжди ставить нову вкладку попереду. Перетягніть її мітку туди, куди хочете.
  • Налаштування показують лише Tab title і Tab description. Ви відкрили налаштування однієї вкладки. Наведіть курсор на мітки вкладок, щоб показалася панель керування Tabs, потім відкрийте там More > Settings.
  • Телефони показують складені заголовки замість вкладок. Mobile friendly увімкнено, це стандартно. Вимкніть його в налаштуваннях Tabs, щоб зберегти вкладки на кожній ширині екрана.
  • Tabs немає на вкладці Layout вибору. Ваш профіль користувача DXPR Builder його не включає. Адміністратор позначає Tabs у розділі Elements вашого профілю за адресою /admin/dxpr_studio/dxpr_builder/profile.

Що далі?