OceanWP: kostenloses WordPress Theme mit Premium-Features

OceanWP ist eines der beliebtesten kostenlosen WordPress Themes. Warum? Es bietet enorm viele Premium-Features und ist vielseitig einsetzbar. Dabei ist es sehr schnell und mit Page Buildern kompatibel. Da auch ich OceanWP nutze, möchte ich dir das Theme und seine Möglichkeiten vorstellen.

Meine Webseite wollte ich schon lange umbauen. Das Theme war uralt und außerdem auch nicht mit Gutenberg kompatibel. Also habe ich mich nach einem neuen Theme umgesehen. Kostenlos oder Premium war mir dabei völlig egal. Hauptsache ordentlich programmiert, gut anpassbar und vor allem schnell.

Bei meiner Suche bin ich dann auf die drei aktuell angesagten WordPress Themes gestoßen: OceanWP, Astra und GeneratePress. Alle drei Themes bieten ähnliche Features an. Sie sind sehr schnell, gut anpassbar und für Page Builder optimiert. Zudem sind sie alle in einer kostenlosen Version erhältlich.

Mir persönlich hat OceanWP dann letztlich am besten gefallen. Inzwischen nutze ich es schon fast ein Jahr und bin immer noch begeistert. Bisher habe ich damit wirklich nur gute Erfahrungen gemacht. Und wenn du dich auf meiner Webseite umsiehst, hast du ein gutes Beispiel, was mit diesem Theme alles machbar ist.

Aber jetzt zeige ich dir die ganzen Features in der Übersicht.

OceanWP Features

  • Schnelle Ladezeiten
  • Für PageBuilder (Elementor) optimiert
  • Responsive
  • Optimiert für SEO (Schema Markup, OpenGraph)
  • WooCommerce-Support
  • Guter und schneller Support
  • Kostenlose Basisversion
  • Viele Extensions (kostenlose und kostenpflichtige)
  • Widgets
  • Gutenberg ready
  • Mega Menü
  • regelmäßige Updates

Theme Installation

Da OceanWP kostenlos ist, kannst du es einfach auf deiner Seite testen. Dazu klickst du auf >Design >Themes suchen. Anschließend kannst du es installieren und dann aktivieren.

OceanWP installieren
OceanWP installieren

Als nächstes bekommst du weiter oben eine Empfehlung für drei Plugins eingeblendet.

Empfohlene Plugins installieren
Empfohlene Plugins installieren
  • Ocean Extra
    Auf jeden Fall solltest du Ocean Extra installieren. Denn das kostenlose Plugin schaltet zusätzliche Theme-Funktionen frei. Beispielsweise Widgets, Metaboxen und den Import von Demo-Seiten.
  • Elementor
    Als Page Builder schlägt oceanwp Elementor vor, den ich selbst auch nutze. Natürlich läuft das Theme auch mit anderen Buildern. Aber: die Demo-Seiten sind alle mit Elementor gebaut. Falls du das Theme ausschließlich als Blog nutzen möchtest, benötigst du Elementor nicht wirklich.
  • WPForms
    Das dritte vorgeschlagene Plugin ist WPForms. Damit erstellst du einfache Formulare. Aber natürlich kannst du auch problemlos ein anderes nutzen.

Theme Panel

Im Theme-Panel kannst du mit einem Klick einen Setup Wizard starten. Dieser führt dich schrittweise durch die Grundeinrichtung.

Screenshot Theme Panel
Setup Wizard im Theme Panel starten

Setup Wizard

Setup Wizard OceanWP
Unterstützung bei der Einrichtung des Themes

Wenn Du die Setup-Routine nutzt, ist das Theme schnell eingerichtet.

  • Im ersten Schritt kannst du eines der fertigen Layout importieren.
  • Danach wählst du die zusätzlichen Plugins aus. Je nach deiner gewählten Demo können das z.B. ein Sidebar-Plugin oder ein Post-Slider sein.
  • Nun klickst du die Daten an, die für den Demo-Import eingefügt werden sollen.
  • Zum Abschluss der Einrichtung legst du wichtige Dinge wie z.B. den Seitentitel, Logo und Hauptfarbe fest.
OceanWP eingerichtet
Nach dem Setup kannst du gleich loslegen

Demo Seiten

Zum schnellen Einstieg bietet Oceanwp mehrere Demo Seiten an. Dabei werden Demo-Inhalte und Customizer-Einstellungen importiert. Die Seiten selbst kannst du dann mit Elementor bearbeiten.

Bevor du neue Demo-Inhalte importierst, kannst du mit WP Reset die Einstellungen wieder zurücksetzen.

In der kostenlosen Theme Version hast du 13 Vorlagen. Darunter OnePager, Business Seiten, Shops und Blogs.

Übersicht OceanWP Demos
Fertige Designs kannst du per Klick importieren.

Wenn du das OceanBundle besitzt hast du Zugriff auf wesentlich mehr Vorlagen. Hier findest du alle Demos.

Nachdem das Setup beendest ist, sieht meine Testseite genauso aus wie die Demoseite.
Sowohl Inhalt als auch Layout kannst du jetzt mit Elementor anpassen.

Seite mit Elementor bearbeiten
Einfache Seitengestaltung mit Elementor

Einstellungen im WordPress Customizer

OceanWP nutzt den Customizer voll aus! Hier legst du alle wichtigen Einstellungen fest: Seitenlayout, Farben, Schriften, Header, Footer,…

Es gibt so viele Optionen, dass es schon fast zu viel ist. Obwohl ich das Theme jetzt schon lange nutze, muss ich einzelne Punkte gelegentlich suchen. Vielleicht der einzige Kritikpunkt.

Hier ein Beispiel für die allgemeinen Einstellungen:

Allgemeine Optionen im WordPress Customizer
Allgemeine Optionen im WordPress Customizer

OceanWP Settings: Optionen für Seiten / Beiträge

Für Seiten und Beiträge bietet dir das Theme noch zusätzliche Optionen. In einer Metabox kannst du die Grundeinstellungen ganz nach Bedarf überschreiben. Z.B. kannst du ein anderes Header-Format, andere Footer-Widgets oder eine andere Sidebar wählen. Das ist natürlich ideal für Landingpages.

OceanWP Settings für Seiten
Einstellungen für Seiten und Beiträge

Blog Einstellungen

Du möchtest das Theme einfach nur zum Bloggen nutzen? Dann hast du auch hier viele Möglichkeiten.

Blog Layouts
Demo für die verschiedenen Blog Layouts

Für die Blog-Ansicht hast du drei Darstellungen zur Auswahl: Vorschaubild, Raster und großes Bild.

Auch das Layout der Blogbeiträge lässt sich sehr gut anpassen. Die einzelnen Elemente wie z.B. Datum, Autor, Kommentare kannst du ein- oder ausblenden. Die Reihenfolge passt du einfach per Drag & Drop an.

Customizer Sections

Unter Theme Panel > Theme Panel kannst du die Anzeige im WordPress Customizer anpassen. Da bei OceanWP so ziemlich alles darüber erreichbar ist, kannst du hier etwas aufräumen. Dadurch wird der WordPress Customizer übersichtlicher und performanter.

Customizer Sections
Welche Sektionen sollen im Customizer verfügbar sein? Hier kannst du das einstellen.

Quick Links

Im Abschnitt darunter findest du nützliche Schnelllinks zu den wichtigsten Einstellungen. Sehr hilfreich, da man im Customizer schnell den Überblick verlieren kann.

Quick Links zu den Einstellungen
Übersicht der wichtigsten Customizer-Einstellungen

Script & Styles – für mehr Speed

Skripte und Stile verwalten
Hier lassen sich unnötige Elemente abschalten.

Im Theme Panel findest du die Einstellungen für Skripte und Stile. Das ist eines der wirklich genialen Features von OceanWP. Für mich einer der Hauptgründe, genau dieses Theme zu nutzen. Doch was hat es damit auf sich?

Inzwischen sind sehr viele WordPress Themes mit Features überladen. Viele davon benötigt man eigentlich gar nicht. Aber abschalten kann man sie leider nicht. Einer der Gründe für langsame Ladezeiten. Denn egal ob man die Features nutzt oder nicht – sie werden auf jeder Seite geladen.

Bei OceanWP ist das sehr viel besser. Denn hier kannst du sämtliche Funktionen, die nicht benötigt werden einfach abschalten. Du brauchst keinen Parallax-Footer? Kein PopUp? Keine Icon-Fonts? Dann deaktivierst du ganz einfach die zugehörigen Skripte und Styles. Und so wird deine Seite wesentlich übersichtlicher und schneller!

Zum Vergleich habe ich mal die Blog-Seite der Travel-Demo bei Pingdom getestet. Mit 755 ms ist die Seite schon mal recht flott.

Speed Test Blog-Seite
Pingdom-Test der Blog-Seite

Für den zweiten Test habe ich nicht benötigte Funktionen abgestellt. Und schon liegt die Ladezeit bei nur noch 516 ms. Wenn du dann noch ein Caching Plugin nutzt, wird die Seite so richtig flott geladen!

OceanWP Speed Test
Test nach Abschaltung unnötiger Skripte und Stile

My Library / Ocean Hooks

Mit der Library bringt das Theme ein weiteres tolles Feature mit. Denn damit kannst du ganz ohne coden Layout-Elemente gestalten, verwalten und platzieren.

Library Temple erstellen

Dazu erstellst du zuerst in der Library ein neues Template. Für dieses Beispiel habe ich einen einfachen Call To Action Abschnitt angelegt.

My Library für Vorlagen
In der Library legst du eigene Vorlagen an.

Anschließend klickst du auf Mit Elementor bearbeiten. Jetzt kannst du mit wenig Aufwand den CTA-Abschnitt gestalten.

CTA in Elementor
Design der Vorlage in Elementor.

Wenn das Layout fertig ist, speicherst du das Template in der Library und kopierst den Shortcode.

Anschließend wechselst du auf die Seite, auf der das Template angezeigt werden soll. Unter > OceanWP Settings > Shortcodes trägst du dann den Shortcode des Templates ein.

Template Shortcode eingeben
Unter Shortcodes legst du die Platzierung der Vorlage fest.

Ich habe den CTA auf der Blog-Seite direkt unter dem Header eingefügt.

Blog mit eingebauter Vorlage
So sieht die Vorlage im Blog aus

Ocean Hooks

Du möchtest auch Code an verschiedenen Stellen im Theme platzieren? Das ermöglicht das Premium-AddOn Ocean Hooks.
Damit kannst du in der Library analog zu den Templates auch Code-Snippets anlegen und verwalten. Diese können dann sogar an bestimmte Bedingungen (Conditional Logic) geknüpft werden.

Kostenlose Extensions

Damit OceanWP ein schnelles Theme bleibt, werden einige Funktionen nicht direkt mitgeliefert. Wer sie benötigt, kann sie über Erweiterungen hinzufügen. Also Plugins, die nur mit diesem Theme laufen. Hier eine Übersicht der kostenlosen OceanWP Extensions.

kostenlose Extensions
Mehr Features durch zusätzliche Erweiterungen
  • Stick Anything
  • Modal Window
  • Post Slider
  • Demo Import
  • Custom Sidebar
  • Product Sharing
  • Social Sharing
  • OceanExtra

OceanWP Premium Extensions

Neben den kostenlosen Extensions gibt es auch noch kostenpflichtige Erweiterungen.

Ich habe für meine Webseite das OceanWP Core Extension Bundle gekauft. Für $39,- enthält das Bundle alle Premium AddOns, Demos und Support für 1 Jahr.

kostenpflichtige Erweiterungen
Übersicht Premium-AddOns

Aktuell gibt es die folgenden 13 premium Extensions

  • Full Screen
  • Cookie Notice
  • Popup Login
  • Instagram
  • White Label
  • Portfolio
  • Woo Popup
  • Sticky Footer
  • Ocean Hooks
  • Elementor Widgets
  • Side Panel
  • Sticky Header
  • Footer Callout

Für mich sind die wichtigsten Erweiterungen:

  • Sticky Header – Damit bleibt der Header beim Scrollen oben stehen. Zusätzlich kannst du. z.B. die Farbe und Transparenz einstellen.
  • Portfolio – Es gibt zwar viele kostenlose Portfolio Plugins, aber bisher hat mir keines wirklich zugesagt. Das Portfolio Plugin von OceanWP ist schlicht und einfach zu handeln. Hier siehst du es in Aktion.
  • Elementor Widgets – Im Gegensatz zu den Beiträgen bearbeite ich meine statischen Seiten mit Elementor. Hier sind die Elementor Widgets eine gute Ergänzung.
  • Ocean Hooks – Dadurch wird die Library-Funktion noch erweitert. Du kannst damit dann auch PHP-Code über Hooks platzieren.

Preise

Im Vergleich zu anderen WordPress Themes sind die Preise für OceanWP sehr fair. Einzelne AddOns kannst du schon für $ 9,99 kaufen. Das Core Extension Bundle ist ab $39,- für 1 Seite erhältlich. Für die Verlängerung der Lizenz gibt es dann einen Rabatt von 30%. Lifetime Lizenzen sind ebenfalls erhältlich – lohnen sich aber vermutlich nur für Agenturen.

Weitere Preismodelle findest auf dieser Übersicht.

Preisübersicht OceanWP
Preisübersicht
Fazit

Für mich ist OceanWP aktuell eines der besten kostenlosen WordPress Themes. Es bietet sehr viele Features, die man sonst nur in Premium-Themes findet. Und dabei ist es auch noch sehr schnell und gut zu bedienen. Man merkt einfach, dass das Theme gut gemacht wurde!

Das liegt natürlich vor allem an Nicolas Lecocq, dem Entwickler von OeanWP. Dieser hat selbst lange Zeit als Freelancer Webseiten erstellt. Dabei ist ihm aufgefallen, dass es kaum vielseitig einsetzbare und kostenlose WordPress Themes gibt. Also hat er OceanWP entwickelt.

Wie hat Dir dieser Beitrag gefallen? Gar nichtNa jaOKGutSehr gut
(31 Stimmen, Ø: 4,74 von 5)

Dieser Beitrag hat 7 Kommentare

  1. User Avatar

    Hallo Sonia,
    ich habe jetzt eine Seite mit OceanWP und Elementor gestaltet. Die Seiten ohne Elementor zeigen in der Top Bar und im Foster die Social Media Icon. Sobald ich die Inhalte der Seite mit Elementor angepasst habe, sind die Icons nicht mehr sichtbar und zeigen je nach Browser nichts oder einen kleinen Kasten mit Fragezeichen.
    Woran könnte das liegen? Ich hoffe Du hast eine Lösung.
    Viele Grüße
    Ute

    1. Webtimiser

      Hallo Ute,

      hast du die aktuelle Version von Elementor? Wenn ja, könnte es an Font Awesome 5 liegen. Unter > Elementor > Einstellungen kannst du die Unterstützung für Font Awesome 4 aktivieren und dann werden die Icons hoffentlich wieder angezeigt.
      Viele Grüße
      Sonia

  2. User Avatar

    Hallo Super Artikel hat sehr gut weitergeholfen.
    Allerdings hätte ich da noch eine kleine Frage und zwar kann die Einstellungen für den Blog also Vorschaubild, Raster und großes Bild auch je Seite ändern ?
    z.B. Ich habe auf der Startseite die neusten News mit der Vorschaubild Darstellung. Jetzt möchte ich aber auf einer anderen Seite die Beiträge die schon älter sind in der Raster-Ansicht anzeigen lassen ist das irgendwie möglich?
    über eine Antwort würde ich mich freuen.

    1. Webtimiser

      Hallo Daniel,
      das geht leider nicht, da die Blog-Einstellungen für alle Seiten gültig sind. Du könntest die Startseite oder eine bestimmte Kategorie-Seite mit Elementor bauen oder ein eigenes Template erstellen.

      Viele Grüße
      Sonia

      1. User Avatar

        Danke
        Ja werde das dann Wohl mit Elementor umsetzten.

  3. User Avatar

    Hi,
    danke für den guten Artikel hat mir schon sehr weitergeholfen. Ich habe mir nun auch das Core Bundle zugelegt, stehe aber nun vor der Aufgabe dieses zu installieren. Wie mache ich das?

    1. Webtimiser

      Hi Chris,
      das Plugin musst du zuerst downloaden und kannst es dann im Dashboard im Menüpunkt Plugins installieren. Ganz oben über den vorgeschlagenen Plugins findest du einen Button “Plugin hochladen”.

      Viele Grüße
      Sonia

Schreibe einen Kommentar

Menü schließen