Шапка сайта: Шапка сайта, как ее оформить — Независимое театральное объединение "Зрительские симпатии"

Содержание

Настройки шапки сайта | Weblium Help Center

Статьи по: Редактор

Эта статья также доступна на:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обновлено на: 26/03/2022

«Стоит ли закреплять шапку сайта сверху страницы?» — Яндекс Кью

О сообществе

SEO

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

Настройте свой заголовок с помощью редактора сайта — Служба поддержки WordPress.

com

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

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

Содержание

Видеоруководство

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

Выполните следующие действия, чтобы получить доступ к части шаблона заголовка:

На панели инструментов вашего сайта перейдите к Внешний вид → Редактор .
Нажмите на частей шаблона в левой части экрана.
Выберите Заголовок , затем щелкните Редактировать .
На следующем экране вы сможете настроить различные элементы заголовка вашего сайта.

В зависимости от вашей темы вы можете найти различные элементы в заранее заданном заголовке. В этом документе мы рассмотрим добавление и настройку всех различных элементов вашего заголовка.

Добавить элементы в заголовок

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

💡

Вы можете использовать List View , чтобы отслеживать все блоки в вашем заголовке, быстро выбирать именно те блоки, которые вам нужны, и перемещать их по желанию.

Элемент 1: Логотип сайта

Чтобы добавить логотип в заголовок:

Находясь в части шаблона заголовка, нажмите кнопку + Вставка блока .
Поиск блока Site Logo .
Щелкните блок логотипа сайта, чтобы вставить его.
Загрузите изображение вашего логотипа через блок.

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

Наконец, вы можете изменить его размер, перетаскивая точки выделения внутрь и наружу, пока размер не станет подходящим.

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

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

Элемент 2: Меню сайта

Чтобы добавить меню в заголовок:

В части шаблона заголовка нажмите кнопку + Блок-вставка .
Поиск блока навигации .
Щелкните значок блока навигации, чтобы вставить его.

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

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

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

Элемент 3: Панель поиска

Чтобы добавить панель поиска в заголовок:

Находясь в части шаблона заголовка, нажмите кнопку + Вставка блока .
Поиск блока поиска .
Нажмите на него, чтобы вставить.

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

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

Подробнее об использовании блока поиска .

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

Элемент 4: значки социальных сетей

Чтобы добавить значки социальных сетей в заголовок:

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

После того, как вы добавили блок, вы можете начать добавлять социальные профили. Для этого:

Нажмите кнопку + Вставка блоков и введите название социальной платформы, которую вы хотите добавить. Нажмите на элемент, чтобы добавить его к своим значкам социальных сетей.
Нажмите на значок еще раз, чтобы добавить ссылку на свой профиль. Вставьте URL-адрес своего профиля в социальной сети и нажмите на стрелку для подтверждения.
Чтобы добавить новый значок, если следующая кнопка + не видна сразу, нажмите Представление списка , затем щелкните Социальные значки слева, чтобы открыть кнопку + и продолжить добавлять новые значки.
Повторите шаги 2 и 3 столько раз, сколько необходимо, чтобы добавить все свои профили в социальных сетях.

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

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

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

Универсальные планы и цены

Обзор элемента заголовка — документация

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

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

Чтобы создать новый элемент заголовка, перейдите в раздел Внешний вид > Элементы и нажмите «Добавить новый». В раскрывающемся списке «Элемент» выберите «Заголовок».

Содержимое

Содержимое необходимо, если вы хотите использовать вариант фонового изображения ниже.

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

Если вы хотите использовать только фоновое изображение без добавления какого-либо контента, просто добавьте HTML-комментарии:

Герой страницы

Классы элементов

Добавьте пользовательские классы в элемент заголовка.

Контейнер

Параметр контейнера — это то, к чему применяется фоновое изображение или цвет страницы.

Полный : Герой страницы будет занимать всю ширину экрана.

Содержится : Герой страницы будет той же ширины, что и контейнер.

Внутренний контейнер

Этот параметр относится к внутреннему контейнеру, в котором содержится главный контент страницы.

Полный : Содержимое будет занимать всю ширину экрана.

Содержится : Содержимое будет той же ширины, что и контейнер.

Горизонтальное выравнивание

Выберите горизонтальное выравнивание основного содержимого страницы.

Полноэкранный режим

Эта опция заставит героя страницы занимать всю область просмотра вашей страницы.
Примечание. Необходимо выбрать «Объединить» на вкладке «Заголовок сайта».

Прокладка

Добавить отступ к основному содержимому страницы.

Высота героя страницы определяется верхним и нижним отступами.

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

Фоновое изображение

Добавить фоновое изображение к главному содержимому страницы.

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

Пользовательское изображение — загрузите пользовательское изображение для этого конкретного героя страницы.

Положение фонового изображения

Установите положение фонового изображения.
Примечание. Требуется выбрать «Избранное изображение» или «Пользовательское изображение».

Parallax

При включении этой опции к фоновому изображению применяется эффект параллакса (движение при прокрутке).
Примечание. Требуется выбрать «Избранное изображение» или «Пользовательское изображение».

Отключить избранное изображение

Отключить избранное изображение в сообщениях с этим героем страницы.
Примечание. Требуется выбрать «Избранное изображение» или «Пользовательское изображение».

Наложение фона

Используйте цвет фона в качестве наложения фона.
Примечание. Требуется выбрать «Избранное изображение» или «Пользовательское изображение».

Цвета

Установите фон, цвет и цвета ссылок для главного содержимого страницы.

Заголовок сайта

Объединение с содержимым

Поместите заголовок сайта поверх содержания под ним. См. дополнительную информацию здесь и несколько примеров здесь.

Смещение высоты заголовка сайта

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

Без смещения:

Со смещением 100 пикселей (высота заголовка):

Фон заголовка

Примените определенный цвет фона заголовка, чтобы он сочетался с этим героем страницы. Это заменит цвет фона заголовка, установленный в настройщике.

Логотип сайта

Применить специальный логотип для этого героя страницы. Это особенно полезно, если включена опция «Объединить с содержимым». См. пример здесь.
Примечание. Требуется существующий логотип, загруженный в логотип сайта.

Логотип навигации

Примените определенный логотип навигации, чтобы перейти к этому герою страницы. Это особенно полезно, если включена опция «Объединить с содержимым». См. пример здесь.
Примечание. Требуется загрузить существующий логотип в Navigation Logo.

Место навигации

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

Цвета навигации

Применить определенные цвета навигации для этого героя страницы. Это заменит цвета навигации, установленные в настройщике. См. пример здесь.

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

Правила отображения

Чтобы ваш элемент отображался где угодно на вашем веб-сайте, вы должны установить определенные условия на вкладке «Правила отображения».