Jak stworzyć stronę docelową za pomocą Elementora i PowerPacka

WordPress ułatwił każdemu budowanie swojej obecności w Internecie, czy to na blogu, stronie biznesowej, czy złożonym systemie ERP. Motywy i wtyczki WordPress ułatwiają użytkownikom tworzenie witryn internetowych bez martwienia się o zatrudnienie eksperta. Wtyczki do Kreatora Stron odegrały kluczową rolę w przekształceniu sposobu, w jaki tworzone są strony internetowe za pomocą WordPressa. Elementor to jedna z takich popularnych wtyczek do tworzenia stron.

Jeśli jesteś projektantem stron internetowych i chcesz ożywić swoje projekty bez martwienia się o kod, możesz użyć Elementora. Ale co, jeśli jesteś programistą? Cóż, jeśli jesteś programistą, możesz również korzystać z Elementora ze względu na jego przyjazną dla programistów funkcjonalność i łatwe do rozszerzenia API.

W tym poście dowiesz się więcej o Elementorze i o tym, jak możesz go używać z dodatkami Elementora do szybkiego tworzenia stron internetowych, stron docelowych, wyskakujących okienek.

Co to jest elementor?

Elementor to popularna wtyczka Kreatora stron dla WordPress. Elementor zapewnia gotowe do użycia bloki treści zwane widżetami wraz z podstawowymi elementami konstrukcyjnymi, takimi jak sekcje i kolumny.

Możesz przeciągać i upuszczać te widżety na dowolnej stronie w witrynie WordPress i tworzyć niestandardowy układ zgodnie ze swoimi potrzebami.

Elementor Pro zawiera ponad 60 widżetów i mnóstwo wstępnie zaprojektowanych szablonów, których możesz użyć do zaprojektowania dowolnej strony.

Funkcje Elementora

Elementor jest wyposażony w wiele funkcji i funkcji, które mogą sprawić, że tworzenie Twojej witryny będzie wygodniejsze i szybsze. Zobaczmy wszystkie imponujące funkcje Elementora, które sprawiają, że warto go mieć.

Szybki i łatwy w użyciu

Elementor jest zoptymalizowany pod kątem wydajności. Nawet jeśli jesteś początkującym użytkownikiem, okaże się, że jest bardzo łatwy w użyciu i bezproblemowo nawigujesz w Elementorze. Nigdy nie poczujesz, że Elementor wciągnie Cię z powrotem w proces projektowania i sprawi, że wszystko będzie dla Ciebie szybkie i łatwe.

Podczas gdy Elementor płonie szybko, możesz uzyskać więcej z Elementora, korzystając z hostingu Cloudways Elementor. CW skupia się na wydajności i zapewnia super kontrolę nad działaniem serwera. Jeśli chodzi o bezpieczeństwo, Cloudways oferuje naprawdę niezawodne i bezpieczne serwery zarządzane przez ich proaktywne praktyki bezpieczeństwa, aby zapewnić bezpieczeństwo serwerów. Liczba funkcji dostępnych w Cloudways jest obecnie trudna do znalezienia w branży.

Wstępnie zaprojektowane szablony stron

Dzięki Elementorowi otrzymujesz mnóstwo wstępnie zaprojektowanych szablonów, których możesz użyć do stworzenia strony internetowej za pomocą jednego kliknięcia. Istnieją szablony dla prawie każdej kategorii stron internetowych, takich jak strona docelowa, strona o stronie itp., które mogą znacznie przyspieszyć proces projektowania witryny.

Jeśli nie możesz znaleźć dobrego szablonu w bibliotece Elementor, możesz sprawdzić szablony Elementor innych firm. Dzięki dobrze prosperującej społeczności projektantów i programistów przeniesienie Elementora na wyższy poziom jest łatwe.

Załadowane widżetami

Zarówno wersja darmowa, jak i profesjonalna Elementor zawiera widżety z załadowanymi funkcjami. Od prostych widżetów treści, takich jak nagłówki, edytor tekstu, przyciski, po zaawansowane widżety, takie jak siatka postów, formularz logowania, WooCommerce, udostępnianie społecznościowe, dzięki Elementorowi zyskujesz wiele funkcji.

Jeśli chcesz mieć więcej mocy, jeśli chodzi o widżety, możesz wypróbować dodatki do Elementora innych firm. Zalecamy skorzystanie z PowerPack dla Elementora. Jest to wiodący dodatek do Elementora i zbudowany przez ten sam zespół, który stoi za popularnym dodatkiem PowerPack Beaver Builder.

Kreator wyskakujących okienek Elementora

Konstruktor wyskakujących okienek to jeden z najnowszych dodatków do kreatora Elementor. Funkcja tworzenia wyskakujących okienek eliminuje potrzebę korzystania z wtyczki do tworzenia wyskakujących okienek innej firmy w Twojej witrynie. Możesz użyć Elementora do projektowania imponujących wyskakujących okienek z zaawansowanymi regułami kierowania i funkcjonalnością.

Możesz tworzyć formularze logowania, maty pełnoekranowe, wyskakujące okienka ze zniżkami i inne rzeczy za pomocą funkcji kreatora wyskakujących okienek.

Ustawienia ogólne

Tworząc witrynę, ważne jest, aby mieć spójne ustawienia kolorów, typografię itp. Możesz dostosować kolory, czcionki, a nawet próbnik kolorów z góry, aby ułatwić proces projektowania dzięki globalnym ustawieniom w Elementorze.

Twórz części tematyczne, takie jak nagłówek, stopka, archiwa itp.

Z Elementorem Twój projekt nie ogranicza się tylko do obszaru zawartości strony . Możesz utworzyć niestandardowy nagłówek, stopkę, pasek boczny i prawie każdą część witryny, nie martwiąc się o pisanie kodu. Wszystko to można łatwo utworzyć za pomocą funkcji Theme Builder w Elementor Pro.

Treści dynamiczne

Dzięki funkcji Dynamic Content w Elementor Pro możesz wyświetlać dynamiczne dane/treści z niestandardowych pól WordPress, ACF, zestawu narzędzi, Podsów, MetaBox lub dowolnej innej wtyczki pól niestandardowych. Możesz korzystać z danych z pól niestandardowych i wyświetlać je za pomocą widżetów Elementor w dowolnej części witryny. Więcej informacji o zawartości dynamicznej znajdziesz tutaj.

Wersja Lite i Pro

Chociaż Elementor ma wiele do zaoferowania, nie jest konieczne, aby użytkownicy musieli płacić ogromne kwoty, aby uzyskać do niego dostęp. W rzeczywistości Elementor ma dwie wersje, Lite i Pro. Możesz uzyskać dostęp do wielu funkcji Elementora w samej wersji Lite. Obie wersje mają do zaoferowania swoje własne funkcje. Oto szczegółowe porównanie Elementor Lite i Pro, które może pomóc w podjęciu decyzji.

PowerPack dla Elementora

Elementor to zdecydowanie cały pakiet. Jedyne narzędzie, którego potrzebujesz, aby rozpocząć projektowanie stron internetowych z minimalnym kątem uczenia się.

Może się zdarzyć, że podczas korzystania z Elementora poczujesz się trochę ograniczony. W tym celu na ratunek przychodzą dobrze zakodowane dodatki innych firm, takie jak dodatek PowerPack Elementor . Ten dodatek jest jednym z najlepszych w swojej kategorii i oferuje doskonałe i imponujące widżety z mnóstwem opcji dostosowywania dla użytkowników.

Obecnie w wersji Pro PowerPack dostępnych jest ponad 50 widżetów, a zespół stale dodaje nowe widżety, co czyni go doskonałym wyborem wśród dodatków Elementor.

PowerPack jest tworzony przez zespół doświadczonych programistów i projektantów WordPress z myślą o wydajności. Wtyczka jest dobrze zakodowana i regularnie aktualizowana pod kątem zgodności z najnowszymi wersjami Elementora i WordPress

Zobaczmy, jak możesz używać razem dodatku Elementor i PowerPack do tworzenia fantastycznych stron internetowych.

Tworzenie strony docelowej

W tym samouczku dowiesz się, jak stworzyć szybki landing page za pomocą dodatku Elementor i PowerPack Elementor. Rozpoczęcie pracy z Elementorem jest łatwe, a wszystko to dzięki przyjaznemu dla użytkownika interfejsowi.

Upewnij się, że masz zainstalowane zarówno Elementor, jak i PowerPack na swojej stronie. Możesz pobrać darmowe wersje z poniższych linków:

1. Elementor
2. PowerPack Lite dla Elementora

Tworzenie strony za pomocą Elementora

Zaloguj się do pulpitu administracyjnego WordPress i kliknij opcję Dodaj nowy w obszarze Strony . Teraz nadaj swojej stronie tytuł / nazwę i kliknij przycisk Edytuj za pomocą Elementora .

W tym samouczku tworzymy stronę docelową dla pizzerii, więc odpowiednio nazwiemy naszą stronę. Oto jak powinien wyglądać nasz efekt końcowy:

Zacznijmy od pierwszej sekcji . Zanim to zrobimy, zmień układ na Elementor Canvas , klikając małą ikonę ustawień w lewym dolnym rogu edytora.

Krok 1: Sekcja bohaterów

Sekcja bohatera składa się z obrazu tła, dwóch widżetów nagłówków i przycisku CTA.

Najpierw kliknij ikonę plusa i dodaj strukturę pojedynczej kolumny z opcji. Teraz przejdź do ustawień sekcji i włącz opcję sekcji rozciągania i ustaw dolną i górną wyściółkę na 250 z zakładki Zaawansowane.

Teraz możesz wybrać żądany obraz tła z zakładki styl> typ tła> Klasyczny i wybierając obraz z wyświetlacza multimediów.

Mamy gotowe tło. Dodajmy teraz tytuły i przycisk do naszej sekcji bohaterów.

Przeciągnij i upuść widżet Podwójny nagłówek na stronę i odpowiednio zmień tekst. Teraz upewnij się, że odpowiednio podzieliłeś pierwszy i drugi nagłówek, aby bardziej podkreślić cenę, jak to zrobiliśmy na poniższym obrazku. Zmień typografię dla obu części nagłówka.

Istnieje wiele innych zmian, które możesz wprowadzić, aby tytuł bohatera był taki, jaki chcesz.

Po wprowadzeniu zmian przeciągnij i upuść inny widżet nagłówka poniżej podwójnego nagłówka i zmień ustawienia tekstu i typografii na takie same, jak wymagane. Tutaj zmieniłem rozmiar tekstu na 90 , czcionkę na Elsie , a grubość czcionki na 600 .

Teraz dodamy przycisk CTA .

Przeciągnij i upuść widżet przycisku Elementor w sekcji tuż pod widżetem Nagłówek. Teraz zaczniemy zmieniać ustawienia przycisku.

Oto zmiany, które wprowadziłem do przycisku:

• Zmieniono tekst na Zamów teraz!
• Przycisk wyśrodkowany.
• Dodano link wezwania do działania
• Zmieniono typografię na Elise; 24;600 odpowiednio dla czcionki, rozmiaru i wagi.
• Zmieniono kolor tła na czerwony ( #ff0000 ) i kolor czcionki na biały ( #ff0000 ).
• Dodano dopełnienie 18, 40, 18, 40 odpowiednio dla górnej, prawej, dolnej i lewej strony.

Po wprowadzeniu zmian tak wygląda sekcja bohaterów.

Krok 2: Sekcja Informacje

Teraz będziemy pracować nad sekcją Informacje, śmiało i dodamy dwukolumnową strukturę do strony, klikając ikonę „+”.

Teraz zamierzamy stworzyć układ podobny do tego, więc dodamy widżet nagłówka, widżet edytora tekstu i widżet Referencje w lewej kolumnie. Do prawej kolumny dodamy widżet Nagłówek, widżet Tekst i widżet Przycisk.

Po prostu zacznij przeciągać i upuszczać widżety w sekcji i zmieniać je tak, aby wyglądały jak te na powyższym obrazku. Dodaj tytuł i zmień typografię na to samo.

Oto jak to będzie wyglądać:

Teraz dodaj edytor tekstu pod tytułem w lewej kolumnie i zmień typografię na taką, jaka jest wyświetlana poniżej.

Teraz dodamy widżet Karuzela Referencji poniżej widżetu edytora tekstu. Dodaj „Przedmioty” lub Referencje, które będą wyświetlane w Twojej witrynie. Możesz także użyć widżetu Referencje firmy PowerPack, który oferuje znacznie większą moc dostosowywania.

Po zakończeniu wprowadzania zmian lewa kolumna sekcji Informacje powinna wyglądać tak.

Teraz w prawej kolumnie dodaj tło, aby dodać trochę kontrastu do sekcji.

Teraz utwórz duplikat nagłówka, który zrobiliśmy w lewej kolumnie i przeciągnij go i upuść w prawej kolumnie. Zrób to samo dla edytora tekstu, ponieważ pozwoli to uniknąć niepotrzebnej nadmiarowości i zaoszczędzi również czas. Teraz dla przycisku po prostu zduplikuj przycisk z sekcji Bohater, przeciągnij i przenieś go do prawej kolumny sekcji Informacje.

Wyrównaj w pionie prawą kolumnę do środka z kolumny edycji> układ> wyrównanie w pionie i masz gotową sekcję Informacje!

Oto końcowy wynik sekcji O mnie:

Krok 3: Sekcja „Dowiedz się więcej” CTA

Dodamy kolejny rozdział dotyczący pizzerii. Ta sekcja będzie podobna do tej, którą stworzyliśmy wcześniej, ale struktura będzie nieco inna.

Chcemy więc, aby nasz wynik końcowy wyglądał tak:

Czy zauważyłeś tutaj coś podobnego?

Tak! Nagłówek, edytor tekstu są podobne do tego, który stworzyliśmy już wcześniej. Dlatego zamiast przeprojektowywać wszystkie widżety, po prostu je zduplikujemy i przeciągniemy na miejsce.

Zróbmy to!

Najpierw dodaj nową strukturę dwukolumnową i przejdź do ustawień sekcji i dodaj obraz tła z okna multimediów i dodaj górne wypełnienie o wartości 100, aby panel wyglądał na bardziej przestronny. Ponadto włącz opcję sekcji Rozciągnij w ustawieniach.

Teraz przejdź do poprzedniej sekcji i zduplikuj nagłówek, edytor tekstu i widżet przycisku . Możesz to zrobić po prostu, klikając prawym przyciskiem myszy widżet i wybierając opcję duplikowania . Po zduplikowaniu przeciągnij i upuść zduplikowane widżety na nowe pozycje.

Tak wygląda sekcja:

Teraz w prawej kolumnie przeciągnij i upuść widżet obrazu i wybierz obraz z galerii multimediów. Dostosuj obraz pod względem rozmiaru obrazu itp., a kiedy skończysz, tak wygląda sekcja.

Krok 4: Sekcja Kontakt/Zamówienie

To jest sekcja CTA, która pomoże użytkownikowi złożyć zamówienie. Co teraz powinna zawierać cała ta sekcja? Zobaczmy, co zamierzamy tutaj zrobić.

Musimy stworzyć dwa widżety edytora nagłówków i tekstu, formularz kontaktowy oraz widżet menu cennika przez PowerPack.

Przede wszystkim wiemy, że musimy zachować ten sam projekt i wygląd nagłówka i edytora tekstu. Możesz śmiało skopiować je z poprzedniej sekcji i umieścić je tutaj. Teraz zmień tam tekst na ten, który chcesz.

Możesz użyć widżetu Formularze w Elementor Pro, aby utworzyć formularz kontaktowy za pomocą prostego procesu przeciągania i upuszczania. Gdy to zrobisz, na stronie pojawi się formularz kontaktowy. Teraz możesz dalej dostosowywać formularze. Oto zmiany, które wprowadziłem:

• Dodano pola formularza i zmieniono rozmiar pola.
• Zmieniono tekst, rozmiar i wyrównanie przycisku.
• Dodano wiadomość e-mail jako akcję przycisku przesyłania i dodano szczegóły wiadomości e-mail.
• Poprawiono odstępy między kolumnami oraz zmieniono typografię i kolory tekstu i pól
• Inne niezbędne zmiany, aby formularz kontaktowy wyglądał bardziej atrakcyjnie .

Jeśli używasz dowolnej wtyczki formularza kontaktowego, takiej jak Gravity Forms, WPForms, Ninja Forms itp., Możesz użyć widżetu stylizacji formularzy PowerPack, aby ostylować formularz za pomocą Elementora.

Teraz w prawej kolumnie dodamy Cennik produktów. W tym celu użyjemy widżetu Menu cen firmy PowerPack. Po prostu przeciągnij i upuść, dodaj szczegóły i zmień projekt i układ na to samo. Tak wyglądałaby cała sekcja:

Weź udział w konkursie już teraz!

Prezentacja PowerPack hostowana przez Cloudways

Nakręcamy to!

Po wprowadzeniu wszystkich zmian tak będzie wyglądał cały nasz layout.

Teraz możesz stworzyć dobrze wyglądający układ dla siebie za pomocą Elementora i PowerPack for Elementor. Podczas gdy Elementor oferuje wiele funkcji, PowerPack rozszerza go o kreatywne, zorientowane na funkcjonalność widżety. Dzięki ponad 50 bardzo przydatnym widżetom w swoim zestawie narzędzi możesz szybciej tworzyć strony internetowe.

Elementor i PowerPack mogą zaoszczędzić czas, wysiłek i pomóc w rozwinięciu działalności w zakresie projektowania stron internetowych. Co więcej, oba produkty są wspierane przez niesamowity zespół ekspertów WordPress, dzięki czemu masz całkowity spokój ducha.