Этот сайт содержит большие скриншоты и встроенные примеры сложных компоновок блоков, поэтому он оптимизирован для достаточно широких экранов. Хотя бы от 1280 пикселей.

Настройки оформления сайта

На странице настройки оформления сайта откройте слой “Настройки отображения рабочей области”. Это стандартная панель оформления блоков/страниц, применимая ко всем блокам, а для рабочей области понадобится лишь часть настроек. Подробное описание всех настроек приведено в главах про компоновку и декораторы.

Компоновка списка

Для традиционного сайта лучше всего подойдет вариант “Ограничение ширины и выравнивание”. Так, наиболее популярный способ расположение рабочей области сайта - посередине страницы, на 100% экрана, но не шире, к примеру, 1600 пикселей.
Другой вариант, также встречающийся - область, прижатая влево, с левой навигационной колонкой - также реализуется этим типом компоновки. Другие типы компоновки рабочей области подойдут для специфических способов представления контента.

Свойства текста

Здесь вы можете настроить параметры шрифта (семейство, размеры, высоту строки и пр.) для заголовков и текста.

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

Отдельно стоит обратить внимание на настройку дополнительного шрифта. Она введена, потому что часто разработчики сайтов используют на страницах второе начертание текста, отличающееся от основного не только размером, но и семейством (названием шрифта - Times New Roman, Roboto, Verdana и пр.). Некоторые компоненты Неткэта используют дополнительный шрифт, кроме того, в настройках текста можно выбрать, отображать ли контент основным или дополнительным шрифтом. Если дополнительный шрифт вам на сайте не понадобится, просто не настраивайте его.

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

Формы: поля ввода

Здесь настраивается стиль полей ввода в формах: input, select, radiobutton, checkbox. Как и свойства текста и кнопки, стиль форм можно переопределить. 
Не пугайтесь количества настроек: заполнять их все необязательно. В общем-то, можно и совсем не заполнять, тогда поля формы будут выглядеть стандартными образом. К этой настройке можно вернуться потом, когда на сайте появятся формы, если вас не будет удовлетворять их стандартный вид.

Кнопки

Кнопки на сайте используются в формах отправки заявки, интерфейсе интернет-магазина, а также в компоненте “Ссылки”. Как и для полей ввода, для кнопок в стандартном макете также заложены стили по умолчанию, которые вы можете переопределить (а можете не переопределять).
Здесь вы можете настроить вид обычной (второстепенной) кнопки (первая часть формы) и основной (вторая). По умолчанию основная кнопка наследует все свойства второстепенной. Например, вы настраиваете обычную кнопку, которая будет полой (прозрачный фон с рамкой). А основная кнопка должна быть залитой цветом, с контрастной надписью. Вам понадобится переопределить только два цвета, все остальные характеристики - размеры, отступы, закругления углов - будут такими же, как у второстепенной.

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

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

В Неткэте такой подход к цветам интерфейса сайта:

Стандартная палитра сайта состоит из пяти цветов

  • Основной (для текста, заголовков и пр.)
  • Второстепенный 
  • Цвет акцента (фирменный цвет)
  • Основной цвет фона (обычно белый или очень светлый)
  • Второстепенный цвет фона

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

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

    В любом блоке палитра может быть переопределена

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

    Это делается в административном интерфейсе во вкладке настроек оформления раздела.

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

    В любом блоке пользователь может задать свой цвет фона

    Это можно сделать “на глазок” или введя RGB-код цвета. Но мы не рекомендуем поступать так, если вы не уверены в сочетаемости этого цвета и палитры сайта.

    В общем

    Чтобы настроить палитру, выберите одну из предустановленный палитр или настройте свою, указав значения RGB для каждого из цветов. Обязательно позаботьтесь о совместимости цветов!

    Теперь можно переходить к изучению интерфейса конструктора.