Верхние и нижние колонтитулы веб-сайта являются важными элементами. В большинстве случаев заголовок содержит навигационные ссылки, упрощающие переход к различным частям веб-сайта. С другой стороны, нижний колонтитул содержит важную информацию, которая может потребоваться посетителям веб-сайта, например, рабочий адрес или контактную информацию, и это лишь некоторые amp .
Верхние и нижние колонтитулы предоставляются текущей темой пользователя в WordPress. Обычно они хорошо спроектированы и подходят для большинства целей. Однако, если вы хотите настроить свои темы, вам придется изменить код; В этом случае вам пригодятся plugin Page Builder. Вы можете использовать их для создания и изменения компонентов веб-страницы, не зная никакого кода.
Этот урок научит нас, как создать верхний и нижний колонтитулы веб-сайта. Будет использоваться Elementor Pro (поскольку базовая версия Elementor не включает функции, наиболее важные для создания этих компонентов). Поэтому скачайте Elementor Pro и убедитесь, что он включен.
- Почему вам следует выбрать Elementor в качестве конструктора страниц?
- Elementor позволяет вам выбрать основной макет вашего пользовательского верхнего и нижнего колонтитула.
- Что такое заголовок и что он делает?
- Что такое нижний колонтитул?
- Как сделать заголовок
- Разработка шаблона заголовка
- Внесение изменений в меню заголовка
- Публикация в шапке
- Как сделать нижний колонтитул
- Разработка шаблона нижнего колонтитула
- Изменения нижнего колонтитула
- Готовый продукт
- Проверьте разделы верхнего и нижнего колонтитула на отзывчивость.
- Подведение итогов
Почему вам следует выбрать Elementor в качестве конструктора страниц?
Elementor — самый продвинутый конструктор страниц, позволяющий пользователям использовать элементы премиум-класса для создания великолепных дизайнов и макетов. Это очень полезно для новичков, у которых нет предварительных знаний в области кодирования. Редактор перетаскивания в Elementor позволяет пользователям перемещать виджеты и элементы.
Elementor — это визуальный конструктор страниц, который позволяет пользователям видеть, как выглядят их страницы, без переключения режимов.
Еще одним убедительным аргументом в пользу использования Elementor является то, что большую часть работы можно выполнить бесплатно. Их бесплатная версия более чем способна предоставить адекватные возможности редактирования сайта. Однако мы рассмотрим как бесплатную, так и платную версии, чтобы вы могли выбрать ту, которая лучше всего соответствует вашим потребностям.
Ниже приведены некоторые важные аспекты Elementor, которые делают его стоящим:
- Поддерживается функция перетаскивания.
- Имеет большое количество шаблонов.
- Всего более 90 виджетов.
- Для оперативной поддержки не требуется кодирование.
- Доступны опции повтора и отмены.
- Автосохранение доступно.
Elementor позволяет вам выбрать основной макет вашего пользовательского верхнего и нижнего колонтитула.
Было бы полезно, если бы вы определились с общим расположением желаемых разделов верхнего и нижнего колонтитула, прежде чем разрабатывать уникальный заголовок. Просмотр готового макета раздела заголовка может предоставить вам множество вариантов.
Вы можете выбирать из различных разделов заголовка; Самый распространенный и современный заголовок содержит логотип сайта в крайнем левом углу, панель навигации посередине и раздел панели поиска справа.
Возможности безграничны, и вы можете создать любой макет, который захотите.
Я выбрал готовый шаблон заголовка № 7; Это наиболее распространенный и простой подход к использованию заголовка на веб-сайте WordPress. Скопируйте и вставьте имя шаблона заголовка в Шаблоны > Заголовок > Шаблон поиска > вставьте скопированное имя заголовка .
Найдя нужный шаблон заголовка, выберите «Редактировать с помощью Elementor», и вы попадете в раздел конструктора заголовков Elementor Pro.
Давайте начнем эту вечеринку.
Что такое заголовок и что он делает?
Верхняя часть вашей веб-страницы называется «заголовком веб-сайта». Заголовок обычно одинаков на всем сайте. Однако некоторые веб-сайты используют разные заголовки для разных частей сайта.
Дизайн вашего заголовка даст вашим пользователям первое впечатление о вашем веб-сайте, независимо от того, перешли ли они на вашу домашнюю страницу, страницу «О нас» или другой отдельный контент. И, если он хорошо спроектирован, он привлечет внимание пользователя и побудит его продолжать прокручивать и читать.
Заголовок также может помочь в продвижении бренда вашей компании.
Я использую такие функции, как логотип компании, шрифт, цвета и общий язык бренда.
Навигация по сайту, поиск по сайту, корзина покупок (для сайтов продаж), кнопки призыва к действию (CTA) и другие функции, которые улучшают взаимодействие с пользователем и повышают коэффициент конверсии, — все это находится в заголовках.
Что такое нижний колонтитул?
Нижний колонтитул — это часть веб-страницы, которая отображается внизу страницы. Обычно они постоянно отображаются по всему сайту, на всех страницах и постах, как заголовки.
Нижние колонтитулы часто упускаются из виду, что является пустой тратой потенциала, учитывая, что они появляются на каждой странице сайта. Они одинаково важны и для заголовков.
В вашем дизайне нижнего колонтитула может отображаться полезная и важная информация, такая как регистрация на информационный бюллетень, информация об авторских правах, условия использования и конфиденциальности, карта сайта, контактная информация, карты, навигация по веб-сайту и многое другое, в зависимости от выбранных вами настроек.
Как сделать заголовок
Мы собираемся создать индивидуальный заголовок в этом разделе. Не волнуйтесь, если это кажется пугающим; мы не начнем с нуля. Вместо этого мы будем использовать шаблоны Elementór Pro, разработанные командой дизайнеров Elementor.
Разработка шаблона заголовка
В панели администратора WordPress наведите указатель мыши на «Шаблоны» и нажмите «Добавить новый» , чтобы создать заголовок.
После маршрутизации появится модальное окно. Выберите «Заголовок» в раскрывающемся меню, назовите его и нажмите « Создать шаблон »:
Это запустит редактор Elementor. После этого вам будет представлен список шаблонов на выбор. Итак, выберите тот, который вам нравится:
Он должен появиться в верхней части раздела редактирования Elementor после того, как вы выбрали шаблон:
Создание логотипа. Первым шагом является создание логотипа. Установите логотип в Live Editor сайта, чтобы поместить его в заголовок. Выберите логотип, нажав «Идентификация сайта».
Определившись с логотипом, нажмите «Опубликовать» .
Логотип вашего сайта теперь должен быть в заголовке, если вы обновите интерфейс Elementor:
После этого вы можете внести любые изменения, которые захотите.
Внесение изменений в меню заголовка
Следующее, что нам нужно сделать, это изменить меню. Если вы создали меню, шаблон автоматически включит его:
Вот наша структура меню, которую вы можете увидеть в шаблоне заголовка:
Если у вас более одного меню, при необходимости вы можете обновить их содержимое.
Вы можете редактировать его свойства, как и любой другой виджет.
Если нам нужно добавить больше элементов, мы можем добавить больше разделов в наш заголовок:
Начнем с добавления заголовка и нескольких значков социальных сетей:
После этого вы можете внести любые изменения по своему усмотрению. Вот как получилось наше редактирование:
Публикация в шапке
Теперь вы можете опубликовать заголовок после его изменения. amp мы будем использовать заголовок на всем нашем сайте , поэтому выберем этот вариант после выбора «Добавить условие»:
А вот amp страницы с нашего действующего сайта:
Как сделать нижний колонтитул
Разработка шаблона нижнего колонтитула
Процесс создания нижнего колонтитула очень похож на процесс создания верхнего колонтитула. Чтобы сделать это, создайте новый шаблон нижнего колонтитула, например:
Затем определитесь с шаблоном. Футеры бывают разных форм и размеров. Некоторые включают информацию о фирме, а другие имеют контактные формы. Выберите шаблон, соответствующий вашим требованиям.
Для нашего сайта мы выбрали следующий шаблон:
Изменения нижнего колонтитула
Вы увидите заголовок, как только начнете редактирование (если вы установите условие, чтобы он отображался на всех страницах).
Измените нижний колонтитул по мере необходимости; Вот как выглядит наша доработка:
Опубликуйте нижний колонтитул после его завершения:
Готовый продукт
Вот как выглядит готовый результат. На нашем сайте теперь используются как верхний, так и нижний колонтитул:
Проверьте разделы верхнего и нижнего колонтитула на отзывчивость.
Это самый важный этап, и вы должны убедиться, что разделы верхнего и нижнего колонтитула адаптивны. Поскольку полноразмерное меню обычно не подходит для просмотра на мобильных устройствах, вы должны знать, как ваш дизайн будет выглядеть на экране мобильного устройства. Адаптивные переключатели в нижней части раздела боковой панели Elementor могут менять мобильную версию и версию вкладок.
Вы можете проверить отзывчивость вашего верхнего и нижнего колонтитула различными способами. amp , вы можете использовать такие инструменты, как Browserstack, CrossBrowser Testing и Google Resizer, чтобы гарантировать, что ваши веб-страницы максимально отзывчивы. Вы также можете сделать это вручную, экспериментируя с разными устройствами.
Подведение итогов
Я надеюсь, что это руководство помогло вам быстро разработать уникальные разделы верхнего и нижнего колонтитула с помощью Elementor Pro. WordPress имеет множество функций, но он допускает лишь несколько изменений в разделах верхнего и нижнего колонтитула, которые окончательно исправляются с помощью конструктора страниц Elementor Pro. Благодаря гораздо лучшему контролю над элементами вашего сайта вы теперь можете лучше продемонстрировать видение своего сайта. Кроме того, функциональность Elementor была улучшена за счет использования бесплатных дополнений, позволяющих пользователям настраивать свои веб-сайты с более расширенными возможностями.
