Как настроить внешний вид элементов

Вы можете редактировать стили всего сайта, блока, который состоит из секций и колонок, а также каждой колонки и виджета отдельно.

В пункте «Знакомство с элементами сайта» мы рассмотрели, из чего состоит страница сайта. В этой статье, рассмотрим как редактировать внешний вид каждого элемента и всей страницы.

Общие принципы настройки дизайна

Вы можете задать дизайн страницы полностью или каждый элемент отдельно:

Стиль сайта — задает цветовую схему, стили текста и кнопок, которые будут распространяться на все элементы страницы сайта по умолчанию. С помощью этой опции вы можете привести сайт к виду, который будет соответствовать стилю вашего бренда. Читайте подробнее: «Как настроить общий стиль страницы»

Настройка блока — задает стиль для выделенного блока, который состоит из секций с колонками.

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

Настройка виджета — по умолчанию стиль виджетов наследуется из общего стиля сайта. Но для некоторых виджетов вы можете настроить свой стиль после добавления элемента.

Читайте подробнее: «Добавление виджетов».

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

Как перейти к редактированию элементов

Блок

Наведите на правый верхний угол блока и нажмите «Настройка блока».

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

Колонка

Наведите на правый верхний угол колонки и нажмите «Настройки колонки».

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

Виджет

Наведите на левый верхний угол колонки и нажмите «Настройки виджета».

Вы также можете вернуться к настройке элемента верхнего уровня. К примеру, настройке колонки, блока или стиля.

Какие параметры элемента можно редактировать

Выравнивание элементов

Внутри каждой колонки вы можете выровнять виджеты по горизонтали: левому или правому краю, а также по центру. Вы можете настраивать выравнивание для следующих виджетов: «Кнопка», «Изображение», «Линия», «Соцсети», «Аккордеон» и «Таймер». Для элемента «Текст» вы можете установить выравнивание в панели форматирования текста.

Перейдите в меню редактирования элемента и выберите выравнивание.

Внутри секции вы можете выравнивать колонки по вертикали.

Ширина элементов

По мере добавления элементов на странице ширина колонок распределяется равномерно на всю ширину секции. Но вы можете менять ширину колонок, двигая ползунок.

Вы можете менять ширину для двух, трех и четырех колонок. Если добавили больше, вы не сможете поменять их ширину. 

На ширину контента влияют внутренние и внешний отступы, которые вы выставляете при редактировании блока, колонки и виджета. Вы также можете растянуть контент на всю ширину экрана с опцией блока «На всю ширину». Ширина сайта от этого не изменится.

Для картинок ширина выставляется в пикселях. 

Высота элементов

Высота элементов зависит от размера картинки, шрифта, видео и отступов элементов в секции. К примеру, если у вас несколько колонок и все с разной высотой элементов, для секции будет выбрана высота максимального элемента.

Вы можете также дополнительно настроить выравнивание элементов относительно оставшегося места в колонке.

Отступы между элементами

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

Для колонки вы можете добавлять внутренние отступы справа, слева, сверху и снизу.

Также в меню редактировании колонки вы можете добавить внешние отступы между колонками.

Вы также можете разделить элементы сайта, добавив виджет «Отступ» или «Линия». К примеру, так вы можете отделить главный экран от перехода к преимуществам ваших услуг.

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

Фон страницы наследуется из цветовой палитры, выбранной в разделе «Общий стиль». Вы не можете задать кастомный фон для всей страницы сразу, а только для каждого блока отдельно.

Перейдите в настройки фона блока и выберите цвет или изображение.

Секция состоит из колонок, поэтому, чтобы настроить фон для секции, измените фон в каждой колонке в секции.

Закрепление блока

Вы можете закрепить в шапке сайта любой блок, чтобы он оставался наверху даже при прокрутке сайта. Для этого перейдите в настройках блока и активируйте опцию «Закрепить вверху сайта».

Оцените, насколько полезна статья "Как настроить внешний вид элементов"

Оценка: 5 / 5

    Популярное в нашем блоге

    Начните пользоваться сервисом SendPulse прямо сегодня