Редагування мобільної версії сайту
Ви можете відредагувати деякі частини вашого сайту окремо для відображення на комп'ютерах та смартфонах. А саме можливо окремо налаштувати:
горизонтальне вирівнювання тексту;
горизонтальне вирівнювання елементів у колонках;
горизонтальне вирівнювання елементів у елементах (картках) блоку-колекції;
вертикальні відступи у блоків;
фігурні розмежувачі блоків;
текстовий шрифт;
висоту елементу Spacer;
Flex block.
За замовчуванням мобільна версія сайту створюється і адаптується автоматично на основі комп'ютерної (десктопної) версії. Проте якщо змінити у елемента одне з вищезгаданих налаштувань на мобільній версії сайту, то це налаштування у цього конкретного елементу буде призначатися окремо для кожного пристрою. Тобто якщо у моб. редакторі, скажімо, змінити вирівнювання текстового елементу, то вирівнювання цього текстового елементу буде незалежно налаштовуватися на комп'ютерній та мобільній версії сайту (зміни на комп'ютерній версії сайту не будуть впливати на мобільну версію).
Примітка: версія сайту для смартфону — це відображення сайту на девайсах з шириною екрану від 320 до 477 пікселів. Версія для планшетів (створюється автоматично на основі комп'ютерної версії) — від 478 до 991 пікселя. Комп'ютерна версія сайту — ширина екрану понад 992 пікселя.
Розглянемо яким чином здійснюється окреме вирівнювання для різних девайсів на прикладі тексту. Наприклад, у вашого сайту певний заголовок вирівняно по лівому краю колонки:
Відповідно на мобільному девайсі текст вирівняно так само (якщо змінювати вирівнювання на комп'ютерній версії сайту, зміни застосовуються й на мобільній версії):
Щоб вказати вирівнювання окремо для смартфонів:
Перейдіть до редактору мобільної версії сайту за допомогою перемикача угорі екрану:
Натисніть на необхідний текст та змініть його вирівнювання:
Готово! Після того, як ви змінили вирівнювання тексту на смартфоні, вирівнювання цього елементу буде здійснюватися окремо для комп. та моб. версій сайту.
Примітка: ви можете повернутися до редактору комп'ютерної версії сайту та побачити, що тут не змінилося вирівнювання, адже ви його змінили лише для смартфонів. Навіть якщо ви зміните вирівнювання цього тексту на комп. версії сайту, ці зміни вже не будуть застосовані для моб. версії, оскільки саме для цього елементу вирівнювання вже вказується окремо для різних девайсів.
Підказка: ви можете дізнатися більше про роботу з текстом у цій інструкції.
Ви можете окремо вказати вирівнювання елементів (кнопок, зображень тощо) по горизонталі у колонках. Для цього перейдіть до мобільного редактору та відкрийте налаштування колонки:
...також ви можете перемикатися між налаштуваннями для різних девайсів усередині налаштувань самої колонки:
Після цього вкажіть для мобільної версії окреме вирівнювання:
Готово! Це буде застосовано лише для моб. девайсів — на комп'ютерній версії вирівнювання не зміниться і водночас тепер горизонтальне вирівнювання для цієї колонки буде налаштовуватися окремо для комп. та моб. версії.
Примітка: якщо у колонці вказати горизонтальне вирівнювання, то за замовчуванням воно застосується і для текстових елементів всередині цієї колонки. Проте якщо вказати вирівнювання саме для текстового елементу, то воно матиме більший пріорітет, аніж вирівнювання колонки. Наприклад, якщо контент колонки вирівняно по центру, а текстовий елемент окремо вирівняно по лівому краю, то цей текст буде вирівняний саме по лівому краю.
Зверніть увагу: взаємозв'язок між комп'ютерною та мобільною версією сайту є окремим у кожного елементу та колонки. Наприклад, якщо ви змінили горизонтальне вирівнювання у колонки для відображення на смартфонах, то саме у цієї колонки горизонтальне вирівнювання буде здійснюватися окремо для комп'ютерів та смартфонів. Але при цьому текстові елементи всередині цієї колонки все ще не втратили взаємозв'язок між комп. та моб. версією сайту — якщо змінити вирівнювання тексту на комп. версії сайту, ця зміна буде застосована і для моб. версії. І лише якщо окремо змінити вирівнювання на моб. пристроях саме цього конкретного текстового елементу, тоді він буде окремо налаштовуватися для смартфонів та комп'ютерів.
Елементи колекції — це своєрідні картки-колонки, що мають спільну структуру. Відповідно, якщо у блок-колекцію додати ще один елемент колекції, він матиме таку саму структуру, як попередні елементи колекції. А усередині елементу колекції знаходяться звичайні елементи (зображення, кнопки, текстові елементи тощо) — для цих звичайних елементів можна змінити вирівнювання окремо для комп'ютерної та мобільної версії сайту. Це здійснюється аналогічно до попереднього розділу інструкції:
Відкрийте налаштування елементу колекції (1) та перейдіть до налаштувань для смартфонів (2):
Оберіть необхідне вирівнювання, яке буде застосовано лише для елементів колекції у цьому блоці під час відображення на смартфонах:
Готово! Зверніть увагу, що тепер вирівнювання кнопок та інших елементів всередині елементів цього блоку-колекції здійснюється окремо для різних девайсів.
У кожного блоку знизу та зверху є внутрішні відступи (padding). За замовчуванням наша система автоматично їх адаптує для мобільної версії (робить дещо меншими для відображення на смартфонах). Проте ви можете вказати значення необхідного вам відступу окремо для моб. пристроїв. Для цього перейдіть до мобільного редактору (1), наведіть на нижню або верхню частину блока, затисніть ліву клавішу миші та потягніть відступ донизу або догори, щоб змінити його розмір (2). Також ви можете відкрити налаштування блоку (3) та у налаштуваннях для мобільних пристроїв (4) окремо для смартфону вказати відступи у числовому значенні (5):
Примітка: для цього параметру також доступне автоналаштування на основі компʼютерної версії.
Фігурні розмежовувачі блоків дозволяють зробити межу між двома блоками візуально більш привабливою. Щоб налаштувати розмежовувач окремо для мобільної та комп'ютерної версії сайту перейдіть до мобільного редактору (1), й у цьому режимі внесіть зміни в налаштування блоку, або ж відкрийте налаштування блоку (2) та у налаштуваннях для мобільних пристроїв (3) задайте необхідні параметри окремо для менших екранів (4):
Примітка: для цього параметру також доступне автоналаштування на основі компʼютерної версії.
За допомогою елемента Spacer/Пустий простір ви можете візуально відокремлювати елементи всередині блоку. Для того, щоб налаштувати його висоту, вам потрібно відкрити налаштування елементу, натиснувши на іконку шестерні:
Дізнайтеся, як додати пустий простір (спейсер) на ваш сайт у цій статті.
горизонтальне вирівнювання тексту;
горизонтальне вирівнювання елементів у колонках;
горизонтальне вирівнювання елементів у елементах (картках) блоку-колекції;
вертикальні відступи у блоків;
фігурні розмежувачі блоків;
текстовий шрифт;
висоту елементу Spacer;
Flex block.
За замовчуванням мобільна версія сайту створюється і адаптується автоматично на основі комп'ютерної (десктопної) версії. Проте якщо змінити у елемента одне з вищезгаданих налаштувань на мобільній версії сайту, то це налаштування у цього конкретного елементу буде призначатися окремо для кожного пристрою. Тобто якщо у моб. редакторі, скажімо, змінити вирівнювання текстового елементу, то вирівнювання цього текстового елементу буде незалежно налаштовуватися на комп'ютерній та мобільній версії сайту (зміни на комп'ютерній версії сайту не будуть впливати на мобільну версію).
Примітка: версія сайту для смартфону — це відображення сайту на девайсах з шириною екрану від 320 до 477 пікселів. Версія для планшетів (створюється автоматично на основі комп'ютерної версії) — від 478 до 991 пікселя. Комп'ютерна версія сайту — ширина екрану понад 992 пікселя.
Горизонтальне вирівнювання тексту окремо для різних пристроїв
Розглянемо яким чином здійснюється окреме вирівнювання для різних девайсів на прикладі тексту. Наприклад, у вашого сайту певний заголовок вирівняно по лівому краю колонки:
Відповідно на мобільному девайсі текст вирівняно так само (якщо змінювати вирівнювання на комп'ютерній версії сайту, зміни застосовуються й на мобільній версії):
Щоб вказати вирівнювання окремо для смартфонів:
Перейдіть до редактору мобільної версії сайту за допомогою перемикача угорі екрану:
Натисніть на необхідний текст та змініть його вирівнювання:
Готово! Після того, як ви змінили вирівнювання тексту на смартфоні, вирівнювання цього елементу буде здійснюватися окремо для комп. та моб. версій сайту.
Примітка: ви можете повернутися до редактору комп'ютерної версії сайту та побачити, що тут не змінилося вирівнювання, адже ви його змінили лише для смартфонів. Навіть якщо ви зміните вирівнювання цього тексту на комп. версії сайту, ці зміни вже не будуть застосовані для моб. версії, оскільки саме для цього елементу вирівнювання вже вказується окремо для різних девайсів.
Підказка: ви можете дізнатися більше про роботу з текстом у цій інструкції.
Горизонтальне вирівнювання елементів у колонках
Ви можете окремо вказати вирівнювання елементів (кнопок, зображень тощо) по горизонталі у колонках. Для цього перейдіть до мобільного редактору та відкрийте налаштування колонки:
...також ви можете перемикатися між налаштуваннями для різних девайсів усередині налаштувань самої колонки:
Після цього вкажіть для мобільної версії окреме вирівнювання:
Готово! Це буде застосовано лише для моб. девайсів — на комп'ютерній версії вирівнювання не зміниться і водночас тепер горизонтальне вирівнювання для цієї колонки буде налаштовуватися окремо для комп. та моб. версії.
Примітка: якщо у колонці вказати горизонтальне вирівнювання, то за замовчуванням воно застосується і для текстових елементів всередині цієї колонки. Проте якщо вказати вирівнювання саме для текстового елементу, то воно матиме більший пріорітет, аніж вирівнювання колонки. Наприклад, якщо контент колонки вирівняно по центру, а текстовий елемент окремо вирівняно по лівому краю, то цей текст буде вирівняний саме по лівому краю.
Зверніть увагу: взаємозв'язок між комп'ютерною та мобільною версією сайту є окремим у кожного елементу та колонки. Наприклад, якщо ви змінили горизонтальне вирівнювання у колонки для відображення на смартфонах, то саме у цієї колонки горизонтальне вирівнювання буде здійснюватися окремо для комп'ютерів та смартфонів. Але при цьому текстові елементи всередині цієї колонки все ще не втратили взаємозв'язок між комп. та моб. версією сайту — якщо змінити вирівнювання тексту на комп. версії сайту, ця зміна буде застосована і для моб. версії. І лише якщо окремо змінити вирівнювання на моб. пристроях саме цього конкретного текстового елементу, тоді він буде окремо налаштовуватися для смартфонів та комп'ютерів.
Горизонтальне вирівнювання елементів у елементах колекції
Елементи колекції — це своєрідні картки-колонки, що мають спільну структуру. Відповідно, якщо у блок-колекцію додати ще один елемент колекції, він матиме таку саму структуру, як попередні елементи колекції. А усередині елементу колекції знаходяться звичайні елементи (зображення, кнопки, текстові елементи тощо) — для цих звичайних елементів можна змінити вирівнювання окремо для комп'ютерної та мобільної версії сайту. Це здійснюється аналогічно до попереднього розділу інструкції:
Відкрийте налаштування елементу колекції (1) та перейдіть до налаштувань для смартфонів (2):
Оберіть необхідне вирівнювання, яке буде застосовано лише для елементів колекції у цьому блоці під час відображення на смартфонах:
Готово! Зверніть увагу, що тепер вирівнювання кнопок та інших елементів всередині елементів цього блоку-колекції здійснюється окремо для різних девайсів.
Вертикальні відступи у блоків
У кожного блоку знизу та зверху є внутрішні відступи (padding). За замовчуванням наша система автоматично їх адаптує для мобільної версії (робить дещо меншими для відображення на смартфонах). Проте ви можете вказати значення необхідного вам відступу окремо для моб. пристроїв. Для цього перейдіть до мобільного редактору (1), наведіть на нижню або верхню частину блока, затисніть ліву клавішу миші та потягніть відступ донизу або догори, щоб змінити його розмір (2). Також ви можете відкрити налаштування блоку (3) та у налаштуваннях для мобільних пристроїв (4) окремо для смартфону вказати відступи у числовому значенні (5):
Примітка: для цього параметру також доступне автоналаштування на основі компʼютерної версії.
Фігурні розмежувачі блоків
Фігурні розмежовувачі блоків дозволяють зробити межу між двома блоками візуально більш привабливою. Щоб налаштувати розмежовувач окремо для мобільної та комп'ютерної версії сайту перейдіть до мобільного редактору (1), й у цьому режимі внесіть зміни в налаштування блоку, або ж відкрийте налаштування блоку (2) та у налаштуваннях для мобільних пристроїв (3) задайте необхідні параметри окремо для менших екранів (4):
Примітка: для цього параметру також доступне автоналаштування на основі компʼютерної версії.
Висота елементу Spacer
За допомогою елемента Spacer/Пустий простір ви можете візуально відокремлювати елементи всередині блоку. Для того, щоб налаштувати його висоту, вам потрібно відкрити налаштування елементу, натиснувши на іконку шестерні:
Дізнайтеся, як додати пустий простір (спейсер) на ваш сайт у цій статті.
Оновлено: 16/02/2024
Дякуємо!