Как настроить внешний вид элементов
Вы можете редактировать стили всего сайта, блока, который состоит из секций и колонок, а также каждой колонки и виджета отдельно.
В пункте Знакомство с элементами сайта мы рассмотрели, из чего состоит страница сайта. В этой статье, рассмотрим как редактировать внешний вид каждого элемента и всей страницы.
Общие принципы настройки дизайна
Вы можете задать дизайн страницы полностью или каждый элемент отдельно:
| Стиль сайта | Задает цветовую схему, стили текста и кнопок, которые будут распространяться на все элементы страницы сайта по умолчанию. С помощью этой опции вы можете привести сайт к виду, который будет соответствовать стилю вашего бренда. Читайте подробнее: Как настроить общий стиль страницы. |
| Настройка блока | Задает стиль для выделенного блока, который состоит из секций с колонками. |
| Настройка колонки | Задает стиль для выбранной колонки в секции. Вы можете скопировать колонку вместе со всеми настройками в новые колонки. К примеру, при добавлении информации о возможностях вашего сервиса вы можете настроить одну колонку, затем дублировать ее в новую колонку и использовать, как шаблон, меняя только виджеты внутри нее. |
| Настройка виджета | По умолчанию стиль виджетов наследуется из общего стиля сайта. Но для некоторых виджетов вы можете настроить свой стиль после добавления элемента. |
Читайте подробнее: Добавление виджетов.
Верстка сайта резиновая, что позволяет элементам сайта автоматически подстраиваться под экраны различных размеров. Вы не можете задавать фиксированную ширину или высоту элементов, но можете менять отступы.
Чтобы перейти к редактированию элементов, наведите на правый верхний угол. для блока и колонки и левый верхний угол виджета и нажмите на иконку редактирования.
Также можно вернуться к настройке верхнего уровня элемента (например, настройка стиля > блока > колонки) на панели редактирования элемента.
Настройка внешнего вида элементов
Рассмотрим, с помощью каких параметров можно настроить элементы. Более подробно о некоторых параметрах можно просмотреть в разделе Какие параметры элемента можно редактировать.
Блок
Для блока можно отредактировать следующие параметры:
| Цвет фона (Background color) | Изменение цвета фона блока на странице. Нажмите на значок и выберите цвет. |
| Отступ сверху и снизу (Top and bottom margin) | Добавляет отступ между блоком и другими элементами на странице. Чем больше отступление, тем дальше блок от других элементов. Введите значение в пикселях. |
| Фоновое изображение
(Background image) |
Добавляет фон вместо цвета. Активируйте переключатель и выберите картинку. |
| Во всю ширину экрана (Full-screen width) | При включении контент будет растянут от одного края экрана до другого по ширине. |
| На всю высоту экрана (Full-screen height) | При включении контент будет растянут от одного края экрана до другого по высоте. |
| Скрыть блок на
(Hide block on) |
Скрывает блок с элементами для выбранной версии устройства мобильной или десктопной. |
С помощью разделителей вы можете визуально разделить блоки. Активируйте Верхний разделитель (Top divider) или Нижний разделитель (Bottom divider) в настройках блока и выберите, как должен выглядеть разделитель:
| Внешний вид | Выберите форму разделителя. |
| Цвет (Color) | Выберите цвет разделителя. |
| Высота (Height) | Выберите, какую высоту блока внутри блока будет занимать разделитель. |
| Повтор (Repeat) | Выберите, сколько раз повторять форму разделителя. |
| Отразить (Flip) | Выберите, как отразить форму разделителя:
|
Колонка
Для колонки можно отредактировать следующие параметры:
| Гибкое соотношение колонок (Flexible content ratio) | Если параметр включен, вы можете вручную настроить ширину колонки. При увеличении ширины одной колонки соседние будут пропорционально уменьшаться вместе с контентом. |
| Отступ между колонками (Spacing between columns) | Добавляет наружные отступы между колонками по горизонтали. |
| Выравнивание контента (Content alignment) | Выравнивает контент в виджетах в колонке по вертикали. Отображается контент сверху, посередине или внизу. |
| Цвет фона (Background color) | Изменение цвета фона колонки. Нажмите на значок и выберите цвет.
Чтобы не перекрывать цвет фона блока, можно выставить значение |
| Скругление (Rounding) | Округление углов колонки. Чем больше значение, тем более закругленными будут углы контура и фона.
Чтобы скругление было видно, выберите фон колонки. |
| Внутренний отступ (Inner padding) | Добавляет отступы между краем колонки и виджетом. Выберите значение из предложенных или введите нужное для добавления отступа сверху, снизу, слева и справа. |
| Фоновое изображение (Background image) | Добавляет фон вместо цвета. Активируйте переключатель и выберите картинку. |
| Контур (Contour) | Добавляет линию вокруг колонки для подчеркивания ее границ. Активируйте переключатель, введите значение в пикселях для определения толщины линии, выберите тип линии и ее цвет. |
| Тень (Shadow) | Добавляет тень вокруг колонки, чтобы она выглядела более объемной. |
| Анимация (Animation) | Добавляет анимацию появления элементов в колонке. Включите переключатель и выберите тип, направление и скорость. |
Виджет
Список настроек внешнего вида виджета зависит от его типа. Подробнее с настройками каждого из них можно ознакомиться в отдельных статьях.
Читайте подробнее: Виджеты сайта.
Параметры элементов
Выравнивание
Параметр используется, чтобы выровнять элемент вместе с внутренними отступами относительно внутреннего края его родительского элемента. Например, виджет Кнопка вы можете выровнять по горизонтали и расположить его в центре, слева или справа. Колонку можно выровнять по вертикали и разместить ее контент вверху, посередине или внизу.
Ширина элементов
Отступы
На ширину контента влияют внутренние и внешние отступы, которые вы выставляете при редактировании блока, колонки и виджета.
Для блока в параметре Отступ сверху и снизу (Top and bottom margin) можно добавить внешние отступы вверху и внизу от 0 до 240 px.
Для колонки можно установить внешние отступы по горизонтали в параметре Отступ между колонками (Spacing), а внутренние – в параметре Внутреннее отступление (Inner padding).
Для некоторых виджетов в параметре Внутреннее отступление (Inner padding) можно добавить внутренние отступы между элементами вправо, влево, сверху и снизу.
Разделители
Для разделения элементов сайта можно добавить виджет. Отступление (Spacer) или Линия (Divider). К примеру, вы можете отделить главный экран от перехода к преимуществам ваших услуг.
Соотношение колонок
По мере добавления частей на странице ширина колонок умеренно распределяется на всю ширину секции. Вы можете также настроить ширину колонки, чтобы реализовать необходимую структуру контента.
Активируйте опцию Гибкое соотношение колонок (Flexible column ratio), чтобы вручную настроить ширину колонок. Перемещайте границу колонки на нужное расстояние.
Настройка влияет на ширину всех колонок одной секции – увеличивая одну колонку, другие пропорционально уменьшаются. Вы можете изменить ширину двух, трех и четырех колонок. Если вы добавили пять или шесть колонок, вы не сможете менять ширину.
Соотношение внутри макета
Внутри макетов можно изменять соотношение его ячеек. Наведите на край элемента, зажмите ползунок и передвиньте его вправо или влево. Контент во всех виджетах в строке адаптируется к новому размеру.
Ширина виджета
Вы можете растянуть контент на всю ширину экрана с опцией блока Во всю ширину (Full width). Ширина страницы от этого не изменится.
Вы также можете изменять ширину некоторых виджетов по ширине колонки с помощью параметра Ширина (Width). Дочерний элемент, то есть виджет, будет пропорционально занимать указанный процент пространства внутри родительского элемента, то есть колонки.
Высота элементов
Высота элементов зависит от размера изображения, шрифта, видео и отступов элементов в секции. К примеру, если у вас несколько столбцов и все с разной высотой элементов, для секции будет выбрана высота максимального элемента.
При помощи параметра колонки Выравнивание контента (Content alignment) можно настроить выравнивание элементов относительно оставшегося места в колонке.
Позиция элементов
В секции Позиция вы можете сместить виджет вправо или влево, а также повернуть его. Настройте расположение элемента по параметрам:
| Х | Смещение элемента по оси X (горизонтально). Введите значение с минусом для перемещения контента влево и положительного значения для перемещения контента вправо*. |
| Y | Смещение элемента по оси Y (вертикально). Введите значение с минусом для перемещения контента вверх и положительное значение для перемещения контента вниз*. |
| Z-index | Смещение элемента по условной оси Z (впереди или сзади других элементов). Выставьте значения от 1 до 9.
Элементы из большим значением индекса Z будут перекрывать элементы с меньшим значением. |
| Rot.° | Угол наклона элемента на 360 градусов. Введите значение с минусом, чтобы повернуть контент слева направо и положительное значение, чтобы повернуть контент справа налево*. |
* Когда вводите значение для свойств, следует учитывать размер блока. Если указанное значение будет больше размера блока, элемент будет перемещен за пределы макета – он не будет отображаться на сайте.
Элементы, позиция которых настроена вручную, автоматически не адаптируются к размеру экрана. В таком случае рекомендуется настраивать мобильную версию сайта отдельно от рабочего стола.
Фон елементов
Фон страницы наследуется из цветовой палитры, выбранной в разделе Общий стиль (General style). Вы не можете установить свой фон для всей страницы сразу, а только для каждого блока или колонки отдельно.
Перейдите к настройке блока и в параметре Цвет фона (Background color) выберите цвет. Если необходимо заполнить пространство, в параметре Отступ сверху и снизу (Top and bottom margin) отрегулируйте отступы вверху и внизу блока в пикселях.
Вы также можете выбрать изображение в качестве фона для блока. Активируйте переключатель Фоновое изображение (Background image) и выберите или загрузите изображение.
Чтобы изменить внешний вид изображения, можно воспользоваться следующими параметрами:
| Размер (Size) | Настройка размера и позиции изображения в пределах блока.
Доступны следующие опции:
|
| Расположение (Position) | Установка позиции изображения в блоке.
Настройка доступна, если вы выбрали Исходный (Default) или Вместить (Fit) для опции Размер (Size). |
| Повтор (Repeat) | Настройка повтора изображения в пределах блока.
Настройка доступна, если вы выбрали Исходный (Default) или Вместить (Fit) для опции Размер (Size). Доступные опции: Без повтора, По горизонтали, По вертикали, Оба. |
| Фильтры (Filters) | Применение фильтра к изображению. Доступны 8 фильтров. |
| Наложение цвета (Color overlay) | Накладывает цвет поверх изображения. Также можно настроить насыщенность этого цвета в процентах. |
| Эффект прокрутки (Scroll effects) | Добавляет эффект при пролистывании страницы сайта.
Доступные опции:
|
Скругление
По умолчанию края секций (колонки или некоторых виджетов) прямоугольны. Вы можете добавить скругление, чтобы изменить форму. Чем больше значение, тем сильнее скругление углов. Для лучшего восприятия информации в секции советуем наращивать внутренние отступы, чтоб не обрезать текст.
Закрепление блока
Вы можете закрепить в шапке сайта первый блок, чтобы он оставался сверху даже при прокрутке сайта. Для этого перейдите в настройки блока и активируйте опцию Закрепить вверху сайта (Pin to the top of the site).
Анимация элементов
Вы можете настроить дополнительную анимацию появления элементов при прокрутке страницы, чтобы добавить ощущение интерактивности и движения.
Можно настроить для виджетов Текст, Кнопка, Картинка и элемент Колонка. При добавлении анимации к элементу Колонка все элементы будут появляться при заданных условиях.
Для этого перейдите в настройку элемента и активируйте Анимация появления (Animation on scroll) и настройте анимацию.
| Тип анимации (Animation type) | Выберите эффект появления. | |
| Проявление при прокрутке (Face) | Постепенное появление или исчезновение элемента при прокрутке страницы. Этот эффект может привлечь к определенному контенту как заголовок или кнопка призыва к действию. | |
| Масштабирование при прокрутке (Scale) | Постепенное увеличение или уменьшение размера элемента при прокрутке страницы. Этот эффект помогает подчеркнуть некоторые элементы или создать ощущение глубины и перспективы. | |
| Выезжание при прокрутке (Slide) | Перемещение элемента из одной позиции в другую при прокрутке страницы. Этот эффект помогает создавать динамический и увлекательный опыт пользователя. | |
| Бегущая строка (Scrolling ticker) | Горизонтальное перемещение текста по всему экрану, от одного края к другому. Этот эффект помогает выделить важную информацию.
Эффект применяется только к виджету. Текст и будет доступен на опубликованном сайте или в режиме просмотра. |
|
| Направление анимации (Animation position) | Выберите, с какой стороны появляется элемент: слева, справа, сверху, снизу. | |
| Скорость анимации (Animation speed) | Выберите, насколько быстро появится элемент: медленно, средне или быстро. | |
Как редактировать элементы в мобильной версии
Вы можете редактировать отдельные элементы, колонки, секции, настраивать шрифты и скрывать блоки для мобильной и десктопной версии сайта отдельно.
Читайте подробнее: Как настроить мобильную версию сайта.
Обновлено: 29.07.2024
или