Oxygen Builder Test & Erfahrungsbericht

«Wenn du es mit WordPress machen kannst, kannst du es mit Oxygen machen». Das sind die Versprechen von Soflyy, dem Entwickler des Oxygen Builders für WordPress. Das Hauptargument welches mich jedoch überzeugt hat, ist die blitzschnelle Performance. Mit Oxygen entwickelte WordPress-Seiten sollen massiv leichter und damit schneller sein als Websites mit Avada, Elementor, Divi oder Beaver Builder. Also habe ich mich aufgemacht, meine eigene Website neu mit Oxygen zu bauen und somit meinem geliebten Avada-Theme den Rücken zu kehren.

Vorab sollte euch dieser Vergleich von Google Page Speed Insights (Lighthouse) zum Weiterlesen animieren:

Generelles zum Oxygen Builder

Oxygen ist im Gegensatz zu Avada nicht ein Theme, sondern ein Plugin. Bei der Installation von Oxygen werden Themes komplett deaktiviert. Hat man also bei Avada die Theme-Installation und zwei zusätzliche Plugins (Avada Core und Avada Builder), ist Oxygen nur ein einziges Plugin. Es gibt dazu jedoch Erweiterungen für Gutenberg oder WooCommerce.

So viel kostet Oxygen

Oxygen baut auf eine «Lifetime Unlimited License», was mir sofort sympathisch war. Das heisst, man zahlt nur einmal und kann Oxygen auf so vielen Websites wie man will brauchen – mit lebenslangen Updates. Das Komplett-Paket mit Gutenberg- und WooCommerce-Integration kostet gerade mal 229 Dollar. Hier kaufen!

Die Website-Struktur von Oxygen

Ähnlich wie in Elementor, setzt Oxygen auf Templates. Das erste Template ist immer das Haupttemplate, welches Header und Footer enthält, sowie alle anderen Elemente, welche global erscheinen sollen (beispielsweise Popups).

Wenn du Blogs, Portfolios oder andere Custom Post Types verwendest, kannst du dafür anschliessend weitere Templates bauen – das gilt auch für die 404-Seite sowie Suchresultate.

Einzelne Seiten, wie beispielsweise die Homepage oder Über-uns-Seite, baust du direkt mit Oxygen ohne Verwendung von Templates.

Der Oxygen Builder

Nun geht es ans Eingemachte: Der Oxygen Builder. Ich schneide hier kurz die wichtigsten Punkte und auch Vorteile an.

Struktur

Das Struktur-Panel wurde für mich innerhalb kürzester Zeit unverzichtbar. Es ermöglicht eine bessere Übersicht über den Aufbau deiner Website. Hier findest du alle deine Elemente, kannst sie umbenennen, umplatzieren, duplizieren und bearbeiten.

Edit Panel

Die Magie passiert im Edit-Panel, wo Elemente bearbeitet werden können. Hier findest du quasi alle wichtigen Bearbeitungsmöglichkeiten, auf die ich hier nicht weiter eingehen werden. Der Clou daran ist aber, dass die Einstellungen klassenspezifisch sind. In meinem Fall habe ich eine zusätzliche Klasse namens agenza-box eingefügt. Ich style jetzt mein Element, in diesem Fall ein Div, so, wie ich es viel. Nun kann ich dieselbe CSS-Klasse auf beliebig viele andere Elemente anwenden, die dann immer gleich aussehen. Wenn ich später eine Änderung vornehme, wird es logischerweise auf der ganzen Website geändert.

Oxygen macht es zudem möglich, auf allen Endgeräten separate Einstellungen vorzunehmen, damit bei der responsiven Umsetzung deiner WordPress Website alles seinen Platz hat.

Elemente

Oxygen hat eine Vielzahl von Elementen wie Headings, Buttons, Images etc., allerdings weitaus weniger als Avada oder Elementor. Wer aber einige Programmierkenntnisse hat, kann effektiv jedes beliebige Element selber bauen. Oder man greift auf Add-ons wie OxyExtras zurück, welche zusätzliche vorgefertigte Elemente zur Verfügung stellen.

Desweiteren bietet Oxygen eine Design-Library mit einer Vielzahl an vordefinierten Websites und Elementen.

Oxygen Tutorials, Hilfe und Support

Oxygen bietet auf seinem YouTube-Kanal haufenweise informative Videos. Somit lernst du Oxygen schnell und weisst, wie man das Maximum herausholen kann.

Das Support-Team antwortet normalerweise innerhalb von 24h mit hilfreichen Tipps und Verbesserungsvorschlägen. Probleme sind somit schnell gelöst.

Andererseits zählt die offizielle Oxygen User Group auf Facebook bereits über 30’000 Mitglieder. Ich habe selber bereits eine Frage gestellt und erhielt innerhalb von Minuten hilfreiche Antworten der Community-Mitglieder

Gutenberg-Integration

Mit dem Oxygen Gutenberg Plugin hast du die Möglichkeit, Elemente im Oxygen Builder zu gestalten, und diese danach im Gutenberg-Editor von WordPress zu verwenden. Ich schreibe diesen Blog-Artikel gerade innerhalb Gutenberg. Der gelbe Block ganz unten habe ich mit Oxygen gestaltet. Mit diesem Feature kannst du deinen Kunden viel Freiheit in der Gestaltung von Blog-Beiträgen oder Seiten geben – mit vorgestalteten Elementen.

WooCommerce-Integration

Oxygen bietet mit dem WooCommerce-Add-On eine vollständige Integration für die Gestaltung eines Webshops. Ich habe mich mit diesem Thema aber aktuell noch nicht befasst (Update folgt).

Performance und SEO

Oxygen ist extrem schlank und lädt nur die notwendigsten Skripte. Somit bietet es generell schnellere Ladezeiten als Avada oder Elementor. Aber: Oxygen macht langsame Websites nicht automatisch schnell. Wenn deine Website mit zu grossen Daten oder viel zu vielen JavaScript-Dateien überladen ist, wird die Website auch mit Oxygen nicht schnell laden.

Trotz einigen Animationen wie Lottie, Rellax (Parallax), Slider sowie MouseMouve habe ich einen Page Speed Score von 90 erreicht – auch dank der Hilfe des Optimierungs-Plugins WP Rocket.

Oxygen funktioniert nahtlos mit YOAST SEO, welches ich schon vorher gebraucht habe. Ich musste hier keine zusätzlichen Anpassungen vornehmen. Welche Auswirkungen der Umbau meiner Website von Avada auf Oxygen in den Suchergebnissen hat, kann ich leider noch nicht beurteilen.

Fazit

Oxygen hat viele Vorteile, wer aber keine Programmierkenntnisse hat, wird ziemlich schnell frustriert sein. Kenntnisse in HTML/CSS sind Pflicht! Ich selbst habe beim Entwickeln meiner Website mit Oxygen jedoch auch viel über Programmierung, JavaScript, PHP und Performance gelernt. Wenn man es richtig anwendet, kann man mit Oxygen wirklich alles machen. Mir macht es auf jeden Fall Spass!