Как сделать липкий header в Elementor WordPress (2 способа 2025)

как сделать липкий header в Elementor

В этом видео я покажу 2 лучших способа, как сделать липкий header в Elementor/WordPress

✅ Способ 1 — для бесплатной версии Elementor: Используем плагин Sticky Header Effects for Elementor — просто, быстро и без кода!

✅ Способ 2 — для Elementor Pro: Добавляем CSS-код для прилипающей шапки, который будет работать идеально при прокрутке и здесь можно менять стиль закреплённой шапки при прокрутке как и в первом способе.

✅ Ещё способ который я не упомянул в этом видео для Про версии Элементор это стандартный метод закрепления блока. Как закрепить, зафиксировать любой контейнер или секцию можете посмотреть в этом видео

Смотреть инструкцию на YouTube

Плагин Sticky Header Effects for Elementor

Elementor Pro

 

/*Fixed header css*/

.header-2{
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.header-2.elementor-sticky--effects {
height: auto!important;
transform: translatey(0px);
}
.header-1.elementor-sticky--effects {
display: none!important;
}
.header-2{
opacity: 0;
-moz-transition: opacity .25s ease-out!important;
-webkit-transition: opacity .25s ease-out!important;
transition: opacity .25s ease-out!important;
}

.header-2.elementor-sticky--effects {
opacity: 1!important;
}

/*Fixed header css END */
По фрилансу/ автор статьи
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: