Верхние и нижние колонтитулы веб-сайта являются важными элементами. В большинстве случаев заголовок содержит ссылки для навигации, которые упрощают переход к различным частям веб-сайта. С другой стороны, нижний колонтитул содержит важную информацию, которая может потребоваться посетителям веб-сайта, например, служебный адрес или контактную информацию, чтобы упомянуть несколько 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, как только вы выберете шаблон:
Создание логотипа . Первым шагом является создание логотипа. Установите логотип в Живом редакторе сайта, чтобы разместить его в шапке. Выберите логотип, нажав «Идентификация сайта».
Определившись с логотипом, нажмите « Опубликовать .
Теперь логотип вашего сайта должен быть в заголовке, если вы обновите интерфейс Elementor:
После этого вы можете вносить любые изменения, какие захотите.
Внесение изменений в меню заголовка
Следующее, что нам нужно сделать, это изменить меню. Если вы создали меню, шаблон автоматически включит его:
Вот наша структура меню, которая отражена в шаблоне заголовка:
Если у вас более одного меню, при необходимости вы можете обновить их содержимое.
Вы можете редактировать его свойства, как и любой другой виджет.
Если нам нужно добавить больше элементов, мы можем добавить больше разделов в наш заголовок:
Начнем с добавления заголовка и некоторых значков социальных сетей:
После этого вы можете вносить любые изменения, которые вам нравятся. Вот как получилось наше редактирование:
Заголовок публикации
Теперь вы можете опубликовать заголовок, как только закончите его изменение. Мы будем использовать заголовок на всем нашем сайте в amp ниже, поэтому мы выберем этот вариант после выбора Добавить условие»:
А вот бывшие amp ля страницы из нашего живого сайта:
Как сделать нижний колонтитул
Разработка шаблона нижнего колонтитула
Процесс создания нижнего колонтитула очень похож на создание верхнего колонтитула. Чтобы сделать его, создайте новый шаблон нижнего колонтитула следующим образом:
Затем определитесь с шаблоном. Колонтитулы бывают разных форм и размеров. Некоторые содержат информацию о компании, а другие - контактные формы. Выберите шаблон, соответствующий вашим требованиям.
Шаблон, который мы выбрали для нашего сайта, выглядит следующим образом:
Изменения нижнего колонтитула
Вы увидите заголовок, как только начнете редактировать (если вы установите условие, чтобы он отображался на всех страницах).
При необходимости измените нижний колонтитул; Вот так выглядит наша доработка:
Опубликуйте нижний колонтитул после того, как он будет готов:
Готовый продукт
Вот как выглядит готовый результат. На нашем веб-сайте теперь используются как верхний, так и нижний колонтитулы:
Изучите разделы верхнего и нижнего колонтитула на отзывчивость.
Это самый важный этап, и вы должны убедиться, что ваши разделы верхнего и нижнего колонтитула адаптируются. Поскольку полноразмерное меню обычно не подходит для мобильного просмотра, вы должны знать, как ваш дизайн будет отображаться на экране мобильного устройства. Адаптивные переключатели в нижней части раздела боковой панели Elementor могут изменять мобильную версию и версию вкладки.
Вы можете проверить отзывчивость вашего верхнего и нижнего колонтитула различными способами. Для экс amp ля, вы можете использовать такие инструменты , как Browserstack, Crossbrowser тестирование и Google Resizer , чтобы убедиться , что веб - страниц являются откликом , насколько это возможно. Вы также можете сделать это вручную, поэкспериментируя с разными устройствами.
Подведение итогов
Я надеюсь, что это руководство помогло вам быстро разработать уникальные разделы верхнего и нижнего колонтитула с помощью Elementor Pro. WordPress имеет множество функций, но допускает лишь некоторые изменения в разделах верхнего и нижнего колонтитула, которые, наконец, исправлены с помощью конструктора страниц Elementor Pro. Имея гораздо лучший контроль над элементами вашего сайта, вы теперь можете лучше продемонстрировать видение своего сайта. Кроме того, функциональность Elementor была улучшена за счет использования бесплатных надстроек, позволяющих пользователям настраивать свои веб-сайты с более продвинутыми возможностями.
