[Мастер-класс по Elementor PRO] Как создать и настроить шапку (header) и нижнюю часть сайта (footer)

  Автор:
  18
настроить фиксированную шапку (header) и подвал (footer) сайта с помощью Elementor

В этом мастер-классе я расскажу вам как вы можете создать произвольную шапку и футер для вашего сайта. Мы уже проходили с вами создание шаблонов страниц (архивные страницы, страница статьи, 404, страница поиска). Это все шаблоны внутренней части страницы или по другому «контентной части».

Шапка и футер, при этом, остаются неизменными. Они заимствуются из шаблона. То есть в зависимости от того, какой шаблон (тему) вы используете, такими будут шапка и футер. Единственный вариант, когда шапка и футер не отображаются это шаблон Elementor «Холст». Обычно такой шаблон используется для лендингов. Но что, если вы хотите переделать шапку и футер своего сайте, добавить какие-то  элементы, или хотите сделать разные шапки и футеры для разных страниц (почему бы и нет :)). Это возможно сделать с Elementor PRO.

В этом мастер классе я еще добавила эффект залипания. Это когда при прокрутке экрана шапка остается на месте.

Перед тем, как вы приступите к просмотре, пара замечаний:

1.Если вы решили создать произвольную шапку, придется создать и футер. Они работают в паре. Не получится создать только шапку, а футер оставить прежним. Или наоборот, футер создать в Elementor, а шапку оставить от шаблона.

2. К сожалению, не все шаблоны интегрированы с Elementor. Чем это может грозить? Страница сайта по умолчанию (например страница со статьей, или блог, другие страницы, для которых вы не создавали шаблоны в Elementor) будут отображаться не корректно (их контентная часть).

Почему так происходит?

Если мы посмотрим файлы шаблона, то увидим, что у шапки и футер есть отдельные файлы (header.php и footer.php). Разработчики шаблонов обычно в файл шапки прописывают открывающий тег HTML, а в футер закрывающий. Делается это, чтобы не повторять один и тот же тег во всех файлах шаблона. И когда мы создаем произвольную шапку в Elementor и прикрепляем к страницам сайта, он полностью заменяет файл header.php, тоже самое и с footer.php. Таким образом наш сайт остается без основного открывающего и закрывающего тега. А к этому тегу могут быть прописаны стили и ширина.

Как решить эту проблему?

  1. Выбирать  шаблон сайта интегрированный с Elementor
  2. Создавать шаблоны страниц для всех страниц сайта (одиночная страница, архив, страница статьи, 404, поиск)

Приятного просмотра мастер-класса. Если у вас еще остались вопросы, пишите в комментариях

Содержание мастер-класса:

  1. Что такое залипший элемент (фиксированный) на странице/лендинге сайта на WordPress.
  2. В чем особенность создания шапки (header) и подвала (footer) с помощью Elementor.
  3. Какую шапку с залипшим меню мы сделаем на этом вебинаре.
  4. Что необходимо сделать перед созданием шапки и подвала сайта с помощью Elementor.
  5. С чего начать создание шапки с залипающим меню.
  6. Где в Elementor расположено множество уже готовых настроенных шаблонов шапки для выбора и применения.
  7. Какие элементы Elementor можно использовать для создания шапки сайта, которую мы решили создать на этом вебинаре.
  8. Какой код прописать в шапке для телефон и email, чтобы при клике на них появлялось окошко для звонка и отрывалась форма отправки почты.
  9. Как настроить цвет и шрифт в верхней полоске (бар сайта) шапки сайта.
  10. Как настроить значки социальных сетей и их цвет в верхней полоске (бар сайта) шапки сайта.
  11. Как создать второй ряд шапки с логотипом и меню сайта, которые будут прилипать (оставаться неподвижнымb) при прокрутке страницы/лендинга сайта.
  12. Как установить в процентах колонки второго ряда шапки сайта.
  13. Как настроить отображение меню на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
  14. Как разместить и настроить во втором ряде шапки вход в личный кабинет и корзину магазина.
  15. Как настроить отображение входа в личный кабинет и корзины магазина на мониторе компьютера/ноубука, на планшете и на мобильном телефоне.
  16. Как сделать, чтобы шапка с меню не сливалась с фоном страницы/лендинга сайта.
  17. Сколько можно создавать разных шапок для своего сайта на WordPress с помощью Elementor.
  18. Для каких шаблонов Elemetor работает правила отображения шапки.
  19. Как сделать, чтобы второй ряд шапки был фиксированным (прилипал) при прокрутке страницы / лендинга.
  20. Какие особенности настройки шапки для мобильной версии сайта.
  21. Как разместить элементы шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
  22. Как отредактировать отображение шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
  23. Как настроить условия отображения шапки в нужном нам месте сайта.
  24. Как настроить подвал (футер) сайта на WordPress с помощью Elementor для разных версий сайта.
  25. Какие особенности отображения элементов подвала (футера) сайта.
  26. Примеры большой шапки (header) сайта.
  27. О предстоящем вебинаре по созданию меню для инстаграм по аналогии меню Taplink.

 

Этот и другие видео уроки бесплатных вебинаров входят в видео курс «Elementor — конструктор лендингов на WordPress».

Как вы можете приобрести плагин Elementor PRO:

  1. Купить на сайте разработчика по этой ссылке:  Elementor PRO
  2. Получить Elementor PRO в подарок при покупке курса «Elementor – от новичка до профи»
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик многофункционального шаблона "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов разного назначения на WordPress. Основатель клуба "Мастер WordPress" и автор курсов по создании и применению сайтов на WordPress. Фрилансер. Предприниматель. Спикер.

Как создать свой сайт на WordPress с закрытыми и отрытыми онлайн - курсами, с универсальным интернет - магазином, профессиональным блогом и высоко конверсионными лендингами для заработка в интернете 2021
Оставьте ваш комментарий или вопрос