ElementsKit zawiera menu Header Off-Canvas, które umożliwia utworzenie menu WordPress poza płótnem w Elementorze z największą liczbą konfigurowalnych opcji.

Aby utworzyć menu poza płótnem Elementora, włącz widżet Nagłówek poza płótnem >> przeciągnij i upuść widżet do obszaru projektu >> edytować zawartość poza płótnem >> dostosować style.

Przeczytaj tę dokumentację, aby poznać szczegóły dotyczące tworzenia menu poza płótnem Elementora za pomocą ElementsKit.

Jak utworzyć menu poza płótnem WordPress w Elementorze #

You can create an Elementor Off-Canvas menu using ElementsKit Header Off-Canvas widget. You will need the following plugins installed on your WordPress site.

Wymagane wtyczki:

1. Elementora: Pobierz wtyczkę
2. ElementsKit Lite: Pobierz wtyczkę
3. ElementsKit Pro: Pobierz wtyczkę

Krok 1: Włącz widżet Nagłówek poza płótnem #

Aby korzystać z widżetu Nagłówek poza płótnem, musisz go najpierw włączyć. Aby włączyć widżet, Zaloguj się do swojej witryny WordPress I,

1. Nawigować do ElementsKit > Widżety.
2. Znajdować Nagłówek poza płótnem i włącz widget.
3. Kliknij na ZAPISZ ZMIANY przycisk w prawym górnym rogu.

Krok 2: Skonfiguruj widżet #

Teraz otwórz edytor Elementora przeciągnij i upuść widżet Nagłówek poza obszarem roboczym do obszaru projektowego. 

w Treść zakładkę, możesz 

1. Zmienić Kolor nakładki.
2. Ustawić Zamknij ikonę treści spoza płótna.
3. Wybierać Typ menu hamburgerowego.

W menu Hamburger dostępne są trzy opcje.

Typ menu hamburgera: Ikona
Ustaw typ menu na „Ikona” i wybierz ikonę z biblioteki.

Typ menu hamburgera: tekst
Ustaw typ menu na „Tekst” i wprowadź tekst.

Typ menu hamburgera: ikona z tekstem

Ustaw typ menu na „Ikona z tekstem”. W tym przypadku możesz wybrać Ikona, Wchodzić tekst, i ustaw Pozycja ikony przed lub po tekście.

Krok 3: Edytuj zawartość poza płótnem #

Możesz edytować zawartość menu WordPress poza płótnem za pomocą widżetu Nagłówek poza płótnem.

1. Uruchom ikonę Hamburgera.
2. Kliknij Edytuj treść na off-płótnie.
3. Następnie w obszarze widżetów zaprojektuj zawartość poza płótnem, korzystając z widżetów Elementora lub gotowych szablonów.
4. Kliknij na Aktualizacja i zamknij okno Obszar widżetów.

Jeśli treść nie pojawia się poza płótnem, załaduj ponownie stronę i sprawdź jeszcze raz.

Krok 4: Dostosuj style #

Na karcie Styl dostosuj menu poza płótnem i style treści. 

4.1 Poza płótnem #

W sekcji Off-Canvas dostosuj Hamburger przycisk i Zamknij ikonę.

W przypadku przycisku Hamburger:

1. Wybierz Kolor dla ikony menu i tekstu.
2. Ustaw Kolor tła dla ikony i tekstu.
3. Pod względem Unosić się style, wybierz kolor, kolor tła i kolor obramowania.
4. Poprawić Ikona rozmiar. (Ta opcja pojawi się, jeśli ustawisz Typ menu na „Ikona” lub „Ikona z tekstem”.)
5. Ustaw Typografia tekstu. (Ta opcja pojawi się, jeśli ustawisz Typ menu na „Tekst” lub „Ikona z tekstem”.)

6. Wybierz Typ obramowania dla przycisku Hamburger.
7. Ustaw Szerokość granicy.
8. Wybierz granicę Kolor.
9. Ustaw Wyrównanie przycisku w lewo, w prawo lub na środek.
10. Dodać Pudełko Cień.
11. Regulować Promień granicy, Wyściółka, I Margines.

Dla Zamknij ikonę okna treści poza płótnem:

Uruchom obraz poza obszarem roboczym, aby zobaczyć zmiany wizualne ikony zamykania.

1. Wybierz ikonę Kolor.
2. Ustaw Kolor tła dla ikony zamykania.
3. Pod względem Unosić się style, wybierz kolor, kolor tła i kolor obramowania.
4. Poprawić Ikona rozmiar.
5. Dostosuj ikonę Rozmiar pudełka.

6. Wybierz Typ obramowania dla ikony zamykania.
7. Ustaw Szerokość granicy.
8. Wybierz granicę Kolor.
9. Dodać Pudełko Cień.
10. Regulować Promień granicy, Wyściółka, I Margines.

4.2 Panel poza płótnem #

Dostosuj obszar zawartości poza płótnem w sekcji Panel poza płótnem.

1. Poprawić Szerokość panelu poza płótnem.
2. Wybierz Typ tła i ustaw tło Kolor.
3. Możesz także użyć Obraz jako tło.
4. Ustaw Pozycja panelu Off-canvas po lewej lub prawej stronie ekranu.
5. Dostosuj wyściółkę panelu poza płótnem.

Na koniec możesz dodać menu poza płótnem WordPress w Elementorze.

Podobnie jak widżet Header Off-canvas, ElementsKit zawiera setki zaawansowanych elementów dla Elementora. Pobierz ElementsKit i wykorzystaj te elementy do tworzenia witryn WordPress z pełnymi funkcjami.

Get ElementsKit Plugin 👇