Strony WooCommerce z Elementor
Opublikowany: 2021-11-23WordPress ułatwia nam życie dzięki niesamowitym funkcjom budowania witryny, zwłaszcza sklepów internetowych WooCommerce. Nie ma nic prostszego niż projektowanie stron WooCommerce za pomocą Elementora, ponieważ w ogóle nie będziesz musiał zajmować się kodami.
Ale nadal możesz się zastanawiać, dlaczego Elementor? Cóż, to dlatego, że jest to idealne narzędzie do projektowania witryn zakupów online w WooCommerce, które może zrobić nawet osoba nietechniczna. Elementor umożliwia to, prowadząc Cię przez przytłaczające doświadczenie budowania witryn.
Czy jesteś gotowy do projektowania stron WooCommerce za pomocą Elementora? Pozwól nam poprowadzić Cię dokładnymi krokami, jak łatwo uzyskać dynamiczne strony WooCommerce za pomocą kreatora stron Elementor.
Zacznijmy!
Czy Elementor jest kompatybilny z WooCommerce? Dlaczego warto z tym iść?
Dla udanej witryny WooCommerce projektowanie stron internetowych jest bardzo ważne. Wymaga dość atrakcyjnego interfejsu witryny i starannie zapakowanych funkcji, aby przyciągnąć uwagę klientów do Twojej firmy.
WordPress to już niesamowita platforma, na której możesz łatwo projektować strony internetowe. Ale Elementor jeszcze bardziej ułatwia tworzenie wspaniałych stron internetowych w ciągu kilku minut. Wtyczka jest bardzo wydajna i jest wyposażona w widżety, które ułatwiają dodawanie funkcji i funkcjonalności do Twojej witryny.
Ale czy Elementor jest kompatybilny z WordPressem? Tak to jest. W rzeczywistości Elementor jest wysoce kompatybilny z WordPressem i wszystkim, co się w nim znajduje. Projektowanie stron WooCommerce za pomocą Elementora jest łatwe, elastyczne i bułka z masłem nawet dla początkującego.
Tylko dlatego, że każdy, niezależnie od wiedzy o kodowaniu, może projektować strony internetowe za pomocą Elementora, jest to najlepsze narzędzie w szopie, z którego możesz korzystać. Nic dziwnego, że ponad 5 milionów ludzi używa dziś Elementora do tworzenia własnych stron internetowych.
Gotowy na główny występ? Pozwól, że poprowadzę Cię we właściwy sposób budowania i dostosowywania stron WooCommerce za pomocą Elementora poniżej.
Twórz strony WooCommerce z Elementor
Jak już mówiliśmy, tworzenie stron WooCommerce za pomocą Elementora nie jest trudnym zadaniem. Wszystko jest łatwe dzięki WordPressowi, podobnie jak cała procedura tego zadania. Oto jak to zrobiliśmy-
Najpierw musisz poczynić przygotowania, takie jak zainstalowanie wymaganych wtyczek do WordPress-
- Twoja witryna WordPress
- Kreator stron Elementor (bezpłatny i profesjonalny)
- WooCommerce (bezpłatnie)
- Pakiet Element Lite (bezpłatny)
Po zakończeniu wstępnej konfiguracji, takiej jak zakup domeny i hostingu, konfiguracja WordPressa w witrynie, instalowanie wtyczek Elementor, WooCommerce, Element Pack Lite itp. Konfiguracja wszystkiego, co jest niezbędne do uruchomienia witryny, może chwilę potrwać.
W szczególności konfiguracja WooCommerce wymaga kilku minut i musisz wypełnić wszelkiego rodzaju informacje, w tym informacje o płatnościach, wysyłce, kontaktach osobistych itp.
Po powrocie do pulpitu konfiguracja jest zakończona i jesteś gotowy do tworzenia stron WooCommerce za pomocą Elementora.
Zwróć uwagę, że zarówno Elementor, jak i WooCommerce mają dużą liczbę widżetów, które dodają funkcje WooCommerce do Twojej witryny. Jednak to nie wystarczy, aby w pełni zagłębić się w odpowiednie funkcje WooCommerce czy projektowanie stron internetowych.
Dlatego potrzebujemy wtyczki pomocnej dłoni, takiej jak Element Pack Lite, aby wzbogacić witrynę zarówno pod względem wyglądu, jak i funkcji. Przejdźmy teraz do fazy projektowania.
Łatwo dostosuj strony WooCommerce za pomocą Elementora
Ponieważ kreator stron Elementor umożliwia importowanie gotowych szablonów, bardzo łatwo jest pracować z szablonami, a następnie po prostu wywołać je na stronach i zacząć je dostosowywać. Ponadto Elementor ma już ponad 10 prostych widżetów dla WooCommerce do tworzenia bazy strony Twojego sklepu.
Ale gdy zdobędziesz wszystkie niezbędne wtyczki, w tym Element Pack Pro, otrzymasz wystarczająco dużo widżetów, aby pokryć całą witrynę WooCommerce. Nie ma więc miejsca na uczucie przytłumienia podczas projektowania stron internetowych.
Ale wcześniej upewnij się, że wtyczki są aktualne, chyba że nie będą działać tak, jak powinny.
Krok-1: Stwórzmy szablon strony WooCommerce
Na początek przejdź do sekcji tworzenia szablonów na swojej stronie WordPress. Po prostu przejdź do Pulpit nawigacyjny> Szablony> Dodaj nowy
Kliknięcie przycisku „Dodaj nowy” spowoduje wyświetlenie wyskakującego okienka, w którym należy utworzyć szablon. Dostępnych jest kilka opcji i musisz wybrać tę, która brzmi „Pojedynczy produkt”. Ponieważ zamierzamy stworzyć stronę WooCommerce dla produktów, jest to ustawienie, do którego dążymy.
Dodatkowo upewnij się, że masz zainstalowany Elementor Pro. W przeciwnym razie te opcje nie będą widoczne.
Wystarczy dodać nazwę szablonu obok, aby łatwo zidentyfikować szablon do wykorzystania w przyszłości.
Następnie naciśnij przycisk „Utwórz szablon” i zacznij umieszczać elementy na stronie, aby tworzyć kolejne strony WooCommerce za pomocą Elementora.
Krok 2: Wstawianie szablonów stron
Teraz, gdy jesteś gotowy do stworzenia szablonu strony WooCommerce, możesz to zrobić na dwa sposoby: zrób to od podstaw lub weź gotowy szablon i dostosuj go.
Nie ma dużej różnicy między tymi dwiema opcjami, wystarczy czas potrzebny na ukończenie szablonu. Dla ułatwienia dodamy najpierw gotowy szablon.
Wystarczy kliknąć ikonę Biblioteka szablonów pakietu Element Pack, aby otworzyć bibliotekę w edytorze stron.
Wszystko, co musisz zrobić, to nawigować po bibliotece szablonów i wybrać odpowiedni projekt strony, pasujący do motywu Twojego sklepu. Gdy już go znajdziesz, po prostu najedź na szablon i kliknij przycisk „Wstaw”.
Pamiętaj, że możesz również użyć szablonów stron WooCommerce z Elementor Pro. Po dostosowaniu szablonu będzie to unikalny projekt, który nie będzie podobny do samego szablonu.
Krok 3: Dodaj i dostosuj funkcje
Bardzo ważne jest, aby wiedzieć o funkcjach, z których mogą korzystać Twoi klienci, zanim zaczniesz umieszczać widżety na stronie szablonu. Zawsze możesz wybrać nową zawartość lub dostosować obecny układ w celu uzyskania dalszych ulepszeń.
Istnieje wiele widżetów dostarczonych przez Elementora, które dodadzą więcej pikanterii Twojej witrynie WooCommerce. Dzięki tym widżetom możesz łatwo zaprojektować swoją stronę WooCommerce część po części i stworzyć kompletną stronę internetową.
Zobaczmy najpierw dostępne widżety-
- Tytuł produktu
- Opis
- Dodaj do koszyka
- Cena produktu
- Obraz
- Ocena
- Ilość produktu
- Meta
- Bułka tarta
- Produkty powiązane
- Zapasy i wyprzedaż produktów
Oto niestandardowa strona produktu WooCommerce wykorzystująca elementy z powyższej listy.
Dobrą taktyką jest utrzymanie minimalnego projektu strony produktu, aby użytkownicy mogli bardziej skoncentrować się na produktach. W każdym razie możesz teraz rozróżnić funkcje i wiedzieć, jak zaprojektować swoją stronę.
Krok 4: Przycisk koszyka dla stron WooCommerce
Posiadanie wystarczającej liczby aktywnych przycisków CTA na swojej stronie WooCommerce to dobry sposób na zaangażowanie odwiedzających i wyróżnienie potencjalnych klientów. CTA nie tylko przyciąga klientów, ale także sprawia, że Twoja witryna wygląda atrakcyjnie dla odwiedzających.
Bardzo łatwo jest dodać przyciski CTA lub „Dodaj do koszyka” na stronach WooCommerce za pomocą Elementora. Istnieją jednak dwa rodzaje przycisków „Dodaj do koszyka” dostępne w Elementorze: statyczny i dynamiczny.
Użycie statycznego jest najszybszym sposobem na dodanie CTA do twoich stron, ale brakuje w nim kontroli stylów. Zalecamy użycie dynamicznego przycisku CTA za pomocą widżetu Element Pack dla WooCommerce, „WC-Dodaj do koszyka”.
Tutaj możesz dostosować przycisk koszyka, aby wyglądał ładnie w przeciwieństwie do Twoich produktów. Zawsze możesz dostosować kolor, tło, obramowanie, dopełnienie, wyrównanie, etykietę, ikonę, rozmiar itp. Dla przycisku.
Wystarczy dopasować wysokość przycisku do poziomu wzroku użytkownika. Należy pamiętać, że pozycja przycisku jest bardzo ważna, ponieważ wpływa na decyzję użytkownika o zakupie produktu.
Krok 5: Skonfiguruj strony archiwum produktów WooCommerce za pomocą Elementora
Do tej pory ukończyłeś strony pojedynczych produktów w WooCommerce. Teraz musisz zbudować stronę archiwum produktów, aby zbiorczo zademonstrować swoje produkty i ułatwić odwiedzającym nawigację.
Zróbmy teraz jeden dla siebie. Tak jak poprzednio, przejdź do pulpitu WordPress i przejdź do menu Szablony i kliknij „DODAJ NOWE”.
Tym razem przewiń w dół i wybierz opcję Archiwum produktów dla szablonu z nazwą, aby później go zidentyfikować.
Teraz zakończ, naciskając przycisk Utwórz szablon . Poczekaj, aż pojawi się strona edytora Elementor.
Gdy zobaczysz pustą stronę, możesz rozpocząć pracę z innym gotowym szablonem strony archiwum lub stworzyć własny od podstaw. Elementor ma dość dużą liczbę widżetów, które tworzą fragmenty strony archiwum.
Możesz jednak pominąć burzę mózgów i skorzystać z widżetów z wtyczki Element Pack Pro. Ma kilka funkcji WooCommerce, które łączą wiele części interfejsu, tworząc kompletny obraz.
Spójrz na poniższą listę-
- Karuzela portfela
- Suwak urządzenia
- Karuzela niestandardowa
- Suwak WooCommerce
- Produkty WooCommerce
- Karuzela WooCommerce
- Kategorie WooCommerce
Korzystając z tych widżetów, możesz tworzyć wspaniałe strony WooCommerce za pomocą Elementora do archiwum produktów.
To tylko mały przykład. Jest więcej rzeczy, które możesz zrobić i tylko niebo jest granicą.
Krok 6: Dostosuj projekt strony za pomocą Element Pack Pro
Do tej pory budowałeś strony WooCommerce za pomocą Elementora, z wyjątkiem tego, że nie wprowadziłeś żadnych znaczących zmian w projekcie. Elementor sam w sobie jest świetnym narzędziem do dostosowywania interfejsu, wciąż brakuje mu wyrafinowanych kontroli projektowych.
Ale nie przejmuj się tym, masz Element Pack Pro, który dokończy niedokończoną pracę za Ciebie. To narzędzie jest bardzo znane z kontroli dostosowywania dla każdej posiadanej funkcji (ponad 200 funkcji). Możesz więc mieć animowany nagłówek, animowaną galerię, karuzelę produktów, siatkę, suwak, rozmycie sekcji, link do opakowania i inne niesamowite funkcje w jednym miejscu.
Na przykład pokażmy, jak można dostosować naszą karuzelę WooCommerce do własnych upodobań.
Krok 7: Publikowanie stron WooCommerce za pomocą Elementora
Teraz, gdy wszystko jest gotowe, stworzyliśmy stronę pojedynczego produktu, stronę archiwum i skończyliśmy przygotowywać projekty stron, czas umieścić strony w działającej witrynie.
Po zapisaniu szablonów wystarczy przejść do dashboardu, na stronę, na której chcesz umieścić produkty lub archiwum i tam wywołać szablony. Proste i łatwe. Nie musisz nawet duplikować strony, ponieważ możesz korzystać z zapisanych szablonów w dowolnym momencie.
W ten sposób pracujesz z szablonami, aby tworzyć oszałamiające strony WooCommerce za pomocą Elementora.
Zrelaksuj się podczas projektowania złożonych stron WooCommerce w kilka minut
Projektowanie stron WooCommerce za pomocą Elementora jest mniej kłopotliwe i przyjemniejsze, gdy dokładnie wiesz, co robisz. Jako oprogramowanie przyjazne dla początkujących, Elementor umożliwia szybkie opanowanie podstaw bez konieczności posiadania trzeciej ręki.
To wszystko!
Skorzystaj z sekcji komentarzy w przypadku jakichkolwiek pytań związanych z tym artykułem lub skorzystaj z opcji LiveChat, aby bezpośrednio z nami porozmawiać. Dzięki, że nie spałeś.
Bądź bezpieczny.