WooCommerce + Elementor: Zbudujmy fajne rzeczy

Opublikowany: 2022-07-27

Czy chcesz poprawić i zaprojektować swoją witrynę WordPress bez zatrudniania programisty? Dobra wiadomość: jest to całkowicie możliwe dzięki wtyczkom do tworzenia stron WordPress.

Wtyczka do tworzenia stron WordPress jest wyposażona w intuicyjny interfejs typu „przeciągnij i upuść” do tworzenia pięknych niestandardowych stron i witryn internetowych. Tak więc, niezależnie od twoich umiejętności lub wiedzy technicznej, wtyczki do tworzenia stron sprawiają, że projektowanie idealnej witryny jest dziecinnie proste bez pisania ani jednej linii kodu.

Teraz, jeśli zastanawiasz się, którą wtyczkę do tworzenia stron WordPress powinieneś wziąć pod uwagę, jesteś we właściwym miejscu. W tym artykule przyjrzymy się jednej z najpopularniejszych opcji: Elementor, który jest uważany za złoty standard. Elementor to druga najczęściej instalowana wtyczka WordPress z 2 milionami aktywnych instalacji – używana przez około 15,9% witryn WordPress.

Zaczniemy od krótkiego przeglądu Elementora, a następnie przejrzymy interfejs, funkcje i ceny wtyczki, aby pomóc Ci określić, czy jest to właściwy wybór dla Twojej witryny. Chodźmy!

Wtyczka Elementor: krótki przegląd

Elementor to wizualna wtyczka do tworzenia stron WordPress z funkcją przeciągania i upuszczania, która umożliwia tworzenie unikalnych stron internetowych i postów w porównaniu ze standardowymi szablonami stron dołączonymi do motywów WooCommerce lub WordPress.

Nie wymaga kodowania i pozwala łatwo konfigurować ustawienia oraz organizować zawartość i elementy strony za pomocą narzędzi przeciągnij i upuść.

Zacznijmy od przeglądu wtyczki, przyglądając się, jak działa interfejs Elementora.

Zrozumienie interfejsu wtyczki Elementor

W porównaniu do wielu innych wtyczek do tworzenia stron, Elementor ma jeden z najprostszych i najbardziej płynnych interfejsów. Kiedy po raz pierwszy uruchomisz wtyczkę, wylądujesz na takiej stronie:

Kropkowany szary obszar to obszar zawartości. Poza tym obszarem pojawi się Twój zwykły motyw, podczas gdy w obszarze kropkowanym możesz dodawać widżety i tworzyć własny projekt.

Po lewej stronie zobaczysz widżety, które działają jak klocki, które możesz złożyć, aby zaprojektować swoją stronę. Poniżej tych widżetów znajdziesz ogólne ustawienia podglądu projektów, cofania zmian lub włączania trybu responsywnego, jak pokazano na obrazku.

Oto jak proste jest przeciąganie i upuszczanie żądanych elementów na stronie:

Po upuszczeniu elementu na stronę — Elementor dzieli elementy na dwie struktury układu, dając dwa różne elementy strukturalne, jak pokazano poniżej.

Te elementy konstrukcyjne obejmują:

  • Sekcja: oznaczona kolorem niebieskim.
  • Kolumna: znajduje się wewnątrz sekcji oznaczonej kolorem czarnym. W sekcji możesz dodać tyle kolumn, ile potrzebujesz.

Po upuszczeniu elementu możesz łatwo dostosować jego układ, dostosowując szerokość oraz zmieniając odstęp i wysokość kolumn.

Co więcej, możesz również wybrać odpowiednią strukturę sekcji zgodnie z konkretnymi wymaganiami i dodać inne elementy, takie jak obraz, wideo lub ikona, w kolumnach.

Na przykład dodałem obraz i wybrałem jeden z domyślnej biblioteki obrazów Elementor, jak pokazano poniżej na obrazku. Możesz zmienić rozmiar i wyrównanie obrazu, dodać podpis i link do odpowiedniego adresu URL.

Aby dalej stylizować elementy, struktury lub kolumny – możesz użyć kart Styl i Zaawansowane na pasku bocznym. Po prostu kliknij treść, którą chcesz stylizować, i kliknij karty paska bocznego, aby wprowadzić zmiany.

Możesz także przejść z zakładek do paska bocznego elementów, klikając po prostu kwadratową ikonę wyświetlaną w prawym rogu paska bocznego.

W ten sposób Elementor jest dość łatwy w użyciu, a dzięki prostym opcjom przeciągania i upuszczania oraz łatwym opcjom dostosowywania - możesz zbudować wymarzoną witrynę w mgnieniu oka.

Teraz bez poświęcania czasu przejdźmy od razu do funkcji kreatora stron Elementor.

Najważniejsze funkcje Elementora, które sprawiają, że jest to doskonały kreator stron dla WooCommerce

Oto kilka doskonałych zalet Elementora, które sprawiają, że jest to jeden z najpopularniejszych kreatorów stron wśród witryn WordPress i WooCommerce.

  1. Obszerna biblioteka gotowych szablonów

Elementor zapewnia szeroką gamę szablonów. Kliknij ikonę Dodaj szablony poniżej, aby dodać szablon.

Wybieraj spośród ponad 300 szablonów z biblioteki szablonów Elementor i dodaj je do swojej strony jednym kliknięciem.

Od wydania Elementora 2.0 szablony te są dostępne w dwóch formatach:

  • Bloki: dostarczaj projekty dla określonych sekcji zamiast całej strony. Na przykład możesz dodać sekcję Informacje o firmie lub wstępnie zbudowaną sekcję kontaktów do istniejącego układu strony za pomocą bloków.
  • Strony – Oferuj projekty całostronicowe, które można zaimportować jednym kliknięciem i dostosować w razie potrzeby.

Możesz także zapisać niektóre ze swoich projektów jako bloki i szablony, aby użyć ich później na innych stronach lub witrynach — dzięki czemu utrzymanie wspólnego projektu szablonu w całej witrynie jest bardzo wygodne.

Usuwa również kłopoty z budowaniem nowego projektu strony od podstaw za każdym razem.

  1. Responsywne kontrolki projektowe i podglądy mobilne

Korzystanie z urządzeń mobilnych stale rośnie z każdym miesiącem, a około 73,1% projektantów stron internetowych uważa, że ​​nieresponsywny projekt strony jest jedną z największych przyczyn porzucania witryn.

Wszystkie projekty i strony, które tworzysz w Elementorze, są automatycznie responsywne i świetnie wyglądają na urządzeniach mobilnych. Dodatkowo możesz szybko podejrzeć jak Twoja strona będzie wyglądać na innych urządzeniach bez wychodzenia z interfejsu.

Kliknij przycisk Tryb responsywny u dołu paska bocznego i wyświetl podgląd wersji witryny na komputery, urządzenia mobilne i tablety, klikając przyciski wyróżnione na poniższych obrazach.

Umożliwia dostosowywanie projektów stron w zależności od typu urządzenia i pozwala wyświetlać lub ukrywać określone widżety na określonych urządzeniach. Na przykład, jeśli wersja komputerowa Twojej witryny ma duży obraz główny, możesz uniknąć wyświetlania tego obrazu w wersji mobilnej witryny. Możesz wybrać ten obraz lub dowolną sekcję, którą chcesz ukryć i ukryć na urządzeniach mobilnych, korzystając z responsywnych elementów sterujących projektu Elementora za pomocą jednego kliknięcia.

Dzięki temu Twoja witryna jest w 100% responsywna – dzięki czemu wygląda świetnie na wszystkich urządzeniach, w tym na komputerach stacjonarnych, tabletach i urządzeniach mobilnych.

  1. Nieograniczone opcje dostosowywania

Personalizacja jest nieograniczona dzięki Elementorowi i nie ma ograniczeń co do tego, jak możesz zaprojektować swoją witrynę i jej elementy.

Menu Styl i Zaawansowane w edytorze Elementor zapewniają wiele opcji dostosowywania stylu. Możesz stylizować zawartość zgodnie z kilkoma atrybutami, w tym kolorem, szerokością, rozmiarem, filtrami CSS i obramowaniem.

Jednocześnie menu Zaawansowane umożliwia zarządzanie układem, efektami ruchu, tłem, obramowaniem, atrybutami i innymi czynnikami, jak pokazano poniżej.

  1. Szczegółowe sterowanie układem

Zagłębiając się głębiej w opcje dostosowywania, Elementor zapewnia szczegółową kontrolę nad projektem układu , dzięki czemu nie musisz rezygnować z elastyczności projektu z powodu niemożności napisania niestandardowego kodu.

Elementor ułatwia umieszczanie sekcji, widżetów i kolumn dokładnie tam, gdzie chcesz, dzięki wielu intuicyjnym opcjom sterowania.

Korzystając z elementów sterujących układu w menu Zaawansowane, możesz:

  • Ustaw ręcznie marginesy i dopełnienie dla sekcji, widżetów i kolumn.
  • Wybierz szerokość sekcji — domyślną, o pełnej szerokości, w wierszu i niestandardową.
  • Dostosuj pozycję widżetu w kolumnie — domyślną, stałą i bezwzględną.
  • Dostosuj odstęp między kolumnami i utwórz pustą przestrzeń, aby uzyskać czysty układ.

W ten sposób, bez umiejętności kodowania, możesz łatwo dostosować rozmieszczenie widżetów i dostosować kolumny i sekcje zgodnie z potrzebami.

  1. Pełna historia zmian postępu z cofnięciem/ponownie zmianami

Jedną z najlepszych funkcji Elementora jest to, że umożliwia podgląd całej historii wszystkich wprowadzonych zmian, rejestrując w ten sposób każdą akcję w historii.

Co więcej, możesz łatwo cofnąć zmiany i w razie potrzeby powrócić do poprzedniej wersji. Ponadto za każdym razem, gdy zapisujesz nowy projekt, możesz w razie potrzeby łatwo powrócić do zupełnie nowej wersji.

  1. Pozostawia czysty kod

Jeśli z jakiegoś powodu kiedykolwiek zechcesz dezaktywować Elementora w przyszłości, nie musisz się martwić, że pozostawisz mnóstwo skrótów, takich jak Divi Builder.

Elementor pozostawia czysty kod, zapewniając optymalną wydajność i szybkość strony.

Więcej funkcji Elementora

Oto kilka innych funkcji wtyczki do tworzenia stron Elementor:

  • Edytor nagłówków i stopek: możesz łatwo edytować nagłówki i stopki swojej witryny za pomocą Elementora bez żadnych umiejętności kodowania.
  • Wbudowana edycja tekstu: Ta funkcja umożliwia edycję tekstu na żywo na ekranie, co ułatwia edycję istniejącej treści tekstowej lub pisanie postów na blogu.
  • Gotowy do RTL i tłumaczenia: Elementor jest dostępny w 23 przetłumaczonych językach i możesz go łatwo przetłumaczyć na dodatkowe języki dzięki pełnej obsłudze języków RTL.
  • Widżety WooCommerce: Zapewnia gotowe widżety WooCommerce, takie jak cenniki i tabele cenowe, dzięki czemu budowanie witryn eCommerce jest dziecinnie proste.
  • Integracje z innymi firmami : Elementor obsługuje integracje z innymi firmami, w tym ActiveCampaign i MailChimp.
  • Globalne kolory i opcje typografii: Elementor umożliwia ustawienie globalnej typografii i kolorów w celu tworzenia kompleksowych projektów na wszystkich stronach. Poza tym możesz również wybierać spośród ponad 800 czcionek Google do projektowania swojej witryny.
  • Tryb konserwacji: możesz wykorzystać szablony trybu konserwacji Elementora, aby ustawić swoją witrynę w trybie konserwacji.

Recenzja Elementora Pro

Chociaż podstawowy program do tworzenia stron Elementor jest open-source i bezpłatny, możesz uaktualnić do wersji Elementor Pro – która zapewnia dodatkowe przydatne funkcje.

Oto krótkie spojrzenie na niektóre funkcje nowej wtyczki Elementor Pro:

  • Pozwala zbudować cały motyw WordPress.
  • Ma bardziej ekscytujące widżety, w tym suwaki, przyciski udostępniania społecznościowego, formularze, liczniki czasu i formularze logowania.
  • Zapewnia mnóstwo wysokiej jakości szablonów Elementor Pro premium.

Tak więc, jeśli chcesz więcej funkcji, szablonów premium i globalnych widżetów – możesz wybrać wtyczkę Elementor Pro, zaczynając od 49 USD.

Przegląd cen Elementora

Jeśli chcesz tworzyć proste i proste strony internetowe, bezpłatna wersja wtyczki powinna wystarczyć Twoim potrzebom – biorąc pod uwagę, że jest to najbardziej bogaty w funkcje darmowy program do tworzenia stron.

Jednak, aby stworzyć bardziej profesjonalne strony internetowe, Elementor oferuje cztery plany premium z funkcjami premium, takimi jak wsparcie VIP i profil eksperta Elementor.

Plan Essential, Expert, Studio i Agency wtyczki Elementor kosztuje 49 USD, 199 USD, 499 USD i 999 USD rocznie. Dlatego Elementor jest dla każdego, niezależnie od tego, czy jesteś projektantem stron internetowych, programistą czy właścicielem agencji – Elementor zapewnia funkcje na każdą potrzebę i żądanie.

Wniosek: ostateczny werdykt

Po tej kompleksowej recenzji można śmiało powiedzieć, że Elementor zapewnia wszystkie niezbędne funkcje wymagane do zbudowania witryny WordPress lub WooCommerce.

Jest wyposażony w lekki, prosty, łatwy do zrozumienia i rozbudowany interfejs, dzięki czemu projektanci stron internetowych bez doświadczenia w kodowaniu mogą tworzyć piękne strony internetowe. A najlepsze jest to, że zawiera plany cenowe na potrzeby wszystkich. Co więcej, programiści Elementora nadal wydają i wprowadzają nowe funkcje i ulepszenia.

Po sprawdzeniu łatwości użycia, ogólnych funkcji, wydajności, wsparcia, interfejsu i cen wtyczki umieszczamy Elementor na szczycie wtyczek do tworzenia stron WordPress. Sprawdź i wypróbuj wtyczkę Elementor samodzielnie i wybierz plan odpowiedni do Twoich konkretnych wymagań biznesowych.