WordPress Elementor. Instrukcja tworzenia stron internetowych i nie tylko
Wszystko o wtyczce Elementor dla WordPressa
Jak przebiega proces tworzenia stron internetowych, e-sklepów i blogów przy pomocy edytora stron Elementor? Z moją instrukcją stworzysz własne miejsce w sieci nawet bez znajomości kodu.
Kreator stron Elementor to jedno z najpopularniejszych narzędzi związanych z CMS-em WordPress. Jest dostępny w wersji darmowej oraz wersji premium, dzięki czemu zapewnia dostęp do zaawansowanych funkcji przydatnych dla twórców o zróżnicowanych potrzebach. Wykorzystasz go zarówno do budowy witryny internetowej, jak i e-sklepu, bloga albo strony firmowej. Poniżej znajdziesz szczegółowe instrukcje, które wyjaśnią Ci zasady działania tego rozwiązania krok po kroku, bez potrzeby kodowania.
Jak zacząć korzystać z edytora stron WP Elementor?
Aby móc korzystać z kreatora stron Elementor, musisz najpierw zainstalować go na swoim serwerze. Nie wymaga to na szczęście zbyt wiele pracy i umiejętności. Wszystko zrobisz z poziomu panelu administratora WordPress. Wystarczy tylko, że:
- zalogujesz się na swoje konto WP,
- przejdziesz do zakładki „Wtyczki”,
- naciśniesz przycisk „Dodaj wtyczkę” na górze strony,
- wpiszesz w wyszukiwarce wtyczek „Elementor”.
Narzędzie powinno pojawić się na pierwszym miejscu w wynikach wyszukiwania, na samej górze.
Ja mam go już zainstalowanego, przycisk znajdujący się obok niego („Włączono”) jest więc wygaszony. Jeśli jeszcze nie korzystasz z Elementora, zobaczysz w tym miejscu napis „Zainstaluj„. Naciśnij go i chwilę poczekaj. Następnie w tym samym miejscu pojawi się „Włącz„, które również kliknij i gotowe.
Zakładka umożliwiająca zarządzanie wtyczką WordPress Elementor będzie widoczna w menu po lewej stronie. Możesz dokonać w niej podstawowych zmian związanych z jej działaniem.
Jak zapewne się domyślasz, sekret kreatora stron Elementor nie tkwi jednak w jego „ustawieniach”. Naprawdę przydatne narzędzia i funkcjonalności dostrzeżesz podczas tworzenia witryny internetowej. Właśnie dlatego w dalszej części tego artykułu znajdziesz instrukcje wyjaśniające, w jaki sposób stworzyć stronę WWW, sklep internetowy czy bloga. Bez kodowania i zaawansowanej wiedzy programistycznej. Wszystko odbywa się w przeglądarce internetowej, przy pomocy wygodnej metody „przeciągnij i upuść”.
Tworzenie bloga bez znajomości kodu w Elementorze
WordPress Elementor może zostać wykorzystany do tworzenia witryn internetowych o najróżniejszym charakterze. Jest zresztą na tyle uniwersalny i zapewnia dostęp do tak wielu zaawansowanych funkcji, że poradzi sobie praktycznie z każdą branżą czy obszarem działalności.
W pierwszej kolejności skupmy się na procesie tworzenia blogów internetowych o względnie standardowym charakterze. Załóżmy, że planujesz utworzyć witrynę prezentującą wpisy blogowe o zróżnicowanej tematyce. Aby zrealizować ten cel, postępuj zgodnie z poniższymi krokami.
1. Wybierz motyw kompatybilny z WordPress Elementor
Pierwszym krokiem jest wybranie motywu WordPress, który będzie w pełni kompatybilny z kreatorem stron internetowych Elementor. Na szczęście wybór jest dość duży, bo większość popularnych rozwiązań z nim współpracuje. Wśród często wybieranych przez użytkowników wymienić warto np.:
- Hestia,
- Astra,
- Hello.
Aby zainstalować jeden z nich, przejdź do sekcji „Wygląd” i „Motywy” w kokpicie WordPress. Następnie naciśnij przycisk „Dodaj motyw” widoczny na górze strony.
W pustym polu wyszukiwarki wpisz nazwę wybranego motywu. Ja skorzystam z Astry. Pojawi się na pierwszym miejscu w wynikach wyszukiwania. Po najechaniu na jej okno możesz kliknąć „Podgląd” (by poznać szczegóły motywu) lub „Instaluj” (aby zainstalować motyw na WordPressie). Ja już go mam, na screenie więc te przyciski zastąpiły u mnie „Włączono” i „Dostosuj”.
Po zainstalowaniu gotowego szablonu witryny jego zakładka pojawi się w menu bocznym po lewej stronie ekranu. Teraz możesz już przejść do budowy swojej strony internetowej.
2. Stwórz pierwszy wpis blogowy
Skoro masz już działający kreator stron oraz aktywny motyw, możesz rozpocząć ciekawszą część zadania. Mowa oczywiście o budowie samej strony internetowej. Na potrzeby tej instrukcji wykorzystam do tego wtyczkę Elementor w wersji darmowej. Ma ona również opcję płatną Pro. Rozwiązanie podstawowe jest jednak na tyle uniwersalne, że sprawdzi się w przypadku większości standardowych witryn.
Aby rozpocząć tworzenie swojego miejsca w sieci, przejdź do sekcji „Wpisy” i wybierz „Wszystkie wpisy„. Aby proces był czytelniejszy, tworzyłem nową witrynę, która ma wyłącznie stronę początkową „Hello world!”. To na bazie jej edycji zaprezentuję Ci, w jaki sposób działa wtyczka Elementor.
Po najechaniu na nazwę strony w sekcji „Tytuł” w tabeli zobaczysz kilka dostępnych opcji. Wybierz „Edytuj„.
Zobaczysz uniwersalny edytor stron WordPress w swoim motywie, czyli Astra. Na górze widoczna jest jednak opcja, która nas szczególnie interesuje, czyli „Edytuj w Elementorze„. Naciśnij ją.
Teraz możesz tworzyć swój wpis blogowy przy pomocy zaawansowanego narzędzia, jakim jest Elementor. Po lewej stronie ekranu jest panel boczny odpowiadający za edycję i zarządzanie poszczególnymi elementami. Po prawej jest podgląd strony na żywo.
Możesz wykorzystać gotowy szablon wpisu
Budując stronę w WordPress, przy użyciu Elementora, możesz dokonać tego samodzielnie od podstaw lub korzystając z gotowych szablonów. W tym drugim przypadku musisz najpierw założyć konto w oficjalnym serwisie twórców pluginu. Jest ono darmowe, choć możesz też skorzystać w nim z płatnych wersji, by otrzymać dostęp do Elementor Pro.
Po wejściu na oficjalną stronę Elementora naciśnij przycisk „Get Started”. Następnie wprowadź dane niezbędne do rejestracji i potwierdź adres e-mail, klikając w otrzymany link. Dalej uzupełnij informacje dotyczące Twojej działalności.
Teraz przejdź do edycji strony w WordPress i w górnym lewym rogu naciśnij białe logo Elementora. Znajdziesz tam opcję „Połącz moje konto”. Proces odbywa się automatycznie i trwa tylko krótką chwilę.
Wróć do edytowanego wpisu i w oknie roboczym naciśnij przycisk z symbolem folderu.
W oknie, które otworzy się na Twoim ekranie, zobaczysz trzy sekcje:
- bloki – zawiera gotowe elementy, które możesz umieścić na swojej stronie WWW,
- strony – zawiera gotowe szablony witryn w całości,
- szablony – zawiera przygotowane przez Ciebie szablony.
Większość z nich jest przeznaczona dla wersji Pro Elementora. Jeśli nie masz pakietu płatnego, to są one dla Ciebie zablokowane. Oznacza to, że nie możesz z nich skorzystać. Wśród nich jednak nie brakuje również ogólnodostępnych opcji darmowych. Mogą ułatwić Ci budowę własnego miejsca w sieci.
Najpierw posłużę się szablonem gotowej strony internetowej. Po znalezieniu odpowiadającej Ci opcji naciśnij „Wstaw”.
Poczekaj moment na realizację polecenia. Po kilku sekundach wybrany szablon powinien pojawić się w miejscu edytowanego wpisu.
Wszystkie szablony są w pełni edytowalne i dotyczy to wszystkich ich poszczególnych elementów. Odbywa się to za pomocą metody „przeciągnij i upuść”. Dodatkowe rozwiązania wprowadzane są w witrynie bezpośrednio z lewego bocznego menu. Wystarczy umieścić je w dowolnym miejscu. Kwestię edycji strony w WordPressie omówię dokładniej w dalszej części instrukcji.
Korzystaj z gotowych bloków
Użytkownicy, którzy nie chcą zbudować całego wpisu w początkowej fazie na podstawie gotowego szablonu, mogą skorzystać z tzw. bloków. Są to poszczególne elementy witryny, które można dowolnie umieszczać w WordPressie. Edytor Elementor pozwala na korzystanie z nich w sposób podobny do opisanego powyżej. Nic nie stoi też na przeszkodzie, by stanowiły uzupełnienie wykorzystanego już szablonu.
Aby skorzystać z bloków, w polu roboczym naciśnij przycisk z ikoną folderu. Tym razem nie przechodź jednak do sekcji „Strony”, tylko wybierz opcję z działu „Bloki”. Ponownie umieścisz ją w swojej witrynie, naciskając przycisk „Wstaw”.
Nowy element zostanie automatycznie dodany do Twojej witryny w wybranym miejscu. Podobnie jak w przypadku szablonów, projekty te są w pełni edytowalne. Możesz zmieniać zarówno ich wygląd, jak i układ czy funkcje. W praktyce więc „skompletujesz” z nich nawet całą witrynę.
Wstaw nowe elementy na stronę
Elementor pozwala na budowę strony WWW nie tylko w oparciu o gotowe szablony. Przy pomocy edytora użytkownicy mogą dodawać również pojedyncze elementy do struktury witryny.
Aby to zrobić, przejdź do pola roboczego. Następnie chwyć, przeciągnij i upuść konkretny element z menu po lewej stronie. Zostanie on umieszczony w podglądzie witryny na żywo, „przesuwając” pole robocze nieco niżej. Jednocześnie otworzy to menu edycji nowego elementu w panelu po lewej stronie ekranu.
Alternatywnie możesz nacisnąć znak „+”, który pozwoli Ci stworzyć nową strukturę o jednym z dwóch układów: elastycznego pola lub siatki.
Po wyborze jednej z opcji możesz precyzyjnie określić jej specyfikację. Do dyspozycji masz kilkanaście wersji różniących się układem elementów możliwych do umieszczenia.
Uzyskaj dostęp do jednego z nich, naciskając daną opcję. Załaduje się ona wtedy w Twojej witrynie. W każdej z wydzielonych sekcji możesz dodać odrębny element lub funkcję. Zrobisz to, naciskając prostokąt przy konkretnym obszarze, a następnie symbol „+”.
Kolejnym krokiem jest wybranie rozwiązania z menu po lewej stronie ekranu. Może to być np. przycisk, Mapy Google, obrazek itd. Każde pole możesz oczywiście uzupełnić czymś innym. Podstawowych opcji jest osiem:
- nagłówki,
- obrazki,
- teksty,
- filmy,
- przyciski,
- rozdzielacze,
- odstępniki,
- Mapy Google,
- ikony.
Elementor Pro zapewnia dostęp do ich znacznie rozbudowanej bazy tych możliwości. W „standardzie” nadal jednak znajdziesz wszystko, co jest niezbędne do stworzenia bloga, a nawet nieco większego serwisu.
Po wybraniu konkretnej opcji pojawi się ona w danej sekcji. Jednocześnie na miejscu dostępnych elementów otwarty zostanie jej edytor. Możesz w nim dopasować zawartość okienka. W przypadku wybranego przeze mnie „Edytora tekstu” mogę edytować zawartość tekstową.
Jeśli zechcesz zmienić układ całego kontenera z polami, naciśnij ikonę sześciu kropek, widoczną po najechaniu na niego. Działa to w przypadku wszystkich elementów umieszczonych w witrynie i widocznych w jej podglądzie.
Edycja odbywa się w lewym panelu. Możesz zmienić tam układ prezentowanych treści, ale też ich szerokość, odstępy, styl czy nawet sam układ kontenera.
Pole robocze pozwalające na dodawanie nowych elementów z reguły znajduje się na dole strony, pod dodawanymi rozwiązaniami. Możesz jednak wstawiać kolejne sekcje powyżej, między tymi już umieszczonymi w witrynie. Aby to zrobić, naciśnij na nie prawym przyciskiem myszy i przeciągnij w pożądane miejsce. Jeszcze przed „upuszczeniem” zostanie ono delikatnie podświetlone, co da Ci czas na podjęcie decyzji.
Alternatywnie możesz najechać na kontener znajdujący się pod miejscem, w którym chcesz wstawić nowy element. Następnie naciśnij znak „+” na różowym tle.
Nowy kontener pojawi się tuż nad nim. Możesz uzupełnić go dowolnymi elementami dokładnie w taki sam sposób, jak opisałem to już powyżej.
Dodawaj multimedia
Elementor pozwala na dodawanie plików multimedialnych na stronach internetowych. Bez problemu przy jego użyciu wstawisz na stronę filmy czy zdjęcia. Odbywa się to jednak na nieco innej zasadzie niż w przypadku innych, opisywanych powyżej elementów, jak np. tekstów. W tym przypadku bowiem obrazek musisz jeszcze dodać do Biblioteki mediów swojego WordPressa. Oznacza to, że musi on w pierwszej kolejności znaleźć się na Twoim serwerze. Choć brzmi to skomplikowanie, wcale takie nie jest. Przejdźmy przez cały proces krok po kroku.
Jak każdy inny element, pliki multimedialne możesz dodawać jako samodzielne struktury lub w ramach większego kontenera. Wszystko odbywa się przy pomocy metody „przeciągnij i upuść” lub wybierając miejsce ich umieszczenia poprzez naciśnięcie znaku „+” w sekcji kontenera. Następnie wybrać musisz opcję „Obrazek” lub „Film”.W ten sposób wydzielisz „miejsce” dla swojego pliku. Pojawi się też jego edytor.
Naciśnij szare pole w edytorze po lewej stronie ekranu, aby wybrać plik, który ma znaleźć się w witrynie. W ten sposób uruchomisz okno pozwalające na wstawianie mediów na serwer. Zrobić to możesz, bezpośrednio umieszczając plik znajdujący się na serwerze, lub przy użyciu prowadzącego do niego adresu URL.
Naciśnij „Wybierz plik” i zaznacz zdjęcie, które chcesz umieścić na stronie. Po załadowaniu zostanie ono umieszczone w „Bibliotece mediów„. Tam wyświetlają się wszystkie multimedia, jakie masz na serwerze w ramach tej witryny.
Po wybraniu konkretnego pliku w prawej części okna zobaczysz jego szczegóły. Możesz tam uzupełnić brakujące dane. Warto skupić się nad właściwym tytułem, tekstem alternatywnym czy opisem. Są one bowiem istotne z punktu widzenia pozycjonowania, czyli SEO.
W tym miejscu możesz też nacisnąć „Edytuj obrazek” aby przejść do jego podstawowej edycji. W ten sposób np. zmienisz na jego kadrowanie czy skalowanie, a także go obrócisz.
Po uzupełnieniu wszystkich informacji i optymalizacji pliku naciśnij „Wybierz”. Zdjęcie zostanie automatycznie wstawione w wyznaczonym miejscu. W menu po lewej stronie zmienisz jego rozdzielczość, dodasz podpis czy zmienisz styl.
3. Zadbaj o responsywność
Elementor pozwala dopasować strukturę witryny do wyświetlania jej na ekranach urządzeń mobilnych. Proces ten odbywa się automatycznie, możliwa jest jednak również optymalizacja ręczna. W ten sposób dopracujesz wszystkie szczegóły działania strony na mniejszych sprzętach. Aktualnie używa ich do przeglądania internetu większość użytkowników, możesz więc w ten sposób wiele zyskać.
Nie potrzebujesz do tego żadnych dodatkowych wtyczek czy zaawansowanych opcji. Wystarczy tylko, że w głównym edytorze strony przejdziesz do podglądu wersji mobilnej. Odpowiada za to ikona smartfona w górnej części ekranu.
Ten podgląd prezentuje, w jaki sposób Twoja strona WWW wyświetla się użytkownikom korzystającym z telefonów. Jego edycja przebiega dokładnie w ten sam sposób, co „tradycyjnej” wersji. Również opiera się na metodzie „przeciągnij i upuść” oraz wyborze elementów z menu bocznego.
Po wprowadzaniu wszelkich zmian są one automatycznie zapisywane przez kreator. Taka wersja witryny może zostać opublikowana, czyli udostępniona „w internecie”. To sprawi, że po wejściu na adres witryny użytkownikom wyświetli się w przygotowanej przez Ciebie formie. Służy do tego przycisk w górnym prawym rogu „Opublikuj„. W tym miejscu możesz również zobaczyć podgląd stworzonej witryny oraz zapisać ją w danej wersji jako szablon (bez publikacji).
Dodaj kategorie wpisów
Wszystkie wpisy publikowane w obrębie swojej witryny możesz przypisać do kategorii. Dzięki temu będą one uporządkowane, a użytkownicy będą mogli przeglądać je w jednym miejscu. Aby jednak to zrobić, najpierw musisz samodzielnie stworzyć takie kategorie. Zrobisz to, przechodząc do podsekcji „Kategorie” w sekcji „Wpisy” w kokpicie WP.
Nadaj nazwę kategorii (i ewentualnie jej uproszczoną nazwę). Następnie określ, czy jest to kategoria główna, czy też podkategoria (nadając jej kategorię nadrzędną). Ostatnim krokiem jest zapisanie zmian, naciskając przycisk „Utwórz kategorię”.
Aby przypisać wpis (lub stronę) do danej kategorii, wybierz „Szybka edycja” pod jego nazwą w kokpicie WP. Następnie w części „Kategorie” zaznacz tę, w której powinien się wyświetlać.
Kreator stron Elementor – jak stworzyć stronę internetową krok po kroku?
Proces tworzenia stron internetowych przy pomocy Elementora przebiega bardzo podobnie do budowy bloga. W tym przypadku jednak zamiast sekcji wpisy, z bocznego menu w kokpicie WordPresssa musisz wybrać zakładkę „Strony” i „Wszystkie strony”.
Z tego poziomu możesz edytować każdą stronę, łącznie ze stroną główną. Wystarczy tylko, że najedziesz na jej tytuł i naciśniesz „Edytuj w Elementorze„.
W ten sposób przejdziesz do edytora Elementor, którego budowa i obsługa jest dokładnie taka sama, jak opisałem to powyżej. Wszystkie jego sekcje są identyczne, jak w przypadku tworzenia wpisów blogowych. W ten sam sposób też przebiega proces publikowania, modyfikacji wersji mobilnej i korzystania z każdej innej funkcji.
Podstawowe ustawienia witryny, takie jak jej tytuł, adres URL, datę i kilka innych możesz edytować przy pomocy przycisku „Szybka edycja” w kokpicie WP. Wprowadzone w ten sposób zmiany zatwierdź, naciskając „Aktualizuj”.
Tworzenie nowej strony w witrynie internetowej w WP Elementor
Tworzenie zupełnie nowej strony w ramach witryny (np. kolejną podstronę w menu) odbywa się z poziomu sekcji „Strony” w kokpicie WordPressa. Przejdź do niej i naciśnij przycisk „Dodaj stronę„. Jej edycja przebiega w taki sam sposób, jak już istniejących podstron oraz wpisów blogowych.
Warto natomiast w przypadku nowej strony poświęcić chwilę na jej ustawienia. Znajdziesz je w lewym górnym rogu ekranu po kliknięciu ikony przedstawiającej stronę.
W tym miejscu nadasz stronie tytuł, ale też dodasz obrazek wyróżniający. Ustalisz jej kolejność, zezwolisz na komentarze oraz zoptymalizujesz styl. Po nadaniu jej nazwy pojawi się ona w głównym menu witryny na stronie głównej.
Jak stworzyć sklep e-commerce przy pomocy wtyczki Elementor?
Wtyczka Elementor pozwala na tworzenie nie tylko stron i blogów, ale też sklepów internetowych. W przypadku środowiska WordPress odbywa się to przy użyciu sprawdzonego i cieszącego się ogromną popularnością pluginu e-commmerce, dedykowanemu WP – WooCommerce. Najpierw musisz zatem pobrać go na swój serwer, zainstalować i skonfigurować. Samouczek przeprowadzi Cię przez cały proces tworzenia platformy sprzedażowej, ustawiania płatności, dodawania produktów itd.
Edycja poszczególnych stron w e-sklepie WooCommerce przebiega bliźniaczo do edycji standardowej witryny. Wystarczy, że przejdziesz do zakładki „Strony” w kokpicie WP i wybierzesz opcję związaną ze sklepem. Może to być np. „Sklep” czy „Kasa”. Następnie naciśnij „Edytuj” i „Edytuj w Elementorze„.
Warto podkreślić jednak, że Elementor nie pozwala na pełną i swobodną edycję e-sklepu w WooCommerce. Możesz przy jego pomocy stworzyć główne strony, ale nie będzie aktywny np. dla kart produktów. To natomiast łatwo naprawić, korzystając z dedykowanego pluginu „ShopEngine„. Dodaj go do swojego WordPressa.
Przejdź jego konfigurację w dedykowanej zakładce w kokpicie WP, aby rozpocząć tworzenie sklepu internetowego. Odbywa się to przy pomocy tworzenia templatek, które następnie wstawiane są do edytora.
Aby to zrobić, przejdź do sekcji „Builder Templates” w „ShopEngine”. Tam kliknij „Add New Template”.
Wybierz jeden z szablonów, nadaj mu nazwę i przejdź do jego konfiguracji, naciskając przycisk „Edit With Elementor”.
Możesz skorzystać tu już z utworzonych wcześniej produktów w WooCommerce lub stworzyć od podstaw nowe. Kliknij „Edit with Elementor„. Na ekranie zobaczysz wtedy znajomy już edytor.
Wygląda on bliźniaczo podobnie do tego, który umożliwiał edycję stron i wpisów. Tym razem jednak jego lista funkcji dopasowana jest do potrzeb sklepu internetowego. Sama edycja przebiega natomiast w taki sam sposób. Również nie wymaga znajomości programowania i oparta jest na zasadzie „przeciągnij i upuść”. Wszystkie elementy szablonu są edytowalne, a zmiany wprowadzasz z poziomu bocznej sekcji.
Edytor „przeciągnij i upuść” WordPress Elementor. Podsumowanie
Elementor jest jednym z rozwiązań, dzięki którym tworzenie witryn w WordPressie jest dostępne praktycznie dla każdego. Możesz stworzyć w nim swoją pierwszą stronę nawet bez korzystania z innych wtyczek czy znajomości programowania. Już darmowa wersja pluginu wystarczy, by zbudować od podstaw bloga albo witrynę firmową. W połączeniu z bezpłatnym WooCommerce sprawdzi się natomiast nawet w przypadku sklepu internetowego.
Oczywiście Elementor nie jest bez wad. Ma na tyle dużo funkcji, że nauka jego obsługi i nabranie wprawy wymaga czasu. Ponadto najciekawsze, gotowe motywy i elementy zapewnia dopiero płatny Elementor Pro. Mimo wszystko jednak jest to narzędzie WordPressa o ogromie funkcji i zapewniające wiele możliwości. Dzięki temu – nawet w wersji darmowej – sprawdzi się w przypadku większości użytkowników.