web bastler logo weiß mit umrandung
web
bastler
Oxygen Builder

Oxygen Builder 
Der beste Page Builder 2022 für WordPress

Letztes Update: 05.22 | Autor: Manuel
Sicher fragen Sie sich wie man im  Jahr 2022 eine Wordpress Webseite ohne Theme betreiben kann. Wie man so einen enormen Pagespeed erreichen kann, wo selbst Geschwindigkeits Enthusiasten vor Neid erblassen.

Genau so wie bereits in den Jahren 2021 & 2020.

Wäre ich Houdini könnten Sie nun durch Ihre Finger schauen, jedoch will ich nicht so eine Spaßbremse sein und Ihnen dennoch meine Tricks verraten.

Für all das gibt es eine simple Antwort.

Oxygen Builder

Habe ich Ihr Interesse geweckt?
Inhaltsverzeichnis

Resümee nach mehr als 2 Jahren Erfahrung mit Oxygen Builder

Fazit von Oxygen Builder

Gleich vorweg ich hasse nichts mehr als wenn jemand die Spannung ins Endlose ziehen will … Den Höhepunkt unnötig hinauszögern will … Warum soll man etwas schönes zurückhalten?! … Deswegen sehen Sie gleich das Fazit sowie Vor/Nachteile von Oxygen.

Sollten Sie dennoch mehr Infos haben wollen, können Sie gerne weiterlesen.
oxygen logo

Vorteile

Sehr schnell dank sauberen Code
Preis/Leistung unschlagbar
Ausgezeichneter Support
Hilfsbereite und ständig wachsende Community
Deutsche Facebookgruppe

Nachteile

Lernkurve (Individiuelle Änderungen schwer umzusetzen ohne HTML/CSS Kenntniss)
Wie bei jedem Page Builder vergößert sich das DOM
Oxygen ist kein normaler Page Builder. Mir ist durchaus bewusst, dass Page Builder generell nicht den besten Ruf haben.

“Wofür einen Page Builder? Bei einem Theme muss ich nichts umbauen.” “Page Builder? Nein danke davon wird meine Webseite nur langsam”

Diese und ähnliche Erfahrungen habe ich selbst erlebt. Lange Zeit habe ich mit Elementor gearbeitet da ich davon ausging, dass es nichts besseres gibt und Elementor das Maß aller Dinge ist im Bereich Page Buildern für WordPress.

Gottseidank habe ich mich eines besseren belehren lassen.
Webseite von Oxygen Builder
„Den Mitbewerbern meilenweit voraus dank Oxygen Builder.“

Die 4 besten Vorteile

Vorteile von Oxygen Builder

Hier die Hard Facts: 

Im Vergleich zu anderen Page Buildern wie Elementor,Divi, Zion, Bricks oder Beaver hat Oxygen enorme Vorteile … und nein, ich bekomme keinen Cent für diesen Beitrag ( zumindest jetzt noch nicht)
1.

Keine Abhängigkeit von Themes

Da Oxygen automatisch das Wordpress Theme deaktiviert, ist man nicht mehr davon abhängig und somit ungebunden. Es entstehen keine zusätzliche Kosten welche man meist jährlich in Themes investieren muss, wenn man etwas qualitativ hochwertiges haben will.
oxygen theme deaktiviert
Theme deaktiviert durch Oxygen Builder
oxygen theme deaktiviert
GTMetrix Score durch Oxygen Builder
2.

Enorm schlank, enorm schnell

Oxygen gibt in der Regel 5-10 mal weniger Codes aus als andere Page Builder. Aufgrund dessen ist die Webseite um ein vielfaches kleiner und die Anzahl der HTTP Anforderungen verringert sich enorm.(CSS-Dateien & Java Script-Dateien sowie DOM Elemente)

Böse Zungen würden behaupten, dass dies vergleichbar mit einer diskutierenden Frau wäre, welche einfach nicht zur Pointe kommen will
Performance-Vergleich Video
3.

Günstig aber keineswegs billig

Bei Oxygen zahlt man eine einmalige Gebühr/Lifetime.

Sie haben richtig gelesen. Es kommen keine weiteren versteckten Kosten auf Sie zu. Einmal die Lizenz bezahlen und auf unlimitierten Seiten benutzten sowie Updates auf Lebzeit erhalten.

Klingt zu schön um wahr zu sein oder?

Natürlich ist die Lizenz in meinem Angebot bereits integriert. Auf Sie kommen keine weiteren Kosten zu.
Preise Oxygen Builder
oxygen builder preis
Preise Stand 05.2022
Verbesserung
Vebesserung Code Editor
Benutzeroberfläche Oxygen 4.0
Benutzeroberfläche Oxygen 4.0
4.

Ständige Verbesserung/Fehlerbehebung

Wo andere sich auf Lorbeeren ausruhen, gibt das Team um Oxygen nochmals richtig Gas. Mit Version 3.8 wurden unzählige Verbesserungen durchgeführt. (Verbesserung Code Editor, Drag&Drop "Smoothness", einfachere Textbearbeitung, Sperre für Selektoren ...)

Einer der größten Kritikpunkte der Community (Stand 11.2021) war die Geschwindigkeit im Bearbeitungsmodus / Strukurpanel.  Mit Version 3.9 gehört dies nun endlich der Vergangenheit an. Das Team von Louis Reingold hat somit gezeigt, wie wichtig ihnen die Mitglieder der Community sind. 

Leider war das Problem mit der langen Ladezeit bis zum Öffnen der Benutzeroberfläche immer noch da. Da Sie ein schlauer Fux sind dürfte Ihnen sofort aufgefallen sein, dass ich in der Mitvergangenheit schreibe …

Mit Version 4.0 wurde ein riesen Schritt gegen die letzte Performancebremse eingeführt .

Bis vor dem Release wurden die Desings/Templates in so genannten Shortcodes abgespeichert. Mit der Einführung von Shortcodes wurden XML-basierte Formate durch das schnellere JSON-Format ersetzt, wodurch einige Zwischenprozesse abgeschnitten wurden.

David Hasselhoff würde der Neid fressen, da Sie nun permanenten Turbo Boost Mode zur Verfügung haben.

Als Schmankerl wurde auch die Benutzeroberfläche neu gestaltet, um eine bessere Benutzererfahrung zu bieten.

Mankos bei Oxygen Page Builder

Gibt es auch Nachteile von Oxygen?

Um ehrlich zu sein gibt es meiner Meinung nach einen einzigen Nachteil (wenn man dies als Nachteil sehen will) 

Die Lernkurve ist im Vergleich zur Konkurrenz anderer Page Builder um einiges höher. 

Wenn man diese Hürde einmal überwunden hat erhält man als Belohnung den mit Abstand besten Page Builder, welchen es zur Zeit gibt. 

Lange Zeit wurde bemängelt, dass es keine "Zurück Funktion" (undo) gibt welche den Editier-/Löschvorgang rückgängig macht. Eigentlich in jedem Editierprogramm Standard… Sollte man meinen… 

Dieses Manko gehört Gottseidank seit der Version 3.4 der Vergangenheit an. Das heißt, dass man sich ohne schlechtem Gewissen im Builder austoben kann und sich nicht fürchten muss, dass ein Speichervorgang verschwitzt wurde und somit die getätigte Arbeit für die Fisch war.

Auch das Repeater-Element wurde mit Oxygen 4.0 einem seit langem notwendigen Facelift unterzogen. Die Problematik, dass der Repeater doppelte IDs produziert hat, gehört nun endlich der Vergangenheit an.
lernkurve
codeblock in der ansicht dracula
Codeblock in der Ansicht Dracula.

Basics

Brauche ich Grundkenntnisse für Oxygen?

Kurz und knapp ja.

Um erfolgreich sein zu können sollten Sie Grundkenntnisse im Bereich HTML / CSS / JS / PHP mitbringen. 

Seit Version 3.8 gibt es zusätzlich unterschiedliche Designs des Codeblocks sowie kleinere Helfer. (z.B.: automatisches Schließen von Klammern, Hervorheben von Übereinstimmungen des Codes) Zum Vergleichen mit einem Besuch beim Schönheitschirurgen.

Selbst wenn Sie dies nicht besitzen steht nirgends in einen Stein fest gemeißelt, dass Sie es sich nicht aneignen können. 

Dummes Gerede? Kaum vorstellbar. 

Ich bin selbst ein Vorzeigebeispiel dafür … aus eigener Erfahrung kann ich sagen, dass ich Steine Ahnung von HTML/CSS hatte …
Hatte. 

Nach einigen Online Kursen kann ich mit Stolz behaupten, dass sich das Reinknien bezahlt gemacht hat. Heute gewinne ich jedes Schnick Schnack Schnuck Duell mit Stein. 

Meine Empfehlung ist Traversy Media.  Nach diesem abgeschlossenen Kurs bei Udemy war das Arbeiten mit Oxygen kinderleicht für mich.
„Wenn Performance ein wichtiger Faktor ist und nicht scheu ist die Lernkurve zu meistern, für den ist Oxygen der richtige und meiner Meinung beste Page Builder in 2022 für WordPress.“
Weitere Tipps für optimale Pagespeed Optimierung

Wenn mal Unterstützung benötigt wird

Wie sieht der Support aus? Was wenn ich Hilfe benötige?

Mehr als eine berechtigte Frage … Oft kommt es vor, dass man vor einer Hürde steht und diese schwer ohne fremde Hilfe überwinden kann. In einem Computerspiel würde man zu Cheats greifen, im Bodybuilding zu Anabolika, vom Hören/Sagen beim Beischlaf zu Potenzt Mitteln …

Kurz und knapp es gibt drei Möglichkeiten:

Oxygen bietet einen Support, welchen ich bis dato noch nirgends erlebt habe. Selten hatte ich die Erfahrung gemacht, dass es einen Mitarbeiter (beim Oxygen Team Phe Simmonds) gibt, welche so dermaßen Kundenfreundlich, Lösungsorientiert und zuvorkommend war.

Wie gesagt das war meine eigene Erfahrung.

Zum Glück war ich mit meiner positiven Erfahrung nicht alleine. Die Meinungen von vielen anderen Benutzern in der offiziellen Facebook Gruppe widerspiegeln sich.

Weiters sei noch erwähnt, dass das Team hinter Oxygen (Louis Reingold & Elijah Mills) sehr Nahe der Community ist und viel auf deren Meinung bezüglich Neuerungen oder Bugs hört.

Wenn die englische Sprache mehr Frust als Lust auslöst gibt es auch noch eine kleine deutsche Oxygen Community welche sich immer größerer Beliebtheit erfreut.

support oxygen phe
Erfahrung mit dem Oxygen Support
vergleich

Mitbewerber auf einen Blick

Wie ist der Vergleich von Oxygen mit anderen Page Buildern?

Ich fasse nochmals die Vor/Nachteile zusammen welche Oxygen im Vergleich zu Elementor, Divi, Beaver Builder, Zion Builder, Bricks, ... hat.

Vorteile:

  • Perfomance
  • Preis/Leistung
  • Support
  • Community

Nachteile:

  • Lernkurve
Nüchtern betrachtet ist es, wie so vieles im Leben reine Geschmacksache. Wenn einem Geschwindigkeit/Performance wichtig ist führt kein Weg an Oxygen vorbei. Zu groß ist der Abstand im Vergleich zu Elementor oder Divi.  

Kurz gefasst wenn man auf der Überholspur fahren will dann Oxygen. 

Sollte man eher der rechte Spur Fahrer sein, immer brav unter 80 auf der Tangente fahren und somit den Fliesverkehr behindern wollen dann sollte man Elementor/Divi näher in Betracht ziehen. 

Man könnte meinen ich bin ein Fan von Oxygen und ein Hater von Elementor/Divi/Zion Builder/Bricks/Beaver Builder/ … 

Gut erkannt ;) 

Klugscheissern kann jeder, was zählt sind Fakten.

Optimal ausgelegt auf SEO-Onpage

Oxygen und SEO?

Geschwindigkeit ist viel jedoch nicht alles. Berechtigterweise werden Sie sich fragen, wie Oxygen im Bereich SEO punktet. 

Kurz und schmerzlos … Perfekt. 

Nicht nur, dass die größten SEO Plugins kompatibel mit Oxygen sind ( SEOPress, Rankmath, Slim SEO - tut mir leid, aber YOAST ist für die Fisch, da es dermaßen zugebloated ist und mit Elementor vom Bloat her gleichgestellt ist) können auch noch HTML Strukturen perfekt eingestellt werden. 

DIVS können per tag als Header/Footer/Artikel/… gesetzt werden, Texte können als Paragraph/Überschriften/Listen oder generell benutzerdefiniert gewählt werden.

 Na wenn das nicht schon die halbe Miete ist um gefunden zu werden. 

Da wir nicht als Schnorrer rüber kommen wollen und in der Regel guter Rat teuer ist, geben wir natürlich auch eine Empfehlung für ein SEO Plugin ab. 

Wir verwenden seit dem Rankmath in der Pro Version nicht mehr kostenlos ist, das Plugin SEOPress. Es ist schlank Programmiert, schnell und vor allem sehr Preiswert. (Stand 11.21 39$ pro Jahr) 

Preis/Leistung unschlagbar.
Mehr über SEOPress
tag auswahl
Tag Auswahl der Section
seopress
Tag Auswahl der Section
oxygen designsets
Designsets in Oxygen

Templates

Designsets & Vorlagen von Oxygen

Was wenn es mal schneller gehen soll und nicht die Zeit vorhanden ist ein Design von Grund auf neu aufzubauen? 

Wenn Zeit Mangelware ist dann kommen sogenannte Designsets ins Spiel. 

Diese Vorlagen erleichtern ungemein den Arbeitsaufwand vom Erstellen der Webseite wenn Individualität nicht im Vordergrund steht. Und genau das ist auch der Nachteil an Designsets wenn man das überhaupt so sehen will. 

CSS-Klassen sowie IDs sind bereits vordefiniert sowie entstehen meist zusätzliche Kosten, da Designsets in der Regel von Dritt Entwicklern/Designern kreiert werden. 

Verstehen Sie mich nicht falsch, an und für sich ist das nichts schlechtes, jedoch wenn man zum Beispiel in einer Sandkiste sitzt will man seine Burg ja auch selber aufbauen und sich nicht mit den Restln des Vorgängers zufrieden geben.

Fairer Weise muss ich gestehen, dass meine Meinung sich meine Ansicht zu Designsets geändert hat. Jedoch nur im Bezug auf die Vordefinierten Klassen. Der Code fällt mit Benutzung von Utility Classes noch schlanker aus. 

Vergleichsweise wenn man permanent auf Diät ist.
Wer ein extremer Sparefroh ist kann auch auf die vorgefertigten Desingsets zurück greifen, welche von Haus aus bei Oxygen dabei sind. Diese halten sich jedoch meiner Meinung nach vom Design her sehr in Grenzen.

Meine Empfehlung:

Erweiterungen & Kompatibilitäten

Integrationen von Oxygen Builder

Mittlerweile(Stand 12.21) sind wir bei Version 3.9 von Oxygen angekommen und es strotzt nur so von Integrationen/Erweiterungen, welche für das WordPress Plugin vorhanden sind.
oxygen builder gutenberg
Kompatibilität mit Gutenberg
oxygen builder woocommerce
Kompatibilität mit WooCommerce

Gutenberg & WooCommerce Kompatibel

Sollten Sie weiterhin mit Gutenberg Editor von WordPress Ihre Beiträge editieren wollen, spricht absolut nichts dagegen. Oxygen ist seit der Version 3.0 zu 100% mit Gutenberg kompatibel. Einmal eingerichtet steht dem Editieren nichts mehr im Wege.

Online Shop gefällig?

Kein Problem mit Oxygen. Dank der Kompatibilität mit WooCommerce können Sie fröhlich Ihren Kunden weiterhin das Geld aus der Tasche ziehen. Sogar ein Mini-Warenkorb- sowie Cross-Selling Element ist seit dem letzten Update mit an Board.

Wenns jetzt nicht noch mehr in der Tasche rascheln wird, weiß ich auch nicht mehr weiter.

Advanced Queries

Mit Version 3.8 wurden die Advanced Queries zu Oxygen hinzugefügt, welche komplexe dynamische WordPress Abfragen von Repeater/Easy Post Element ohne Code (weitgehend) schreiben zu müssen, darstellen.

Was früher nur über mühsames Coding möglich war, geht heute nun mit wenigen Klicks. Beispiel gefällig?

Sie haben eine Seite, auf der ein Beitrag über das Thema "Klugscheißen" aus der Kategorie "Weisheiten fürs Leben" dargestellt wird.
Unter diesem Beitrag wollen Sie noch weitere Vorschauen der Kategorie "Weisheiten fürs Leben", jedoch ohne dem Beitrag "Klugscheißen" anzeigen lassen.

Dem Bild können Sie entnehmen, dass zu erst der jeweilige Beitrag ausgeschlossen und danach die Kategorie definiert wird.

Ich sagte ja, kinderleicht.
advanced queries
Maske zur Eingabe für Advanced Queries
composite elements libary
Auszug von Composite Elements Libary

Composite Elements Libary

Mit Version 3.7 wurde eine zusätzliche Bibliothek mit insgesamt 19 Elementen hinzugefügt, welche unter anderem mit von der Partie sind:
  • Mega Menü
  • Dynamic Slider
  • Image Comparison
  • Flip Box
  • Table of Contents
  • ....

Zusätzlich sei jedoch erwähnt, dass bei diesen zusätzlichen Elemente eine Jahresgebühr von aktuell 29$ fällig ist. 
Unter uns gesagt ein Fliegenschiss für das Gebotene.

Metabox

Lange Zeit galt Advanced Custom Field (ACF) als unangefochtener Platzhirsch, wenn es um frei definierbare Felder ging. Nach der Abschaffung des Lifetime Angebots von ACF nutzte Metabox die Gunst der Stunde und startete  via Appsumo durch und steigerte immer mehr ihren Bekanntheitsgrad. 

So schnell kanns gehn ...

Im direkten Vergleich mit ACF ist der größte Vorteil, dass  Custom Post Types sowie Taxonomys direkt via Metabox erstellt werde können und kein weiteres Plugin vonnöten ist.  Nach dem Motto "Weniger ist mehr".

Mit Version 3.9 wurde auch hier wiedermal auf die Community gehört und endlich in das Oxygen Universum integriert.
Mehr über Metabox
metabox
Metabox Menü

Wartung für Kunden

Mit Client Control optimale Zugriffsrechte für Kunden

Um dem Endkunden/Klient die Möglichkeit zu geben, direkt in der Benutzeroberfläche von Oxygen editieren zu können ohne Angst haben zu müssen, dass zB.: Grundelemente wie CSS-Klassen oder Conditions/Regeln gelöscht oder verschoben werden, wurde mit Version 3.6 die Client Control eingefügt.

Was bis dato nur über Dritt Plugins wie z.B.: Advanced Custom Fields (ACF) möglich war geht nun kinderleicht von der Hand ohne jeglichen HTML/CSS Kenntnisse.

Per Rollen Manager wird dem Kunden(selbst wenn dieser auch ein Admin ist) im Backend die Berechtigung gegeben um z.B.: Texte oder Bilder editieren jedoch nicht löschen zu können.

Angst müssen Sie maximal noch von Ihrer Frau haben wenn Sie wiedermal mit einem Fetzen nach Hause kommen … aber nicht das etwas auf Ihrer Webseite ungewollt gelöscht wird.
Mehr über Client Control
oxygen client control
Role Manager 

Erleichterungen für den Alltag

Plugins für Oxygen Builder

Im Grunde ist Oxygen alleine schon voll funktionstüchtig. Wenn es jedoch ein bisserl mehr sein darf, gibt es mittlerweile schon einige, jedoch nach wie vor überschaubare Plugins.

Die Plugins wurden zum Großteil von der Community entwickelt, welche zum Glück sich alle zum Ziel gemacht haben, dass die Performance sowie Funktionalität an erster Stelle stehen soll.

Meine empfohlene Plugins:

Hydrogen Pack

Hydrogen Pack ist im Grunde ein Plugin, welches unter anderem das Kopieren und Einfügen von Elementen ermöglicht. Und das muss nicht mal auf der gleichen Webseite sein. Sollten Sie Elemente von Webseite A auf Webseite B kopieren, können Sie dies ganz einfach mit diesem Plugin durchführen.

Weiters können Sie Tastenkombinationen für einen schnelleren Workflow belegen. Fairerweise muss hier erwähnt werden, dass Oxygen Version 4.0 auch mit diversen Tastaturkürzeln ausgestattet wurde.

Das absolute Highlight aber ist der Sandbox Modus. Sie wollen eine Änderung durchführen ohne dies jedoch für alle Besucher ersichtlich zu machen und nur gezielt einzelnen Besuchern zeigen? Kein Problem.

Dank diesem neuen Feature wird eine Vorläufige Version erstellt, welche nur über einen geheimen Link zugänglich ist. Sollten Sie mit der Änderung zufrieden sein können Sie ganz einfach per Drag die Sandbox Version zur Live-Version ändern.

Na wenn Ihnen da keiner abgeht ...
Hydrogen Pack
hydrogen sandbox
Einstellungen von Hydrogen Pack
oxy toolbox
Einstellungen von Oxy Toolbox

Oxy Toolbox

Oxy Toolbox ist ein weiteres Plugin, welches den Workflow um einiges erleichtert. 

Nicht nur, dass zahlreiche Funktionen vorhanden sind (Conditions/Bedingungen, Zurück nach Oben, Fortschrittsbalken anzeigen, Inhaltsverzeichnis, ...) können diese auch einzeln ein und ausgeschalten werden. Somit leidet maximal Ihr Geldbeutel unter dem Plugin, jedoch nicht die Performance. 

Weiters sei noch erwähnt, dass bezüglich Neuerungen sehr auf die Community gehört wird und Wünsche dementsprechend umgesetzt werden.

Editor Enhancer

Für mich seit eh und je unersetzlich. Die normale Benutzeroberfläche von Oxygen ist schon spitze. Mit dem Plugin Editor Enhancer wird die Benutzeroberfläche nochmals in ein neues Universum katapultiert.

Per Tab zwischen Templates hin und her springen sowie eine noch aufgeräumtere Benutzeroberfläche sind die Schmankerln, welche man erwarten kann.
Editor Enhancer
editor enhancer
Benutzeroberfläche in Oxygen mit Editor Enhancer
oxyextras
Einstellungen von Oxy Toolbox

Oxy Extras

Man könnte meinen wenn man sich das Plugin Oxy Extras genauer ansieht, dass man es mit einer klassischen Erweiterung von diversen Komponenten für Wordpress/Oxygen zu tun hat.

Könnte man(n)...

Nicht nur, dass dieses Plugin die Möglichkeit verschafft die Header Suche mit diversen Formen anzupassen oder Social Sharing ohne JS einzubinden schafft es Oxy Extas auch mit der Kombination aus animiertem Hamburger und "Off-Canvas-Slider" unzählige Arten von einem Responsiven Menü darzustellen.

Weiters sei noch erwähnt, dass der Support von der Qualität her sich nicht hinter dem offizielem Oxygen Team verstecken muss. Sridhar Katakam sowie David Browne bieten über die offiziele Facebook Gruppe von Oxy Extras einen erstklassigen Support an.

Langsam aber doch frage ich mich ob ich nicht Provisionen für meine ausgeschmückten Rezensionen verlangen sollte.
cross