Як налаштувати зовнішній вигляд елементів

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

У пункті «Ознайомлення з елементами сайту» ми розглянули, з чого складається сторінка сайту. У цій статті розглянемо як редагувати зовнішній вигляд кожного елемента та всієї сторінки.

Загальні принципи налаштування дизайну

Ви можете задати дизайн сторінки повністю або кожен елемент окремо:

Стиль сайту — задає колірну схему, стилі тексту та кнопок, які будуть поширюватися на всі елементи сторінки сайту за умовчанням. За допомогою цієї опції ви можете привести сайт до вигляду, який буде відповідати стилю бренду. Докладніше: «Як налаштувати стиль сторінки».

Налаштування блоку — задає стиль для виділеного блоку, який складається із секцій із колонками.

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

Налаштування віджета — за умовчанням стиль віджетів успадковується із загального стилю сайту. Але для деяких віджетів ви можете налаштувати стиль після додавання елемента.

Читайте докладніше: «Додавання елементів»

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

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

Блок

Наведіть на правий верхній кут блоку та натисніть «Налаштування блоку» (Block settings).

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

Колонка

Наведіть на правий верхній кут колонки та натисніть «Налаштування колонки» (Column settings).

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

Віджет

Наведіть на лівий верхній кут колонки та натисніть «Налаштування віджета» (Widget settings).

Ви також можете повернутися до налаштування верхнього рівня елемента (наприклад, налаштування стилю > блоку > колонки) на панелі.

Які параметри елемента можна редагувати

Вирівнювання елементів

Всередині кожної колонки можна вирівняти віджети горизонталі: по лівому або правому краю, а також по центру. Ви можете налаштувати вирівнювання для таких віджетів: «Кнопка» (Button), «Зображення» (Image), «Лінія» (Divider), «Соцмережі» (Socials), «Форма підписки» (Form) та «Таймер» (Timer). Для елементу «Текст» можна встановити вирівнювання на панелі форматування тексту.

Перейдіть до меню редагування елемента та виберіть вирівнювання.

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

У міру додавання елементів на сторінці ширина колонок рівномірно розподіляється на всю ширину секції. Але ви можете міняти ширину колонок, рухаючи повзунок.

Ви можете змінити ширину для двох, трьох та чотирьох колонок. Якщо ви додали п’ять чи шість колонок, ви не зможете міняти їхню ширину.

На ширину контенту впливають внутрішні та зовнішні відступи, які ви виставляєте під час редагування блоку, колонки та віджету. Ви можете розтягнути контент на всю ширину екрана з опцією блоку «На всю ширину» (Full width). Ширина сайту від цього не зміниться.

Для зображення ви можете виставити ширину в пікселях.

Висота елементів

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

Ви можете також додатково налаштувати вирівнювання елементів щодо місця, що залишилося в колонці.

Відступи між елементами

Для блоку можна додавати внутрішні відступи вгорі та внизу. Ви можете виставити від 0 до 240 px.

Для колонки ви можете додавати внутрішні відступи праворуч, ліворуч, зверху та знизу.

Також у меню редагування колонки можна додати зовнішні відступи між колонками.

Ви також можете розділити елементи сайту, додавши віджет «Відступ» (Spaser) або «Лінія» (Divider). Наприклад, ви можете відокремити головний екран від переходу до переваг ваших послуг.

Фон елементів

Фон сторінки успадковується з палітри кольорів, вибраної в розділі «Загальний стиль» (General style). Ви не можете встановити кастомне тло для всієї сторінки відразу, а тільки для кожного блоку окремо.

Перейдіть до налаштування фону блоку та виберіть колір або зображення.

Секція складається з колонок, тому, щоб налаштувати фон для секції, змініть фон у кожній колонці секції.

Закріплення блоку

Ви можете закріпити у шапці сайту будь-який блок, щоб він залишався зверху навіть під час прокручування сайту. Для цього перейдіть в налаштуваннях блоку та активуйте опцію «Закріпити вгорі сайту» (Pin to the top of the site).

Анімація елементів

Ви можете налаштувати додаткову анімацію появи елементів під час прокручування сторінки, щоб додати відчуття інтерактивності та руху.

Можна налаштувати для віджетів «Текст», «Кнопка», «Картинка» та елемент «Колонка». При додаванні анімації до елемента «Колонки» усі її елементи з'являтимуться за заданих умов.

Для цього перейдіть в налаштування елемента та активуйте «Анімація появи» (Animation on scroll).

Виберіть тип анімації:

Прояв (Fade) — поступова поява або зникнення елемента під час прокручування сторінки. Цей ефект може привернути увагу до певного контенту як заголовок або кнопка заклику до дії.

Масштабування (Scale) — поступове збільшення або зменшення розміру елемента під час прокручування сторінки. Цей ефект допомагає підкреслити певні елементи або створити відчуття глибини та перспективи.

Виїжджання (Slide) — переміщення елемента з однієї позиції до іншої під час прокручування сторінки. Цей ефект допомагає створювати динамічний та захоплюючий досвід для користувача.

Виберіть напрямок анімації — з якого боку з'являтиметься елемент: ліворуч, праворуч, зверху, знизу.

Виберіть швидкість анімації — наскільки швидко з'явиться елемент: повільно, середньо або швидко.

Як редагувати елементи в мобільній версії

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

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

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

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

Також ви можете переходити з однієї версії на іншу за допомогою перемикача в правій стороні конструктора.

Оновлено: 15.09.2023