Как в сайте исправить шапку

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

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

Редактирование шаблона заголовка

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

1. На панели администратора сайта перейдите в раздел Внешний вид → Редактор.
2. Щёлкните текущий шаблон по центру в верхней части экрана (здесь отображается «Индекс»).
3. Нажмите «Просмотр всех шаблонов».
4. На следующем экране нажмите «Части шаблона».
5. Затем выберите «Заголовок».

Затем сделайте следующее.

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

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

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

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

Чтобы добавить логотип в заголовок, выполните следующее.

1. Нажмите кнопку инструмента вставки блоков +.
2. Найдите блок «Логотип сайта».
3. Щёлкните его, чтобы вставить.
4. Загрузите изображение логотипа, используя этот блок.

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

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

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

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

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

Чтобы добавить меню в заголовок, выполните следующее.

1. Нажмите кнопку инструмента вставки блоков +.
2. Найдите блок «Навигация».
3. Щёлкните его, чтобы вставить.

После добавления блока «Навигация» в заголовок, у вас будет два варианта:

• Выбор существующего меню. Нажмите кнопку, а затем выберите меню.
• Создайте новое меню с нуля. Щёлкните и добавьте любые элементы.

Когда меню будет готово, его можно переместить в нужное место с помощью стрелок «влево» и «вправо».

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

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

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

Чтобы добавить панель поиска в заголовок, выполните следующее.

1. Нажмите кнопку инструмента вставки блоков +.
2. Найдите блок «Поиск».
3. Щёлкните его, чтобы вставить.

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

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

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

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

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

Чтобы добавить значки социальных сетей в заголовок, выполните следующее.

1. Нажмите кнопку инструмента вставки блоков +.
2. Найдите блок «Значки социальных сетей».
3. Щёлкните его, чтобы вставить.

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

1. Нажмите кнопку инструмента вставки блоков + и введите название социальной сети, которую необходимо добавить. Щёлкните элемент, чтобы добавить его к значкам социальных сетей.
2. Щёлкните значок снова, чтобы добавить ссылку на профиль. Вставьте URL-адрес своего профиля в социальной сети и нажмите стрелку для подтверждения.
3. Для добавления нового значка, если следующая кнопка «+» сразу не отображается, нажмите кнопку В виде списка, а затем нажмите «Значки социальных сетей» слева. Кнопка «+» должна появиться, затем можно продолжить добавление значков.
4. Повторите шаги 2 и 3 необходимое число раз, чтобы добавить все свои профили в социальных сетях.

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

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

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

Шапка (header, хедер) ― это верхняя часть сайта. В ней располагается логотип организации, меню, контакты и другие элементы сайта.

Подвал (footer, футер) ― это нижняя часть сайта. В нём может находиться карта сайта, ссылки на социальные сети, символы копирайта.

В редакторе REG.Site шапка и подвал редактируются отдельно от основного контента сайта. Как отредактировать тело сайта читайте в статье Как редактировать страницы сайта в REG.Site.

Как создать шапку или подвал

Готово, можно приступать к редактирования блока.

Как перейти к редактированию шапки или подвала

Перейти к редактированию шапки или подвала можно двумя способами:

• через админку WordPress,
• в процессе редактирования основной части страницы.

Способ 1. Через админку WordPress

Уже созданные блоки в редакторе выделяются зелёным цветом.

Чтобы перейти к редактированию:

Готово, теперь можно редактировать.

Способ 2. При редактировании страницы

Готово, приступайте к редактированию.

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

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

Так же как и при настройке основного контента страницы, редактор разделён на 3 уровня:

• раздел,
• строка,
• модуль.

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

• раздел ― синий,
• строка ― зелёный,
• модуль ― серый.

Чтобы открыть настройки раздела, строки или модуля нажмите на Шестерёнку в меню соответствующего цвета:

• раздел ― синее меню,
• строка ― зелёное меню,
• модуль ― серое меню.

Настройки разделены на несколько частей: «Контент», «Дизайн» и «Дополнительно».

Настройка раздела и строки

Настройки раздела и строки одинаковы.

Контент. Здесь можно вставить ссылку, чтобы весь раздел вел на определённую страницу. Можно выбрать фон (однотонный или градиент), вставить фоновое изображение или видео. Обратите внимание! Видео нужно загружать сразу в двух форматах — .MP4 и .WEBM, чтобы на всех браузерах оно отображалось корректно. Также на мобильных устройствах отключены видеофоны, поэтому обязательно установите обычный фон или фоновое изображение, чтобы оно отображалось вместо видео.

Дизайн. При помощи шаблонов можно визуально отделить хедер от основной части страницы:

Здесь же можно настроить размеры и расположение шапки, настроить яркость, насыщенность, наложить фильтры, вставить анимацию.

Дополнительно. Это блок для расширенных настроек. Здесь можно ввести CSS ID и CSS-класс. Чтобы добавить несколько классов, разделите их пробелом. В разделе «Пользовательский CSS» можно добавить собственный CSS к определённому элементу. Каждое правило CSS вводится через точку с запятой. В опции «Видимость» можно отключить раздел на опредёленном устройстве, например для упрощения загрузки контента на мобильной версии сайта.

Настройка модуля

В зависимости от вида модуля настроек может быть больше. Для примера поработаем с настройками модуля «Меню».

Контент. В этом блоке добавляется меню. Обратите внимание, чтобы добавить меню в шапку, надо добавить его в настройках WordPress. Если у вас добавлено несколько видов меню в библиотеке WordPress, можно выбрать одно из сохраненных. Можно добавить свой логотип в шапку сайта. Здесь же можно вставить дополнительные элементы: значок корзины и поиска.

Дизайн. Здесь настраивается шрифт и размер текста. Также в этом блоке можно отрегулировать внешний вид выпадающего меню (если оно есть). Если вы добавили значок корзины или поиска, то именно здесь настраивается их размер и цвет. Можно добавить анимацию.

Дополнительно. Также как и при настройке раздела и строки, в графе «Дополнительно» настраиваются CSS ID, CSS-классы и пользовательский CSS. Можно настроить видимость на определённом устройстве.

Дополнительные возможности

В нижней части экрана есть дополнительное меню. Чтобы его открыть, нажмите на Три точки:

В этом меню есть несколько важных кнопок:

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

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

История редактирования. Можно вернуть страницу к прежнему состоянию. Нажмите на Часы. На экране появится список изменений. Выберите любую версию сайта и верните настройки к более старой версии.

Сохраните изменения:

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

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

Телефон будет находиться в соседнем модуле, поэтому в строке укажите два столбца или больше. Например, в одном будет находится главное меню, а в соседнем телефон.

Готово, теперь пользователи могут не только увидеть номер телефона, но и сразу перейти к вызову.

Видеосправка. Как изменить подвал сайта

Как изменить логотип сайта

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

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

Видеосправка. Как изменить логотип

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

Как легко изменить шапку сайта

Тем паче, обещал я это в прошлой своей статье — Как установить шаблон на WordPress.

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

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

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

Итак, поехали.

В первую очередь необходимо зайти в админ панель и немножко изменить код, в двух файлах, которые отвечают за отображение хедера и за стили. Файлы эти называются: header.php и style.css соответственно.

Зачем же, что-то менять? Да еще и в коде. Спросите вы. Отвечаю! Вся беда в том, что функционал шаблона GreenChilli, позволяет вставить картинку размером, всего лишь 286×50 px. Это, как вы понимаете, очень маленький размер, который не совсем соответствует идее блога.

Заходим в админку, переходим к меню «Внешний вид», следом к меню «Редактор» и наблюдаем перед глазами, окно редактора. Ищем справа файл header.php, кнопаем на него, и видим тот самый код, в который сейчас будем вносить изменения. Я выделил кусочек кода, который отвечает за саму картинку в шапке и за вывод формы поиска справа. Как видим этот код заключен между тегами

<div id=»header»> </div>

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

Внешний вид идентификатора header, т.е. нашей шапки, заключенного в теги <div> </div > прописывается в файле стилей — style.css

Код, который отвечает за вывод формы поиска, мы трогать не будем, а вот все остальное безжалостно удалим. Так же необходимо удалить скобочку вот здесь <?php }

Жмем на кнопку «Обновить файл»

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

Итак, давайте посмотрим, что у нас получилось.

Вот это белое поле вверху, и будет место для нашей новой шапки. Единственно, что мне не сильно нравится, это форма поиска с правой стороны. Удалять ее не будем, а просто спрячем.

Возвращаемся опять в редактор, выбираем файл style.css, ищем в этом файле вот такой блок.

И после открывающей скобочки вставляем следующую строчку – visibility: hidden; Нажимаем «Обновить»
В результате код должен выглядеть вот так.

Все! Место для новой шапки подготовлено. Осталось только, ее нарисовать и вставить.
Советую скачать очень удобную программку. Которая в дальнейшем, очень пригодится и которая называется PicPick. Функций у нее много, но что потребуется в данный момент, так это линейка. Качаем программку, устанавливаем.

Измеряем линейкой это белое поле и у нас получается 960 на 114 px.

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

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

Итак, картинка готова. Называем ее ну, например, header.jpg, и заливаем на хостинг по FTP. Причем заливаем по адресу ….wp-content/themes/greenchilli/images
Далее опять открываем редактор. Открываем файл стилей, ищем вот такой блок:

И после открывающей скобки вставляем вот такой вот код:

background: url (‘…/greenchilli/images/header.jpg’);

В результате должно получиться так:

Нажимаем “Обновить», переходим по адресу блога в браузере и любуемся новой симпатичной шапочкой.

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

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

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?