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

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

Для этого перейдите в Настройки сайта, сделать это можно из общего списка сайтов нажав на … у карточки интересующего сайта (скриншот).

Или из режима редактирования сайта перейдите в Страницы сайта (скриншот).

В открывшемся окне нажмите Настройки сайта в правом верхнем углу.

Вы окажетесь в управлении Настройками сайта, где вам будет необходимо выбрать настройки дизайна (скриншот).

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

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

Если у вас уже есть фирменный стиль, мы рекомендуем использовать его цвета, чтобы логично соединить сайт с другими носителями бренда (вывеской, визитками, буклетами, оформлением интерьера и так далее). В противном случае выберите несколько хорошо сочетающихся между собой цветов. Желательно чтобы 1 или 2 из них были насыщенными, 1 светлым, также можно добавить один очень темный и один очень светлый оттенки, или оставить их по умолчанию черным и белым.

Для перехода к редактированию палитры нажмите на любой из оттенков в общих настройках дизайна (скриншот).

В открывшемся окне нажмите на цвет, который вы хотите редактировать. Появится выпадающее окно с установленными в данный момент цветами. Вы можете заменить выбранный цвет на один из них или добавить свой. Для этого нажмите на + Цвет сразу под палитрой образцов (скриншот).

Вам откроется выпадающее окно с возможностью выбрать цвет вручную при помощи панели выбора цвета, а также со строкой (скриншот), позволяющей ввести номер цвета в системе RGB.

Шрифты, как и цвета, являются частью фирменного стиля компании. Поэтому, если вы уже используете какие-то шрифты на других носителях (вывески, меню, визитки, буклеты и так далее), лучше продолжить использовать их же и на сайте.

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

В открывшемся окне вы можете выбрать шрифты и настроить типографику.

Первой строкой идёт шрифт заголовков сайта (скриншот).

Для его изменения нажмите на выбранный шрифт и сотрите символы в строке. Вы увидите выпадающий список шрифтами. Выберите нужный вам и он автоматически применится к сайту, отображаемому справа. Внимание, не все шрифты имеют кириллическую версию (отображают русские буквы).

По тому же принципу меняется шрифт основного текста.

После выбора нужных шрифтов можно перейти к редактированию стилей (типографике).

Выберите необходимый тип нажатием в его область.

В открывшемся окне вы сможете выбрать начертание, размер и высоту строки (скриншот).

Чтобы изменить стиль кнопок нажмите на область с кнопками на общей странице настроек дизайна (скриншот).

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

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

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

Ниже вы можете изменить цвет кнопки. Цветовая схема кнопки состоит из трех значений: фон, рамка и текст. Для внедрения изменения нажмите на кнопку, которую вы хотите менять. Мы рекомендуем использовать фирменные цвета вашего сайта. Для этого нажмите на прямоугольник с цветом напротив интересующего значения и в появившемся окне выберите нужный.

Однако вы можете выбрать и новый цвет. Для этого нажмите на + Цвет сразу под палитрой образцов. Вам откроется выпадающее окно с возможностью выбрать цвет вручную при помощи панели выбора цвета, а также со строкой, позволяющей ввести номер цвета в системе RGB.

Вы можете настроить форму кнопок, изменив значение в поле Закругление углов, где 0 px кнопки с абсолютно прямыми углами, а 50 px – овальные кнопки.

Вы также можете изменить настройки или отключить анимации сайта. Для этого перейдите в раздел “Анимации” в общих настройках дизайна (скриншот).

В появившемся окне откроются настройки анимации. Если вы хотите полностью отключить анимации, то выберите Без анимации в поле Тип анимации.

Предусмотрено 2 типа анимаций: Затухание и Перемещение.

Эффект Затухание – это плавное появление элементов на фоне блоков. У эффекта регулируются Длительность, Задержка и Кривая. Длительность – это общая длительность эффекта, от полного отсутствия элементов до их полного проявления, измеряется в секундах. Задержка – это промежуток времени от момента, когда пользователь увидел блок, и до начала анимации. Кривая – анимационный эффект.

Перемещение – это появление блоков на фоне путем перемещения (справа, слева, снизу из угла и так далее, в зависимости от настроек). У эффекта регулируются Длительность, Задержка, Смещение по X, Смещение по Y и Кривая. Длительность – это общая длительность эффекта, от полного отсутствия элементов до их установки на положенное место, измеряется в секундах. Задержка – это промежуток времени от момента, когда пользователь увидел блок, и до начала анимации. Смещение по X – это точка по оси X (горизонтально), откуда начнут движение элементы. Смещение по Y – это точка по оси Y (вертикально), откуда начнут движение элементы. Используя комбинацию этих значений можно настроить появление элементов из любого угла.

Кривая – анимационный эффект.

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

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