Elementor WordPress – instrukcja obsługi
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
- Elementor – instalacja wtyczki
- Jak edytować stronę przy pomocy wtyczki Elementor
- Okno edycji wtyczki Elementor
- Widżety dostępne w Elementorze
- Opcje zaawansowane – Elementor
- 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.
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.
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.
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.
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).
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.
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.
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.
Zobacz zmiany
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
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 sekcji
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ę.
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.
Sekcja wewnętrzna
Jeśli chcesz wewnątrz kolumny zrobić podział na kolejne kolumny – możesz to zrobić za pomocą sekcji wewnętrznej.
Jak dodać nagłówek
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
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
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
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
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
Jeśli potrzebujesz dodać własny kod HTML do strony edytowanej w Elementorze użyj tego widżetu.
Widżety WordPress w Elementorze
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):
- 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.