Elementorze pisałem wielokrotnie na blogu i niezmiennie od momentu premiery rekomenduję go zarówno swoim Klientom jak i podczas prowadzonych szkoleń kursantom. Nie tylko pozwala na szybkie i bardzo wygodne zarządzanie zawartością strony internetowej, ale także pozwala tworzyć szybko naprawdę atrakcyjne wizualnie witryny.

To obecnie moim zdaniem najlepszy page builder dla WordPress’a i nieustannie umacnia swoją pozycję lidera dzięki rosnącym możliwościom i wersji PRO.

O Elementorze w podstawowej formie przeczytasz np. w artykule Elementor czyli strona internetowa nad którą panujesz. Zerknij rownież na tag Elementor. Dlatego nie będę omawiał podstaw, ale skoncentruję się na kluczowych możliwościach wersji PRO, które sprawiają, że to narzędzie jest w stanie zastąpić praktycznie każdy motyw.

Jakiś czas temu Elementor wykorzystywany był w zasadzie głównie jako narzędzie do zarządzania zawartością poszczególnych stron i artykułów. To co mogliśmy zrobić, to zainstalować motyw, który nam się podobał i przy pomocy Elementora aranżować treści układając je niczym z klocków. Pozwalało to i nadal pozwala tworzyć praktycznie dowolne układy rozmieszczenia poszczególnych obiektów wewnątrz danej podstrony czy artykułu. Działa świetnie!

Ale uwaga… siegając pamięcią wstecz, to począwszy od Elementora Pro w wersji 2.0 możemy nie tylko robić to o czym wspomniałem, ale także zbudować własny layout strony, a więc stworzyć nagłówek strony, stopkę, zdefiniować domyślny wygląd dla artykułów czy archiwów. To był niesamowity krok do przodu, ponieważ praktycznie całkowicie uniezależnił nas od gotowych motywów, które zazwyczaj mają mniej lub bardziej skostniałą strukturę. Jesteśmy niezależni od narzucanych przez nie standardów i to jest coś rewelacyjnego!

To rozwiązanie znajdziesz tylko w wersji Pro, która kosztuje 49 dolarów dla jednej strony. Wersję Pro znajdziesz na stronie www.elementor.com

Ale do rzeczy. Przyjrzyjmy się jak działają funkcje pozwalające na budowę własnego szablonu.

Jak działa builder motywu?

Jako przykład wezmę czystą instalację WP + Elementor + Elementor Pro + Bezpłatny motyw OceanWP. Równie dobrze mógłbym wykorzystać motyw Elementora, który jest dedykowany wersji PRO o sympatycznej nazwie Hello. Motyw ten znajdziesz tutaj. Tymczasem mam stronę „golasa”, która wygląda w ten sposób:

Czysta instalacja WP i OceanWP

Szału nie ma prawda? Rzeczywiście zainstalowanie świeżego motywu zazwyczaj nie wnosi nic ciekawego. W przypadku OceanWP motyw jest niezły i oferuje Ci ogromną ilość opcji konfiguracyjnych w wersji bezpłatnej i dobrze współpracuje z Elementorem.

Tam gdzie powyżej widzimy napis Chcesz opublikować swój pierwszy wpis?… to obszar, który w Elementorze możemy dowolnie komponować. Jednak w wersji darmowej nie mamy wpływu na to jak będzie wyglądał nagłówek i stopka strony. Te obszary strony w przypadku pracy z Elementorem bezpłatnym zależne są do szablonu jaki wybraliśmy.

Oczywiście można posiłkować się dodatkowymi wtyczkami, które pozwolą tworzyć nagłówek i stopkę, ale to tylko czubek góry lodowej możliwości jakie dostajemy z Elementorem PRO, a poza tym dbałość o stronę to także minimalizowanie ilości instalowanych wtyczek.

Na siłę w darmowym Elementorze można stworzyć nagłówek czy stopkę standardowo jako sekcję, ale żeby ją ulokować tam gdzie chcemy trzeba dodawać ją ręcznie do każdej podstrony czy artykułu witryny. Mało komfortowe zwłaszcza gdy za jakiś czas przyjdzie Ci coś w tych miejscach zmienić 🙂

Ta ułomność jest niestety dość kłopotliwa i mało praktyczna zwłaszcza jeśli nasza strona będzie miała większą ilość podstron, nie mówiąc o dziale z artykułami (Blog). Elementor Pro pozwala stworzyć sekcję nagłówka i stopki, które z automatu zostaną wyświetlone na wszystkich podstronach naszej witryny.

Aby zrobić to o czym piszę musimy skorzystać z narzędzia Theme Builder. Żeby stworzyć nowy nagłówek wchodzimy do sekcji Szablony > Theme Builder

Gdzie kliknąć aby uruchomić Theme Builder - Elementor PRO

Nie mamy jeszcze utworzonego żadnego szablonu więc jedyną opcją jaka mamy to jego dodanie. Tak też robię klikając w przycisk „Dodaj nowy template”. Następnie wybieram z listy rodzaj templatki. Chcę najpierw utworzyć nagłówek strony, więc stosownie do moich zamiarów wybieram właśnie tę opcję:

Wybór rodzaju templatki

W polu nazwy wpisuję coś co będzie identyfikowało templatkę na liście (bez obawy ta nazwa nie wyświetli sie na stronie) i klikam w przycisk utworzenia szablonu.

theme builder03

W momencie gdy zainicjujesz budowę nagłówka pojawią się przykładowe, gotowe propozycje graficzne jego aranżacji. Na obecną chwilę jest ich 31 sztuk, ale każdy z nich możesz indywidualnie modyfikować lub jeśli wolisz, możesz stworzyć cały nagłówek samodzielnie od podstaw.

elementor pro biblioteka

Jeśli ta ilość gotowych propozycji to dla Ciebie za mało, koniecznie sprawdź ten artykuł: „2000+ bezpłatnych szablonów dla Elementora„. Dysponując Elementorem PRO masz dostęp do olbrzymiej ilości templatek 🙂

Ok żeby użyć templatki nagłówka, która wstępnie mi odpowiada (dalej mogę ją dostosować jak chcę) klikam na niej i wstawiam do szablonu.

Domyślnie schemat jaki wybrałem wykorzystuje dwa widgety. Jeden to widget logotypu, drugi to widget odpowiadający za wyświetlenie menu.

Widgety w nagłówku

Jak widzisz obszar, który odpowiada za wyświetlenie logotypu, a także menu nie wyświetla nic ciekawego. Wynika to z faktu, że dla strony nie zdefiniowałem ani logotypu, ani menu. Jeśli więc utworzę menu sprawa będzie wyglądała inaczej 🙂

Nagłówek z poprawnie wyświetlonym menu

Przyjmijmy, że nagłówek już sobie odpowiednio zaaranżowaliśmy. Tak jak wspomniałem możesz w nim zmienić dosłownie wszystko od układu, po kolory, możesz dodawać kolejne widgety odpowiadające za wyświetlanie treści, przycisków, ikon itd…

Żeby zapisać pracę i jednocześnie opublikować nowy nagłówek wystarczy, że kliknę w przycisk Opublikuj, który znajdę standardowo w lewym dolnym rogu okna przeglądarki, na samym dole paska z widgetami Elementora.

Zaczynamy publikację

To jednak nie koniec, bo teraz będzie najciekawsze 🙂

Mogę zdecydować gdzie nagłówek ma się wyświetlać. Innymi słowy czy chcę zastąpić domyślny nagłówek motywu na całej witrynie czy może tylko w wybranych jej obszarach.

Warunki wyświetlania nagłówka

Tu chwilę się zatrzymam, ponieważ jest to niesamowita funkcjonalność Elementora PRO.

Zazwyczaj jest tak, że nagłówek strony jest wspólny, tzn. taki sam na każdej stronie i podstronie naszej witryny. Bywają jednak sytuacje, gdy możemy zechcieć wprowadzić troszeczkę więcej różnorodności do naszej strony.

Załóżmy że na stronie mamy bloga, który porusza kilka obszarów naszej działalności. Każdy z tych obszarów czymś się charakteryzuje. Możemy wpaść na pomysł, aby dział prezentujący artykuły z danej tematyki wyróżniał się na tle pozostałych chociażby jakimś charakterystycznym akcentem graficznym w nagłówku, może inna kolorystyka itp…

Mając do dyspozycji Elementora PRO mogę ten pomysł wcielić w życie i nie muszę dotykać choćby linijki kodu!

Warunki wyswietlania

Zwróć uwagę, że warunki wyświetlania mogą być rozbudowane. W naszym przykładzie powyżej, konfiguracja sprawi, że ten schemat nagłówka będzie wyświetlał się w całym serwisie, za wyjątkiem wpisów przypisanych do wybranej kategorii, oraz na stronie wyświetlającej błąd 404 (strona nie istnieje). Rewelacja 🙂

Gdy już mam zdefiniowane warunki wyświetlania zapisuję zmiany i mogę przejść na stronę, aby sprawdzić czy domyślny nagłówek motywu został zastąpiony. Owszem został.

sprawdzam nagłówek

Zrobimy więc dokładnie ten sam zabieg ze stopką strony. Procedura jest identyczna. Różni się jedynie tym, że  na etapie definiowania rodzaju tworzonego szablonu zamiast nagłówka wybieram stopkę.

Rodzaj szablonu stopka

Gotowych templatek dla stopki mam nieco więcej i podobnie jak w przypadku nagłówka stopkę mogę dowolnie modelować pod własne potrzeby.

theme builder12

Wybieram templatkę, dostosowuję ją do własnych potrzeb, zapisuję i określam warunki wyświetlania – wszystko dokładnie tak samo jak w przypadku nagłówka. Na koniec sprawdzam efekt, który może prezentować się jak poniżej lub zupełnie inaczej, bo na pewno będziesz miał swój własny pomysł 🙂

Przykład stopki

Po starym nagłówku i starej stopce ani śladu. To co teraz pozostaje, to już praca z treścią poszczególnych stron i podstron i tu również możemy wykorzystać Elementora Pro. 

Mógłbyś zatem zapytać czy w tej sytuacji jest sens inwestować w motywy? Odpowiem tak. W dobry motyw dobrze zoptymalizowany pod katem Elementora warto ponieważ doda on jeszcze większego wiatru w żagle naszej strony. Polecam Twojej uwadze takie motywy jak Astra, Kadence, Blocksy i GeneratePress. Przeczytasz o nich w artykule: Najlepsze motywy WordPress.

To nie jedyne wyjątkowe możliwości jakie niesie ze sobą Elementor Pro

Kolejna świetna funkcjonalność to chociażby builder formularzy czy generator okien popup, które można wykorzystać na setki rozmaitych sposobów. To także możliwość umieszczania utworzonych templatek przy wykorzystaniu shortcodów w dowolnym miejscu artykułu czy strony. Jeśli pracujesz z edytorem Gutenberg to bez problemu wstrzyknięta do niego bloki z Elementora PRO. To także świetne efekty wizualne i wiele innych drobniejszych funkcjonalności, które sprawiają że w rękach mamy potężne narzędzie.

Trzeba jednak nauczyć się z nim pracować i wykorzystywać jego potencjał. Elementor rozwija się bardzo dynamicznie. Dla Czytelników JZS dostępny jest specjalny Kurs Elementor PRO na platformie PoznajWP. Zapraszam!

Udostępnij

Bezpłatne informacje o nowościach JZS

Zapraszam Cię do grona Subskrybentów! Tysiące Czytelników już subskrybuje wiadomości z JZS.

W każdej chwili możesz zrezygnować z subskrypcji. Twój adres jest tu bezpieczny.

Ostatnio dodane oferty lifetime

Stwórz natywną aplikację mobilną dla swojego sklepu WooCommerce

Meta Box Lifetime

Dodawaj własne rodzaje treści i pola do WordPressa.

Zestaw narzędzi do optymalizacji SEO, wyszukiwania fraz i śledzenia rankingów w Google.

Może Cię Zainteresować

Komentarzy: 37

  1. Tomek pisze:

    Elementor przypomina w obsłudze stary, darmowy edytor tekstu. Nie da się wygodnie edytować i tworzyć wpisów, justować tekstu itd.
    Wypadaloby w XXI w. dopracować tak podstawowy element.

  2. Kaśka pisze:

    A co oznacza przy cenie elementora pro informacja na rok? Póki utrzymuję stronę, co rok muszę dokonywać tej płatności?

    1. Przymusu nie ma. Jeśli nie przedłużysz licencji nie będziesz miała dostępu do kolejnych aktualizacji wtyczki, do wsparcia producenta czy do templatek PRO, ale to co masz na obecną chwilę działać będzie. Kupując jakąkolwiek wtyczkę, motyw, itp. kupujesz licencję na określony czas – zazwyczaj rok. Wyjątkiem są oferty lifetime, które można spotkać u niektórych twórców, ale jak nietrudno się domyślić są one odpowiednio droższe.

  3. Chciałbym zmienić ponad 400 wpisów dodając do nich szablon stworzony w Elementorze. Czy można to w jakiś sposób zautomatyzować?

  4. Damian pisze:

    Witam Czy zatem opłaca się jeszcze uczyć tworzyć własne szablony pod WordPressa ? Uczyć się Html/Css/Php skoro jest Elementor ?

    1. Damian ta wiedza pozwoli Ci wchodzić głębiej w niestandardowe rozwiązania czy chociażby lepiej rozumieć pewne mechanizmy (np. techniczne SEO). Nie jest to jednak wiedza niezbędna czy konieczna do tego aby samodzielnie stworzyć atrakcyjną stronę, sklep lub bloga.

  5. Keys pisze:

    Bardzo dobry artykuł. Właśnie się zastanawiam nad Elementorem lub WPBakery do tworzenia stron dla klientów. Czy WPBakery też posiada licencję na X stron? Tak jak Elementor w wersji Pro 1000?

    1. Nie mam osobiście najlepszych doświadczeń z tym builderem (mowa o WPBakery) więc nie polecam. Odnośnie licencji WPBakery, to jeden zakup (licencja) = jedna strona.

  6. Karol pisze:

    Jestem zupełnie świeży więc moje pytanie może zabrzmieć trochę dziwnie.
    Czy, żeby zainstalować Elementora a następnie Elementora Pro, muszę po zainstalowaniu aktualnej wersji WP na serwerze pozbyć się Gutenberga tj. zainstalować wtyczkę klasycznego edytora?

    1. Nie Karol. Nie musisz odinstalowywać niczego. Możesz potem decydować czy z daną podstronę, artykułem itd… chcesz pracować wykorzystując Gutenberga czy Elementora.

  7. jurew pisze:

    znikł mi przycisk Edytuj w Elementorze w darmowej wersji.Przełącznik w ustawieniach jest włączony. WP 5 i gutenberg.Jak go przywrócić? Strony mają możliwość edycji linkiem, ale przycisku nie ma

      1. jurew pisze:

        tak, usunąłem też Elementora i zainstalowałem ponownie i to samo. Przedtem czyściłem wordpressa, Firefoxa i Google

        1. jurew pisze:

          Nie wiem, czy to jest to, ale wyłączyłem gutenberga, przeczyściłem cache i włączyłem i przycisk się pojawił. Nie wiedziałem, że tak się gryzą

          1. Krzysztof Wojteczko pisze:

            Elementor i Gutenberg się nie gryzą, coś gdzieś musiało nie zaskoczyć.

          2. jurew pisze:

            była dodawana nowa strona w wp i jak zwykle pojawiał się wybór, a tymczasem nic też na wszystkich utworzonych do tej pory, a to dobra para była z darmowym elementorem..Nie wiem co było, spróbowałem wtyczkami i zaskoczyło, windows

  8. paco pisze:

    Elementor jest super ale ja mam w jednym miejscu problem dość irytujący bo wtyczka comparision image za nic nie chce się wyświetlać poprawnie to jest dodatek typu after befor zdjęcia są różnej wielkości i d… Mógłbyś pomóc?

    1. Nie napisałeś co to znaczy, że nie chce wyświetlać poprawnie. Jak rozumiem nie wyświetla obrazków, albo wyświetla je w sposób który Ci nie odpowiada. Nie wiem też jakiej konkretnie wtyczki używasz, a jest ich tego typu sporo. Przede wszystkim w przypadku takich dodatków obrazki najlepiej jeśli mają te same rozmiary. Możliwe też, że jest jakiś konflikt z innym rozszerzeniem, albo motywem z którego korzystasz. Spróbuj wyłączyć wtyczki, przełącz się na innym motyw i sprawdź czy pomogło. W ten sposób wyselekcjonujesz winowajcę.

  9. Krik pisze:

    Mam pewien problem z Elementorem. Jest super – fakt. Dla swojej własnej strony/sklepu – mogę przedłużać co roku licencję. Jednak problem jest gdy chce się używać Elementor Pro pod wdrożenia dla klientów. Klienci nie chcą ponosić stałych opłat co roku, a jeśli ktoś im wdroży na Elementor Pro coś i nie powiadomi o takiej konieczności, naraża klienta na problemy związane z bezpieczeństwem, gdyby wykryto we wtyczce jakiś bug, który został załatany w którejś z aktualizacji, a której to klient nie uzyska bo nie ma przedłużonej licencji. Dlatego w DIVI inaczej to rozwiązano – i to jest lepsze 🙁

    1. DIVI ma licencje typu Lifetime czego Elementor, przynajmniej na razie nie oferuje. Fajnie by było gdyby taka opcja kiedyś się pojawiła 🙂 Natomiast developerzy, którzy widzą potencjał Elementora i niezwykłą wygodę w pracy z tym narzędziem jakiej doświadczają końcowi użytkownicy (ich Klienci), po prostu odnawiają swoją licencję rok w rok i nie ma problemu. Jeśli Klient trafi na niezbyt odpowiedzialnego projektanta, to nawet gdy ten nie odnowi swojej licencji świat się nie wali. Strony nadal działają tyle że nie ma dostępu do nowych wersji Elementora PRO.

    2. Bartek Trejka pisze:

      Nie musisz kupować licencji Elementor Pro, bo są na rynku pluginy / rozszerzenia, które dają Ci więcej funkcji niż Elementor Pro i są z licencjami lifetime / developer free update. Ja sam mam licencję Elementor Pro i używam jej tylko na kilku stronach klientów. Więcej używam dodatków pro do Elementora.

      1. Wszystko zależy od potrzeb. Elementor PRO można by rzec, to natywne rozwiązanie pochodzące od jego producenta, a więc także jakość kodu jest tu przewidywalna co nie jest bez znaczenia. Sporo zewnętrznych rozszerzeń, to w dużej mierze widgety. Korzystając z Elementora PRO zasilasz projekt chociażby theme builderem czy dynamicznymi danymi czego wielu innym brakuje. Można oczywiście posiłkować się np. Crocoblock i ich rozszerzeniem JetEngine, ale tak jak napisałem to zawsze wybór indywidualny i powinien być podejmowany w świadomy sposób. Nie sztuką jest naszpikować Elementora i samego WP dziesiątkami rozszerzeń, pytanie tylko po co 🙂

        1. Bartek Trejka pisze:

          Problemem jest to, że klienci nie chcą płacić za przyszłe aktualizacje. Chcą kupić „narzędzie”z wieczystymi aktualizacjami. Za Elementora Pro trzeba płacić co roku, więc musiałem znaleźć inne rozwiązanie. Tylko kij ma dwa końce klient chce zapłacić tylko raz a potem nie robi aktualizacji….

  10. Archis pisze:

    Zastanawiam się, czy jeżeli ma się kilka licencji, które wygasną a chce się zrobić nową stronę w PRO – to trzeba odświeżyć wszystkie licencje, czy można tylko kupić jedną – nową ?

    1. Tomek Mróz pisze:

      Nikt Ci nie opowie. Artykuł stworzony tylko pewnie jako płatny wpis, albo autor z reflnka ma kasę za Twój zakup.

      1. Tomku każdy może odpowiedzieć na zadane w komentarzach pytania, nie tylko ja, ale Ty również. Szkoda, że mając taką szansę nie udzieliłeś konkretnej odpowiedzi. A przecież mogłeś 🙂 A tak na poważnie, to jeśli ktoś ma pytanie kierowane bezpośrednio do mnie zawsze można wysłać je mailem (kontakt w stopce).

        Co do pytania Archisa, to pojedyncza licencja umożliwia instalację rozszerzenia PRO na jednej stronie, ale dostępne są licencje na większą ilość stron. Masz do wyboru licencję dla jednej strony, trzech lub licencje nielimitowaną. Jeśli więc masz więcej niż 3 strony zapewne bardziej będzie Ci się kalkulowało zainwestować w wersję unlimited zwłaszcza jeśli po drodze pojawią się kolejne strony. Kwestia indywidualnej kalkulacji.

        1. Tomek Mróz pisze:

          Jeszcze brakuje informacji o artykule sponsorowanym. Ale to szczegół, prawda ?

          1. Nic nie brakuje Tomku. To nie jest artykuł sponsorowany.

  11. Janusz Kamiński pisze:

    Elementor jest bardzo fajną wtyczką. 😉

  12. Monika pisze:

    Zaczęłam bawić się visual composer, ale działa pewnie podobnie ja elementor. Na stronie głównej mam blog którego nie mogę edytować. Wie Pan może jak podmienić główną stronę (blog) na stronę stworzoną w kreatorze? Czy może coś robię nie tak?

    1. Krzysztof Wojteczko pisze:

      Tak VC to także builder tyle że z dłuższą historią niż Elementor. Wejdź w Ustawienia > Czytanie, zaznacz Statyczną stronę i wybierz z listy tą która ma być stroną główną. Zapisz zmiany i to powinno temat załatwić.

        1. Adrian w Elementorze możesz zrobić praktycznie co chcesz. Jeśli zechcesz umieścić przyciski jeden obok drugiego robiąc w ten sposób swoiste menu, to jak najbardziej jest to możliwe.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *