Ви можете відредагувати деякі частини вашого сайту окремо для відображення на комп'ютерах та смартфонах. А саме можливо окремо налаштувати:

• горизонтальне вирівнювання тексту;
• горизонтальне вирівнювання елементів у колонках;
• горизонтальне вирівнювання елементів у елементах (картках) блоку-колекції;
• вертикальні відступи у блоків;
• фігурні розмежувачі блоків;
• текстовий шрифт;
• висоту елементу Spacer;
• Flex block.

За замовчуванням мобільна версія сайту створюється і адаптується автоматично на основі комп'ютерної (десктопної) версії. Проте якщо змінити у елемента одне з вищезгаданих налаштувань на мобільній версії сайту, то це налаштування у цього конкретного елементу буде призначатися окремо для кожного пристрою. Тобто якщо у моб. редакторі, скажімо, змінити вирівнювання текстового елементу, то вирівнювання цього текстового елементу буде незалежно налаштовуватися на комп'ютерній та мобільній версії сайту (зміни на комп'ютерній версії сайту не будуть впливати на мобільну версію).

Горизонтальне вирівнювання тексту окремо для різних пристроїв

Розглянемо яким чином здійснюється окреме вирівнювання для різних девайсів на прикладі тексту. Наприклад, у вашого сайту певний заголовок вирівняно по лівому краю колонки:

Відповідно на мобільному девайсі текст вирівняно так само (якщо змінювати вирівнювання на комп'ютерній версії сайту, зміни застосовуються й на мобільній версії):

Щоб вказати вирівнювання окремо для смартфонів:

1. Перейдіть до редактору мобільної версії сайту за допомогою перемикача угорі екрану:

2. Натисніть на необхідний текст та змініть його вирівнювання:

Готово! Після того, як ви змінили вирівнювання тексту на смартфоні, вирівнювання цього елементу буде здійснюватися окремо для комп. та моб. версій сайту.

Горизонтальне вирівнювання елементів у колонках

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

...також ви можете перемикатися між налаштуваннями для різних девайсів усередині налаштувань самої колонки:

Після цього вкажіть для мобільної версії окреме вирівнювання:

Готово! Це буде застосовано лише для моб. девайсів — на комп'ютерній версії вирівнювання не зміниться і водночас тепер горизонтальне вирівнювання для цієї колонки буде налаштовуватися окремо для комп. та моб. версії.

Горизонтальне вирівнювання елементів у елементах колекції

Елементи колекції — це своєрідні картки-колонки, що мають спільну структуру. Відповідно, якщо у блок-колекцію додати ще один елемент колекції, він матиме таку саму структуру, як попередні елементи колекції. А усередині елементу колекції знаходяться звичайні елементи (зображення, кнопки, текстові елементи тощо) — для цих звичайних елементів можна змінити вирівнювання окремо для комп'ютерної та мобільної версії сайту. Це здійснюється аналогічно до попереднього розділу інструкції:

1. Відкрийте налаштування елементу колекції (1) та перейдіть до налаштувань для смартфонів (2):

2. Оберіть необхідне вирівнювання, яке буде застосовано лише для елементів колекції у цьому блоці під час відображення на смартфонах:

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

Вертикальні відступи у блоків

У кожного блоку знизу та зверху є внутрішні відступи (padding). За замовчуванням наша система автоматично їх адаптує для мобільної версії (робить дещо меншими для відображення на смартфонах). Проте ви можете вказати значення необхідного вам відступу окремо для моб. пристроїв. Для цього перейдіть до мобільного редактору (1), наведіть на нижню або верхню частину блока, затисніть ліву клавішу миші та потягніть відступ донизу або догори, щоб змінити його розмір (2). Також ви можете відкрити налаштування блоку (3) та у налаштуваннях для мобільних пристроїв (4) окремо для смартфону вказати відступи у числовому значенні (5):

Фігурні розмежувачі блоків

Фігурні розмежовувачі блоків дозволяють зробити межу між двома блоками візуально більш привабливою. Щоб налаштувати розмежовувач окремо для мобільної та комп'ютерної версії сайту перейдіть до мобільного редактору (1), й у цьому режимі внесіть зміни в налаштування блоку, або ж відкрийте налаштування блоку (2) та у налаштуваннях для мобільних пристроїв (3) задайте необхідні параметри окремо для менших екранів (4):

Висота елементу Spacer

За допомогою елемента Spacer/Пустий простір ви можете візуально відокремлювати елементи всередині блоку. Для того, щоб налаштувати його висоту, вам потрібно відкрити налаштування елементу, натиснувши на іконку шестерні:

Дізнайтеся, як додати пустий простір (спейсер) на ваш сайт у цій статті.

Оновлено: 26/04/2024