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

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

В этой статье вы узнаете о том, как:

добавить шапку на ваш сайт;
изменить вид шапки сайта;
добавить фон к шапке сайта;
добавить элементы к шапке сайта.

Вы также можете ознакомиться с короткой видео-инструкцией о настройках шапки сайта:

Добавление шапки сайта

Для начала выберите wireframe-series-1-header блок из галереи:



Вы можете добавить шапку на все страницы сайта или только на текущую:



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

Изменение вида шапки сайта

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

Добавление строк на шапку сайта

Вы можете добавить новую строку в верхнем левом углу блока:



Важно: максимальное количество строк в шапке сайта — четыре.

Нажав на «бегунок» в верхнем левом углу строки, вы можете перемещать ее в шапке сайта, дублировать или удалить ее и перейти к ее настройкам:



Во вкладке Вид в настройках строки вы можете изменить ее отступы или добавить декоратор между строками:



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

Добавление фона к шапке сайта

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

Во вкладке Фон в настройках строки вы можете поставить на фон шапки сайта цвет или картинку:



При добавлении фото у вас откроются новые опции для редактирования — например, наложение фильтра и коррекция цвета:



Важно: эти настройки применимы к каждой строке по отдельности.

Добавление элементов

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

В каждой строке верхнего блока есть три контейнера, которые можно заполнить контентом. Чтобы добавить туда нужный элемент, наведите курсор мыши на пустую секцию и нажмите «плюс», затем выберите элемент во всплывающем окне:



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



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



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

Чтобы узнать о дополнительных опциях редактирования глобальных шапок, обратитесь к статьям:

Как сделать шапку сайта прозрачной
Как зафиксировать шапку сайта

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

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

Обновлено на: 05/12/2023