В этом мастер-классе я расскажу вам, как вы можете создать произвольную шапку и футер для вашего сайта с помощью Elementor Pro. Мы уже проходили с вами создание шаблонов страниц (архивные страницы, страница статьи, 404, страница поиска). Это все шаблоны внутренней части страницы или по другому «контентной части».
Шапка и футер, при этом, остаются неизменными. Они заимствуются из шаблона. То есть в зависимости от того, какой шаблон (тему) вы используете, такими будут шапка и футер. Единственный вариант, когда шапка и футер не отображаются это шаблон Elementor «Холст». Обычно такой шаблон используется для лендингов. Но что, если вы хотите переделать шапку и футер своего сайте, добавить какие-то элементы, или хотите сделать разные шапки и футеры для разных страниц (почему бы и нет :)). Это возможно сделать с Elementor PRO.
В этом мастер классе я еще добавила эффект залипания. Это когда при прокрутке экрана шапка остается на месте.
Перед тем, как вы приступите к просмотру, пара замечаний:
1. Если вы решили создать произвольную шапку, придется создать и футер. Они работают в паре. Не получится создать только шапку, а футер оставить прежним. Или наоборот, футер создать в Elementor, а шапку оставить от шаблона.
2. К сожалению, не все шаблоны интегрированы с Elementor. Чем это может грозить? Страница сайта по умолчанию (например страница со статьей, или блог, другие страницы, для которых вы не создавали шаблоны в Elementor) будут отображаться не корректно (их контентная часть).
Почему так происходит?
Если мы посмотрим файлы шаблона, то увидим, что у шапки и футер есть отдельные файлы (header.php и footer.php). Разработчики шаблонов обычно в файл шапки прописывают открывающий тег HTML, а в футер закрывающий. Делается это, чтобы не повторять один и тот же тег во всех файлах шаблона. И когда мы создаем произвольную шапку в Elementor и прикрепляем к страницам сайта, он полностью заменяет файл header.php, то же самое и с footer.php. Таким образом наш сайт остается без основного открывающего и закрывающего тега. А к этому тегу могут быть прописаны стили и ширина.
Как решить эту проблему?
- Выбирать шаблон сайта интегрированный с Elementor
- Создавать шаблоны страниц для всех страниц сайта (одиночная страница, архив, страница статьи, 404, поиск)
Приятного просмотра мастер-класса. Если у вас еще остались вопросы, пишите в комментариях
Содержание мастер-класса:
- Что такое залипший элемент (фиксированный) на странице/лендинге сайта на WordPress.
- В чем особенность создания шапки (header) и подвала (footer) с помощью Elementor.
- Какую шапку с залипшим меню мы сделаем на этом вебинаре.
- Что необходимо сделать перед созданием шапки и подвала сайта с помощью Elementor.
- С чего начать создание шапки с залипающим меню.
- Где в Elementor расположено множество уже готовых настроенных шаблонов шапки для выбора и применения.
- Какие элементы Elementor можно использовать для создания шапки сайта, которую мы решили создать на этом вебинаре.
- Какой код прописать в шапке для телефона и email, чтобы при клике на них появлялось окошко для звонка и отрывалась форма отправки почты.
- Как настроить цвет и шрифт в верхней полоске (бар сайта) шапки сайта.
- Как настроить значки социальных сетей и их цвет в верхней полоске (бар сайта) шапки сайта.
- Как создать второй ряд шапки с логотипом и меню сайта, которые будут прилипать (оставаться неподвижным) при прокрутке страницы/лендинга сайта.
- Как установить в процентах колонки второго ряда шапки сайта.
- Как настроить отображение меню на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
- Как разместить и настроить во втором ряде шапки вход в личный кабинет и корзину магазина.
- Как настроить отображение входа в личный кабинет и корзины магазина на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
- Как сделать, чтобы шапка с меню не сливалась с фоном страницы/лендинга сайта.
- Сколько можно создавать разных шапок для своего сайта на WordPress с помощью Elementor.
- Для каких шаблонов Elemetor работает правила отображения шапки.
- Как сделать, чтобы второй ряд шапки был фиксированным (прилипал) при прокрутке страницы / лендинга.
- Какие особенности настройки шапки для мобильной версии сайта.
- Как разместить элементы шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
- Как отредактировать отображение шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
- Как настроить условия отображения шапки в нужном нам месте сайта.
- Как настроить подвал (футер) сайта на WordPress с помощью Elementor для разных версий сайта.
- Какие особенности отображения элементов подвала (футера) сайта.
- Примеры большой шапки (header) сайта.
- О предстоящем вебинаре по созданию меню для инстаграм по аналогии меню Taplink.
Этот и другие видео уроки бесплатных вебинаров входят в видео курс «Elementor — от новичка до профи».
Как вы можете приобрести плагин Elementor PRO:
- Купить на сайте разработчика по этой ссылке: Elementor PRO
- ИЛИ получить Elementor PRO в подарок при покупке курса «Elementor — от новичка до профи »
Хотите быстро прийти к заработку в интернете?
Освойте сначала бесплатный курс «Elementor для начинающих«, и затем платный курс «Elementor — от новичка до профи» для создания красивых сайтов. Результат гарантирован!
С вопросами и за помощью обращайтесь в нашу службу поддержки 24/7
Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
а также, хостинг Beget:
Средняя оценка: 0 из 5
