Jak stworzyć Menu Główne w darmowej wersji Elementora?

Jeśli korzystasz z darmowej wersji Elementora, stworzenie menu może przysporzyć Ci trochę problemów, ze względu na to, że nie ma w nim widgetu „Menu”, który dostępny jest w wersji Pro. 

W tym poradniku powiem Ci jak rozwiązać ten problem, co zainstalować i jak ustawić Menu Główne w bezpłatnej wersji Elementora.

Menu można stworzyć w Elementorze na kilka sposobów, ale pamiętaj, że jest to poradnik dla zaczynających przygodę z Elementorem i jest to jeden z najprostszych i najbardziej zrozumiałych dla początkujących sposób stworzenia Menu.

Okładka do poradnika jak stworzyć menu główne w darmowej wersji elementora

Aby stworzyć Menu Główne, musisz dodać wszystkie podstrony (zakładki), które chcesz w nim zamieścić. W poprzednim poradniku ustawiliśmy stronę główną, więc jeśli chcesz rozpocząć budowę menu, zajrzyj do tego wpisu: „Jak zainstalować Elementor Page Builder’a na WordPressie„. 

W tym poradniku ustawimy stronę O mnie i kolejne podstrony, aby stworzyć Menu.

1. Dodajemy kolejne podstrony

Kliknij → Strony, dodaj stronę O Mnie i kliknij → Opublikuj

Dodaj kolejną podstronę; Kliknij kolejno → Dodaj nową → wpisz np. Oferta → Opublikuj

W ten sam sposób dodaj kolejną zakładkę: Kliknij  → Dodaj nową → wpisz np. Kontakt → Opublikuj

Następnie kliknij  po lewej stronie → Wygląd, a następnie → Menu

2. Tworzymy Menu w WordPressie

Nazwij swoje menu np. Menu Główne i kliknij → Utwórz Menu. Ta nazwa nie będzie nigdzie widoczna.

Następnie → Zaznacz podstrony, które chcesz umieścić w swoim menu i kliknij → Dodaj do menu

Jeśli chcesz ustalić inną kolejność podstron w menu, po prostu przytrzymaj i przeciągnij zakładkę w inne miejsce 🙂

Jak już ustalisz kolejność zakładek w menu, zaznacz opcję „Główny” przy Wyświetl lokalizację. Nie zapomnij Zapisać menu!

No to Menu w WordPressie mamy stworzone, teraz trzeba je wyświetlić w Elementorze 🙂

3. Instalujemy dodatek NavMenu Addon for Elementor

W tym celu pobierzemy rozszerzenie, które pozwoli zastąpić nam widget Menu, który jest wbudowany w Elementorze Pro 🙂

Przejdź do → Wtyczki → Dodaj nową

Wpisz w wyszukiwarce „navmenu” i znajdź rozszerzenie NavMenu Addon for Elementor. Kliknij → Zainstaluj teraz , a następnie → Włącz.

Po zainstalowaniu i włączeniu wtyczki NavMenu, kliknij → Strony, a potem → Wszystkie strony

Odszukaj stronę główną i kliknij → Edytuj w Elementorze. Zostaniesz przekierowana do panelu Elementora 🙂

Kliknij → Dodaj nową sekcję

Dodaj pierwszą strukturę, czyli jedną sekcję

Uzyskasz taki widok – to jest właśnie tzw. sekcja, czyli po prostu obszar, pole, w którym umieszczasz widgety (elementy). Jeśli chcesz umieścić obraz, przeciągasz element „obraz” z panelu po lewej stronie. 

Po lewej stronie w polu Widget wyszukiwanie, wpisz „menu” i wyszukaj: 

Odszukaj widget Default Navmenu i przeciągnij w obszar sekcji. Upuść go, kiedy pojawi się taka niebieska linia, to znaczy, że jesteś w środku sekcji. Pamiętaj, że ten widget Default Navmenu pojawi się dopiero po zainstalowaniu rozszerzenia NavMenu Addon for Elementor 🙂 

Po lewej stronie obok Select Menu wybierz z listy nazwę swojego menu, którą wpisywałaś przy tworzeniu menu w wordpressie. Tak wygląda początkowa wersja Twojego menu. Teraz już masz pole do popisu! Możesz dowolnie dostosować swoje menu 🙂 Dobrać kolory, zmienić wielkość i rodzaj czcionki, tła po najechaniu kursorem, podkreślenia itp. Możesz dostosować dosłownie wszystko! 🙂

4. Dostosowujemy styl i kolorystykę Menu

W tym celu przejdź do zakładki Styl po lewej stronie na górze;

  • Navbar Background odpowiada za tło całego obszaru menu, więc kliknij obok kwadratowe pole i zmień kolor na biały. Oznaczenie koloru białego to #ffffff. 
  • Link Color odpowiada za kolor czcionki. Jeśli chcesz ustawić czarną, tak jak na przykładzie, ustaw #000000 lub po prostu wybierz kolor z palety barw. 
  • Background odpowiada za kolor tła wokół słów – również zmień na biały
  • Kolejny Link Color odpowiada za kolor podświetlenia słów po najechaniu kursorem myszki
  • Background Color odpowiada za kolor podświetlenia tła wokół po najechaniu kursorem myszki

Jeśli chcesz, aby zakładki w menu były wszystkie drukowanymi literami, bo na przykład wpisałaś jedną podstronę małymi, a drugą wielkimi literami, możesz to zmienić w Typografii. Zjedź po lewej stronie niżej i znajdź Typography.

Naciśnij niebieski ołówek i rozwiną się opcję dotyczące typografii. Zmień Przekształcenie na → Wielkie litery. Twoje Menu zmieni się na wielkie litery 🙂

  • Rodzina: tu zmienisz rodzaj czcionki. Masz naprawdę mnóóóstwooo czcionek do wyboru 🙂 Pamiętaj tylko, żeby dobrać czcionkę z polskimi znakami!
  • Rozmiar: tu dopasujesz wielkość czcionki w menu
  • Grubość: tu dostosujesz grubość czcionki

Następnie nakieruj myszką na sekcję i jak się pojawią kropeczki, naciśnij na nie prawym przyciskiem myszy. Zobaczysz podgląd „edytuj sekcję„. Zwróć uwagę, że w momencie tworzenia tego screena, Elementor zmienił sposób edytowania sekcji 🙂 Dosyć często coś zmieniają, ale zawsze szybko można się zorientować co należy kliknąć. Zmienione zostały również ikonki „Dodaj sekcję” i „Dodaj szablon” z prostokątnych na okrągłe – ładne, podobają mi się ! 🙂

Po lewej stronie zaznacz → Rozciągnij sekcję, a Szerokość treści ustaw na Pełną szerokość

5. Dodajemy Logo w Menu

Jeśli chcesz wstawić logo do Menu, postępuj dalej zgodnie z poradnikiem. 

Nakieruj na sekcję w lewym, górnym rogu, zobaczysz czarny kwadracik. Kliknij na niego prawym przyciskiem myszki, a potem → Dodaj nową kolumnę.

Stworzysz dwie kolumny i menu przeskoczy na lewą stronę. Przeciągnij je do prawej kolumny. 

Do lewej kolumny przeciągnij widget Obraz.

Kliknij po lewej stronie → wybierz obraz i wgraj go z Twojego komputera do biblioteki mediów w WordPressie

Kliknij po lewej stronie → wybierz obraz i wgraj logo z Twojego komputera do biblioteki mediów w WordPressie.

Jeśli wstawiasz logo w ten sposób, jako obraz, warto dodać link do strony głównej. Przyjęło się, że po kliknięciu w logo na stronie, odbiorca zostaje przekierowany do strony głównej. Nie trzeba dlatego umieszczać w menu zakładki „strona główna”, ale jeśli np. chcesz ją nazwać „zacznij tu”, to jak najbardziej można tak zrobić 🙂

Tadaam! Tak wygląda proste, schludne Menu Główne stworzone za pomocą najprostszej metody dla początkujących:-)

Teraz pozostaje tylko zapisać Menu jako szablon i wkleić na każdej z podstron;
Prawym przyciskiem myszy kliknij niebieskie kropeczki, a potem → Zapisz jako szablon

Wprowadź nazwę szablonu, żebyś wiedziała, co zawiera np. Moje Menu Główne  i kliknij → Zapisz. Otworzy Ci się lista z zapisanymi szablonami, zamknij ją po zapisaniu krzyżykiem w prawym, górnym rogu.

Następnie wyjdź z widoku Elementora i wróć do kokpitu WordPressa. Kliknij → ikonkę hamburgera w lewym , górnym rogu, a następnie → Wróć do strony. Nie zapomnij przed wyjściem zawsze kliknąć przycisk na dole Aktualizuj, żeby nie stracić wprowadzonych zmian!

Kliknij → Strony, a potem → Edytuj pod podstroną O mnie.

Zaznacz Elementor Brezentowy (lub Elementor Canva) i otwórz widok Elementora klikając w duży, niebieski przycisk Edytuj w Elementorze.

Kliknij → w szarą, okrągłą ikonkę Dodaj szablon

Z listy zapisanych szablonów (z czasem przy tworzeniu strony będziesz ich mieć więcej) wybierz Twoje zapisane Menu i kliknij → Wstaw.

I siuup, Menu wstawione! 🙂 Kliknij → Aktualizuj, żeby zapisać zmiany, a żeby zobaczyć jak podstrona wygląda na żywo, kliknij → „oczko”. 

W ten sam sposób dodaj Menu na każdej z podstron!

Mam nadzieję, że udało Ci się stworzyć Twoje Menu i dostosować je do Twojej kolorystyki 🙂 Pamiętaj, że jeśli wolisz mieć logo z prawej strony, możesz zamienić kolumny miejscami 🙂

→ Jeśli masz jakieś pytania dotyczące tworzenia Menu za pomocą Elementora (w darmowej wersji lub wersji Pro, zadaj je śmiało w grupie na Facebooku „Elementor + WordPress” lub pod postem z odpowiednim zdjęciem na Instagramie!

Pozdrawiam ciepło!
Marta | Nectar Studio

SKORZYSTAŁEŚ Z TEGO PORADNIKA? PODZIEL SIĘ NIM Z INNYMI!

Marta | Nectar Studio

Marta | Nectar Studio

Pasjonatka Elementora <3 WordPressa. Zajmuje się tworzeniem stron internetowych dla kreatywnych biznesów. Lubi współpracować z kreatywnymi ludźmi, którzy mają swoje pasje, bo wtedy każdy dzień jest przygodą!

Cześć, jestem Marta!

Cześć, jestem Marta!

Witaj w moim Nectarowym Poradniku! Zajmuję się tworzeniem stron internetowych dla kreatywnych pasji
i biznesów. Jeśli potrzebujesz strony www, odpowiednio dostosowanej do Twojego biznesu, koniecznie skontaktuj się ze mną! Stworzymy dla Ciebie piękną i funkcjonalną stronę www! <3

INSTAGRAM

#nectarstudio_stronywww

  • Planujesz stworzenie swojej strony www?⠀⠀⠀⠀⠀⠀⠀⠀⠀
Zanim ją technicznie zbudujesz, warto przemyśleć kilka kwestii, aby spełniała ona swoją funkcję. Odpowiednio zaplanowana strona www sprawi, że będziesz mieć odpowiednie narzędzie, z którego będziesz mogła czerpać zyski. Żeby czerpać zyski, musisz przemyśleć do kogo kierujesz swoją ofertę i jak dostosować treści na stronie, aby przyciągnąć odpowiednich odbiorców. ⠀⠀⠀⠀⠀⠀⠀⠀⠀
Krok 1 - to przemyśleć swoją Grupę Docelową!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Zajrzyj do Nectarowego Poradnika i określ swoją grupę odbiorców. Jeśli ustalisz kto jest Twoją grypą docelową, komu najbardziej możesz pomóc, będziesz w stanie lepiej przygotować treści i ofertę na swojej stronie. Tym samym przyciągniesz odpowiednich klientów, którzy najwięcej skorzystają z Twojej oferty. Bo chcesz pomóc tylko tym, którym możesz, nie wszystkim, prawda? ;-)⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Zajrzyj tutaj: https://nectarstudio.pl/poradnik⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Pozdrawiam ciepło!⠀⠀⠀⠀⠀⠀⠀⠀⠀
Marta | Nectat Studio⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
#stronywww #stronyinternetowe #stronydlakreatywnych #nectarstudio_stronywww #webdesign  #website #wordpress #wordpressdesign #elementor #elementorpagebuilder #websitedesign #addictedtoelementor #elementorlove #nowoczesnestronywww #kreatywnebiznesy #stwórzstronewww #stronawww #stronainternetowa #kochamelementor #marta_nectarstudio #grupanafb #elementorwordpress #grupadocelowa #poradyzelementora #identyfikacjawizualna #dotrzyjdoswoichodbiorców #elementor_nectarstudio #cotojestgrupadocelowa #zaplanujswojąstronęwww #dobrastronawww
  • "I love faces photography"!⠀⠀⠀⠀⠀⠀⠀⠀⠀
Fotografia portretowa.⠀⠀⠀⠀⠀⠀⠀⠀⠀
Made with Elementor <3⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
#elementor #elementorpro #wordpress #elementorlove #fotografiaproduktowa #nectarstudio #nectarstudiodesign #marta_nectarstudio #elementorfun #iloveelementor #esteticdes #website #websitedesignstudio #websitedesigner #websitedesign #ilovemyjob #photographylover #photographer #photography #kreatywnybiznes #fotografia #fotograf #stronydlakreatywnych #kreatywnybiznes #stronawww #stronywwww #fotografiaportretowa #portraitphotography #websitedesigns #elementorenthusiast
  • Planujesz stworzyć stronę www na WordPressie przy pomocy Elementora i dopiero zaczynasz przygodę z tym kreatorem stron? Zaprzyjaźnij się z darmową wersją Elementora! :-) Możesz stworzyć prostą, czytelną stronę przy pomocy bezpłatnej wersji!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Stworzenie Menu może przysporzyć Ci trochę problemów przy budowaniu Menu w wersji bezpłatnej, ponieważ wersja darmowa nie zawiera widgetu "Menu".... ;-) ⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
W związku z Waszymi licznymi wiadomościami, w moim Nectarowym Poradniku pokazuje krok po kroku jak stworzyć Menu w darmowej wersji Elementora. Pokażę Ci jaki dodatek zainstalować i poradzić sobie ze stworzeniem prostego, schludnego Menu na stronie :-)⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Poradnik znajdziesz tutaj: https://nectarstudio.pl/poradnik⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Pozdrawiam ciepło!⠀⠀⠀⠀⠀⠀⠀⠀⠀
Marta | Nectar Studio⠀⠀⠀⠀⠀⠀⠀⠀⠀ .⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
#nectarstudio_stronywww #elementor #elementorpagebuilder #elementorpagebuilderwordpress #jakstworzycmenuwelementorze#zbudujstronezelementorem #elementorwordpress #elementorlove #kochamelementor #elementorka #stronawwwzadarmo #pagebuilder #wordpress #wordpressblog #elementorblog #zrobstronesama #stronawww #stronywww #stronyinternetowe #stronainternetowa #elementorenthusiast #elementormenu #wordpressdesigner #wordpressdesigns #elementor_pl #nectarstudioblog #poradyzelementora #elementortips #marta_nectarstudio #elementor<3
  • Projekt graficzny dla Candela & Si. ⠀⠀⠀⠀⠀⠀⠀⠀⠀
Made by Elementor <3⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
#elementor #elementorpro #wordpress #elementorlove #fotografiaproduktowa #nectarstudio #nectarstudiodesign #marta_nectarstudio #elementorfun #iloveelementor #esteticdes #website #websitedesignstudio #websitedesigner #websitedesign #ilovemyjob #candles #świeczki #ilovecandles #kreatywnybiznes #fotografia #fotograf #stronydlakreatywnych #kreatywnybiznes #stronawww #stronywwww #pieknestronywww #pruductphotography #websitedesigns #elementorenthusiast
  • Elementor to intuicyjny i nowoczesny kreator stron www.⠀⠀⠀⠀⠀⠀⠀⠀⠀
Jak zainstalować Elementor Page Builder'a na WordPressie?⠀⠀⠀⠀⠀⠀⠀⠀⠀
Jeśli chcesz stworzyć samodzielnie swoją stronę www, koniecznie zajrzyj do Poradnika Nectar Studio! Dowiesz się jak krok po kroku zainstalować Elementora na WordPressie i przy jego pomocy stworzyć Stronę Główną! ⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Zajrzyj na https://nectarstudio.pl/poradnik⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Pozdrawiam ciepło!⠀⠀⠀⠀⠀⠀⠀⠀⠀
Marta | Nectar Studio.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
#nectarstudio_stronywww #elementor #elementorpagebuilder #elementorpagebuilderwordpress #cotojestelementor #zbudujstronezelementorem #elementor+wordpress #elementorlove #kochamelementor #elementorka #stronawwwzadarmo #pagebuilder #wordpress #wordpressblog #elementorblog #zrobstronesama #stronawww #stronywww #stronyinternetowe #stronainternetowa #elementorenthusiast  #wordpressdesigner #wordpressdesigns #elementor_pl #nectarstudioblog #poradyzelementora #elementortips #marta_nectarstudio #elementor<3 #jakzainstalowaćelementora
  • Chcesz stworzyć stronę www samodzielnie? Teraz to możliwe, nawet bez umiejętności kodowania! Poznaj nowatorskie narzędzie do budowania stron na WordPressie - Elementor Page Builder  Co to jest Elementor?⠀⠀⠀⠀⠀⠀⠀⠀⠀
-> Dlaczego warto z niego korzystać przy budowaniu stron www?⠀⠀
-> Jaką stronę można stworzyć za pomocą Elementora?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Zajrzyj do mojego poradnika: https://nectarstudio.pl/poradnik⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Pozdrawiam ciepło!⠀⠀⠀⠀⠀⠀⠀⠀⠀
Marta | Nectar Studio⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
.⠀⠀⠀⠀⠀⠀⠀⠀⠀
#elementor #elementorpro #wordpress #elementorlove #fotografiaproduktowa #nectarstudio #nectarstudiodesign #marta_nectarstudio #elementorfun #iloveelementor #esteticdes #website #websitedesignstudio #websitedesigner #websitedesign #ilovemyjob #cotojestelementor #kreatorstronwww #kreatywnybiznes #fotografia #fotograf #stronydlakreatywnych #kreatywnybiznes #stronawww #stronywwww #pieknestronywww #pruductphotography #websitedesigns #elementorenthusiast #stworzsamodzielniestronewww

FACEBOOK

GRUPA NA FB

Grupa wsparcia dla osób tworzących samodzielnie stronę www przy pomocy Elementor Page Builder’a

RABAT 
NA HOSTING
W LH.PL – 20%! 
KOD: LH-20-34801

Copyright Ⓒ 2018 Nectar Studio | Wszelkie prawa zastrzeżone  | Polityka prywatności i plików cookies