OceanWP – Ein WordPress Theme (nicht nur) für Page Builder

Quelle: https://rockxx.de/oceanwp-ein-wordpress-theme-nicht-nur-fuer-page-builder/

• Jens
• 8. März 2018
• WordPress Theme Tipps
• 0 Kommentare

Ich sage es gleich vorweg: Ich bin ein großer Fan von OceanWP. Ich halte OceanWP derzeit für eines der besten kostenfreien Themes in der Theme Bibliothek von WordPress. Das Theme beeindruckt mit vielen Features, die es bereits von Hause aus mitbringt. Man mag es fast nicht glauben, dass es sich trotz dieses immensen Funktionsumfangs tatsächlich um ein kostenloses Theme handelt. Aber es ist so! Wem diese umfangreiche Funktionalität der kostenfreien Variante nicht ausreichen sollte, der kann sich zusätzlich kostenpflichtige Premium-Features über die Homepage des Themes besorgen. Das Theme eignet sich ebenfalls hervorragend für den Einsatz eines Page Builders, macht aber auch ohne einen solchen eine astreine Figur. In diesem Beitrag schaue ich mir dieses herausragende Theme mal etwas genauer an. Jedoch bevor ich loslege, hier der übliche Hinweis:

Der nachfolgende Beitrag stellt meine persönliche Meinung im Sinne eines Erfahrungsberichts und keine Produkt- und/oder Kaufempfehlung dar. Über ein normales Kundenverhältnis hinaus stehe ich in keiner geschäftlichen Beziehung zum Entwickler.

Für mich stellt sich die Herausforderung, wie ich die vielen Features von OceanWP an dieser Stelle angemessen vorstellen soll. Weil das Theme bereits in seiner kostenfreien Variante mit einem prall gefüllten Werkzeugkasten daher kommt, werde ich mich darauf konzentrieren und die kostenpflichtigen Premium-Features am Schluss des Beitrags nur kurz aufzählen. Das Theme liegt zum Zeitpunkt der Veröffentlichung dieses Beitrags in der Version 1.5.5 vor.

OceanWP – Ein WordPress Theme (nicht nur) für Page Builder

»Made with ♥ in France«, so heißt es im Footer auf der Homepage des Themes. Und in der Tat, es ist vor allem die Liebe zum Detail, die dieses Theme von Nicolas Lecocq auszeichnet. Dazu kommen dann Features, die auch oder gerade die anspruchsvollen Nutzer und Theme-Enthusiasten mit der Zunge schnalzen lassen. OceanWP ist auf Performance und Schnelligkeit hin optimiert und bis in kleinste Details über den Customizer individuell gestaltbar. Für diesen Funktionsumfang, den dieses Theme von Hause aus mitbringt, muss man andernorts oft auf kostenpflichtige Premium-Features zurückgreifen. Nicht so beim OceanWP Theme!

OceanWP verfügt über alle Features, die beim Einsatz eines Page Builders gefragt sind und wird auch explizit mit Blick auf diese Zielgruppe beworben. Hierbei scheint Nicolas insbesondere den Elementor Page Builder im Blick zu haben, was aber nicht heißt, dass die Verwendung anderer Page Builder nicht funktionieren würde. Mir drängt sich der Eindruck nur deshalb auf, weil unter den kostenpflichtigen Premium-Features spezifische Elementor Widgets vorgesehen sind und Homepage Templates, die nicht nur zu Demonstrationszwecken, sondern auch zur Verwendung (siehe weiter unten) zur Verfügung stehen, mit dem Elementor Page Builder gestaltet worden sind.

Der schnelle Blick auf das Frontend

Ich habe es mir angewöhnt, nach der Installation und Aktivierung eines neuen Themes, erst einmal einen schnellen Blick auf das Frontend zu werfen. So lässt sich überblicken, wie das Theme »out of the box« aussieht, bevor irgendwelche Einstellungen vorgenommen worden sind. OceanWP stellt sich bereits unmittelbar nach der Installation und Aktivierung als voll einsatzfähiges Theme dar, welches sich auch hinsichtlich Design und Layout bereits mehr als sehen lassen kann. Mir gefällt die schlichte Eleganz, die voreingestellte Typographie und das Design der Buttons. Ohne überhaupt einen Finger im Customizer gerührt zu haben, macht das Theme einen sehr aufgeräumten, ja edlen Eindruck eines professionell gestalteten Internetauftritts. In dieser Form ist mir das noch nicht oft begegnet. Meistens muss man dann doch noch einige Handgriffe im Customizer vornehmen, bevor ein vorzeigbares und veröffentlichungsreifes Ergebnis vorliegt.

Das Theme Panel von OceanWP

Nach der Installation und Aktivierung der empfohlenen und kostenlosen Erweiterung »Ocean Extra« hast Du Zugriff auf das Theme Panel im Backend Deiner WordPress Installation. Über dieses Theme Panel lassen sich die Grundfunktionen von OceanWP aktivieren oder deaktivieren.

Aktivieren und Deaktivierung von Panels, Scripts und Styles

Die Tatsache, dass Nicolas die Performance des Themes im Auge hat, zeigt sich bereits dadurch, dass man alle Panels im Customizer, aber auch Scripte und CSS Styles, die man nicht benötigt, deaktivieren kann. Nicht nur aufgrund der Performance, sondern auch hinsichtlich der Übersichtlichkeit macht es Sinn, Features und Funktionen, die nicht benötigt werden, auszuschalten. Es ist zwar nur ein kleines Detail und die Performance von OceanWP ist auch bei voll aktivierten Features hervorragend, aber es zeigt, wie Nicolas denkt und welche Philosophie er verfolgt.

My Library – Eigene Templates und Layouts

Mit OceanWP kannst Du eigene Templates und Layouts für Seitenkomponenten wie Header, Footer und Social-Bereich in der Topbar, aber auch für die 404-Seite erstellen. Verwaltet werden diese Vorlagen im Theme Panel unter »My Library«. Zugewiesen werden die Vorlagen dann im Customizer. Die Vorlagen, die Du hier erstellen und verwalten kannst, lassen sich problemlos mit einem Page Builder gestalten, sofern Du einen solchen einsetzt bzw. einsetzen möchtest.

Herausragende Dokumentation

Eine gute Dokumentation gehört zu einem wichtigen Feature eines jeden Themes. Eigentlich! Doch leider ist eine solche Dokumentation nicht immer im Fokus der Entwickler. Bei OceanWP ist das anders. Direkt aus dem Theme Panel heraus ist die hervorragende Dokumentation des Themes erreichbar. Außerdem kann man von dort aus direkt zum YouTube Channel gelangen, wo kurze aber präzise Anleitungen zur Verfügung gestellt werden.

Widgets für die Sidebar

OceanWP verfügt über insgesamt 13 (!) eigene Widgets, die Du in der Sidebar oder im Footer platzieren kannst. Hinzu kommen noch zwei weitere Widgets für einen Custom Header, nämlich ein Widget für das »Custom Header Logo« und eines für das »Custom Header Nav«. Für die Sidebar und/oder den Footer stehen Dir zur Verfügung:

• About Me
• Contact Info
• Custom Links
• Custom Menu
• Facebook Like Box
• Flickr
• Instagram
• MailChimp
• Recent Posts
• Social Icons
• Tags Cloud
• Twitter
• Video

Abgesehen davon, dass diese hauseigenen Widgets sich natürlich perfekt in das Design des Themes einbinden, ersparen sie Dir den Einsatz zusätzlicher Plugins. Auch das hat positive Auswirkungen auf die Performance Deiner Seite, denn jedes Plugin benötigt entsprechende Ressourcen. Mögen diese im Einzelfall auch noch so gering sein, aber – wie sagt man so schön – »Kleinvieh macht auch Mist«.

Der Customizer

Was mir sehr an OceanWP gefällt ist, dass man von Hause aus so ziemlich alles über den Customizer einstellen und individualisieren kann. Anders als bei vielen anderen Themes, die mit einer kostenlosen Lite-Version in der WordPress Theme Bibliothek vertreten sind und im Grunde genommen nur als »Anschmecker« für eine kostenpflichtige Premium-Version dienen, kann man bei OceanWP überhaupt nicht von einer Lite-Version sprechen. Man kann zwar über die Homepage des Themes etliche Preamium-Features beziehen, hat aber zu keiner Zeit das Gefühl, Nutzer zweiter Klasse zu sein, wenn man keines dieser kostenpflichtigen Addons kauft.

Alle Funktionen und Einstellungsmöglichkeiten, die ich hier näher beschreibe, sind Teil der kostenfreien Version von OceanWP. Da der Funktionsumfang so groß ist, kann ich leider nicht auf alle Features gleichermaßen eingehen. Deshalb werde ich mich auf meine persönlichen Highlights beschränken.

Header, Top Bar und Page Title

Für den Header stehen in OceanWP sechs Layouts oder Stile zur Verfügung, darunter auch ein transparenter Header und, was mir sehr gut gefällt, ein Layout oder Stil, in welchem das Menü hinter einem Hamburger-Icon verschwindet und auf Klick als Vollbild-Menü eingeblendet wird. Neben den sechs Layouts bzw. Stilen kann man über die Funktion »Custom Header« ein selbstgestaltetes Layout auswählen, welches man (s. o.) zuvor unter dem Theme Panel in der Library angelegt und gestaltet hat. Neben der Möglichkeit, in den Header ein Logo einzubinden, lassen sich dort auch ein Hintergrundbild oder sogar ein Hintergrundvideo anzeigen. Schließlich lassen sich in den Header auch Social-Icons in unterschiedlichen Stilen einfügen. Für einzelne Beiträge und Seiten kann man den Header in den OceanWP Settings ausblenden. Dazu gleich mehr.

Neben dem Header verfügt OceanWP über eine Top Bar. In der Top Bar über dem Header lassen sich Social Icons und weitere Inhalte, die über einen Textbereich eingefügt werden können, darstellen. Dieser Textbereich unterstützt vorgefertigte Shortcodes und html. Die Top Bar ist in vielerlei Hinsicht gestaltbar oder lässt sich global ausblenden. Diese globale Aktivierung bzw. Deaktivierung kannst Du für einzelne Beiträge und/oder Seiten in den OceanWP Settings auch überschreiben. Darauf komme ich weiter unten noch einmal zurück.

Unterhalb des Headers befindet sich der Page Title. Innerhalb dieses Bereichs wird, wie der Name suggeriert, der jeweilige Titel der Seite oder des Beitrags dargestellt. Außerdem besteht die Möglichkeit, im Page Title Breadcrumbs einzubinden. Im Customizer stehen verschiedene Layoutoptionen für den Page Title zur Verfügung. Es ist auch möglich, ein Background Image einzufügen. Die meisten der globalen Einstellungen für den Page Title lassen sich für einzelne Beiträge und/oder Seiten in den OceanWP Settings überschreiben. Auch darauf komme ich noch einmal zurück.

Typographie

Die Einstellungen zur Typographie gehören für mich zu den Kernbestandteilen eines Themes. Und die Möglichkeiten, die OceanWP rund um das Schriftbild zur Verfügung stellt, sind schlicht überwältigend. Denn hier lässt sich wirklich alles und getrennt voneinander anpassen: Bodytext, Überschriften, Logotext, Schrift in der Top Bar, im Page Title, des Hauptmenüs, das mobile Menü, der Titel eines Blogbeitrags, den Breadcrumbs, in der Sidebar und in den beiden Footer. Für alle diese Bereiche lassen sich separat Schriftart und Schriftgröße, die Schriftstärke (sofern von der Schrift unterstützt), der Schriftstil (normal, fett, kursiv), Texttransformationen (Großbuchstaben, Kleinbuchstaben, Kapitälchen), die Zeilenhöhe und der Abstand zwischen den Buchstaben sowie die Schriftfarbe einstellen. Dabei hast Du direkten Zugriff auf die bekannten Google Fonts.

Blog Beiträge und Blog Archive

Auch für die Blogbeiträge und die Blog Archive Seiten kann man unabhängig voneinander viele Einstellungen vornehmen. Zunächst lässt sich das Layout festlegen, also ob eine Sidebar angezeigt werden soll und wenn ja, rechts oder links. Diese globalen Einstellungen sind für einzelne Beiträge und Seiten über die OceanWP Settings änderbar. Bei den Blog Archiv Seiten lässt sich festlegen, ob der Feed in einer klassischen Liste oder in einem Grid (einschließlich einem Masonry Stil) dargestellt werden soll. Im letzten Fall lassen sich bis zu sechs Spalten realisieren. Man kann die Metadaten ein- oder ausblenden und auch die Reihenfolge der Blogelemente festlegen, also bspw. ob der Titel über oder unter dem Artikelbild erscheinen soll. Für die Single Post Seiten lässt sich zudem einstellen, ob der Blogtitel als Page Title angezeigt wird und ob das Artikelbild im Bereich des Page Title erscheinen soll. Sehr löblich ist, dass man für OceanWP kein zusätzliches Plugin benötigt, um ähnliche Beiträge unterhalb eines Blogbeitrags anzeigen zu lassen, denn diese Funktion wird mit dem Theme mitgeliefert. Wie diese »Related Posts« angezeigt werden sollen, also wie viele, in wie vielen Spalten und wie groß das Vorschaubild dargestellt werden soll, lässt sich im Customizer definieren.

Footer

Das Besondere für die Einstellungen im Footer ist, dass man auch hier, wie im Header, ein Custom Layout für den Footer Widgetbereich im Theme Panel unter »My Library« erstellen und im Customizer zuweisen kann (s. o.). Neben dieser Möglichkeit lässt sich festlegen, wie viele Spalten im Footer dargestellt werden sollen. Bis zu vier Spalten sind hier möglich. Der Copyright Text im »Footer Bottom« ist voll editierbar und man kann auf vorgefertigte Shortcodes zurückgreifen. Das ist bspw nützlich, wenn man die Jahresangabe nicht immer per Hand nachjustieren möchte. Der entsprechende Shortcode erledigt das automatisch.

Darstellung auf kleineren Bildschirmen (Tablets und Phones)

Dafür, dass OceanWP auch auf kleineren Bildschirmen eine mehr als gute Figur macht, hat Nicolas mehr als gesorgt. Alle hierzu nötigen Einstellungen sind direkt im Customizer zugänglich. So lassen sich einzelne Bereiche für bestimmte Bildschirmgrößen bzw. Devices gezielt ausblenden. Sämtliche Einstellungen für Innenabstände (Paddings) lassen sich für Desktop, Tablet und Phone getrennt voneinander definieren. Auch die Schriftgröße, die Zeilenhöhe und der Buchstabenabstand ist für die unterschiedlichen Bildschirmgrößen individuell einstellbar.

Ein Highlight mit Blick auf die Darstellung des Themes auf Tablets und Phones sind mit Sicherheit die vielen Einstellungsmöglichkeiten für das mobile Menü. Das beginnt mit der Möglichkeit, den Breakpoint zu setzen, also ab wann das mobile Menü angezeigt werden soll. Dann lässt sich zwischen drei Stilen für das mobile Menü wählen (als Sidebar, Dropdown oder Vollbild). Schließlich lässt sich das mobile Menü farblich in allen Facetten gestalten.

Einstellungen für einzelne Beiträge und Seiten

Ich komme nun zu den hier schon oft angesprochenen »OceanWP Settings«. OceanWP zeichnet sich dadurch aus, dass man für jeden einzelnen Beitrag und jede einzelne Seite individuelle Einstellungen bezogen auf Layout, Sidebar, Header, Page Title, Footer etc. vornehmen und dadurch die globalen Einstellungen des Customizers überschreiben kann. Das beginnt mit den Einstellungen für das grundlegende Layout, wo Du auch ein Full Width Layout für einzelne Seiten und Beiträge auswählen sowie Header, Page Title, Sidebars und Footer ausblenden kannst. Dies sind insbesondere für den Einsatz eines Page Builders sehr gefragte und wichtige Features.

Ein Highlight hier ist für mich die Möglichkeit, für jeden Beitrag und jede Seite eine spezielle Sidebar anzeigen zu lassen. Um spezielle Sidebars erstellen zu können, benötigst Du das kostenfreie Addon »Ocean Custom Sidebar« (s. u.), was Du Dir schnell und einfach aus der Plugin Bibliothek von WordPress downloaden und installieren kannst. In den OceanWP Settings legst Du dann fest, welche dieser erstellen Sidebars Du für den jeweiligen Beitrag oder die jeweilige Seite anzeigen lassen möchtest.

Die Möglichkeiten, die sich hinter den OceanWP Settings verbergen, sind als solche viel zu umfangreich, als dass ich hier näher und ausführlicher darauf eingehen könnte. Da ich aber noch kurz auf die kostenfreien sowie die kostenpflichtigen Erweiterungen des OceanWP Themes eingehen möchte, muss ich es bei den wenigen Anmerkungen hier bewenden lassen.

Kostenfreie Erweiterungen aus der Plugin Bibliothek von WordPress

Die kostenlose Erweiterung »Ocean Extra« hatte ich ja bereits schon erwähnt. Sie wird unmittelbar nach der Installation und Aktivierung von OceanWP mittels einer Benachrichtigung in Deinem Backend zur Installation empfohlen. Über »Ocean Extra« hinaus, stellt Dir der Entwickler sechs weitere, kostenfreie Addons über die WordPress Plugin Bibliothek zur Verfügung.

• Ocean Custom Sidebar: Mit dieser Erweiterung kannst Du eigene Sidebars erstellen (s. o.).
• Ocean Post Slider: Dieses Addons ermöglicht Dir die Einblendung eines Sliders für Beiträge unterhalb des Headers.
• Ocean Social Sharing: Eine Erweiterung zur Darstellung von Buttons zum Teilen Deiner Beiträge auf den bekannten Social Media Portalen.
• Ocean Product Sharing: Ein Addon für Shopseiten, welches Buttons zum Teilen auf den bekannten Social Media Portalen unterhalb von Produktseiten einblendet.
• Ocean Modal Window: Mit dieser Erweiterung kannst Du Popups erstellen und einblenden lassen.
• Ocean Demo Import: Wie der Name vermuten lässt, kannst Du mit diesem Addon vorgefertigte Seiten importieren. Ggf. benötigst Du hierzu noch weitere Plugins aus der Plugin Bibliothek von WordPress, wie z. B. den Elementor Page Builder, mit dem die Vorlagen erstellt worden sind.

Die Premium-Features von OceanWP

Insgesamt stellt Nicolas zur Zeit, neben den bereits erwähnten Kernfeatures von »Ocean Extra«, 17 Erweiterungen für sein OceanWP Theme zur Verfügung. Die kostenlosen Erweiterungen hatte ich gerade aufgezählt. Über diese hinaus gibt es aktuell noch acht kostenpflichtige Addons, die Du Dir über die Homepage des Themes besorgen kannst. Da der Artikel bis hierher schon ziemlich lang geworden ist, möchte ich diese Premium-Features nur aufzählen. Außerdem besitze ich sie nicht und konnte sie deshalb auch nicht testen. Eine Ausnahme bilden die Ocean Hooks. Diese konnte man sich eine zeitlang im Rahmen einer Promotion-Aktion kostenlos herunterladen. Ein Augenmerk, sofern man den Elementor Page Builder einsetzt bzw. einsetzen möchte, sollte man auf die Elementor Widgets legen, die Nicolas zur Verfügung stellt. Ebenfalls interessant dürfte aus meiner Sicht das Side Panel sein.

• Popup Login: Hiermit kannst Du ein Login als Popup erstellen.
• Instagram: Eine Erweiterung zur Darstellung Deiner Instagram Fotos.
• White Label: Hiermit kannst Du das Branding von OceanWP in Deinem Backend entfernen und durch Dein eigenes ersetzen.
• Portfolio: Zeige Dein Portfolio wo Du möchtest. Mit Hilfe von Shortcodes überall einzubetten.
• Woo Popup: Eine Erweiterung für Deinen Woo-Shop. Zeigt ein Popup an, wenn Kunden Artikel aus Deinem Shop in den Warenkorb legen. Das Aussehen kannst Du mit Elementor oder einem anderen Page Builder gestalten.
• Sticky Footer: Wie der Name schon sagt und komplementär zum Sticky Header.
• Ocean Hooks: Sehr mächtige Erweiterung. Hiermit kannst Du mittels Code (einschließlich php) oder Shortcodes nahezu alles überall in Dein Theme einfügen.
• Elementor Widgets: Spezielle Erweiterungen für den Elementor Page Builder.
• Side Panel: Mit dieser Erweiterung kannst Du Dir einen ein- und ausklappbaren Widget-Bereich erstellen.
• Sticky Header: Der Name verrät, was es tut.
• Footer Callout: Erstelle und platziere ein CTA Element im Footer.

Diese Premium-Features lassen sich einzeln, aber auch in einem vergünstigten Paket kaufen. In beiden Fällen handelt es sich um ein Abo-Modell. Dabei kann man noch zwischen drei Preiskategorien wählen. Ob und welche der Premium-Features ihr Geld wert sind, kann ich allgemein nicht beurteilen. Hier wird es darauf ankommen, was Du für Dein Projekt benötigst oder nicht.

Fazit

Es dürfte wohl längst klar geworden sein, dass OceanWP ein Theme ist, welches einen näheren Blick nicht nur verdient hat, sondern es schlicht fahrlässig wäre, einen solchen nicht zu wagen. Mit aktuell über 50.000 Downloads und unzähligen Topbewertungen gehört OceanWP auch längst nicht mehr zu den Geheimtipps in der WordPress Theme Bibliothek. Das Theme besticht durch seinen Funktionsumfang und die Flexibilität, die sich hieraus für den User ergibt. Nicolas arbeitet sehr emsig an der Weiterentwicklung von OceanWP und es gibt regelmäßig neue Features. Besonders lobenswert dabei ist, dass er dabei nicht nur die kostenpflichtigen Premium-Features und somit die zahlenden Kunden im Blick hat.

Hast Du Erfahrungen mit OceanWP gemacht? Dann hinterlasse Deine Eindrücke von OceanWP doch als Kommentar. Da ich das Theme selbst gerne nutze und mich deshalb ein bisschen näher damit auskenne, kannst Du auch gerne Deine Fragen stellen. Einen umfassenden Support kann ich natürlich nicht anbieten. Den bekommst Du auf der Entwicklerseite. Darüber hinaus gibt es auch eine sehr rege Community in einer Facebook-Gruppe.