Как настроить дизайн сайта?

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


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


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

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

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


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

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


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


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


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

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

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

Сделанные изменения применяются сразу же и отображаются в окне с сайтом справа.

Настройка используемых шрифтов

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


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

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


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

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


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


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


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


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

Аналогично в остальных типах типографики.

Изменение стиля кнопок

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

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

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


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


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


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


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

Настройка анимаций сайта

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



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


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


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


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


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


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


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



Справочный центр Prodáct