войти

Дизайнерам и разработчикам

База знаний

Процесс сборки сайта

Параметры оформления сайта

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

Следующий этап - сборка сквозных элементов: шапки (футера), контентной области и подвала (хэдера). Мы советуем идти последовательно сверху вниз. Например, вам надо собрать подобный макет:

Сайт-образец
Перейдите на сайт в режим редактирования, вы увидите пустой экран и одинокий плюс. Обратите внимание: переключаетль "Режим дизайна" должен быть включен.
Пустой экран
Если вы собираете традиционный сайт, блоки в нем выводятся последовательно один под другим. Т.к. в нашем примере справа от первого блока (часов работы) выводятся телефоны, сначала добавим контейнер, установим цвет фона и компоновку “flexbox” с горизонтальной ориентацией; также целесообразно установить вертикальное выравнивание и высоту списка.
Компоновка контейнера

После этого внутрь контейнера надо последовательно добавить оба блока - “Текст” с графиком работы и “Контакты коротко”.

Совет: если вам надо добавить один блок после другого, при этом, первый блок очень маленький и нажать на иконку добавления (плюс) неудобно (или рядом два плюса - от блок и от контейнера), нажмите на панельку управления того блока, рядом с которым хотите добавить новый блок, и выберите меню “Добавить блок…”.

Добавление блока после выбранного блока
После добавления блоков и контента в них настройте сами блоки. Например, для примера, приведенного выше, надо настроить блок “Контакты коротко”, указав горизонтальную компоновку (если туда может быть добавлен еще один телефон) и изменив параметры шрифта.
Настройка блока
Настройка компоновки
Настройка веса шрифта
Что касается настройки адаптива, мы рекомендуем его настраивать сразу для каждого собранного блока/контейнера, но можно сначала добавить все блоки/компоненты в шапке и после этого настраивать адаптив. В нашем примере обе строки шапки при уменьшении экрана адаптируются в одну строчку, а при промежуточных значениях ширины телефон “переезжает” из верхней строчки на нижнюю, а верхняя при этом пропадает.
Мобильное представление
Промежуточная точка перехода

Поэтому закончим шапку и адаптируем обе строки шапки одновременно.

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

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

Обратите внимание, что работает такое только при компоновке родительского контейнера (или всего сайта, как в данном случае) "Ограничение ширины и выравнивание".

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

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

Если в меню ничего нет - надо добавить разделы (в данном случае это разделы верхнего уровня).

И, наконец, кнопку (тип блока "Произвольная форма", шаблон "Кнопка, открывающая форму". Для нее надо настроить параметры отображения кнопок.

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

Аналогичным образом вставим иконку поиска и добавим справа отступ в 30 пикселей.

Шапка для широких экранов готова!

Шапка

© 1999 – 2024
ООО «НетКэт»

+7 (495) 783-60-21
+7 (495) 055-73-84

info@netcat.ru

129329, г. Москва,
ул. Вересковая, 13