...

Elementor WordPress Tutorial pl

elementor wordpress tutorial pl

Elementor najlepsza wtyczka / edytor do budowy stron na WordPress

Witaj, w tym wpisie chciałbym przybliżyć Ci dokładnie najlepszą moim zdaniem wtyczkę do budowy i edycji stron opartych na WordPress, czyli wtyczka Elementor. Porównanie mam bo korzystałem z większości edytorów strona na WordPress: Wp Bakery, Fusion Builder, Site Origin, Divi, czy Gutenberg. Elementor wszystkie bije na głowę pod względem funkcjonalności, prostoty oraz  intuicyjności. Odnajdą się w nim zarówno osoby początkujący, jak i zaawansowani Web Designerzy.

W przeciwieństwie do innych edytorów Elementor nie zostawi wam w kodzie strony syfu i nie obciąża działania strony pod względem szybkości.

Wtyczka dostępna jest w wersji darmowej i płatnej; w tym wpisie omówię funkcjonalności, elementy wersji darmowej. Jeśli jesteś zainteresowany wersja PRO napisz do mnie email

Jeśli wolisz Elementor tutorial pl w formie wideo zapraszam Cię do obejrzenia filmu na moim kanale na Youtube dotyczącego właśnie tego edytora

Spis treści; z tego wpisu dowiesz się m.in.:

  1. Elementor pobierz, instalacja
  2. Wstawianie elementów na stronę
  3. Tworzenie sekcji, kolumn
  4. Wstawianie gotowych bloków, stron
  5. Doskonałe dodatki do Elementor: wtyczka Envato 
  6. Elementor PRO – chcesz go za darmo?

Elementor Instalacja, pierwsze kroki, jak używać

Zanim zainstalujesz wtyczkę Elementor warto wiedzieć że nie wszystkie motywy WordPress są kompatybilne z tą wtyczką. Poniżej najlepsze moim zdaniem motywy WordPress, które doskonale współpracują z Elementorem:

  1. Astra
  2. Kustrix
  3. Hello 
  4.  Phlox
  5.  Ocean WP
  6. Hestia

Wracając do wtyczki Elementor, dostępna jest w repozytorium WordPress; wystarczy wpisać jej nazwę w wyszukiwarce wtyczek, zainstalować i aktywować:

 

elementor instalacja pobierz

Wtyczkę można też pobrać bezpośrednio ze strony twórców tej wtyczki: elementor.com

Po instalacji i aktywacji mamy w kokpicie WordPress zakładkę wtyczki:

 

elementor ustawienia

Tutaj proponuję zostawić ustawienia domyślne. Aby zacząć edytować stronę przy użyciu tego edytora stron należy wejść w kokpicie WordPress w strony i wybrać tą którą mamy zamiar właśnie edytować/budować:

 

elementor edycja stron

Następnie klikamy „Edytuj w Elementorze””

elementor page builder

… i po chwili jesteśmy w oknie wtyczki, możemy zacząć tworzyć naszą stronę 🙂

okno

Pierwszym krokiem który możemy zrobić to wchodzimy w ikonkę trzech poziomych linii w lewym górnym rogu i  tam mamy ustawienia ogólne takie jak: wybór czcionek, kolorów czcionek, szerokość strony itp.. Ja tego typu rzeczy ustawiam w ustawieniach motywu wchodząc w kokpicie WordPress w zakładkę wygląd – dostosuj. Każdy element na naszej stroni możemy później indywidualnie spersonalizować wtyczką Elementor.

Elementor WordPress tutorial - podstawowe elementy strony

Budując lub edytując stronę na Elementorze korzystać będziemy z gotowych do wstawienia na stronę elementów. W darmowej wersji mamy ich 40. Są to m.in.: pole tekstowe, nagłówek, obrazek, karuzela obrazów, wypunktowana lista, mapka Google, podstawowa galeria, licznik, pasek postępu, referencje, alert, ikonki mediów społecznościowych, opinie, shortcode, zakotwiczenie menu, panel boczny, przyciski, osadzane filmów np.  z Youtuba i wiele, wiele więcej.

Wstawianie elementów na stronę internetową

Wstawianie poszczególnych elementów na stronę internetową jest banalnie proste i odbywa się na zasadzie „złap i upuść”. Łapiemy element, który chcemy umieścić na naszej stronie www przytrzymując lewy przycisk myszy, przeciągamy go w wybrane miejsce na stronie i opuszczamy:

Elementor to gwarancja, że wasza strona będzie responsywna

Klikając na dole na czarne tło z ikonką komputera możemy zmienić widok i zobaczyć jak nasza strona prezentuje się na urządzeniach mobilnych:

strona responsywna

Jeśli któreś elementy nie wyświetlają się na smartfonach tak jak tego byśmy oczekiwali możemy każdy z elementów poprawić pod urządzenia mobilne np. wielkość czcionek, marginesy, czy odstępy. Tak by nasza strona prezentowała ię idealnie na wszystkich urządzeniach

Podział na sekcje, kolumny i elementy.

Całą naszą edytowaną podstronę możemy podzielić na 3 główne elementy: sekcje, kolumny, elementy. Sekcja zajmuje całą szerokość ekranu i podzielona jest na kolumny. Kolumny natomiast zapełniamy elementami, które wcześniej wymieniłem. Zarówno sekcje jak i kolumny możemy personalizować i konfigurować indywidualnie: zmieniać tło, marginesy, szerokość kolumn itp.

Chcąc zapełnić naszą stronę elementami, musimy najpierw utworzyć pierwszą sekcję i ustalić z ilu kolumn ma się składać.

W tym celu klikamy ikonkę plusika i wybieramy ilość kolumn np. 2

elementor dodaj sekcje
elementor kolumny

Elementor WordPress tutorial: Edytowanie sekcji, kolumn i poszczególnych elementów w Elementorze

I tak mamy na naszej stronie pierwszą sekcję, która podzielona jest na dwie kolumny. Chcąc edytować sekcje wchodzimy w ikonkę kropek na niebieskim tle, natomiast chcą edytować kolumnę klikamy prawym przyciskiem myszy ikonkę tabelki na czarnym tle:

sekcje kolumny

Edytor sekcji i kolumn podzielony mamy na 3 główne kategorie: wygląd, style i zaawansowane:

elementor edycja sekcji

W sekcji wygląd ustawiamy szerokość, wysokość sekcji/kolumny, wyrównanie pionowe/poziome, w stylach ustawiamy kolor tła, czy czcionki. W sekcji trzeciej, czyli w zaawansowanych ustawiamy odstępy , animacje wejścia elementów itp.

Tworząc sekcje dwukolumnową domyślnie mamy ustawiony rozmiar kolumn na rórówne ckolumny po 50% każda możemy oczywiście edytować ten układ dowolnie zmienijąc proporcje szerokości kolumn np 70-30%.

Gdy mamy już podzieloną stronę na kolumny możemy zacząć zapełniać je elementami przeciągając lewym przyciskiem myszy, taka jak wcześniej wspominałem.

Każdy z elementów możemy oddzielnie edytować:

elementor edycja elementów

Wystarczy kliknąć prawym przyciskiem myszy na ikonkę białego piórka na niebieskim tle. I znów mamy podział na 3 główne kategorie edycji wybranego elementu: treść, styl i zaawansowane. W sekcji treść zapełniamy nasz element treścią np. jeśli wybiorę pole tekstowe to wpisuje tekst, jeśli obrazek to wybieram obrazek.

W stylach zajmujemy się częścią wizualną wybranego elementu; ustawiamy kolory :czcionki, tła, nakładkę koloru na obrazek, rodzaj i wielkość czcionki itp. W ostatniej 3 część zaawansowane ustawiamy marginesy, animacje wejścia, obramowanie, możemy wkleić też swój kawałek kodu css

Przydatne narzędzie: Nawigator

Z czasem gdy na stronie pojawu się sporo elemntów możemy zacząć się gubić w ich ilości chcąc edytować któryś z nich. Wtedy z pomocą przychodzi bardzo przydatne narzędzie jakim jest nawigator, który pomoże nam wybrać element który chcemy aktualnie edytować. Wystarczy kliknąć prawym przyciskiem myszy na element i kliknąć „nawigator”:

elementor nawigator

Elementor WordPress tutorial: tworzenie kolejnych sekcji

Gdy wypełnimy pierwszą naszą sekcję kolumnami i elementami czas dodać nową sekcję. Robimy ją analogicznie jak pierwszą klikać ikonkę plusika i wybierając układ z ilości kolumn jaki chcemy

Gotowe bloki na Twoją stronę

Twórcy elementora pomyśleli o tym, aby ułatwić nam życie jak najbardziej, dlatego mamy do swojej dyspozycji bibliotekę gotowych do wstawienia na stronę bloków jak i całych stron. Opcja ta dostępna jest również w wersji darmowej. Oczywiście w wersji premium, biblioteka ta jest bardziej rozbudowana, niemniej jednak nie ma co narzekać – wybór jest spory.

By skorzystać z gotowych bloków jak i całych podstron, tworząc sekcję należy kliknąć nie plusika jak do tej pory, a ikonkę folderu:

elementor gotowe elementy

W następnym kroku należy wybrać czy wstawiamy jedynie pojedyncze bloki posegregowane wg kategorii czy całe podstrony:

gotowe elementy

Funkcja ta skraca tworzenie stron do minimum czasowego. Stworzone przez nas sekcje możemy wyeksportować i zapisać na dysku, i użyć ich do pracy np. przy budowie kolejnych stron. Zapisać można także całe podstrony.

Doskonałe dodatki do Elementora od wtyczki Envato

W tym rozdziale chciałbym przybliżyć najlepszą darmową moim zdaniem wtyczkę z dodatkami do Elementora jaką jest wtyczka Envato Elements.

Wtyczka Envato zawiera wysokiej jakości gotowe sekcje do wstawienia na stronę posegregowane wg kategorii np. usługi, referencje, kontakt, sekcja o nas, nagłówki, pod nagłówki.

By korzystać z wszystkich bogatych dodatków od Envato musimy na razie opuścić edytowaną przez nas stronę i wrócić do kokpitu WordPressa. Instalujemy i aktywujemy wtyczkę. Wystarczy wpisać w wyszukiwarkę wtyczek „Envato Elements”:

envato elements

Następnie znajdujemy w kokpicie WordPress zakładkę Envato i aktywujemy swój adres email:

envato elements settings

By cieszyć się możliwościami wtyczki wchodzimy w edycję strony klikając edytuj w Elementorze. Teraz gdy chcemy dodać sekcję w Elementorze oprócz wcześniejszych ikonek mamy do wyboru także trzecią właśnie Envato:

 

envato elements

Do wyboru mamy pokaźną bibliotekę gotowych sekcji jak i całych stron, które wystarczy zaimportować:

kokpit envato

WordPress Elementor Pro

Wtyczka Elementor ma swoje rozszerzenie do wersji PRO w której mamy dostęp do pełnej biblioteki gotowych stron do zaimportowania oraz większej ilości elementów na stronę m.in. slider, zaawansowaną galerię zdjęć, osadzanie postów z bloga na dowolnej stronie, nawigacyjne menu, zaawansowane karuzele zdjęć, referencje, liczniki, możliwość wstawienia przycisków do mediów społecznościowych, nagłówki z animacjami i wiele innych.

Ceny Elementora Pro zaczynają się od 49$ rocznie za jedną stronę. Uważam że dużo. 

Elementor Pro podsumowanie

Jeśli jesteś zainteresowany wersją Pro Elementora napisz do mnie wiadomość email

Jeśli masz jakieś pytania zostaw komentarz, chętnie Ci pomogę. Jeśli potrzebujesz pomocy przy budowie strony / promowaniu jej napisz do mnie dariuszpichalski@gmail.com

Mój Kurs WordPress

Chcesz nauczyć się Tworzyć strony www samodzielnie? Już jest mój autorski kurs tworzenie stron na WordPress. Prawie 11 godzin praktycznej wiedzy z zakresu tworzenia stron www. Kurs przeznaczony zarówno dla osób początkujących jak i tych, którzy chcą tworzyć strony zawodowo.

Prezent na do widzenia

Ebook: TOP 10 Wtyczek WordPress

Wpisz poniżej swój adres Email:

Udostępnij na Facebook
Udostęnij na Twitter
Udostępnij na Linkedin

43 thoughts on “Elementor WordPress Tutorial pl”

  1. Witam wykonałem wszystkie zadania do otrzymania elementor pro od Pana 🙂 właśnie uczę się jak korzystać z WP i naprawdę kawał dobrej roboty z Panskiej strony i dużo wiedzy 🙂 pozdrawiamy

  2. Dzień dobry, zadania wykonane, będę wdzięczna za podesłanie wtyczki Elementor Pro. Dziękuję i pozdrawiam. Kasia

  3. Sławomir Lasota

    Witam,
    dziękuję za przejrzysty samouczek. Chętnie sprawdzę wtyczkę w wersji PRO. Proszę o udostępnienie (warunki spełnione).

  4. Witam, właśnie buduję swoją pierwszą stronę w elementorze z Pana tutorialem. Wykonałam wszystkie zadania i będę wdzięczna za przesłanie wtyczki do wersji pro 🙂 dziękuję!

  5. Dzień Dobry
    Dziękuję za znakomity materiał.
    Zadanie wykonałem. Proszę o przesłanie wtyczki Elementora Pro.
    Dziękuję i pozdrawiam

  6. Bardzo pomocny materiał, właśnie próbuję stworzyć swoją stronę i znalazłam tu naprawdę dużo pomocnych wskazówek. Dobra robota 🙂
    Czy mogę prosić o wysłanie wersji pro? oczywiście zadania wykonane 🙂

  7. Świetny artykuł,
    właśnie tego potrzebowałam, bo zabieram się za budowę swojej strony 🙂
    proszę również o podesłanie wersji pro 🙂

    dziękuję! i w kontakcie 😉

  8. Aktualnie realizuję zakupiony przeze mnie moduł nr 4 z kursu o WordPressie. I jak do tej pory szło jak z płatka, to w sklepie internetowym nie znalazłem momentu dotyczącego wykonania bloga, a w menu pojawia się ni z gruszki, ni z pietruszki., tzn. w okolicach 1 godz., 42 min. Szkoda, bo uważam to za wadę. Wiem, że jest osobny rozdział poświęcony blogowi, ale to jest na innym motywie, a nie Astrze. Chyba, że coś przeoczyłem.

  9. Właśnie realizuję moduł 4 z kursu o WordPressie. Do tej pory szło jak z płatka, aż tu nagle zonk! W filmie nie dowiem się, w jaki sposób zrobić bloga na motywie astra, mimo, że w menu budowanego sklepu pojawia się około 1h 42 min. Szkoda, bo zależy mi na kompleksowym rozwiązaniu a strona realnego klienta https://wszystkodlaogrodu.pl/ , na której opiera się szkolenie, mi odpowiada. No chyba, że coś przeoczyłem.

    1. hej, jak zrobić zakładkę blog na motywie Astra również pokazałem w kursie:) Jest w module „strona z gotowego szablonu” Pani psycholog:)

  10. Bardzo rzeczowy artykuł, niezwykle pomocny przy tworzeniu stron w WordPressie. Chętnie skorzystam z wersji Pro Elementora. Potwierdzam wykonanie zadania i pozdrawiam.

  11. Dzień Dobry. Zadanie wykonane. Będę wdzięczny za podesłanie wtyczki.

    Dodatkowo mam jeszcze jedno pytanie. Jestem w początkowej fazie tworzenia strony i chcąć edytować home page i blog wyskakuje mi błąd, że nie jest to możliwe. Na stronie Elementora wyczytałem, że jest to jedynie możliwe przy użyciu Elementor Pro. Czy jest to prawda czy błąd polega na czymś innym?

  12. Dzień dobry! Zadanie wykonałam, Proszę o wtyczkę Elementor PRO. Napisałam do Pana wczoraj maila, ale nie dostałam odpowiedzi, zatem tu jeszcze raz się zgłaszam:) Dziękuję za świetne filmy instruktażowe dotyczące Elementora. Bardzo pomagają. Robi Pan świetną pracę! Dziękuję.

    1. Bardzo dziękuję za Pana tutoriale i poradniki, dzięki Panu bez problemu zainstalowałam WordPressa, a potem krok po kroku wystartowałam ze stroną. Super! Zadanie z artykułu z przyjemnością wykonane, będę bardzo wdzięczna za wtyczkę Pro. Pozdrawiam i gratuluję dobrej roboty!

  13. Przejrzałam większość filmów: wszystkie zasługują na b. pozytywną ocenę. Gratulacje + podziękowania! E PRO mile widziany.

  14. Cześć! Ciekawy artykuł pozwalający poznać największe zalety Elementora 🙂 Korzystam już od dawna z darmowej wersji, jednak teraz stawiam sklep i chciałabym ugryźć ten temat od bardziej profesjonalnej strony, dlatego uśmiecham się do Ciebie o wersję PRO. Kanał subskrybuję już od dawna, like’i lecą regularnie.

    Cieszę się, że są tacy ludzie, którzy dzielą się chętnie swoją wiedzą w sieci. Dlatego wielkie dzięki i pozdrawiam!

Leave a Comment

Twój adres e-mail nie zostanie opublikowany.

Przewiń do góry