Investnet.pl > Poradniki > WordPress > Elementor WordPress – instrukcja obsługi

Elementor WordPress – instrukcja obsługi

5/5 - (11 opinii)
2021-05-24

Na rynku Page Builderów WordPress jednym z najbardziej popularnych narzędzi jest Elementor. Wtyczka ta ma niesamowicie wiele zastosowań i przy zakupie pełnej wersji (Elementor Pro) jesteśmy w stanie stworzyć całą stronę wraz z nawigacją i stopką przy pomocy tego pluginu. Elementor przyciągnął swoich użytkowników łatwością obsługi, szybkością tworzenia elementów i rozbudowanymi funkcjonalnościami. W tym poradniku pokażę w jaki sposób dodawać najważniejsze elementy przy pomocy tej wtyczki.

Elementor działa na zasadzie Drag&Drop – przeciągnij i upuść. Moim zdaniem jest to najlepsza wtyczka do tworzenia stron internetowych, która jest bardzo szybkim oraz nieskomplikowanym narzędziem. Plugin ten posiada funkcję Live Preview, czyli pogląd strony w trakcie tworzenia. Ponadto możemy tworzyć jedną podstronę na trzy wielkości ekranu:

  • Desktop – szerokość ekranu >1024px,
  • Tablet – szerokość ekranu <=1024px oraz szerokość ekranu > 768px,
  • Mobile – szerokość ekranu <=768px.

Oczywiście możemy zmienić szerokości dla danych urządzeń, ale najważniejsze jest to że możemy bez kodowania ustawić wybrane opcje elementu na różnych rozdzielczościach i od razu podejrzeć wygląd strony na danej rozdzielczości.

Jak widzisz Elementor ma wiele zalet, dlatego warto przeczytać ten poradnik i dowiedzieć się jak tworzyć strony przy pomocy tego narzędzia.


Spis treści

  1. Elementor – instalacja wtyczki
  2. Jak edytować stronę przy pomocy wtyczki Elementor
  3. Okno edycji wtyczki Elementor
    1. Elementy – dodawanie treści
    2. Globalny – widżety globalne w Elementor
    3. Ustawienia strony
    4. Nawigator Elementor
    5. Historia edycji
    6. Tryb responsywny Elementor
    7. Zobacz zmiany
    8. Ustawienia globalne i wyjście z okna edycji Elementor
  4. Widżety dostępne w Elementorze
    1. Dodawanie sekcji
    2. Kolumny w Elementorze
      1. Kopiowanie kolumny
    3. Sekcja wewnętrzna
    4. Jak dodać nagłówek
    5. Dodawanie tekstu do treści – Elementor
    6. Jak dodać obraz w Elementorze
    7. Galeria obrazów
    8. Karuzela obrazków
    9. Własny kod HTML
    10. Widżety WordPress w Elementorze
  5. Opcje zaawansowane – Elementor
  6. Podsumowanie

Elementor – instalacja wtyczki

Wtyczka Elementor jest darmowa i możemy korzystać z części jej funkcji całkowicie bezpłatnie. Wystarczy zainstalować wtyczkę na naszej stronie WordPress, aby zacząć działać nad stroną przy pomocy tego narzędzia.

Wybieramy z menu administratora zakładkę Wtyczki i wybieramy opcję Dodaj nową. Następnie w wyszukiwarce wtyczek wpisujemy Elementor. Wybieramy wtyczkę wskazaną na screenie i klikamy przycisk Zainstaluj. Poczekaj aż wtyczka się zainstaluje i następnie kliknij przycisk Włącz.

Elementor - instalacja wtyczki
Elementor – instalacja wtyczki

Jak edytować stronę przy pomocy wtyczki Elementor

Wybieramy stronę, którą chcemy edytować i klikamy opcję Edytuj. Przeniesie nas do okna edycji Gutenberg. Na górnym pasku edycji obok narzędzi Gutenberga mamy przycisk Edytuj w Elementorze. Klikamy ten przycisk.

Edytowanie strony przy pomocy Elementor
Edytowanie strony przy pomocy Elementor

Zostaniemy przeniesieni do okna edycji strony wtyczki Elementor. Po dodaniu odpowiednich treści klikamy na dole przycisk Aktualizuj i od tej pory strona będzie domyślnie edytowana przy pomocy wtyczki Elementor.

Aktualizacja treści strony w Elementor
Aktualizacja treści strony w Elementor

Okno edycji wtyczki Elementor

Po wejściu do okna edycji mamy kilka zakładek i pokrótce postaram się opisać zakładki i co w nich znajdziesz.


Elementy – dodawanie treści

Pierwszym oknem, które zobaczysz po wejściu do okna edycji Elementor będzie zakładka Elementy. To tutaj znajdziesz wszelkie widżety oraz funkcjonalności, które możesz dodać na swoją stronę. W skrócie jest to zakładka w której budujesz treść treść strony przeciągając elementy z lewego paska do wybranego bloku Elementora w treści strony.

Dodawanie treści w Elementorze
Dodawanie treści w Elementorze

Globalny – widżety globalne w Elementor

Jest to zakładka dostępna w płatnej wersji Elementora. W tej zakładce możemy dodawać zapisane widżety. Każdą sekcję lub element w Elementorze możemy zapisać jako globalny widżet i korzystać z niego na każdej ze stron wybierając dany widżet z zakładki Globalny. Bardzo fajna opcja, szkoda, że dostępna tylko w wersji Pro.


Ustawienia strony

W dolnym pasku nawigacyjnym obok przycisku Aktualizuj mamy kilka ikonek. Aby, wybrać ustawienia strony wybieramy ikonkę koła zębatego. W tej zakładce możemy ustawić tytuł strony, status strony (opublikowany, prywatny, szkic), możemy ustawić template strony oraz ukryć tytuł. Ponadto możemy wystylizować stronę i ustawić dodatkowe funkcje w zakładce Zaawansowane (dostępne w wersji Pro).

Ustawienia strony w Elementorze
Ustawienia strony w Elementorze

Nawigator Elementor

Obok ustawień strony mamy ikonkę warstw. Po kliknięciu ikonki otworzy nam się okno Nawigatora Elementor. W nawigatorze znajdziemy wszystkie elementy znajdujące się obecnie na stronie. Dzięki nawigatorowi możemy szybko dostać się do edycji danego elementu.

Nawigator Elementor
Nawigator Elementor

Historia edycji

Przydatną funkcją Elementora jest powrót do wcześniejszych wersji edycji, które znajdują się w oknie Historia. Możemy się cofnąć do momentu edycji danego elementu w zakładce Akcje oraz wrócić do wcześniejszej wersji naszej strony w zakładce Wersje.

Historia edycji w Elementorze
Historia edycji w Elementorze

Tryb responsywny Elementor

Przedostatnia ikonka w dolnej nawigacji Elementora włączy nam tryb responsywny. Dzięki temu trybowi możemy zobaczyć jak strona wygląda na danej rozdzielczości oraz dostosować wygląd do danej szerokości ekranu. Szerokość i wysokość ekranu możemy zwiększać i zmniejszać w przypadku tableta oraz telefonu. W zależności od wybranego urządzenia zmieniać się będą ikonki przy opcjach, które umożliwiają dostosowywanie responsywne. Na przykład w przypadku nagłówka opcja wyrównanie będzie dostosowana do obecnie wybranego urządzenia w trybie responsywnym.

Tryb responsywny Elementor
Tryb responsywny Elementor

Zobacz zmiany

blank

Jeśli chcemy zobaczyć pogląd naszej strony kliknijmy ostatnią ikonkę z dolnej nawigacji Elementora. Zostaniemy przeniesieni do podglądu edytowanej podstrony.


Ustawienia globalne i wyjście z okna edycji Elementor

blank

W górnej nawigacji wtyczki Elementor znajdziemy ikonki:

  • Menu – zostaniemy przekierowani do menu Elementora
  • Grid – otworzy nam listę widżetów Elementora

Wybierając ikonkę Menu otworzymy menu Elementora, gdzie znajdziemy:

  • Ustawienia witryny – w tym miejscu możemy ustawić wiele przydatnych funkcjonalności. Ustawienia te będą działać globalnie, więc dostosują całą witrynę do ustawień z tej zakładki. Między innymi ustawimy tutaj:
    • Globalne kolory – podstawowe kolory naszej witryny, które później będziemy mogli wykorzystywać przy budowie stron Elementor
    • Globalne czcionki – ustawimy czcionki wykorzystywane na naszej stronie,
    • Typografia – czcionki, rozmiar, grubość, kolor dla danych tekstów na stronie (nagłówki, akapity, listy, linki itp.)
    • Przyciski – tutaj możemy zaprojektować przycisk główny używany na naszej stronie
    • Obrazki – w tym miejscu zdefiniujemy jak mają dodawać się obrazy w naszej witrynie – możemy dodać zaokrąglenia, obramowanie itp.
    • Pola formularza – stylizacja formularzy naszej witryny
    • Tożsamość witryny – tą samą opcję znajdziemy w zakładce Dostosuj WordPressa – znajdziemy tu opcje do edycji: nazwa witryny, opis, logo, favicon
    • Tło – tutaj ustawimy tło naszej witryny
    • Wygląd – różne opcje dotyczące wyglądu strony, ustawienie responsywności i breakpointów Elementora
    • Lightbox – w tym miejscu ustawimy jak ma się zachowywać Lightbox na naszej stronie
    • Spersonalizowany CSS – możemy dodać własny kod CSS – opcja dostępna w wersji Pro
    • Dodatkowe opcje – zostaniemy przeniesieni do ustawień wtyczki Elementor
  • Kreator motywów – ta opcja przeniesie nas do kreatora motywów Elementor. Jest to opcja, która otrzymamy w wersji płatnej wtyczki. Możemy tutaj edytować wszystkie elementy naszej witryn: header, footer, strony bloga, wyniki wyszukiwania, podstrony woocommerce itp. Dla tej opcji na prawdę warto rozważyć przejście na wersję premium wtyczki, jeśli zajmujemy się tworzeniem stron internetowych.
  • Preferencje użytkownika – ustawienie wyglądu interfejsu okna edycji Elementor. W tym miejscu możemy ustawić wygląd edytora Elementor, szerokość bocznego panelu itp.
  • Wyszukiwarka – pomocne narzędzie, które wyszuka elementu, którego szukamy w edytorze.
  • Zobacz Stronę – zostaniemy przeniesieni do podglądu strony.
  • WRÓĆ DO KOKPITU – klikając w to miejsce wyjdziemy z okna edycji Elementor.

Widżety dostępne w Elementorze

Przeciągając dany element z listy widżetów Elementora automatycznie stworzona zostanie Sekcja i Kolumna przechowujące dany element.

Przykład: Wybieramy z listy nagłówek i przeciągamy go do treści naszej strony. Nagłówek został dodany, ale w gdy otworzymy Nawigator zobaczymy, że nad nim znajdują się jeszcze elementy Sekcja i Kolumna. Jeśli nastomiast dodamy elemeny do stworzonej już wcześniej kolumny to nie będzie potrzeby tworzenia nowej sekcji wewnętrznej wewnątrz kolumny.

Dodawanie widżetów Elementora do treści
Dodawanie widżetów Elementora do treści

Dodawanie sekcji

blank

Aby, dodać sekcję w Elementorze musimy kliknąć ikonkę plusa znajdującą się w sekcji dodawania widżetów Elementora. Otworzy nam się okno, które umożliwia wybranie nam struktury naszej sekcji (liczby kolumn i szerokości tych kolumn). Jeśli chcemy dodać pojedynczą sekcję wybieramy strukturę pojedynczej kolumny. W rzeczywistości zostaje dodana sekcja, która zawiera pojedynczą kolumnę.

Dodawanie sekcji w Elementorze
Dodawanie sekcji w Elementorze

Kolumny w Elementorze

Jeśli umiesz dodać sekcję – umiesz dodać kolumny. Aby wybrać ilość kolumn trzeba wybrać strukturę sekcji. Największa ilość kolumn w sekcji wynosi 6. Jeśli potrzebujesz więcej kolumn w danej sekcji – możesz zduplikować daną kolumnę.


Kopiowanie kolumny

Aby, to zrobić należy najechać kursorem myszy na daną kolumnę, następnie prawym przyciskiem kliknąć w kolumnę i zaznaczyć opcję Duplikuj.

Kopiowanie kolumny w Elementorze
Kopiowanie kolumny w Elementorze

Sekcja wewnętrzna

blank

Jeśli chcesz wewnątrz kolumny zrobić podział na kolejne kolumny – możesz to zrobić za pomocą sekcji wewnętrznej.


Jak dodać nagłówek

blank

Z listy widżetów wybieramy nagłówek i przeciągamy go do danej kolumny. Wewnątrz zakładki Treść ustawimy tytuł nagłówka, odnośnik, rozmiar, wagę i strukturę nagłówka (h1-h6, span, p, div), pozycję nagłówka. W stylu nagłówka możemy zmienić wygląd nagłówka, czyli standardowo kolor, czcionka, typografia, cień tekstu. Dodatkowo jak zawsze możemy ustawić opcje zaawansowane.


Dodawanie tekstu do treści – Elementor

blank

Z listy widżetów wybieramy edytor tekstu i przeciągamy go w wybrane miejsce. Edytor tekstu Elementora umożliwia wiele opcji wstawiania tekstu. Tekst wewnątrz edytora możemy pogrubiać, zmieniać strukturę, dodawać linki i listy. Ponadto możemy podzielić tekst na kolumny i ustawić odstępy między kolumnami. W stylu edytora tekstu ustawimy wygląd tekstu napisanego w edytorze.


Jak dodać obraz w Elementorze

blank

Wybieramy z listy widżetów ikonkę Obrazu i przeciągamy do danej kolumny. W zakładce treści klikamy na obrazek i wybieramy obraz z Biblioteki Multimediów WordPress. W opcjach widżetu ustawiamy rozmiar obrazu, pozycję, podpis i odnośnik. Zakładka stylu umożliwia nam ustawienie szerokości, maksymalnej szerokości i wysokości obrazu. Ponadto Elementor daje możliwość edycji wyglądu obrazu poprzez filtry CSS i przezroczystość.


Galeria obrazów

blank

Wybierając ten widżet możemy stworzyć prostą galerię zdjęć. Wybieramy obrazy do galerii z biblioteki multimediów. Ustawiamy rozmiar zdjęć i liczbę kolumn galerii. Dodatkowo możemy ustalić czy galeria ma posiadać funkcję Lightbox. W stylu galerii ustawimy odstęp między obrazami oraz wygląd podpisów zdjęć.


Karuzela obrazków

blank

Podobnie jak w przypadku galerii wybieramy zdjęcia do naszego slidera i stawiamy rozmiar w jakich mają się wyświetlać. Możemy ustawić te same opcje co w przypadku Galerii obrazów a dodatkowo mamy ustawienia dla slidera takie jak zarządzanie nawigacją i zachowaniem slidera.


Własny kod HTML

blank

Jeśli potrzebujesz dodać własny kod HTML do strony edytowanej w Elementorze użyj tego widżetu.


Widżety WordPress w Elementorze

blank

Na dole listy widżetów Elementora znajdziemy wszystkie wbudowane funkcjonalności WordPressa (widżety). Możemy je dodawać tak samo jak inne elementy, natomiast będą miały dużo mniej opcji modyfikacji.


Opcje zaawansowane – Elementor

Opcje zaawansowane brzmią groźnie, natomiast to tutaj znajdziemy wiele przydatnych opcji. Wybierając widżet i ustawiając jego treść i styl, warto zajrzeć jeszcze w zakładkę Zaawansowane. Znajdziemy tutaj między innymi (podam najważniejsze funkcjonalności):

Opcje zaawansowane Elementora
Opcje zaawansowane Elementora
  • Ustawianie marginesów
  • Ustawianie odstępów (padding)
  • ID – możemy dodać ID dla danego elementu
  • Klasy CSS – dodamy również klasy css
  • Efekty ruchu – w tym miejscu możemy dodać animację elementu
  • Obramowanie
  • Tło – kolor, gradient, obraz – do wyboru do koloru
  • Responsywne – w tej zakładce możemy schować dany element na dany typ urządzenia
  • Spersonalizowany CSS – możemy dopisać kod CSS do elementu – dostępne tylko w wersji Pro

Podsumowanie

Elementor jest bardzo rozbudowanym narzędziem do budowy stron internetowych. Wiele funkcjonalności jest dostępnych dopiero po odblokowaniu wersji Pro, natomiast darmowa wersja sama w sobie dostarcza nam większość potrzebnych widżetów do budowy strony w WordPress. Polecam ten Page Builder, który na prawdę ułatwia i przyspiesza pracę nad stronami internetowymi.

blank
Autor
Jakub Wiśniewski

Specjalista WordPress - programista z zawodu, wykształcenia oraz z pasji. Wolny czas spędza czytając o nowych technologiach, grając w siatkówkę i ćwicząc grę na perkusji.

Sprawdź również
Raporty – jak zarządzać raportami w WooCommerce WooCommerce
2021-07-13

Raporty – jak zarządzać raportami w WooCommerce

Raporty w WooCommerce są generowane automatycznie i w tym poradniku dowiesz się jak korzystać z tego typu raportów. […]

...
Jakub Wiśniewski
Zamówienie wirtualnego produktu w WooCommerce WooCommerce
2021-07-13

Zamówienie wirtualnego produktu w WooCommerce

W tym poradniku dowiesz się jak działa zamówienie wirtualnego produktu w WooCommerce. Pokażę Ci jak zamówić produkt wirtualny […]

...
Jakub Wiśniewski
Zamówienie WooCommerce od strony administratora WooCommerce
2021-07-13

Zamówienie WooCommerce od strony administratora

W tym poradniku omówię jak wygląda zamówienie WooCommerce od strony administratora. Ważną umiejętnością w prowadzeniu sklepu internetowego jest […]

...
Jakub Wiśniewski
Zamówienie WooCommerce od strony klienta WooCommerce
2021-07-13

Zamówienie WooCommerce od strony klienta

Zamówienie w sklepie WooCommerce może odbywać się na różne sposoby w zależności jak skonfigurowaliśmy nasz sklep. Prześledzimy ścieżkę […]

...
Jakub Wiśniewski