Jak korzystać z kreatora stron Elementor z WordPress

Kiedy mówimy o kreatorach stron WordPress, najpopularniejszym i tym z największą liczbą aktywnych instalacji i największą społecznością jest zdecydowanie Elementor. Do tej pory istnieje około 8 milionów witryn zbudowanych z Elementorem. Jest polecany przez wielu ekspertów ze względu na łatwość obsługi, szybkość i ogromne możliwości podczas budowania witryn WordPress.

Przetestowałem wersję Pro Elementora i zbudowałem stronę docelową. Jest wyposażony w funkcję „przeciągnij i upuść” i działa z dowolnym motywem, a jednocześnie możesz korzystać ze wszystkich widżetów Free, Pro i WordPress. Przeczytajmy ten artykuł, aby dowiedzieć się więcej o instalacji i konfiguracji Elementora za pomocą WordPress.

Dlaczego warto wybrać Kreator stron Elementor?

Elementor jest obecnie jednym z pierwszych i jednym z najbardziej zaawansowanych kreatorów stron WordPress na rynku. Ma też wokół siebie ogromny ekosystem, a wielu mniejszych autorów tworzy przydatne dodatki i szablony, których możesz użyć, aby skrócić czas potrzebny na końcowy rezultat.

W przypadku Elementora efektem końcowym może być naprawdę niesamowita witryna, dobrze zaprojektowana ze wszystkimi funkcjami, których potrzebujesz lub możesz potrzebować. Nie znajdziesz żadnego typu witryny WordPress, której nie możesz zbudować za pomocą Elementora. Jeśli potrzebujesz dodatkowej funkcjonalności, możesz ją łatwo zaimplementować za pomocą skrótów.

Funkcje kreatora stron Elementor

Bezpłatna wersja Elementora zawiera ograniczoną liczbę elementów, ale w wersji Pro otrzymujesz dodatki, takie jak QI, Ultimate Add Ons itp. Poza tym będziesz mieć kilka przydatnych elementów i szablonów do łatwego budowania witryny .

Nie byłoby sprawiedliwe pominięcie dodatku Crocoblock dla Gutenberga i Elementora, który jest jednym z ulubionych narzędzi dla większości użytkowników Elementora, ponieważ rozszerza funkcje natywnego Elementora.

Elementor podzielił swoje funkcje na 4 kategorie.

1. Podstawowe widżety

Podstawowe widżety są dostarczane z darmową wersją i są wystarczające do zbudowania oszałamiającej witryny, która nie wymaga zaawansowanych opcji, takich jak spis treści, portfolio lub formularz. Ponadto w bezpłatnej wersji nie można zbudować menu nagłówka/nawigacji i może być konieczne znalezienie fajnego motywu WordPress z menu nawigacji, które lubisz.

2. Pro Widgety

Pro Widgets z Elementor Pro obejmują prawie każdy aspekt i każdy widżet, którego możesz potrzebować do zbudowania dowolnego rodzaju witryny. Dodawaj i wybieraj posty z różnych kategorii, typów postów lub po prostu wyświetlaj najnowsze, Cenniki, Galerię, Flip Box, embed Easy Social Media Networks, Różne Karuzele Mediów, Widget Lottie i HotSpot (o tym porozmawiam później).

3. Elementy tematyczne

Theme Elements jest również dostarczany z Elementor Pro i są one ważne, aby budować wszystkie strony szablonów i oczywiście szablon pojedynczego posta. Jak wiesz, istnieją strony, które są dynamicznie zapełniane treścią, taką jak Kategoria, Tag, Autor itp.

W przypadku tych stron musisz utworzyć szablon za pomocą elementów motywu. To samo dotyczy pojedynczego posta, w którym możesz zaprojektować piękny szablon dla swoich postów, który będzie używany przez wszystkie posty bez konieczności ich tworzenia za każdym razem. Po prostu dodaj treść, do której jesteś przyzwyczajony, i gotowe.

4. Widżety WooCommerce

I wreszcie, widżety WooCommerce. Te widżety pozwalają z łatwością tworzyć ponownie podobne do Theme Builder, strony szablonów i szablon pojedynczego produktu za pomocą elementów WooCommerce.

Ceny i plany kreatora stron Elementor

Elementor Pro zawiera 5 różnych planów, z których wszystkie zawierają ten sam program do tworzenia stron Elementor Pro i funkcje, takie jak:

• Przeciągnij i upuść Edytor na żywo
• Elastyczny projekt
• Ponad 90 podstawowych i profesjonalnych widżetów
• 300+ szablonów podstawowych i profesjonalnych
• Kreator motywów

Najniższy plan to Essential dla 1 witryny w cenie 49 USD. Z tym planem otrzymujesz Wsparcie Premium, co oznacza, że ​​możesz spodziewać się odpowiedzi w ciągu 24h. Kolejny plan to Advanced i obejmuje licencję na 3 witryny w cenie 99 USD z tym samym rodzajem wsparcia.

Prawdopodobnie najpopularniejszym jest Expert w cenie 199 USD za 25 witryn. Dodatkowo otrzymasz Profil Eksperta Elementora, w którym możesz publikować swoje projekty ukończone w Elementorze i zdobywać nowych klientów.

Jedno przed szczytem to Studio na 100 stron w cenie 499 $, a tam masz dodatkową korzyść VIP Support, co oznacza, że ​​masz pierwszeństwo, a Twoje zgłoszenia zostaną odebrane w 30 minut. To samo dotyczy najdroższego planu Agencja na 1000 witryn w cenie 1000 USD.

Wszystkie plany są roczne i jeśli zastanawiasz się, co stanie się z witrynami, jeśli Twoja subskrypcja wygaśnie, odpowiedź brzmi, że witryny będą wyglądać tak samo jak wcześniej, ale nie będziesz mógł edytować ani używać elementów i szablonów z Elementro Pro.

Wymagania systemowe/hostingowe Elementora

Zgodnie ze stroną wymagań systemowych Elementora, powinien działać nawet z 128 MB PHP, MySQL 5.6 lub nowszym lub MariaDB 10.0 lub nowszym. Powinien również działać z każdym PHP 7+. Do celów testowych użyłem VultrHF z 2GB pamięci PHP.

Oczywiście potrzebujesz najnowszej wersji WordPressa i wszystkich innych wtyczek.

Zainstaluj i skonfiguruj Kreator Stron Elementora

Instalacja darmowej wersji Elementora jest taka sama, jak w przypadku każdej innej wtyczki w repozytorium wtyczek WordPress, przejdź do pulpitu WordPress → Wtyczki → Dodaj nowy, wyszukaj Elementor, zainstaluj i aktywuj wtyczkę.

W przypadku wersji Pro musisz kupić plan, który automatycznie utworzy konto w Elementorze. Po zalogowaniu się tam zobaczysz przycisk pobierania, aby pobrać najnowszą wersję Pro.

Gdy nadal jesteś zalogowany do pulpitu nawigacyjnego Elementor, zaloguj się do pulpitu WordPress → Wtyczki → Dodaj nowy i wybierz Prześlij, przeglądaj pobrany plik Elementor Pro z komputera, zainstaluj i aktywuj.

Kiedy skończysz na lewym pasku bocznym na pulpicie nawigacyjnym WordPress, przejdź do Elementora → kliknij Licencja → kliknij przycisk Połącz i aktywuj.

Po kliknięciu automatycznie przekierowuje Cię do pulpitu nawigacyjnego w Elementorze, aby go aktywować. Kliknij zielony przycisk Aktywuj i gotowe. Twój Elementor Pro jest podłączony i aktywowany.

Po aktywacji zobaczysz potwierdzenie, że Twój Elementor jest aktywny. Jeśli jednak zbudowałeś witrynę w domenie tymczasowej i nie chcesz kupować kolejnej licencji na żywo, możesz łatwo odłączyć konto podczas testowania i aktywować je w domenie live.

Czas zacząć korzystać z Elementora i zbudować swoją witrynę. Moją sugestią jest użycie motywu Hello firmy Elementor, stworzonego specjalnie dla Elementora.

Aby to zrobić, zacznijmy od utworzenia strony „Strona główna” i edytuj ją za pomocą Elementora. Przejdź do Strony → Dodaj nowy, nazwij go Strona domowa i Opublikuj, a następnie kliknij przycisk Edytuj za pomocą Elementora.

Na stronie Edycja zobaczysz elementy, których nie możesz edytować, ponieważ układ jest ustawiony na domyślny. Aby użyć Elementora na pustym płótnie, wybierz Elementor Full Width lub Elementor Canvas, klikając ikonę koła zębatego w lewym dolnym rogu.

Zanim zaczniesz budować stronę, kliknij ikonę burgera w lewym górnym rogu i ustaw wszystkie ustawienia globalne potrzebne do dalszej części pracy.

Ustawienia witryny są dość podobne do konfigurowania motywu. Tutaj możesz wybrać globalne kolory, czcionki, których będziesz używać, oraz pełną typografię witryny dla każdego tagu HTML.

Poza tym możesz ustawić globalny styl przycisku, nagłówek, stopkę, niestandardowy CSS w razie potrzeby i wszystko, czego potrzebujesz, aby ustawić je i zachować w całej witrynie, aby zachować spójność.

Drugą opcją jest Theme Builder, który umożliwia tworzenie stron szablonów i szablonów pojedynczych postów/produktów, które będą automatycznie używane przez konkretną, dynamicznie generowaną stronę, post lub produkt. Jak każdy motyw WordPress musi mieć pliki szablonów, aby wyświetlić wszystkie powyższe elementy, Elementor pozwoli Ci to zrobić bez pisania nawet jednej linii kodu.

Ostatnią opcją są preferencje użytkownika, w których możesz skonfigurować swoje środowisko pracy w Elementorze, nic, co ma wpływ na samą witrynę, poza interfejsem użytkownika jako administratora.

Aby uruchomić witrynę, wszystkie dostępne widżety są umieszczone na pasku bocznym po lewej stronie, a wszystko można edytować wizualnie oraz przez przeciąganie i upuszczanie. Jeśli chcesz łatwiej to zrobić, możesz zacząć od użycia jednego z gotowych bloków lub szablonów, klikając ikonę folderu.

Ikona folderu otworzy wyskakujące okienko, w którym możesz zobaczyć gotowe bloki i szablony, a także te, które wcześniej zapisałeś. Możesz także zapisać utworzony blok lub cały szablon i użyć go ponownie na innej stronie wewnętrznej. Często używa się zapisanego bloku do referencji, konkretnego wezwania do działania, które nie powinno być wyświetlane na każdej stronie, ale na niektórych.

Jest jeszcze jedna rzecz, którą musisz wiedzieć, kiedy zaczynasz budować stronę internetową bez wcześniejszego doświadczenia, jest łatwa w obsłudze, dość intuicyjna i bez wcześniejszego doświadczenia w ciągu kilku dni będziesz więcej niż w stanie zbudować sobie fajną stronę internetową , mogę powiedzieć, że nawet profesjonalnie wyglądający.

Jednak Twoja witryna musi wyglądać świetnie na wszystkich rozmiarach urządzeń i w ten sam sposób, w jaki edytowałeś wersję na komputer, możesz edytować wszystkie inne rozmiary. Należy pamiętać, że elementy i widżety można dodawać tylko do wersji na komputery, a następnie można oszukać wygląd mniejszymi rozmiarami.

Ponadto możesz łatwo ustawić widoczność widżetu lub sekcji na różnych urządzeniach, dzięki czemu możesz mieć różne treści w podobnej sekcji, pozostawiając jedną sekcję widoczną na komputerze, ale ukrytą na tablecie i telefonie komórkowym. Podobnie inny ukryty na pulpicie, ale widoczny na tablecie i telefonie komórkowym.

Aby edytować wersje na telefony komórkowe i tablety, kliknij ikonę trybu responsywnego u dołu lewego paska bocznego, co spowoduje wyświetlenie Twojej witryny na telefonie komórkowym. A na górze możesz przełączać się między różnymi rozmiarami ekranu.

Dla większej przejrzystości dodałem dwie sekcje, z których jedna jest ukryta na telefonie komórkowym i tablecie, a druga na pulpicie. Zobacz przykład poniżej.

Wynik końcowy jest na urządzeniu mobilnym.

A wynik końcowy na pulpicie ma tylko jedną sekcję, ale inną.

Wydajność kreatora stron Elementor w Cloudways

Elementor działa całkiem nieźle i osiąga 100 punktów na GTMetrix, a inne narzędzia testowe wykazują naprawdę świetną wydajność. Zwróć uwagę, że nie zoptymalizowałem żadnych obrazów, aby miały dokładnie ten sam rozmiar strony i obrazy dla wszystkich testów, które przeprowadziliśmy.

– Wyniki Elementora na GTMetrix

– Wyniki Elementora w narzędziach Pingdom

– Wyniki Elementora na WebPageTest

Streszczenie

Jeśli potrzebujesz intuicyjnego i łatwego w użyciu narzędzia do tworzenia stron, Elementor może obejmować wszystkie aspekty potrzebne do zbudowania ładnej strony internetowej. Nie jest trudno zbudować witryny o doskonałej jakości pikseli na podstawie projektu, jeśli masz jakąkolwiek wiedzę na temat CSS.

Dzięki ogromnej społeczności i setkom dodatków i zewnętrznych wtyczek rozszerzających podstawowe funkcje Elementora nie widzę żadnego rodzaju witryny, której nie można zbudować za pomocą Elementora.

Często widzimy, jak Elementor jest nadęty, ładuje się dużo niepotrzebnego kodu, trudno go zoptymalizować, ale jak widać z testów, wydaje się, że Elementor działa całkiem dobrze na Cloudways. Przetestowałem stronę docelową z 25 obrazami w środku i 7 sekcjami + nagłówkiem i stopką, co jest powyżej średniej dla strony głównej.

Kolejną świetną rzeczą w Elementorze jest to, że krzywa uczenia się nie jest stroma, ale dość lekka, a za kilka minut, używając gotowych szablonów lub bloków, możesz mieć naprawdę ładnie zaprojektowaną, nowocześnie wyglądającą stronę internetową.