Sticky Header Elementor

Użytkownicy Elementora wiedzą, że aby stworzyć nagłówek, czy też stopkę strony internetowej muszą skorzystać z płatnej opcji subskrypcji wersji PRO tejże wtyczki. Oczywistością jest fakt, że nikt nie lubi płacić za rozwiązania, które można uzyskać za darmo. Dlatego też powstał ten poradnik, aby każdy miłośnik Elementora mógł bez przeszkód stworzyć własne sekcje strony dzięki którym uzyska ona swój własny customowy wygląd, wyróżniając ją na tle konkurencji.

W dzisiejszym artykule przedstawię Państwu w jaki sposób stworzyć własny nagłówek (w dalszej części artykułu – header)  z wykorzystaniem darmowej wtyczki o nazwie „Elementor Header & Footer Builder” autorstwa Brainstorm Force, a także małej ilości dodatkowego kodu. Nie musicie się jednak obawiać, przedstawiony w artykule kod możecie w bezpieczny sposób przekopiować na własną stronę oraz cieszyć się gotowym rozwiązaniem.

Elementor Header & Footer Builder

Aby to zrobić należy udać się do zakładki Wtyczki -> Dodaj nową. Po wpisaniu nazwy w wyszukiwarce powinna pojawić się omawiana wtyczka. Należy ją zainstalować oraz aktywować.

W momencie, w którym wtyczka jest aktywna należy stworzyć własny header według własnych preferencji. Na potrzeby artykułu stworzyłem bardzo prosty nagłówek, dzięki któremu w prosty sposób przedstawię efekty omawianego rozwiązania. W momencie kiedy ukończymy proces projektowania nagłówka należy przejść do kluczowego elementu układanki, czyli dodaniu kodu css (oraz trochę js’a).

Zaznacz sekcję nagłówka oraz w zakładce Elementora „Zaawansowane” w polu „ID CSS” wpisz dedykowaną nazwę dla swojego headera. Pamiętaj aby nazwa była unikalna, ponieważ w przypadku powielenia się id css z innymi elementami znajdującymi się na stronie, w sekcji zagnieżdżą się style przypisane dla innych elementów. Dla przykładu warto nadać taką nazwę jak: custom-header01. W dalszej części w kodzie będę posługiwał się tym ID, jeśli Ty nadałeś inną nazwę odpowiednio zmień ją w dalszej części kodu.

Przejdź do zakładki „Wygląd-> Dostosuj” oraz następnie do „Dodatkowy CSS”. Następnie umieść w niej przedstawiony kod.

Dzieki powyższym stylom nadamy naszemu headerowi stałą pozycję znajdującą się na górze strony, bez marginesu. Szerokość headera będzie wynosić 100%.

				
					#my-custom-id.elementor-section{
position: fixed;
left: 0;
width: 100%;
}
				
			

Kolejnym krokiem jest dodanie kodu javascript do pliku functions.php. Aby znaleźć ten plik udaj się do folderu gdzie znajduje się twój motyw na serwerze (albo child-theme). Pobierz go na swój komputer oraz otwórz w dowolnym edytorze. Przeskroluj na dół pliku oraz umieść w nim następujący kod.

				
					// WordPress custom function
function my_custom_function(){
    ?>
    <?php
}
add_action('wp_footer', 'my_custom_function');

				
			

Po skopiowaniu kodu udaj się jeszcze raz do zakładki „Dodatkowy CSS” gdzie zaktualizujesz style swojego headera. Aby zobaczyć zmiany na stronie pamiętaj aby usunąć pliki cache, zazwyczaj wystarczy użyć kombinacji ctrl+f5. Do dodatkowych arkuszy CSS dodaj następujący kod. Dzięki niemu będziesz w stanie zarządzać pozycją nagłówka.

Widoczny dla państwa kod ma za zadanie ustalić szybkość animacji wejścia headera, a także zarządzać jego transparentnością (od 0% do 90% – umożliwia niewielką widoczność strony za headerem). W przypadku urządzeń mobilnych kod determinuje pozycję headera na górze (bez marginesu).

Dziękuję za dzisiejszy artykuł. W razie jakichkolwiek pytań zapraszam do kontaktu.

Źródło:

ultimateelementor.com

				
					#custom-header01.elementor-section.hfe-sticky{
position: fixed;
left:0;
width:100%;
	animation:slide-down 0.8s;
}
@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}
@media( max-width: 767px ){
	#custom-header01.elementor-section.hfe-sticky{
		top: 0;
	}
}