Верхние и нижние колонтитулы веб-сайта являются важными элементами. В большинстве случаев заголовок содержит навигационные ссылки, упрощающие переход к различным частям веб-сайта. С другой стороны, нижний колонтитул содержит важную информацию, которая может потребоваться посетителям веб-сайта, например, рабочий адрес или контактную информацию, и это лишь некоторые amp .
Верхние и нижние колонтитулы предоставляются текущей темой пользователя в WordPress. Обычно они хорошо спроектированы и подходят для большинства целей. Однако, если вы хотите настроить свои темы, вам придется изменить код; В этом случае вам пригодятся plugin Page Builder. Вы можете использовать их для создания и изменения компонентов веб-страницы, не зная никакого кода.
Этот урок научит нас, как создать верхний и нижний колонтитулы веб-сайта. Будет использоваться Elementor Pro (поскольку базовая версия Elementor не включает функции, наиболее важные для создания этих компонентов). Поэтому скачайте Elementor Pro и убедитесь, что он включен.
Elementor — самый продвинутый конструктор страниц, позволяющий пользователям использовать элементы премиум-класса для создания великолепных дизайнов и макетов. Это очень полезно для новичков, у которых нет предварительных знаний в области кодирования. Редактор перетаскивания в Elementor позволяет пользователям перемещать виджеты и элементы.
Elementor — это визуальный конструктор страниц, который позволяет пользователям видеть, как выглядят их страницы, без переключения режимов.
Еще одним убедительным аргументом в пользу использования Elementor является то, что большую часть работы можно выполнить бесплатно. Их бесплатная версия более чем способна предоставить адекватные возможности редактирования сайта. Однако мы рассмотрим как бесплатную, так и платную версии, чтобы вы могли выбрать ту, которая лучше всего соответствует вашим потребностям.
Ниже приведены некоторые важные аспекты 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 была улучшена за счет использования бесплатных дополнений, позволяющих пользователям настраивать свои веб-сайты с более расширенными возможностями.
Две самые популярные темы WordPress на рынке — Astra и OceanWP. Профессиональный…
Чтобы создать отличный новостной сайт, вам не обязательно становиться веб-дизайнером. Мы…
Тема «Газета» — одна из самых важных тем WordPress, разработанная tagDiv,…
Когда дело доходит до создания интернет-магазина, лучше всего plugin WooCommerce. Это…
Заголовок – это, как правило, первое, что видит человек, когда посещает ваш сайт.
Наш собственный конструктор страниц Avada Builder теперь доступен в двух интерфейсах: Avada…