18  /  268

Общие настройки решения

Настройки со вкладки «Общие» определяют внешний вид всего сайта. В этом уроке мы с вами рассмотрим как задать сайту свой неповторимый стиль. Для этого:

1. Выберите для своего сайта основной цвет


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

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



Если вы знаете hex-код нужного цвета, укажите его в горизонтальном поле ввода (1). Если вы не знаете этот код, используйте вертикальную шкалу справа (2), чтобы переключаться между цветами, а большой квадрат слева (3) – для выбора нужного оттенка (кликните левой кнопкой мыши на область с нужным оттенком). Когда укажете свой цвет, нажмите «Выбрать» (4).

2. Подберите стиль оформления и размер для текстов на сайте


По умолчанию доступны следующие стили размером в 13 px, 14 px и 15 px:

  • Open Sans



  • PT Sans


  • Ubuntu


  • Montserrat


Если вас не устраивают стандартные варианты, вы также можете присмотреть себе шрифты в свободной библиотеке Google Fonts. О том, как настроить решение в данном случае, читайте здесь.

3. Установите ширину сайта


Чтобы сайт выглядел современно и оставался максимально удобным для ваших пользователей, рекомендуем с помощью инструментов Яндекс.Метрика или Google Analytics узнать какое разрешение экрана наиболее популярно среди ваших посетителей. Это позволит вам подобрать наиболее оптимальную ширину контентной области для своего сайта – в 1700 px, 1500 px, 1344 px или 1200 px.

Подробнее об интеграции с сервисами веб-аналитики, читайте здесь.

4. Выберите стиль кнопок


Решение позволяет использовать:

  • прямоугольные кнопки

  • или скругленные


5. Определите нужен ли вам декоративный отступ


Декоративный отступ добавляет по бокам от контентной области небольшое пустое пространство:



При деактивированном параметре содержимое контентной части растягивается, заполняя собой в браузере всю область просмотра:


6. Определите стиль заголовков


Заголовки могут быть:

  • обычные (нормальные)



  • полужирные


7. Выберите способ расположения заголовка и хлебных крошек (цепочки навигации)


Заголовок с цепочкой навигации можно разместить:

  • Слева

  • По центру



8. Установите стиль оформления заголовка и хлебных крошек


Для оформления заголовка и хлебных крошек доступны следующие варианты:

  • На белом фоне 1 (цепочка навигации над заголовком)

  • На сером фоне 1 (цепочка навигации над заголовком)



  • На белом фоне 2 (цепочка навигации под заголовком)




  • На сером фоне 2 (цепочка навигации под заголовком)




9. Выберите тип поиска


Решение предлагает 2 типа поиска:

  • «На весь экран» – поиск по сайту будет перекрывать собой все содержимое

  • «Выпадает сверху» – поисковая строка будет разворачиваться над содержимым сайта


10. Установите свое положение внутреннего меню


Боковое меню внутри разделов, а также элементы под ним (боковой баннер, кнопки «Заказать звонок», «Написать сообщение», «Оставить отзыв» и «Ближайший офис»), можно разместить:

  • слева от контента


  • или справа от него


11. Включите или отключите отображение кнопки печати страницы


Данный параметр добавляет соответствующую кнопку на все страницы сайта. Выглядит она следующим образом:



При нажатии эта кнопка отправляет просматриваемую пользователем страницу на печать.