Пользователь принимает решение о том, остаться ли на сайте, за доли секунды. И главное здесь — не тексты, а визуальное оформление сайта: цвет фона, акцентные элементы, отступы, анимация. Каждый из этих нюансов может улучшить или испортить восприятие. Далее мы пошагово объясним, как настроить фон, цветовую палитру, скругления и анимацию в Конструкторе сайтов.
Как изменить цвет фона
Цвет фона — это основа визуальной иерархии. Единый фон для всего сайта создает целостность и спокойствие, повышает доверие пользователя и увеличивает время его пребывания на сайте. Локальная заливка блоков позволяет группировать связанную информацию, расставлять акценты и управлять вниманием посетителя.
В Конструкторе сайтов Рег.ру вы можете изменить цвет фона для всего сайта или для отдельных элементов.
Для изменения цвета фона сайта нажмите на иконку в верхней панели управления сайтом:
По умолчанию для всех сайтов выбран белый цвет фона. Если не менять эту настройку или выбрать вариант «Нет», то будет отображаться стандартный белый фон. Также вы можете выбрать для фона сайта оттенки из светлой или темной цветовой палитры. После выбора конкретного цвета внизу откроется поле настройки насыщенности цвета, где 1 — очень тусклый цвет, а 6 — очень яркий.
После сохранения выбранного цвета страница автоматически перезагрузится и фон всех блоков будет изменен (если ранее для отдельных блоков не был выставлен цвет фона).
Для изменения цвета фона блока нажмите на Карандаш:
В режиме редактирования блока, в дополнительных настройках можно изменить цвет фона: выбрать отсутствие цвета (тогда для фона блока будет использоваться цвет, выбранный для всего сайта), светлые и темные палитры цвета. При выборе конкретного цвета внизу открывается поле настройки насыщенности цвета, где 1 — очень тусклый цвет, а 6 — очень яркий.
При использовании светлой палитры контент блока останется с белым цветом, а фон изменится на выбранный. В случае выбора темной цветовой палитры контент блока изменится на черный, а фон на выбранный оттенок.
Как изменить акцентный цвет сайта
Акцентный цвет — это ключевой цвет вашего сайта, который используется для выделения интерактивных элементов (кнопок, иконок). Его применение создает единую визуальную коммуникацию и направляет внимание пользователя.
Для изменения акцентного цвета нажмите на иконку Палитры в верхней панели:
Вы можете:
- выбрать цвет вручную, передвигая курсор по палитре,
- воспользоваться пипеткой и скопировать оттенок с нужного элемента на сайте,
- задать его в кодировке HEX,
- выбрать из рекомендуемых цветов.
Как изменить скругление блоков
Скругление углов блока — это инструмент визуальной эргономики: скругление смягчает геометрию интерфейса, снижает визуальное напряжение и помогает задать характер сайта: от строгого (минимальный радиус) до дружелюбного (крупные «подушечки»).
В Конструкторе сайтов Рег.ру вы можете задать степень скругления сразу для всех блоков или для отдельных.
Для изменения степени скругления для всех блоков нажмите на иконку Квадрата в верхней панели управления сайтом:
Вы можете выбрать степень скругления углов от XS (минимальная степень скругления блока) до L (максимальная степень скругления блока).
Для изменения степени скругления блока нажмите на Карандаш:
В режиме редактирования блока, в дополнительных настройках вы можете выбрать — оставить степень скругления углов как у всего сайта или изменить скругление углов. Степень скругления углов имеет градацию от 0 (минимальная степень скругления блока) до L (максимальная степень скругления блока).
Как добавить подложку для блока
Подложка — это фоновый графический элемент, который располагается под основным контентом, но поверх основного сплошного фона. Ее главная задача — визуально оживить дизайн, отделить наполнение блока от общего наполнения сайта, не перегружая и не затмевая сам контент. Для некоторых блоков доступно добавление подложки.
Для добавления подложки нажмите на Карандаш:
В режиме редактирования блока, в дополнительных настройках можно выбрать, будет или нет отображаться подложка для блока:
Как добавить анимацию для сайта
Анимация блоков оживляет интерфейс: движение самого блока привлекает внимание к структуре страницы, а анимация контента внутри создает плавные сценарии взаимодействия, делая переходы естественными, а восприятие информации — последовательным и ненавязчивым.
Для активации анимации нажмите на Карандаш:
В режиме редактирования блока, в дополнительных настройках можно выбрать анимацию появления для блока и для контента внутри него. Для каждого вида анимации вы можете изменить следующие настройки: активировать или деактивировать анимацию, выбрать тип появления, стиль, скорость и повторяемость анимации при повторном обращении к блоку:
Посмотреть, как выглядит анимация на блоке, можно в режиме предпросмотра или перейдя по ссылке на сайт.
Как изменить отступы для блока
Отступы блока — это визуальный «воздух» интерфейса: отступ сверху задает дистанцию от предыдущего элемента и сигнализирует о начале новой смысловой группы, а отступ снизу определяет, насколько органично блок завершается и переходит к следующему. Вместе они создают ритм, предотвращают визуальный шум и делают страницу удобной для последовательного чтения.
Для изменения отступа нажмите на Карандаш:
В режиме редактирования блока, в дополнительных настройках выберите размер отступа. Размеры отступа имеют градацию от S (самый маленький отступ), до XL (самый большой отступ):
Для визуального отделения блоков друг от друга рекомендуем использовать отступ размера L или XL. Меньший размер отступа стоит использовать, только если подряд используется несколько одинаковых блоков, которые объединены одной мыслью и визуально выглядят как единый блок.
Хороший сайт — это не только продуманный интерфейс, но в первую очередь рабочий инструмент для привлечения клиентов и продаж. Если вы хотите получить не просто красивую страницу, а полноценный канал сбыта, который приносит прибыль, обратите внимание на Рег.решение «Интернет-магазин под ключ». С ним вы делегируете все технические вопросы профильным специалистам, а свое время для стратегически важных задач: маркетинга, общения с клиентами и развития своего бизнеса.
Помогла ли вам статья?
Спасибо за оценку. Рады помочь 😊