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

OceanWP kannst du einfach auf deiner Seite testen. Denn ist als kostenloses Theme über WordPress.org erhältlich.

Dazu klickst du auf >Design >Themes suchen. Anschließend kannst du es installieren und dann aktivieren.

Oder du nutzt den Download im Theme-Verzeichnis auf wordpress.org

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. Weitere Infos zu den Features findest du in meiner Elementor Review.
    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 Template 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 (Elementor Templates)
  • 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.

55 Shares
Dieser Beitrag hat 23 Kommentare
  1. User Avatar

    Und ich habe erst ein Problem.
    Ich frage mich, wo die WP Ocean Einstellungen abgespeichert werden.
    Anscheinend irgendwo im Netz !!!!
    Nach einam kompletten Restore aus dem Backup bei hosteurope, hatte ich nicht die “alten” Design-Einstellungen, sondern die von heute !!!
    Da ist was nicht ganz koscher.

    1. Webtimiser

      Hallo Gebhard,
      wie bei allen Themes werden die Einstellungen von OceanWP in der Datenbank gespeichert.

      Viele Grüße
      Sonia

  2. User Avatar

    Hallo, ich habe auch zwei Probleme mit OceanWp in der free Version und elementor Pro.
    Zum einen sind nicht alle Seiten responsiv, unabhängig von Browsern, obwohl in der Test-Ansicht in Elementor alles passt.
    Zum anderen werden mir meine Angebote, strukturiert als zweimal zwei Angebote, nur einmal schön formatiert umgegeben, die zweite identische Spalte ist nur noch minimiert- auch wieder auf der Website auf allen Endgeräten, während in Elementor alles stimmt.
    Habt Ihr eine Idee, woran das liegen könnte?
    Vielen Dank für Eure Tipps,
    Simone

    1. Webtimiser

      Hallo Simone,
      ohne URL kann ich da leider nichts Konkretes sagen. Aber bei Elementor kommt es häufiger vor, dass die Ansicht im Backend von der Ansicht im Frontend abweicht. Auch die mobile Darstellung muss man gelegentlich noch optimieren.
      Viele Grüße
      Sonia

  3. User Avatar

    Hallo! Ich würde gerne einen read more tag in meinen Text einfügen…nutze oceanwp und elementor pro. Irgendwie funktioniert das nicht? Liegt es am theme..oder hab‘ ich was übersehen?

    1. Webtimiser

      Hallo Chris,
      ich nutze die gleiche Kombi und erstelle Beiträge mit Gutenberg. Da kannst du ganz normal den Read-More Tag einfügen. Wenn du für Beiträge Elementor nutzt, gibt es dafür ein Widget: elementor.com/help/read-more-widget.

      Viele Grüße
      Sonia

  4. User Avatar

    Hallo,
    vielen Dank für diesen tollen Beitrag.
    Ich habe mir nun OceanWP Travel installiert, allerdings wird auf der Home Seite unter Popular Posts etc. nichts angezeigt. Ist dazu Pro oder ähnliches nötig?
    Liebe Grüße
    Jana

    1. Webtimiser

      Hallo Jana,
      gerne!
      Für die Popular Post wird bei der Travel Demo die Extension “Elementor Widgets” genutzt. Als Alternative könntest du auch ein kostenloses Elementor Addon für die Popular Posts nutzen.
      Liebe Grüße
      Sonia

  5. User Avatar

    Hallo Sonia,
    herzlichen Dank für diesen informativen Artikel. Er zeigt mir, dass ich auch als WP-Neuling mit OceanWP gut aufgehoben bin und warum es sinnvoll sein kann, mir die Pro-Version zu holen.
    Ich habe auch deine Elementor Review gelesen und habe noch nicht ganz verstanden, warum die Nutzung eine Pagebuilders sinnvoll sein kann. Ich komme mit dem Standard-Editor ganz gut aus, und ich habe schon eine Reihe Seiten und Beiträge damit erstellt.

    Herzliche Grüße
    Sabine

    1. Webtimiser

      Hallo Sabine,
      gerne!
      Mit einem Page-Builder wie Elementor kannst du sehr einfach schickere Designs umsetzen und zusätzliche Features nutzen. Aber wenn dir den Standard-Editor ausreicht, ist das prima!
      Liebe Grüße
      Sonia

  6. User Avatar

    Hi Sonia,
    Danke für den hilfreichen Artikel.
    Ich möchte eine Landingpage mit OceanWP umsetzen. Folgende Frage, weil ich noch nie Webseiten mit OceanWP und Elementor erstellt habe.
    Um mehr Funktionen, Vorlagen, etc. und Support nutzen zu können, bin ich bereit eine kostenpflichtige Version zu buchen.
    Jetzt bieten ja sowohl OceanWP, als auch Elementor jeweils Pro-Versionen an. Da ich nur bei einem die kostenpflichtige Version freischalten möchte, stellt sich mir jetzt die Frage, ob ich die Pro-Version von OceanWP oder die von Elementor nehmen soll.
    Was sind denn die Unterschiede zwischen OceanWP-Pro und Elementor-Pro, hinsichtlich Funktionalität? Bzw. was kann man und was kann man nicht, wenn man das OceanWP-Pro nutzt, aber nur das kostenfreie Elementor (und umgekehrt, wenn man das kostenfreie OceanWP nimmt aber das kostenpflichtige Elementor-Pro)?

    Was würdest du nehmen, die Pro-Version von Ocean WP, oder die von Elementor?

    Danke schon jetzt für das Feedback
    Wolfgang

    1. Webtimiser

      Hallo Wolfgang,
      wenn du Elementor Pro hast, kannst du durch den Theme-Builder damit deine Webseite komplett gestalten. Also auch Header, Footer, Blog-Ansichten usw. In diesem Fall reicht ein kostenloses Theme wie OceanWP völlig.
      Bei OceanWP Pro sind für mich vor allem die AddOns Portfolio, Hooks und Sticky Header wichtig. Ein Theme mit Elementor komplett bauen wollte ich nicht, vor allem wegen der Performance. Aber inzwischen nutze ich auch von Elementor die Pro-Version, da es für mich viele nützliche Features hat. Also z.B. die Blog-Darstellungen, Font-Upload, Custom CSS. Mehr findest du auch in meiner Review. Ob du das alles wirklich brauchst, kann ich natürlich nicht sagen. Aber vielleicht testest du einfach mal beide in der kostenlosen Version?

      Viele Grüße
      Sonia

  7. User Avatar

    Hi,
    ist das Template auch für kommerzielle Zwecke einsetzbar oder muss eine Lizenz erworben werden?
    Viele Grüße

    Uli

    1. Webtimiser

      Hi Uli,
      sowohl die freie als auch die Pro Version von OceanWP kannst du für kommerzielle Zwecke nutzen.

      Viele Grüße
      Sonia

  8. User Avatar

    Hallo Sonia,
    Danke für Deine ausführliche Beschreibung. Gibt es für das Theme eine deutsche Sprachdatei? Kann man das Theme auch gut ohne Elementor nutzen? Gutenberg und die einige Addons für Gutenberg sollten doch reichen. Damit hat man ja schon fast einen Pagebuilder :).

    1. Webtimiser

      Hallo Thomas,
      gerne!
      OceanWP ist vollständig übersetzt und auch problemlos ohne Elementor nutzbar. Ich selbst nutze Elementor nur für Seiten und nicht für Beiträge.
      Viele Grüße
      Sonia

  9. 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

  10. 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.

  11. 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