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

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

В этом мастер-классе я расскажу вам, как вы можете создать произвольную шапку и футер для вашего сайта с помощью Elementor Pro. Мы уже проходили с вами создание шаблонов страниц (архивные страницы, страница статьи, 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. Как создать второй ряд шапки с логотипом и меню сайта, которые будут прилипать (оставаться неподвижным) при прокрутке страницы/лендинга сайта.
  12. Как установить в процентах колонки второго ряда шапки сайта.
  13. Как настроить отображение меню на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
  14. Как разместить и настроить во втором ряде шапки вход в личный кабинет и корзину магазина.
  15. Как настроить отображение входа в личный кабинет и корзины магазина на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
  16. Как сделать, чтобы шапка с меню не сливалась с фоном страницы/лендинга сайта.
  17. Сколько можно создавать разных шапок для своего сайта на WordPress с помощью Elementor.
  18. Для каких шаблонов Elemetor работает правила отображения шапки.
  19. Как сделать, чтобы второй ряд шапки был фиксированным (прилипал) при прокрутке страницы / лендинга.
  20. Какие особенности настройки шапки для мобильной версии сайта.
  21. Как разместить элементы шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
  22. Как отредактировать отображение шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
  23. Как настроить условия отображения шапки в нужном нам месте сайта.
  24. Как настроить подвал (футер) сайта на WordPress с помощью Elementor для разных версий сайта.
  25. Какие особенности отображения элементов подвала (футера) сайта.
  26. Примеры большой шапки (header) сайта.
  27. О предстоящем вебинаре по созданию меню для инстаграм по аналогии меню Taplink.

 

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

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

  1. Купить на сайте разработчика по этой ссылке:  Elementor PRO 
  2. ИЛИ получить Elementor PRO в подарок при покупке курса «Elementor — от новичка до профи »

 


 

Хотите быстро прийти к заработку в интернете?

Освойте сначала бесплатный курс «Elementor для начинающих«, и затем платный курс «Elementor — от новичка до профи» для создания красивых сайтов. Результат гарантирован!

С вопросами и за помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget
[Мастер-класс по Elementor PRO] Как создать и настроить шапку (header) и нижнюю часть сайта (footer)

   0 голосов
Средняя оценка: 0 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

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

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

Ваш адрес email не будет опубликован. Обязательные поля помечены *