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 oraz napisze co trzeba zrobić by dostać ode mnie wersję PRO.

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 - 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

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: 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

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 za darmo dla Ciebie

Jeśli chcesz dostać ode mnie Elementor Pro, nie musisz szukać na chomikuj. Wystarczy wejść poniżej na mój kanał na Youtube, dać suba, komentarz i łapkę w górę. Następnie napisz do mnie i poinformuj o wykonanych powyżej czynnościach a ja wyślę Ci wtyczkę Elementor Pro. Wtyczka Elementor Pro którą Ci wyślę zawiera wszystkie templates do wstawienia na stronę z wersji Pro. Nie ma możliwości jedynie zaimportowania gotowych szablonów stron z wersji Pro.

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

Leave a Comment

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

Przewiń do góry