Jak korzystać z Kreatora stron SiteOrigin z WordPress

Podobnie jak inne narzędzia do tworzenia stron WordPress, SiteOrigin jest tutaj, aby pomóc Ci zbudować potężną i responsywną stronę internetową z pewną wiedzą na temat CSS i zerowego kodowania. Istnieje kilka motywów z ich końca, z których możesz korzystać (zarówno darmowych, jak i premium), a także darmowych i profesjonalnych wtyczek do tworzenia stron.

Przetestowałem wersję Pro SiteOrigin 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 SiteOrigin za pomocą WordPress.

Dlaczego warto wybrać Kreator stron SiteOrigin?

Budowanie strony zaczyna się od paska narzędzi w edytorze WordPress, który wszyscy znamy, zarówno Classic, jak i Gutenberg. Generuje niewielką ilość kodu wyjściowego i nie jest nadęty, ale każda linia kodu wyjściowego jest zoptymalizowana w jak największym stopniu dla jednostronicowego kreatora.

Ma podgląd na żywo wszystkich wprowadzonych zmian, ponieważ nie ma narzędzia do tworzenia frontonu.

Możesz również łatwo sprawdzić historię i wrócić do poprzedniego projektu, jeśli nie jesteś zadowolony z tego, co zrobiłeś. Ponadto używa jak zwykle wierszy i widżetów, podobnie jak inne programy do tworzenia stron.

Funkcje Kreatora Stron SiteOrigin

Darmowa wersja SiteOrigin zawiera dość ograniczone opcje „widżetów”, ale w wersji Pro masz kilka przydatnych widżetów do łatwego budowania witryny.

Kreator niestandardowych typów postów

Jedną z najpopularniejszych i najbardziej przydatnych funkcji SiteOrigin jest Kreator Niestandardowych Typów Postów z układami Kreatora Stron wielokrotnego użytku i szablonami WooCommerce. Różni się nieco od innych narzędzi i podam nieco głębsze wyjaśnienie, jak z niego korzystać.

Aby utworzyć niestandardowy szablon typu post w SiteOrigin, musisz wykonać ważne kroki.

Krok 1

Będziesz musiał dodać nowy niestandardowy typ postu, zbudować układ typu postu za pomocą Kreatora Stron i wybrać ustawienia wyświetlania typu postu.

Z pulpitu nawigacyjnego WordPress przejdź do opcji Narzędzia → Typy postów i kliknij przycisk Dodaj nowy, na przykład nazwij go Portfolio. Teraz kliknij na zakładkę Kreator Stron obok zakładek Tekst i Wizualizacja, użyj przycisków Kreatora Stron Dodaj Widget i Dodaj Wiersz, aby zbudować własny układ typu postu w swoim portfolio.

Pamiętaj, że wszelkie treści, które dodasz do szablonu, będą wyświetlane w każdym poście portfolio opublikowanym w przyszłości. Jest to więc bardzo przydatne, jeśli chcesz wyświetlać określony blok treści na każdej z tych stron, takich jak wezwanie do działania, subskrypcja naszego biuletynu, o mnie, referencje itp.

Krok 2

Musisz wiedzieć, jak dodać treść do utworzonego niestandardowego typu posta.

Po utworzeniu portfolio niestandardowego typu posta na lewym pasku bocznym pulpitu WordPress będzie widoczny element portfela. Kliknij go, a następnie kliknij Dodaj nowy.

Kiedy nazwiesz swój element Portfolio, będziesz mógł dodać do niego zawartość. Pamiętaj, że możesz edytować tylko widżety, które nie są częścią szablonu globalnego, a te widżety zostaną oznaczone tekstem przeczytaj mi. I na koniec, jak dodać te posty do karuzeli postów lub widżetu post loop.

Widżet po pętli

SiteOrigin zawiera widżet Post Loop, ale opiera się na szablonach pętli w aktywnym motywie.

Aby wstawić widżet pętli posta, po prostu dodaj wiersz na stronie lub poście, w którym chcesz go wyświetlić, wybierz układ bloga lub siatki i gotowe. Następnie musisz wybrać, który widżet będzie wyświetlany, klikając przycisk Zbuduj zapytanie postu.

W ostatnim kroku kliknij swój niestandardowy typ posta z menu rozwijanego typu posta u góry widżetu kreatora zapytań.

Jeśli chcesz to zrobić w karuzeli postów, jedyną różnicą jest wybranie widżetu karuzeli postów zamiast Post Loop, reszta procedury jest taka sama.

Kreator szablonów WooCommerce

Szablony WooCommerce umożliwiają tworzenie pięknych stron specyficznych dla WooCommerce i wyglądu pojedynczego produktu. Interfejs WooCommerce Template Builder jest podzielony na siedem zakładek:

1. Produkt
2. Archiwum produktów
3. Sklep
4. Wózek
5. Pusty wózek
6. Wymeldować się
7. Moje konto

W przypadku WooCommerce wszystkie rzeczywiste poszczególne elementy potrzebne do zbudowania pojedynczego produktu są dystrybuowane jako widżet, który umożliwia łatwe tworzenie produktów. Możesz utworzyć układ i używać widżetów WooCommerce, takich jak cena, SKU, Dodaj do koszyka, Krótki/Długi opis, Obraz produktu, Tytuł itp.

Istnieje również jeden bardzo przydatny widżet do upsell produktu, który daje swobodę korzystania z funkcjonalności WooCommerce Upsell. Należy jednak pamiętać, że projekt tych widżetów i stron WooCommerce jest ustalany przez motyw CSS i można go edytować za pomocą CSS.

Inne widżety są powszechne, takie jak mapy, akordeony, wezwania do działania, karty, widżety społecznościowe, karuzele itp.

Dzięki subskrypcji Pro otrzymujesz nie tylko Pro Page Builder, ale dostęp do wszystkich funkcji Pro, motywów Premium, CSS i widżetów.

Ceny i plany SiteOrigin Page Builder

SiteOrigin oferuje dwa modele cenowe. Pierwszym i najbardziej użytecznym jest Abonament Roczny, który występuje w 3 pakietach.

• Pojedynczy dla jednej witryny w cenie 29
• Biznes dla maksymalnie 5 witryn w cenie 49 USD
• Programista dla nieograniczonej liczby witryn w cenie 99 USD

Ponadto istnieje licencja jednoroczna, w której wszystko jest takie samo, z wyjątkiem tego, że nie jest to subskrypcja, ale rok aktualizacji i wsparcia.

• Pojedynczy dla jednej witryny w cenie 38
• Biznes dla maksymalnie 5 witryn w cenie 64 $
• Programista dla nieograniczonej liczby stron w cenie 128

Wymagania systemowe/hostingowe SiteOrigin

Chociaż trochę trudno jest znaleźć wymagania systemowe SiteOrigin. Z niektórych forów pomocy technicznej i komentarzy online wydaje się, że PHP 7.4 z co najmniej 512 MB pamięci PHP załatwi sprawę. Jednak do testów użyłem VultrHF z 2 GB pamięci PHP.

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

Zainstaluj i skonfiguruj Kreator Stron SiteOrigin

Jeśli chodzi o instalację i konfigurację, SiteOrigin oferuje coś interesującego, czego nie oferuje większość twórców stron.

Jeśli chodzi o wszystko w WordPress, powinieneś zainstalować bezpłatny SiteOrigin bezpośrednio z repozytorium, a następnie przesłać wersję Pro pobraną z konta SiteOrigin. Po zakończeniu instalacji postępuj zgodnie z instrukcjami i zainstaluj/aktywuj zalecane wtyczki.

Po pomyślnym zainstalowaniu pakietu wtyczek należy aktywować potrzebną licencję i widżety. Jeśli chodzi o licencję, należy ją od razu aktywować, a widżety możesz aktywować teraz lub później, gdy potrzebujesz niektórych z nich.

Wspaniałą cechą SiteOrigin jest to, że nie musisz aktywować widżetów, których nie potrzebujesz, a dzięki temu możesz zaoszczędzić trochę zasobów i mieć funkcjonalne tylko te opcje, których potrzebujesz. Niebieskie są aktywne, a szare to nieaktywne widżety.

Gdy skończysz, możesz zacząć tworzyć swoją witrynę, korzystając z narzędzia do tworzenia stron SiteOrigin. Przejdź do Strony → Dodaj nową i klikając strzałkę rozwijaną, otrzymasz propozycję dodania nowej strony za pomocą Kreatora Stron SiteOrigin i Edytora Bloków → wybierz Kreator Stron SiteOrigin.

Osobiście nie jest największym fanem konstruktorów stron backendowych w erze front-end builderów. Oznacza to jednak, że zużyje mniej zasobów i będzie lżejszy dla twojego serwera. Nie tak głodni jak budowniczowie w ogóle.

Tak wygląda kreator stron w trybie edycji na żywo, który jest przydatny. Edytor zaplecza jest dość trudny i czasochłonny, ponieważ za każdym razem musisz stuknąć podgląd, aby zobaczyć wprowadzone zmiany.

Kiedy klikniesz stronę Edytuj, znajdziesz się w edytorze zaplecza, stamtąd po prostu kliknij Edytor na żywo z paska narzędzi i znajdziesz się w nim.

Po lewej stronie masz podobny pasek boczny jak Customizer, z którego faktycznie budujesz witrynę, a po prawej stronie przeładuje widok, aby wyświetlić zmiany po wprowadzeniu jakichkolwiek zmian.

Nie obsługuje żadnego rodzaju przeciągania i upuszczania bezpośrednio w witrynie, ale wszystko należy wykonać za pomocą dostosowywania paska bocznego po lewej stronie.

W lewym górnym rogu zobaczysz pasek narzędzi z 4 elementami. Od lewej do prawej zrobiliby co następuje.

Ikona koła zębatego otworzy dostępne widżety, które możesz wstawić do utworzonych wierszy. Możesz zobaczyć zarówno widżety WordPress, jak i SiteOrigin w tym samym miejscu. Możesz jednak wybrać po lewej stronie, aby zobaczyć tylko WordPress lub tylko SiteOrigin.

Następna ikona to Burger, który doda nowy rząd i to jest moment, w którym wybierasz układ rzędu. Nie martw się, jeśli musisz zmienić układ, możesz to zrobić w dowolnym momencie później.

Po kliknięciu ikony układu faktycznie otworzy się opcja importowania/eksportowania istniejącego układu. Zauważyłem, że w SiteOrigin brakuje więcej układów i bardziej nowoczesnych projektów. Ponadto z tego narzędzia możesz klonować istniejące strony, które już utworzyłeś lub odbijać sekcje/bloki.

Ostatnia ikona to Historia, miejsce, w którym możesz cofnąć to, co zrobiłeś, jeśli nie lubisz wyników lub po prostu popełniłeś błąd.

Wydajność Kreatora Stron SiteOrigin w Cloudways

Zgodnie z oczekiwaniami, SiteOrigin działa całkiem nieźle, ponieważ nie ma zbyt dużego rozrostu w kodzie i jest dość prosty, co jest jednocześnie zaletą i wadą. Musimy wspomnieć, że nie zrobiliśmy żadnej optymalizacji obrazu.

– Wyniki SiteOrigin na GTMetrix

– Wyniki SiteOrigin w narzędziach Pingdom

– Wyniki SiteOrigin na WebPageTest

SiteOrigin Page Builder Opinie użytkowników

I zawsze jedną z rzeczy, które należy sprawdzić przed zainstalowaniem jakiejkolwiek wtyczki, są recenzje i oceny w repozytorium wtyczek WordPress.org. W przypadku SiteOrigin do tej pory pojawiły się 922 5-gwiazdkowe oceny, a ostatnie recenzje są niesamowite.

Streszczenie

Jeśli potrzebujesz lekkiego narzędzia do zbudowania prostej strony internetowej lub strony docelowej, SiteOrigin może być dla Ciebie idealnym wyborem. Minusem jest to, że nie oferuje kreatora nagłówków i stopek, więc potrzebujesz motywu, który umożliwi edycję nagłówka i stopki Twojej witryny.

Krzywa uczenia się jest stroma i potrzebujesz wcześniejszego doświadczenia z WordPressem oraz zrozumienia widżetów i elementów. Brak edytora front-end jest również czynnikiem ograniczającym dla początkujących i zdecydowanie wymaga pewnej wiedzy i umiejętności CSS, aby efekt końcowy wyglądał niesamowicie. Jednak z drugiej strony, jako programista, większość funkcji jest dość wygodna, chociaż nie jest zbyt intuicyjna dla początkujących.

Ekosystem wokół SiteOrigin nie jest tak duży, jak w przypadku niektórych innych kreatorów stron, ale musimy wziąć pod uwagę, że ma 1 milion aktywnych instalacji dla wersji bezpłatnej i 900.000 dla pakietu widżetów, a niektórzy z zewnętrznych autorów mają ponad 30.000 aktywne instalacje.