Elementor : Twój kompletny przewodnik po WordPress Page Builder

Maddy Osman Ostatnia aktualizacja 08.07.2021
10 Min.
Jak korzystać z Elementor : Przewodnik po konfiguracji od początku do końca
Ostatnia aktualizacja 08.07.2021

Elementor jest jednym z najbardziej popularnych WordPress page builderów obecnie. Nie bez powodu: Elementor jest naszpikowany funkcjami, które sprawiają, że tworzenie niestandardowych stron internetowych jest łatwiejsze niż kiedykolwiek. W tym wpisie dowiesz się wszystkiego, co musisz wiedzieć o Elementor .

Jeśli jesteś ciekaw, jak korzystać z Elementor , to dobrze trafiłeś. Dziś wszystko o Elementor - w tym wskazówki dotyczące instalacji i najlepsze Themes & dodatki. Ponieważ, szczególnie na początku, używanie Elementor może być mylące. Przyjrzymy się bliżej następującym tematom:

  • Elementor : Czym jest Elementor i jak działa page builder
  • Zalety korzystania z Elementor jako WordPress Page Builder
  • Różnice między Elementor i Elementor Pro
  • Jak zainstalować Elementor Page Builder w WordPress
  • Jak korzystać z Elementor : wyjaśnienie krok po kroku
  • Najlepsze strony Elementor Themes i jak z nich korzystać
  • Zalecane dodatki dla Elementor
  • Podsumowanie: Jak korzystać z Elementor - kompletny przewodnik

Elementor : Co to jest i jak działa

Czym w ogóle jest page builder?

Kreator stron można porównać do "zestawu konstrukcyjnego" dla treści Twojej strony internetowej, w którym możesz przeciągać i upuszczać poszczególne elementy w pożądane miejsca i wypełniać je własną treścią. W naszym artykule poznasz najważniejsze wady i zalety page builderów.

Elementor to kreator stron Plugin zaprojektowany dla WordPress . Elementor dodaje całą gamę funkcji przeciągania i upuszczania. Dzięki temu nawet początkujący użytkownicy mogą tworzyć oszałamiające strony internetowe, które wyglądają profesjonalnie.

Największą zaletą Elementor jest to, że otrzymujesz pełny podgląd na żywo swojej strony - podczas wprowadzania zmian.

Elementor tworzy intuicyjne doświadczenie projektowe, szczególnie dla początkujących. Aby to osiągnąć, Plugin wykorzystuje dziesiątki widżetów, pełną bibliotekę szablonów oraz funkcję historii zmian. 

Core Plugin Elementor jest darmowy i zawiera wiele podstawowych elementów. Jeśli potrzebujesz bardziej zaawansowanych funkcji, dostępna jest strona Elementor Pro. Ta wersja premium Elementor ma kilka poziomów cenowych, począwszy od $49/rok dla jednej strony internetowej i idąc do $999/rok dla 1000 stron internetowych.

Zalety korzystania z Elementor jako WordPress Page Builder

Jak można się domyślić, Elementor ma kilka zalet. Zapoznajmy się z kilkoma z nich, zanim przejdziemy do właściwego tutorialu Elementor . Niektóre z najważniejszych zalet to: 

  • Łatwy w użyciu. Wizualna edycja frontendu w połączeniu z widgetami sprawia, że praca z Elementor Page Builder jest niewiarygodnie łatwa, nawet dla początkujących. 
  • Elastyczność i możliwość rozbudowy dla programistów. Solidna biblioteka szablonów, edytor bloków i pełna kontrola nad wyjściem oznacza, że nawet bardziej doświadczeni programiści mogą nauczyć się korzystać i pracować z Elementor Theme Builder. 
  • Mnóstwo możliwości stylizacji. Za pomocą panelu edytora z suwakami możesz dostosować ustawienia w projekcie w wygodnych ramach edycji.  
  • Globalne widżety, które oszczędzają czas. Zmieniaj, dostosowuj, zapisuj i używaj widżetów na wielu stronach internetowych. 
  • Przeciągnij i upuść Theme Tworzenie. Stwórz stronę Elementor Theme od podstaw za pomocą wbudowanych widgetów - lub wykorzystaj szablony Elementor Pro jako podstawę. 
  • Integracja E-commerce. Użyj panelu widgetów, aby stworzyć sklep internetowy z pełną responsywną kontrolą, do której jesteś przyzwyczajony z innych builderów z kompatybilnością WooCommerce .
  • Wbudowane narzędzia marketingowe. Szczególnie na początku pracy z Elementor od razu zauważysz następujące rzeczy: Możesz dostosowywać style formularzy, tworzyć strony docelowe Elementor i używać widżetów Plugin , aby budować swoją obecność w sieci i strategię marketingową w tym samym czasie. 
  • Duża społeczność stron trzecich i rynek. Dużą zaletą Elementor jest duża społeczność programistów, która za nim stoi. Możesz spędzić godziny przeglądając wszystkie szablony stron Elementor , WordPress Themes i dodatki, które rozszerzają podstawowe funkcje Elementor . 
Porównanie 15 najpopularniejszych kreatorów stron WordPress

Istnieje więcej niż tylko jeden WordPress page builder. Już teraz przedstawimy Ci 15 różnych Plugins , aby pomóc Ci szybciej poruszać się z WordPress . Poznaj najlepsze WordPress page buildery na dzisiejszym rynku.

Różnice między Elementor i Elementor Pro

Zanim przejdziemy dalej, ważne jest, aby wspomnieć, że istnieje wersja Pro Elementor . Darmowa wersja pozwoli Ci zajść dość daleko, ale jeśli szukasz jeszcze więcej funkcji, powinieneś rozważyć Elementor Pro

Darmowa wersja Elementor zawiera wszystko, czego potrzebujesz do stworzenia strony internetowej, w tym funkcje budowania:

  • Nagłówek 
  • Pola tekstowe 
  • Widżety obrazów 
  • Widżety wideo 
  • Widżety galerii
  • Referencje 
  • Widżety Divider 
  • Widżety akordeonowe 

Elementor Pro dodaje kilka funkcji skierowanych do firm, w tym:

  • Formularze 
  • Slajdy 
  • Portfele 
  • Tabele cenowe 
  • Karuzele obrazów 
  • Widżety licznika 
  • pop-upy 
  • Widżety przycisków społecznościowych
  • Własna stopka i kreator nagłówków 
  • wezwanie do działania

Możesz również dodać własne czcionki i punkty przerwania oraz użyć wielu widżetów premium. Tutaj można znaleźć porównanie darmowej wersji Elementor i Elementor Pro: 

Różnice pomiędzy Elementor  i Elementor  Pro
Infografika porównująca funkcje serwisów Elementor i Elementor Pro

Jak zainstalować Elementor Page Builder w WordPress

Abyzainstalować Elementor potrzebujesz zainstalowanego WordPress zplanem hostingowym inazwą domeny . Po zalogowaniu się do pulpitu nawigacyjnego witryny WordPress , przejdź do Plugins > Dodaj nowy

Jak zainstalować Elementor  Page Builder w WordPress
WordPress Plugins Ekran wyszukiwania w pulpicie nawigacyjnym

Poszukaj Elementor i zainstaluj go. Następnie kliknij na Activate

Jak zainstalować stronę Elementor  plugin
Zainstaluj i aktywuj stronę Elementor Plugins w pulpicie nawigacyjnym WordPress .

Jeśli wybierzesz Elementor Pro (lub chcesz uaktualnić z podstawowej wersji Elementor Plugin ), przejdź na stronę Elementor pod adresem Moje konto i kliknij na przycisk PobierzPlugin . Spowoduje to zapisanie pliku ZIP na Twoim komputerze. 

Elementor  widok konta
Elementor Widok konta, dostęp do menu Downloads

Następnie zaloguj się do pulpitu nawigacyjnego WordPress i przejdź do Plugins > Dodaj nowy. Prześlij zapisany właśnie plik ZIP do komputera, kliknij przycisk Install (Zainstaluj ), a następnie kliknij przycisk Activate (Aktywuj). Aby to zadziałało, musisz mieć zainstalowaną i aktywowaną bezpłatną wersję Elementor Plugins . 

Dodanie strony plugins do WordPress
Dodaj Plugins do WordPress

Stamtąd należyaktywować swoją licencję. Aby to zrobić, przejdź do Elementor > License, a następnie kliknij Connect & Activate

Aktywacja licencji Elementor  Pro w pulpicie nawigacyjnym WordPress  ].
Aktywacja licencji Elementor Pro w pulpicie nawigacyjnym WordPress

Na następnym ekranie kliknij Connect, a następnie zaloguj się na swoje konto Elementor . 

Podłączenie licencji Elementor  do witryny WordPress
Podłączenie licencji Elementor do witryny WordPress

Zostaniesz przekierowany z powrotem do Dashboard. Komunikat na górze ekranu z prośbą o aktywację licencji powinien zniknąć. 

Jak korzystać z Elementor : wyjaśnienie krok po kroku

Teraz, gdy instalacja jest zakończona, czas przejść do pracy nad praktycznym wykorzystaniem Elementor . Elementor zaleca zainstalowanie Envato Elements Plugin , który zapewnia wybór szablonów stron Elementor w pulpicie nawigacyjnym. Upewnij się, że masz zainstalowaną i aktywowaną domyślną stronę WordPress Theme . 

Pobieranie Envato Elements plugin w pulpicie nawigacyjnym WordPress
Pobierz Envato Element Plugins z WordPress Dashboard

Aby rozpocząć, przejdź do zakładki Elementy w pulpicie nawigacyjnym WordPress . Możesz wybrać pomiędzy darmowymi i premium zestawami szablonów. Zdecyduj, który z nich wolisz. Następnie wybierz szablon, który Ci odpowiada.

Lista darmowych zestawów szablonów Envato Elements w WordPress
Lista darmowych zestawów szablonów z Envato Elements w WordPress

Przewiń w dół menu szablonów i wybierz motyw strony głównej, który chcesz zaimportować. Powtórz tę czynność dla każdego nowego szablonu strony, który chcesz utworzyć. Wiele osób często wybiera go do tworzenia stron takich jak O nas, Serwis , czy Kontakt - ale to już zależy od Ciebie.

Lista darmowych zestawów szablonów Envato Elements w WordPress
Opcje szablonu strony głównej w Zestawie Szablonów Przestrzeni CoWorkingowej

Kiedy już stworzysz swoje strony, możesz je edytować używając Elementor . Aby to zrobić, przejdź do zakładki Strony > Wszystkie, najedź na stronę, którą chcesz edytować, i kliknij Edytuj za pomocą Elementor

Gdy strona się załaduje, powinieneś zobaczyć edytor Elementor w akcji. Po lewej stronie ekranu zobaczysz, że tryb edytora jest aktywny. A po prawej stronie zobaczysz podgląd edytora. Jest to w zasadzie widok na żywo Twojej strony internetowej, którą możesz zmieniać układ, formatować i edytować bezpośrednio. 

Elementor : Twój kompletny przewodnik po WordPress  Page Builder
Edycja strony głównej w Elementor

W trybie edycji treść jest podzielona na sekcje. Po najechaniu kursorem myszy na sekcje, powinny one zostać podświetlone na jasnoniebiesko. 

Po kliknięciu na sekcję, możesz bezpośrednio edytować treści w niej zawarte. Jeśli klikniesz prawym przyciskiem myszy, otworzy się panel sekcji. Tutaj możesz zobaczyć jak po kliknięciu na obrazek w szablonie, po lewej stronie pojawia się panel kontrolny dla tego obrazka: 

Edycja obrazów w Elementor
Edycja obrazów w Elementor

Praca z widgetami przebiega podobnie: jeśli jest on już obecny w szablonie, wystarczy kliknąć na ikonę szarego ołówka, aby otworzyć tryb edycji dla danego widgetu. Następnie pojawi się on ponownie po lewej stronie. 

Jeśli chcesz wprowadzić zmiany w widżecie karuzeli obrazów, możesz kliknąć na niego w gotowym szablonie, a następnie wprowadzić zmiany w ustawieniach, dostosowując rozmiar, powiązany tekst i obrazy. 

Dodawanie widżetu karuzeli obrazów w Elementor
Dodawanie widżetu karuzeli obrazów w Elementor

W miarę jak uczysz się korzystać z szablonów Elementor i projektujesz układ strony zgodnie z własnymi upodobaniami, możesz zacząć myśleć o stylizacji. Możesz dostosować kolory poprzez dostosowanie ich na poziomie globalnym (dla całej witryny, jeśli używasz Pro), a także na podstawie widgetów. 

Zmiana koloru tekstu w nagłówkach to pestka:

Zmiana koloru, czcionki i stylu tekstu w Elementor
Zmień kolor, czcionkę i styl tekstu w Elementor

Można dostosować style i rozmiary czcionek, to czy tekst ma cień (i jego krycie) oraz różne inne ustawienia stylów dla odstępów, marginesów i obramowań. Możesz nawet dostosować rozmiar linii i wzór widgetu dzielnika. 

Możesz wstawiać ikony mediów społecznościowych, dostosowywać ich kolor i rozmiar oraz określać ich umiejscowienie. Można również zmieniać ich kształt, dodawać kolumny i zmieniać orientację. 

Dodawanie ikon mediów społecznościowych za pomocą Elementor
Dodawanie ikon mediów społecznościowych za pomocą Elementor .

Cały proces pracy z Elementor jest przyjazny dla użytkownika. Jeśli popełnisz błąd, łatwo go naprawisz, ponieważ zawsze możesz przejrzeć historię zmian i przywrócić starszą wersję swojej witryny jednym kliknięciem. 

Widoki Historia przeglądów i Nawigator w Elementor
Widoki Historia przeglądów i Nawigator w Elementor

Podobnie nawigator ułatwia jednoczesne przeglądanie wszystkich sekcji, obszarów wewnętrznych i widżetów, dzięki czemu nie trzeba przewijać w nieskończoność w górę lub w dół. Manipulowanie dowolną częścią Twojej strony internetowej jest podobne pod adresem Elementor . Wybierz sekcję lub widżet, wprowadź zmiany i zapisz swoją pracę. A kiedy będziesz gotowy, możesz opublikować swoją stronę. 

Jeśli chcesz dodać więcej funkcji lub chcesz mieć jeszcze bardziej rozbudowany starter Theme , możesz użyć Elementor Themes i dodatków - czyli dokładnie tego, czym zajmiemy się za chwilę. Teraz, gdy już rozumiesz podstawy korzystania z Elementor , przyjrzyjmy się kilku najpopularniejszym Themes dostępnym na platformie. 

Najlepsza Elementor Themes

  • Witam: Hello to darmowy i łatwy w użyciu Theme, zaprojektowany dla Elementor . Hello jest prawdziwym Theme , aby rozpocząć z Elementor . Hello nie zawiera żadnych stylów ani skryptów, ale jest dostarczany z głównym WordPress Plugins zgodny. 
  • Layers: Elementor przyjęła Layers, dzięki czemu jest teraz kompatybilna z Plugin i oferuje możliwości projektowania odpowiednie dla profesjonalistów - całkowicie za darmo. 
  • Astra: Znana jako najpopularniejsza WordPress Theme wszech czasów, Astra jest lekka, szybka i łatwa do dostosowania poprzez Elementor . Darmowa wersja jest bardzo bogata w funkcje, ale jest też wersja Pro, która oferuje większy wybór gotowych widgetów i opcji dostosowywania. Ceny zaczynają się od $47/rok.
  • Hestia: Hestia jest kolejnym Theme, który jest kompatybilny z Elementor . Oferuje Ci nowoczesny design za darmo. Ale możesz również uaktualnić do wersji Pro, aby uzyskać więcej opcji dla widżetów i lepszą kompatybilność z Elementor . Ceny zaczynają się od 69$/rok.
  • GeneratePress: Ten darmowy i otwarty WordPress Theme jest solidnym wyborem do tworzenia każdego rodzaju strony internetowej. Istnieje również wersja Pro z większą ilością funkcji, która zaczyna się od $44/rok. 
  • OceanWP: Ten premium WordPress Theme oferuje pełną kompatybilność z Elementor , w tym wiele dem, rozszerzeń i widżetów, począwszy od $39/rok. 
  • Dostosuj: Ta strona Theme jest bezpłatna. Dzięki integracji z Elementor oraz Header & Footer Builder, daje Ci mnóstwo możliwości personalizacji. Możesz również uaktualnić do wersji Pro, która jest dostępna od $59/rok dla dodatkowych modułów, aktualizacji i wsparcia.
  • Neve: Ten Theme ma Mobile First projekt, który działa z Elementor i jest wolny do użytku. Istnieje wersja Pro z jeszcze większą ilością funkcji dostępna od $59/rok.
  • Phlox Pro: Ten premium Theme jest dostępny na ThemeForest za 49$ i zawiera ponad 150 szablonów Elementor . 
  • Zakra: Ta strona Theme została zaprojektowana z myślą o szybkości i SEO i zawiera ponad 65 szablonów dla startupów. Wersja Pro zawiera dema premium i szerszy zestaw funkcji, zaczynając od $59/rok. 

Zalecane dodatki dla Elementor 

Elementor jest pełen funkcji. Teraz już wiesz, jak korzystać z Elementor Themes . Ale należy również rozważyć różne popularne dodatki, aby jeszcze bardziej rozszerzyć funkcjonalność. 

Podczas gdy uczysz się, jak korzystać z Elementor , nie wahaj się sprawdzić następujących dodatków:

  • Ultimate Addons: rozszerza Elementor o więcej dodatków, widgetów i bloków, od 55$. 
  • Essential Addons for Elementor : Jest to najbardziej popularna biblioteka Elementor dla Elementor i zawiera ponad 70 opcji, zaczynając od $39.97 za pojedynczą stronę. 
  • Elementor Pack: Ta paczka jest pełna darmowych widgetów i dodatków Elementor . Wersja Pro oferuje jeszcze więcej widgetów, jak również wsparcie i aktualizacje, zaczynając od 29$/rok.
  • Prime Slider: Dzięki temu dodatkowi możesz utworzyć suwak w nagłówku i obszarze bohatera swojej witryny Elementor . Możesz pobrać Plugin za darmo lub zdecydować się na wersję Pro, która zawiera wsparcie i aktualizacje, zaczynając od $7.92/rok.
  • ToolKit dla Elementor : ToolKit ma na celu uproszczenie tworzenia stron Elementor dzięki usprawnieniom wydajności i bardziej intuicyjnym narzędziom administracyjnym. Możesz zacząć na maksymalnie trzech stronach internetowych z tym dodatkiem za 49 $ / rok.
  • Happy Addons: Ostatni, ale nie najmniej ważne, jest Happy Addons. Dodatek dodaje nowe widżety, sekcje i ustawienia do Elementor . Istnieje wersja darmowa i wersja pro. Ten ostatni jest wyposażony w dodatkowe funkcje, takie jak Live Copy, wsparcie 24/7 i aktualizacje. Cena zaczyna się od 29$/rok. 

Wnioski na temat Elementor Page Builder

Elementor jest często określany jako najlepszy kreator stron Plugin dla WordPress . Jest ku temu dobry powód: bogaty w funkcje projekt, silna społeczność oraz dostępność Themes i dodatków sprawiają, że Elementor jest elastycznym i dostępnym sposobem na zbudowanie strony internetowej. 

Jeśli chcesz dowiedzieć się, jak korzystać z Elementor , musisz zacząć od solidnego planu hostingowego. My w RAIDBOXES oferują WordPress specyficzny hosting, który obejmuje różnorodne potrzeby. Jeśli masz jakiekolwiek pytania dotyczące lubnaszych planów, skontaktuj się z nami.

Twoje pytania dotyczące tematu Elementor

Jakie masz pytania do Maddy? Czekamy na Twój komentarz. Interesujesz się WordPress i projektowaniem stron internetowych? Następnie śledź RAIDBOXES na Twitterze, Facebooku, LinkedIn lub poprzez nasz newsletter.

Maddy Osman jest SEO Content Strategist. Współpracuje z wybranymi klientami w WordPress i sektora hostingowego. Z doświadczeniem w projektowaniu stron internetowych i WordPress, specjalizuje się w SEO - i wie dokładnie, jak połączyć marki z treściami odpowiednimi dla wyszukiwarek.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.