So verwenden Sie SiteOrigin Page Builder mit WordPress

Wie andere WordPress-Seitenersteller ist SiteOrigin hier, um Ihnen dabei zu helfen, eine leistungsstarke und reaktionsschnelle Website mit etwas CSS und null Programmierkenntnissen zu erstellen. Es gibt einige Themen von deren Ende Sie verwenden können (sowohl kostenlos als auch Premium) sowie kostenlose und Pro-Plugins zum Erstellen von Seiten.

Ich habe die Pro-Version von SiteOrigin getestet und eine Landingpage erstellt. Es kommt mit der Drag-and-Drop-Funktion und funktioniert mit jedem Thema und Sie können alle Free-, Pro- und WordPress-Widgets gleichzeitig verwenden. Lesen wir diesen Artikel, um mehr über die Installation und Konfiguration von SiteOrigin mit WordPress zu erfahren.

Warum SiteOrigin Page Builder wählen?

Die Erstellung der Site beginnt mit der Symbolleiste im WordPress-Editor, mit der wir alle vertraut sind, sowohl Classic als auch Gutenberg. Es generiert eine kleine Menge an Ausgabecode und ist nicht aufgebläht, aber jede Zeile des Ausgabecodes ist so weit wie möglich für einen One-Page-Builder optimiert.

Es bietet eine Live-Vorschau jeder von Ihnen vorgenommenen Änderung, da es keinen Front-End-Builder hat.

Sie können auch ganz einfach den Verlauf überprüfen und zu einem früheren Design zurückkehren, wenn Sie mit dem, was Sie getan haben, nicht zufrieden sind. Außerdem verwendet es wie üblich Zeilen und Widgets wie andere Seitenersteller.

Funktionen von SiteOrigin Page Builder

Die kostenlose Version von SiteOrigin kommt mit ziemlich begrenzten Optionen "Widgets", aber mit der Pro-Version haben Sie eine Reihe nützlicher Add-On-Widgets, um Ihre Site mit Leichtigkeit zu erstellen.

Benutzerdefinierter Beitragstyp-Generator

Eine der beliebtesten und nützlichsten Funktionen von SiteOrigin ist Custom Post Type Builder mit wiederverwendbaren Page Builder-Layouts und WooCommerce-Vorlagen. Es unterscheidet sich ein wenig von anderen Tools und ich werde etwas tiefer erklären, wie man es benutzt.

Es sind wichtige Schritte zu befolgen, damit Sie in SiteOrigin eine benutzerdefinierte Vorlage für den Posttyp erstellen können.

Schritt 1

Sie müssten einen neuen benutzerdefinierten Beitragstyp hinzufügen, das Beitragstyp-Layout mit Page Builder erstellen und die Anzeigeeinstellungen für den Beitragstyp auswählen.

Navigieren Sie in Ihrem WordPress-Dashboard zu Tools → Post Types und klicken Sie auf die Schaltfläche Add New, nennen Sie sie beispielsweise Portfolio. Klicken Sie nun auf die Registerkarte Page Builder neben den Registerkarten Text und Visuell, verwenden Sie die Schaltflächen Page Builder Widget hinzufügen und Zeile hinzufügen, um Ihr benutzerdefiniertes Portfolio-Posttyp-Layout zu erstellen.

Bitte beachten Sie, dass alle Inhalte, die Sie der Vorlage hinzufügen, in jedem zukünftig veröffentlichten Portfolio-Post angezeigt werden. Es ist also sehr nützlich, wenn Sie auf jeder dieser Seiten einen bestimmten Inhaltsblock anzeigen möchten, z.

Schritt 2

Sie müssen wissen, wie Sie einem von Ihnen erstellten benutzerdefinierten Beitragstyp Inhalt hinzufügen.

Sobald Sie das Portfolio mit benutzerdefiniertem Beitragstyp erstellt haben, können Sie das Portfolio-Element in der linken Seitenleiste Ihres WordPress-Dashboards sehen. Klicken Sie darauf und dann auf Neu hinzufügen.

Wenn Sie Ihrem Portfolio-Element einen Namen geben, können Sie ihm Inhalte hinzufügen. Denken Sie daran, dass Sie nur Widgets bearbeiten können, die nicht Teil der globalen Vorlage sind, und diese Widgets werden mit Text lesen gekennzeichnet. Und zu guter Letzt, wie man diese Beiträge zu einem Post-Karussell oder einem Post-Loop-Widget hinzufügt.

Post-Loop-Widget

SiteOrigin enthält das Post Loop Widget, das jedoch auf Loop-Vorlagen innerhalb des aktiven Themes angewiesen ist.

Um ein Post Loop Widget einzufügen, fügen Sie einfach eine Zeile auf einer Seite oder einem Post hinzu, wo sie angezeigt werden soll, wählen Sie das Blog- oder Grid-Layout aus und fertig. Als nächstes müssen Sie auswählen, welches Widget angezeigt werden soll, indem Sie auf die Schaltfläche Build post query klicken.

Klicken Sie im letzten Schritt auf Ihren benutzerdefinierten Beitragstyp aus der Dropdown-Liste für den Beitragstyp oben im Abfrageerstellungs-Widget.

Wenn Sie dies im Post-Karussell tun möchten, besteht der einzige Unterschied darin, das Post-Karussell-Widget anstelle von Post Loop auszuwählen, der Rest der Prozedur ist gleich.

WooCommerce Template Builder

WooCommerce-Vorlagen ermöglichen die Erstellung schöner WooCommerce-spezifischer Seiten und eines einzigen visuellen Erscheinungsbilds des Produkts. Die Oberfläche des WooCommerce Template Builder ist in sieben Registerkarten unterteilt:

1. Produkt
2. Produktarchiv
3. Einkaufen
4. Wagen
5. Leerer Warenkorb
6. Auschecken
7. Mein Konto

Für WooCommerce werden alle tatsächlichen Einzelartikel, die Sie zum Erstellen des einzelnen Produkts benötigen, als Widget verteilt, was Ihnen eine einfache Erstellung von Produkten ermöglicht. Sie können ein Layout erstellen und WooCommerce-Widgets wie Preis, SKU, In den Warenkorb, kurze / lange Beschreibung, Produktbild, Titel usw. verwenden.

Es gibt auch ein sehr nützliches Widget für ein Produkt-Upsell, das Ihnen die Freiheit gibt, die WooCommerce-Upsell-Funktionalität zu verwenden. Beachten Sie jedoch, dass das Design dieser Widgets und WooCommerce-Seiten durch Ihr Theme-CSS festgelegt wird und mit CSS bearbeitet werden kann.

Andere Widgets sind üblich wie Karten, Akkordeons, CTAs, Tabs, soziale Widgets, Karussells usw.

Mit dem Pro-Abonnement erhalten Sie nicht nur den Pro Page Builder, sondern auch Zugriff auf alle Pro-Funktionen, Premium-Themes, CSS und Widgets.

Preise und Pläne von SiteOrigin Page Builder

SiteOrigin bietet zwei Preismodelle an. Das erste und nützlichste ist ein Jahresabonnement, das in 3 Paketen erhältlich ist.

• Single für eine Seite zum Preis von $29
• Business für bis zu 5 Websites zum Preis von $49
• Entwickler für unbegrenzte Websites zum Preis von $99

Außerdem gibt es eine Einjahreslizenz, bei der Sie alles gleich haben, außer dass es sich nicht um das Abonnement, sondern um ein Jahr mit Updates und Support handelt.

• Single für eine Seite zum Preis von $38
• Business für bis zu 5 Websites zum Preis von $64
• Entwickler für unbegrenzte Websites zum Preis von 128 $

System-/Hosting-Anforderungen von SiteOrigin

Auch wenn es etwas schwierig ist, die Systemvoraussetzungen von SiteOrigin zu finden. Aus einigen Support-Foren und Online-Kommentaren geht hervor, dass PHP 7.4 mit mindestens 512 MB PHP-Speicher den Zweck erfüllen wird. Ich habe jedoch zu Testzwecken VultrHF mit 2GB PHP-Speicher verwendet.

Natürlich benötigen Sie die neueste WordPress-Version und alle anderen Plugins auf dem neuesten Stand.

SiteOrigin Page Builder installieren und konfigurieren

Wenn es um Installation und Konfiguration geht, bietet SiteOrigin etwas Interessantes, das die meisten Seitenersteller nicht bieten.

Wie bei allem in WordPress sollten Sie SiteOrigin kostenlos direkt aus dem Repository installieren und anschließend die Pro-Version hochladen, die Sie von Ihrem SiteOrigin-Konto heruntergeladen haben. Nachdem Sie mit der Installation fertig sind, befolgen Sie die Schritte und installieren/aktivieren Sie die empfohlenen Plugins.

Nachdem Sie das Plugin-Bundle erfolgreich installiert haben, sollten Sie die benötigte Lizenz und die benötigten Widgets aktivieren. Die Lizenz muss sofort aktiviert werden und die Widgets können Sie jetzt oder später aktivieren, wenn Sie einige davon benötigen.

Das Tolle an SiteOrigin ist, dass Sie nicht benötigte Widgets nicht aktivieren müssen. Dadurch sparen Sie einige Ressourcen und haben nur die Funktionen, die Sie benötigen. Die blauen sind aktiv und die grauen sind inaktive Widgets.

Wenn Sie fertig sind, können Sie mit dem Erstellen Ihrer Site mit dem SiteOrigin-Seitenersteller beginnen. Navigieren Sie zu Seiten → Neu hinzufügen und indem Sie auf den Dropdown-Pfeil klicken, wird Ihnen angeboten, neue Seite mit SiteOrigin Page Builder und Block Editor hinzuzufügen → wählen Sie SiteOrigin Page Builder.

Persönlich nicht der größte Fan von Backend-Page-Buildern in der Ära der Front-End-Builder. Dies bedeutet jedoch, dass es weniger Ressourcen verbraucht und für Ihren Server leichter ist. Nicht so hungrig wie Bauherren im Allgemeinen.

So sieht der Page Builder im Live-Bearbeitungsmodus aus, der nützlich ist. Der Back-End-Editor ist ziemlich schwierig und zeitaufwändig, da Sie jedes Mal auf die Vorschau tippen müssen, um alle vorgenommenen Änderungen anzuzeigen.

Wenn Sie auf die Seite Bearbeiten klicken, landen Sie im Back-End-Editor, von dort klicken Sie einfach in der Symbolleiste auf Live-Editor und Sie landen darin.

Auf der linken Seite haben Sie eine ähnliche Seitenleiste wie der Customizer, von der aus Sie die Site erstellen, und auf der rechten Seite wird die Ansicht neu geladen, um Änderungen anzuzeigen, nachdem Änderungen vorgenommen wurden.

Es unterstützt keine Art von Drag & Drop direkt in der Site, aber alles muss über den linken Sidebar-Anpasser erfolgen.

In der oberen linken Ecke sehen Sie die Symbolleiste mit 4 Elementen darin. Von links nach rechts würden sie Folgendes tun.

Das Zahnradsymbol öffnet verfügbare Widgets, die Sie in von Ihnen erstellte Zeilen einfügen können. Sie können sowohl WordPress-Widgets als auch die SiteOrigin-Widgets an derselben Stelle sehen. Sie können jedoch auch auf der linken Seite auswählen, um nur WordPress oder nur SiteOrigin anzuzeigen.

Das nächste Symbol ist ein Burger, der eine neue Zeile hinzufügt und das ist der Moment, in dem Sie das Zeilenlayout auswählen. Machen Sie sich keine Sorgen, wenn Sie das Layout ändern müssen, dies kann jederzeit später erfolgen.

Nachdem Sie auf das Layout-Symbol geklickt haben, wird tatsächlich die Option zum Importieren/Exportieren des vorhandenen Layouts geöffnet. Was mir aufgefallen ist, ist, dass SiteOrigin mehr Layouts und modernere Designs fehlt. Außerdem können Sie mit diesem Tool vorhandene Seiten klonen, die Sie bereits erstellt haben, oder Abschnitte/Blöcke spiegeln.

Das letzte Symbol ist Verlauf, der Ort, an dem Sie Ihre Aktionen rückgängig machen können, wenn Ihnen die Ergebnisse nicht gefallen oder Sie einfach einen Fehler gemacht haben.

SiteOrigin Page Builder-Leistung auf Cloudways

Wie erwartet funktioniert SiteOrigin recht gut, da es nicht viel Aufgebläht im Code hat und recht einfach ist, was gleichzeitig der Vor- und Nachteil ist. Wir müssen erwähnen, dass wir keinerlei Bildoptimierung vorgenommen haben.

– Ergebnisse von SiteOrigin auf GTMetrix

– Ergebnisse von SiteOrigin auf Pingdom Tools

– Ergebnisse von SiteOrigin auf WebPageTest

SiteOrigin Page Builder-Benutzerbewertungen

Und was Sie immer überprüfen sollten, bevor Sie ein Plugin installieren, sind Rezensionen und Bewertungen im WordPress.org-Plugin-Repository. Für SiteOrigin gibt es bisher 922 5-Sterne-Bewertungen und die jüngsten Bewertungen sind großartig.

Zusammenfassung

Wenn Sie ein leichtes Tool zum Erstellen einer einfachen Website oder einer Landingpage benötigen, ist SiteOrigin möglicherweise die perfekte Wahl für Sie. Der Nachteil ist, dass es keinen Kopf- und Fußzeilen-Builder bietet. Sie benötigen also ein Design, das die Bearbeitung der Kopf- und Fußzeile Ihrer Website ermöglicht.

Die Lernkurve ist steil und Sie benötigen einige Vorkenntnisse mit WordPress und ein Verständnis von Widgets und Elementen. Das Fehlen eines Front-End-Editors ist auch ein limitierender Faktor für Neulinge und erfordert definitiv einige CSS-Kenntnisse und -Fähigkeiten, um Ihr Endergebnis großartig aussehen zu lassen. Auf der anderen Seite als Entwickler sind die meisten Funktionen jedoch recht praktisch, auch wenn sie für Anfänger nicht sehr intuitiv sind.

Das Ökosystem um SiteOrigin ist nicht so groß wie bei einigen anderen Seitenerstellern, aber wir müssen berücksichtigen, dass es 1 Million aktive Installationen für die kostenlose Version und 900.000 für das Widget-Bundle hat und einige der externen Add-On-Autoren über 30.000 haben aktive Installationen.