Как сделать футер в elementor

Добавил пользователь Владимир З.
Обновлено: 18.09.2024

Привет ребят. В этот раз я подготовил для вас еще один бесплатный шаблон лендинга для WordPress + видео-урок по тому, как я его создавал. Ссылка на все инструменты, сервисы и прочее в описании под этим видео.

Дополнительно:
Вы можете скачать лендинг, которые я создавал в этом уроке — ссылка на него, вместе с видео-инструкцией вы найдете в описании.

Как создать лендинг для WordPress с нуля

Основные инструменты и сервисы:

Шаблон сайта + видео-инструкция по установке:

Название плагинов и тем, которые я использую в видео:

Тема — ASTRA
Плагины:

Elementor
Elementor — Header, Footer & Blocks
Essential Addons for Elementor
Livemesh Addons for Elementor
jQuery Smooth Scroll
Contact Form 7
Popup Maker

Шрифты и цвета из урока:

Шрифты и цвета, которые я использовал в уроке:
Шрифт — Source Sans Pro

Дополнительные материалы к уроку:

Таймкоды на темы из видео:

0:34 — старт урока
0:58 — организационные моменты

Работа в Элементоре:
15:58 — начинаем создавать лендинг
16:45 — первый экран лендинга (создаем и настраиваем)
32:46 — второй экран лендинга (создаем и настраиваем)
44:28 — настраиваем разделитель секции (переход из 1 к 2 экрану)
46:35 — третий экран лендинга (создаем и настраиваем)
52:08 — четвертый экран лендинга (создаем и настраиваем)
55:23 — пятый экран лендинга (создаем и настраиваем)
1:04:05 — шестой экран лендинга (создаем и настраиваем)
1:15:44 — добавляем якорные ссылки (anchor)

Контактная форма и поп-ап окна
1:20:37 — активируем контактную форму 7 и попап мэйкер
1:21:17 — настраиваем контактную форму 7
1:26:16 — настраиваем попап мэйкер
1:28:42 — добавляем и настраиваем два попап окна

Настраиваем мобильную и планшетную версии
1:37:18 — настраиваем планшутную версию
1:42:13 — настраиваем мобильную версию

Настраиваем подвал и шапку сайта
1:46:57 — активируем плагин, создаем шапку в Elementor
1:49:03 — создаем меню шапки сайта
1:59:15 — создаем подвал сайта

Настраиваем главную страницу сайта
2:04:46 — выставляем лендинг в качестве главной страницы

Заключение

На этом у меня все. Как обычно, если этот урок оказался для вас полезным — поделитесь им в соц сетях, для меня это будет лучшая благодарность. Ну, а если у вас остались вопросы или вам есть что добавить — пишите в комментарии тут или на ютубе и я отвечу/дополню урок.

Отрицательный нижний margin у блока-обертки

Есть блок-обертка, в котором находятся все блоки кроме футера. Данному блоку назначен отрицательный нижний margin, равный высоте футера.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В данном методе требуется дополнительный элемент в контенте (с классом .push), чтобы отрицательный margin не притянул футер и не перекрыл область текста. Добавить блок push было довольно умным решением, так как у него нет никаких нижних отступов. Если бы и у этого блока был бы свой отступ, его бы пришлось учесть в отрицательном margin’е.

Отрицательный верхний margin на футере

В этой технике не нужен блок push, но тут требуется добавить дополнительный блок-обертку вокруг контента, у которого задан нижний padding. Это сделано для того, чтобы из-за отрицательного margin’а футер не поднимался вверх.

Обе техники похожи, так как в них требуется добавить дополнительный HTML элемент.

Функция calc() уменьшающая высоту обертки

Один из способов отказаться от дополнительной разметки это настроить высоту блока-обертки с помощью функции calc(). В таком случае не будет перекрытия, два элемента стыкуются и образуют высоту в 100%.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Обратите внимание на 70px в функции calc() и 50px фиксированной высоты футера. Тут мы учитываем, что у футера есть нижний margin в 20px. Из общей высоты необходимо вычесть высоту футера и его нижний внешний отступ. Также мы используем единицы измерения vw, чтобы не задавать 100% высоты body, пока не задано 100% высоты блока обертки.

Flexbox

Основная проблема со всеми описанными выше методами в том, что там нужна фиксированная высота футера. В веб-дизайне фиксированная высота считается признаком плохого тона, контент ведь может меняться. Все должно быть гибким. Фиксированная высота это плохой звоночек. Flexbox позволяет не только не добавлять лишнюю разметку для создания прилипающего футера, но и использовать переменные в значении высоты.

Ссылка на плагин

Друзья, я очень стараюсь делать хорошие, понятные уроки и это занимает целую прорву времени. В то время, пока я записываю и монтирую видео, я мог бы заниматься другой работой, но так я помогаю очень малому количеству людей. Записывая уроки для массовой аудитории, я получаю возможность помочь сразу большому количеству людей и это здорово!

Более того, хочется делать больше обзоров на платные плагины и темы. К сожалению, но не все разработчики соглашаются предоставить их для теста бесплатно и приходится выделять деньги из собственного кармана. Я буду очень признателен, если вы поддержите проект WPlovers. Поможет любая, даже малая сумма.

будут лишние деньги, я скину тебе на развитие канала, да и просто за то, что ты многим облегчил работу в WordPress!

Спасибо, мужик, ты молодец! Многие бы уже убежали, а ты учишь заинтересованных людей. Респект из России (ты из Казахстана насколько я понял:) )

Боже да ты самый лучший спасибо тебе .
пожалуйста начни работать с другими плагинами по типу form maker и прочие полезные плагины .
CПАСИБО ТЕБЕ.

Браво. Случайно попал на канал и втянулся. Очень мало грамотных специалистов-преподователей. Спасибо Вам за этот труд.

Привет.
Нравятся видео, понятно, познавательно
НО!

Есть вопрос:
В шапке для мобильной версии как сделать не бургер-меню, а самому настроить? Хочу, чтобы просто писало "меню".

Большое спасибо! Я тяжело заболел , получил инвалидность. Теперь учусь работать удаленно. Благодаря Вашим урокам уже почти сделал сайт. Думаю, через неделю, другую закончу. Потом сюда скину ссылочку. :)

Саш, спасибо тебе огромное, что оставляешь под каждым видео ссылки на плагины или на страницы, где та инфа про которую ты говоришь в видео.

Подскажи пожалуйста а как сделать под меню . Как у тебя на видео (учебный центр) с неактивной ссылкой .

Клёвый обзор! Чем больше я изучаю Elementor, тем больше прихожу к мнению что этот конструктор скорее для лендингов, чем для многостраничников.
Но судя из данного видео перспектива не за горами, спасибо

WPlovers, что пинаете разрабов)))

Блин где вобще задаётся на каких страницах будет использоваться шапка или шаблон страницы? Да даже тупо как обратно меню стандратное вернуть?)) Что то не вкурю

спасибо за видео! Но я сделал все как в видео, меню и футер с помощью бесплатного плагина, и в итоге не появилось меню и футер. печаль.

Александр, в настоящее время ничего не изменилось? Шапку и подвал для многостраничного лендинга на Elementor Pro с помощью данного плагина делаем? Или есть другие варианты?

есть возможность задать разные шапки для разных страниц? и как правильно сделать чтобы шапка отображалась? (только галка "отображать на шаблоне элементор"?)

Очень нужные и полезные видео, что хочется поддержать в денежном эквиваленте, но, я пенсионер и. Спасибо!

В итоге так и не понял, чем отличаются возможности этого плагина от стандартного меню Астры. Какая практическая польза, телефон в частности могу добавить в шапку с помощью этого плагина?

Благодарю за урок, лучший русскоязычный канал о Wordpress :)
Подскажите, как сделать разные шапки/подвалы для разных языков мультиязычного сайта?
Как плагин перевода использую Polylang.

Cпасибо ,Александр,за качественную подачу материала.Много инфы перелопатил,но у тебя самая оптимальная для
понимания.Ну ,а функционал Elementor надо изучать индиаидуально на практике,ведь ребята -разработчики постоянно
его усовершенствуют.

Саша, подскажи, а куда вставлять код аналитики при использовании данного плагина? Т.е. я имею ввиду без использования плагинов, мне кажется, что большое количество плагинов тормозит сайт или не париться установить Code Snippets Extended?

Отличное видео! Вопрос: на этом плагине можно создать для landing Page адаптивное мобильное меню с использованием elementor в теме астра? Бесплатно ?

Отличное решение. Очень помогает быстро заменить контент для header и footer на многостраничном сайте.

заметил что Header и Footer не работает когда активирован плагин rus to lat. Я его правда установил после того как шапку сделал, может в этом причина.

Здравствуйте! Хочу спросить: как добавить меню на страницы многостраничного сайта на WordPress? Просто я сделала липкое меню по вашему уроку, но теперь не знаю, как добавить его на все страницы сайта, чтобы выделялся другим цветом раздел, в который сейчас зашел посетитель сайта? Если добавлять его как сохраненный шаблон, то раздел не горит другим цветом, а просто висит меню сайта и все!
То же самое касается и футера: может он автоматически появляться на всех страницах сайта или его надо добавлять всегда вручную как сохраненный шаблон?
Просто, если брать стандартное меню темы Astra, то меню и футер добавляются автоматически всюду на всех разделах и страницах сайта, а при создании собственного меню и футера такой функции нет почему-то?
Помогите, плз. Заранее благодарю за ответ и совет:-)

Здравствуйте, скажите пожалуйста, можно ли в Elementor задавать в заголовке разные цвета? То есть, допустим, идет фраза и мне нужно выделить пару слов другим цветом. Заранее спасибо:)

P.s.
Проблему, однако, решил своими средствами, просто добавив айди, как и на видео

Я лет пять-шесть пользовался только платниками - визуал композером плюс тема porto. ну в общем по цене норм так выходило, с остальными приблудами баксов так на 100 в общем, сейчас элементор и Astra и разницы особо нету, лишь бы руки и голова на месте были
Для тех кто не хочет сильно заморачиваться с астрой - astra sites - экспорт любого дизайна из предустановленных и все дела

За последние несколько недель команда Wordfence Threat Intelligence выявила уязвимости более чем в 15 самых популярных аддонах для Elementor.

Они в совокупности установлены на более чем 3,5 миллионах сайтов. Всего наша команда обнаружила более 100 уязвимостей.

Эти уязвимости покрываются тем же правилом брандмауэра Wordfence, которое мы создали для исходной уязвимости Elementor, которая была доступна для бесплатных пользователей Wordfence с 25 марта 2021 года.

Какие плагины попали под раздачу?

Добавить комментарий

В самом популярном конструкторе страниц Elementor была найдена XSS уязвимость (межсайтовый скриптинг), которая затрагивает более 7 миллионов сайтов. Подробный разбор полётов

Уязвимые плагины и темы являются причиной №1 взлома сайтов на WordPress. Смотреть отчёт

Разработчики популярного плагина Contact Form 7 для WordPress, который установлен более чем на 5 000 000 сайтов, выпустили исправление для критической уязвимости. Проблема позволяла злоумышленникам обмануть защитные механизмы, отвечающие за очистку имен файлов при загрузке. В результате хакеры получали возможность загрузить вредоносный файл с произвольным кодом на уязвимый сервер, а затем запустить его как скрипт, чтобы выполнить…

Уязвимость затрагивает более 800 тысч сайтов под управлением WordPress. Читать далее

Как заявили эксперты Wordfence, вредоносный софт, поставляемый вместе с пиратскими темами и плагинами, является одной из самых популярных угроз для WordPress-сайтов. Читать далее

29 июля 2021 года команда Wordfence Threat Intelligence инициировала процесс ответственного раскрытия информации об уязвимости, обнаруженной в плагине SEOPress под WordPress, установленном на более чем 100 000 сайтов. Читать далее

Читайте также: