Посилання на розділи й повторне використання стилів через класи.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементів

Надайте розділу Ідентифікатор HTML, щоб кнопка могла перестрибнути до нього. Додайте Класи HTML, щоб приховати елемент на телефонах, задати відступи для кожного розміру екрана або повторно використовувати вигляд, визначений вашою темою. Обидва поля містяться внизу панелі Загальне кожного елемента. Клас тримає вигляд узгодженим: коли його правило CSS змінюється, кожен елемент із цим класом наслідує.

Відео повторює перший рецепт нижче: воно змушує кнопку перестрибнути до розділу нижче на сторінці.

Перш ніж почати

  • Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом Більше. Уперше в конструкторі? Див. Ваша перша сторінка.
  • Зберегти у діалозі зберігає зміну в редакторі. Зберегти на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено».
  • Скористайтеся ідентифікатором HTML для цілі перестрибування. Кнопка «Book a tour» може прокрутити до форми бронювання. Список посилань угорі довгої сторінки може вести до кожної частини.
  • Скористайтеся класом для вигляду, що повторюється. Ваш вебмайстер пише CSS один раз, а ви додаєте клас, де потрібно. Панель Стиль натомість копіює значення в кожен елемент, що з часом розходиться.
  • Скористайтеся класом для того, чого панель Стиль не вміє, наприклад приховування елемента на телефонах або зміни відступів для кожного розміру екрана.

Рецепт: кнопка, що перестрибує до розділу

  1. Наведіть вказівник на цільовий Розділ, натисніть Більше, потім Налаштування.
  2. На панелі Загальне введіть коротку назву, наприклад programmes, у полі Ідентифікатор HTML. Натисніть Зберегти.
  3. Відкрийте налаштування Кнопки. У полі Посилання введіть # і точно таку саму назву: #programmes. Натисніть Зберегти.
  4. Натисніть Зберегти на панелі інструментів конструктора.
  5. Виберіть Попередній перегляд у меню перегляду (значок ока) і натисніть кнопку.

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

Панель «Загальне» кнопки із заголовком See our programmes і посиланням #programmes поруч із цією кнопкою на сторінці

Рецепт: приховування елемента на телефонах

  1. Наведіть вказівник на елемент, натисніть Більше, потім Налаштування.
  2. На панелі Загальне натисніть поле Класи HTML.
  3. Виберіть Приховано на надмалих пристроях, телефонах (<576px). Він лежить у групі Адаптивна видимість.
  4. Натисніть Зберегти у діалозі, потім Зберегти на панелі інструментів.

Елемент тепер зникає на екранах вужче 576 px, у редакторі теж. Щоб перевірити його, відкрийте сторінку на телефоні.

Поле класів HTML текстового елемента з чипом «Приховано на надмалих пристроях, телефонах (<576px)» поруч із сірим блоком Plan your visit, що досі показується на ширині комп’ютера

Рецепт: введення власних класів

Поле Класи HTML дозволяє лише вибирати зі свого списку. Щоб ввести назву класу, спочатку перемкніть його на текст.

  1. Наведіть вказівник на елемент, натисніть Більше, потім Налаштування.
  2. Під Класи HTML натисніть Редагувати як текст. Поле перетворюється на звичайне текстове поле, що перелічує класи, які елемент уже має.
  3. Додайте назви своїх класів після них через пробіли, наприклад brand-card py-3 py-lg-5. Крапку пропускайте: .brand-card у CSS вашої команди тут це brand-card.
  4. Натисніть Зберегти у діалозі, потім Зберегти на панелі інструментів.

Елемент набуває вигляду, визначеного вашою вебкомандою.

Класи HTML у режимі «Редагувати як текст», звичайне поле з текстом brand-card py-3 py-lg-5, поруч із сірим блоком Partner with us із внутрішнім відступом класу над і під його текстом

Що ви бачите

Панель «Загальне» розділу з ідентифікатором HTML open-day і трьома чипами класів поруч із цим розділом із сірим тлом і центрованим текстом

У режимі Попередній перегляд кнопка плавно прокручує сторінку до розділу й залишає місце для закріпленого верхнього колонтитула; рядок адреси завершується на #programmes. Нижче 576 px завширшки прихований елемент зникає. Введені вами класи показуються як чипи наступного разу, коли ви відкриєте діалог, у лапках, коли їх немає в списку, наприклад «brand-card».

Як працюють поля

Ідентифікатор HTML

Ідентифікатор має починатися з літери. Після цього він може містити літери, цифри, дефіси й підкреслення, але без пробілів. Неправильний ідентифікатор показує помилку під полем, і Зберегти нічого не робить, доки ви його не виправите.

Якщо залишити поле порожнім, елемент зберігає ідентифікатор, створений DXPR Builder. Порожнє поле показує його сірим. Використовуйте кожен ідентифікатор раз на сторінку: коли два елементи ділять один, посилання перестрибують до першого.

Класи HTML

Список містить класи тіней і класи Bootstrap 5, згруповані за призначенням, наприклад Зовнішні відступи, Внутрішні відступи, Адаптивна видимість і Заокруглені кути. Ваша тема може додати власну групу в кінці.

Прокрутіть відкритий список або введіть частину назви, наприклад padding, py-5 або circular, щоб звузити його. Введення лише фільтрує список; для класу, якого в ньому немає, скористайтеся Редагувати як текст.

Список класів HTML, відфільтрований словом padding, із групою «Внутрішні відступи» з розмірами від 1 до 5 і «Без відступів», поруч із текстом Course fees, який він оформить

Класи Bootstrap працюють, лише коли сторінка завантажує Bootstrap 5. Він надходить із вашої теми або з Загальні налаштування > Bootstrap (/admin/dxpr_studio/dxpr_builder/settings), де для параметра Підвантажувати файли Bootstrap задано Bootstrap 5.

Службові класи Bootstrap, як-от класи кольорів і відступів, позначено !important. Вони перемагають панель Стиль на тій самій властивості. Основне тло перемагає Тло, а Верхній зовнішній відступ, розмір 3 (mt-3) перемагає верхній Зовнішній відступ.

Клас із розміром екрана в назві застосовується від цієї ширини й ширше:

У назві класу Застосовується від
sm 576 px
md 768 px
lg 992 px
xl 1200 px
xxl 1400 px

Тож py-3 py-lg-5 дає 16 px внутрішнього відступу вгорі й унизу на менших екранах і 48 px від 992 px завширшки.

Для розробника вашої теми

Класу потрібне правило CSS у темі, наприклад:

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

Щоб показати клас у списку Класи HTML для редакторів, зареєструйте його у файлі .info.yml теми; див. Службові класи. Для стилів на всьому сайті див. Власний CSS.

Якщо ви цього не бачите

  • Збереження нічого не робить, а ідентифікатор HTML повідомляє «Ідентифікатор має починатися з літери». Ідентифікатор порушує правила вище. Почніть його з літери й використовуйте лише літери, цифри, дефіси й підкреслення.
  • Не вдається ввести новий клас. Поле лише фільтрує свій список. Спочатку натисніть Редагувати як текст.
  • Очікуваного класу немає в списку. Список містить лише класи, визначені DXPR Builder і вашою темою. Натисніть Редагувати як текст і введіть його.
  • Кнопка взагалі не прокручує. Посилання має бути # з точним ідентифікатором HTML і тими самими великими літерами. Перевірте обидва поля й протестуйте у попередньому перегляді.
  • Клас не діє. Назву написано з помилкою, тема не має для нього правила, або Bootstrap 5 не завантажено. Перевірте написання, потім запитайте свого вебмайстра про правило або Підвантажувати файли Bootstrap.
  • Клас вашої команди змінює лише дещо. Значення панелі Стиль на тій самій властивості перемагає клас теми. Очистьте це значення на панелі Стиль.
  • Кнопка перестрибує не туди. Два елементи ділять ідентифікатор, і перемагає перший. Дайте кожному елементу власний ідентифікатор.
  • Заголовок розділу ховається під закріпленим верхнім колонтитулом. DXPR Builder не розпізнає ваш верхній колонтитул. Вебмайстер указує CSS-селектор верхнього колонтитула в полі Селектор зсуву прокручування у розділі Загальні налаштування > Розширені налаштування (/admin/dxpr_studio/dxpr_builder/settings).

Що далі?