5 Tipps für den Layout Wechsel – Mein neues Webdesign mit GeneratePress

5 Tipps für den Layout Wechsel - Mein neues Webdesign mit GeneratePressEs war mal wieder an der Zeit für ein neues Webdesign für meinen Blog selbstaendig-im-netz.de. Dass ich für diesen Layout Wechsel nun das Premium-Theme GeneratePress nutze hat viele Gründe, auf die ich im Folgenden genauer eingehe.

Dabei schildere ich, welche Änderungen ich am Layout vorgenommen habe, was verbessert wurde und welche Vorteile das neue Layout für meinen Blog mitbringt. Zudem gebe ich 5 Tipps für den Layout Wechsel, denn man lernt natürlich immer dazu und sollte schwere Fehler vermeiden.

Ich freue mich über Feedback von euch, wenn ihr noch Probleme beim neuen Layout entdeckt, denn ganz perfekt bekommt man es meist nicht sofort hin.

Neues Webdesign mit GeneratePress

Ein Layout Wechsel auf einer großen Website oder einem großen Blog ist schon nicht ohne Risiko. In der Vergangenheit habe ich das bereits häufiger vor mir hergeschoben, bis es dann wirklich passieren musste.

So war es auch diesmal, denn ich wusste, dass ich das doch etwas veraltete Layout (Theme) von Selbständig im Netz früher oder später aktualisieren muss.

Nun habe ich die Gelegenheit genutzt und ein neues Theme aktiviert und angepasst.

Warum überhaupt ein neues Layout?

Das ist eine gute Frage, denn warum sollte man etwas ändern, was gut funktioniert?

Im Grunde war ich nicht unzufrieden mit meinem bisherigen Layout, aber mit den Jahren ändert sich nicht nur der eigene Geschmack, sondern auch die Welt dreht sich weiter. Dieser Moment kam natürlich auch schon vorher das eine oder andere mal, aber mit gut 7 Jahren war das bisherige Theme auf Selbstständig im Netz das bisher längste in meinem Blog.

Das bisherige Layout hatte ich also schon viele Jahre, auch wenn ich zwischendurch immer wieder ein wenig daran gebastelt habe. 2014 habe ich das Theme eleven40 von von StudioPress hier aktiviert und angepasst. Damit war ich auch sehr lange zufrieden, denn es war schlicht und bot dennoch einige Anpassungsmöglichkeiten.

Und die positive Entwicklung des Blogs ging mit dem vorherigen Theme auch weiter, so dass ich lange daran festgehalten habe. So sah das Layout bisher aus.

Selbstständig im Netz Blog vor dem Layout Wechsel

Ich war also mit dem Theme eleven40 lange Zeit zufrieden, aber wie schon geschrieben, irgendwann kommt der Zeitpunkt, an dem man etwas ändern muss. 2014 lag die Desktop-Nutzung noch vor der mobilen Nutzung, aber das hat sich seitdem stark geändert. Mobile First ist inzwischen angesagt, aber der Fokus meines Webdesigns lag immer noch auf dem Desktop.

Ich gebe zu, dass es mir selbst heute teilweise noch schwer fällt primär die mobile Nutzung zu sehen, denn ich sitze als Blogger den ganzen Tag vor dem PC und schönen großen Monitoren.

Dennoch war mir seit einiger Zeit klar, dass ich ein einfacheres und schlichteres Theme nutzen möchte, welches die ganze Website etwas antschlackt und auch die Gelegenheit bietet ein paar alte Zöpfe abzuschneiden.

Warum nutze ich das Premium-Theme GeneratePress

Die Qual der Wahl ist bei den WordPress-Themes mittlerweile sehr hoch. Es gibt viele gute kostenlose Themes, aber natürlich auch Premium-Themes.

Vor einiger Zeit bin ich dann auf GeneratePress gestoßen und war davon sehr angetan. Es handelt sich um ein recht schlichtes Theme, was mir schon mal sehr gefällt, da es wenig Ballast mitbringt und ein guter Ausgangspunkt für Anpassungen und Änderungen ist.

Ich habe das Theme auf der einen oder anderen Nischenwebsite und anderen Blogs eingebaut und damit Erfahrungen gesammlt. So habe ich unter anderem einen Layout Wechsel auf selbstaendig-im-netz.de vorgenommen und dort sehr gute Erfahrungen mit GeneratePress sammeln können.

In Rahmen der letzten Nischenseiten-Challenge habe ich das Theme zudem auf meiner Infrarotsauna-Website genutzt und auch damit sehr gute Erfahrungen gesammelt. Und auch auf meiner Website streaming-geraete.de nutze ich das Theme seit einer Weile:

Webdesign mit GeneratePress Beispiel

Mir ist es wichtig, so einen Layout Wechsel bei einem großen Blog nur mit vorherigen Erfahrungen zu machen. Dazu nutze ich kleinere Projekte, während andere ein neues Theme dann erstmal auf einen Staging-Server oder ähnliches testen. Entscheidend ist einfach, dass man es voher testet!

Das habe ich früher auch schon so gemacht, indem ich das Layout erst auf kleineren Blogs gewechselt habe und später dann bei größeren Blogs diese Erfahrungen nutzen konnte.

Für GeneratePress Pro habe ich mich entschieden, weil das Premium-Theme einige Vorteile bietet:

  • Es ist ein schlichtes Theme, was ich sehr mag. Viele andere sind zu überladen und bieten Features, die ich gar nicht brauche. Das ist hier anders.
  • Dennoch kann man einige interessante Zusatzfunktionen in der Pro-Version des Themes nutzen, indem man Module aktiviert.
  • Das Theme bietet viele Einstellungsmöglichkeiten an, so dass eine optische Anpassung größtenteils darüber läuft. Man muss nicht zwingend viel CSS selbst einfügen, um Webdesign-Änderungen vorzunehmen.
  • Ein wichtiger Punkt ist die Schnelligkeit des Themes. Es ist von Hause aus einfach extrem schnell und das ist heute ja sehr wichtig bzgl. der Core Web Vitals und des Nutzungserlebnisses, gerade bei der mobilen Nutzung.

Layout Wechsel - GeneratePress PageSpeed Insights

Wie man an dieser Google PageSpeed Insight Analyse sehen kann, ist die Performance selbst mobil sehr gut.

Weitere Vorteile des Themes habe ich im Artikel GeneratePress – Mein neues Lieblings-WordPress-Theme vorgestellt.

Umsetzung des neuen Blog-Layouts

Der eigentliche Layout Wechsel verlief dann recht reibungslos. Ich hatte ja schon Erfahrungen auf anderen Blogs und Websites mit GeneratePress gesammelt und wusste, was ich anpassen muss.

Ich habe vorher aber noch manuelle Änderungen am Layout und an bestimmten Funktionen gesichert. Ich hatte vor vielen Jahren teilweise noch in der alten functions.php des bisherigen Themes Änderungen vorgenommen. Das mache ich heute ja nicht mehr, sondern nutze ein Snippets-Plugin, um PHP Code einzubauen.

Auch einige CSS-Angaben aus dem alten Theme habe ich gesichert, bevor ich das neue Theme aktiviert habe. Generell habe ich ein komplettes Backup meines Blogs vorher gemacht.

Zudem habe ich die Inhalte der Sidebar und Footer Widgets vor dem Layout Wechsel gesichert, bzw. Screenshots davon gemacht, denn leider wurden gerade diese Widgets in der Vergangenheit bei Theme-Wechseln manchmal zerschossen.

Und ich habe einige Grafiken, wie das Logo oben, schon vorbereitet, um die wenigen notwendigen Anpassungen dann schnell vornehmen zu können.

Nach der Installation des Themes habe ich mir erstmal die Live-Preview angeschaut und als das gut aussah, habe ich das neue Theme aktiviert.

Dann habe ich einige Anpassungen bei den Layout-Bildern und in den Theme-Einstellungen vorgenommen. Das betraf hauptsächlich die Texte, aber auch das war relativ schnell erledigt.

Passt ihr das Layout/Theme eurer Websites selber an?

Ergebnis anschauen

5 Tipps für den Layout Wechsel

Im Zuge des neuen Webdesigns sind mir allerdings wieder einige Dinge aufgefallen, auf die man bei einem Layout Wechsel unbedingt achten sollte.

Die folgenden Tipps helfen dir dabei keinen Schiffbruch beim Layout Wechsel zu erleiden.

  1. Nicht mit dem Hauptprojekt beginnen

    Ich hatte ja schon oben erwähnt, dass man ein neues Theme (und auch andere größeren Änderungen, wie ein neues Plugin) nie ungetestet auf dem Hauptprojekt umsetzen sollte. Entweder testest du es vorher auf einem Test-System oder wie ich auf einer kleinen Website. Das erspart dir viel Ärger und Aufräumarbeiten.

  2. Backup & alte Einstellungen sichern

    Bevor du die Änderungen vornimmst, solltest du auf jeden Fall ein komplettes Backup deiner Website machen, um zur Not den alten Zustand wieder herstellen zu können. Zur einfachen Anpassung des neuen Layouts solltest du zudem wichtige Einstellungen (vor allem CSS oder auch Widgets) sichern.

  3. Alte Zöpfe abschneiden

    Ein Layout Wechsel ist eine sehr gute Gelegenheit alte Zöpfe abzuschneiden. Mit den Jahren sammeln sich Inhalte, Seiten, Einstellungen, Plugins, Features etc. an, die die Website nur unnötig aufblähen und veraltet sind. Gerade bei schon etwas älteren Websites ist das der Fall. Deshalb solltest du prüfen, was wirklich noch gebraucht wird und den Rest deinstallieren bzw. entfernen.

  4. Testen auf mobilen Geräten

    Viele Blogger und Website-Betreiber sitzen vor großen Monitoren am Schreibtisch. Deshalb solltest du keinesfalls vergessen das neue Webdesign auch auf mobilen Geräten ausführlich zu testen. Oft gibt es da Probleme, die man am Monitor nicht sieht.

  5. Besondere Elemente/Funktionen prüfen

    Normale Inhalte in Artikeln und Seiten werden nach einem Layout Wechsel in der Regel problemlos angezeigt. Besondere Funktionen, interaktive Elemente und ähnliches solltest du aber gesondert testen, um herauszufinden, ob diese ebenfalls problemlos laufen. Gerade bei wichtigen Unterseiten solltest du das auf jeden Fall tun, um nicht erst viel später zu merken, dass etwas Wichtiges nicht funktioniert.

Was habe ich nach dem Layout Wechsel gemacht?

Ich habe nach dem Layout Wechsel meinen Blog geprüft und diverse Dinge analysiert:

  • Ich habe meinen Blog nach dem Layout Wechsel auf verschiedenen Geräten (anderer PC, Tablet, Smartphone) genutzt, um zu sehen, ob es irgendwelche Probleme gibt. Und tatsächlich habe ich da noch einiges festgestellt, was ich anpassen musste.
  • Ich habe mit mehreren Tools die Ladezeiten geprüft. Die waren aber sehr gut, was ich bei dem Theme auch nicht anders erwartet habe.
  • Ich habe in der Google Search Console Ausschau nach Fehlern gehalten, die der Crawler von Google entdeckt hat. Oft werden diese auch erst Wochen später dort angezeigt.
  • Ich habe geschaut, ob die Statistik (Statify und Koko Analytics) funktioniert oder ob es irgendwelche Auffälligkeiten gibt?
  • Ich habe geprüft, dass der VG Wort Zählpixel weiterhin korrekt eingebaut wird.
  • und mehr

Ich habe in den Folgetagen viel getestet und immer wieder Dinge ausprobiert. Dadurch hoffe ich, dass sich kein größerer Fehler in das neue Layout eingeschlichen hat.

Falls ihr dennoch ein Problem hier im Blog findet, hinterlasst gern einen Kommentar. Das würde mich freuen und mir helfen diese zu beheben.

Einen lesenswerten Artikel zum Theme Wechsel gibt es übrigens in englischer Sprache auf wpbeginner.com.

Fazit

Gerade bei größeren Projekten ist so ein Layout Wechsel schon nicht ohne, aber ich bin froh diesen nun endlich umgesetzt zu haben. Es fühlt sich einfach gut an, das endlich gemacht zu haben und ich bin mit GeneratePress* sehr zufrieden.

Damit setze ich die Rahmenbedingungen für die Zukunft und habe die Basis für neue Anpassungen und Möglichkeiten geschaffen. Nun kann ich mich wieder vor allem meinen Inhalten widmen.

Welche Erfahrungen habt ihr beim Wechsel eures Webdesigns/Themes gemacht? Welche Tipps könnt ihr geben? Hinterlasst einfach einen Kommentar.

Peer Wandiger

9 Gedanken zu „5 Tipps für den Layout Wechsel – Mein neues Webdesign mit GeneratePress“

    • Ach ich und Blocks. Damit werde ich in diesem Leben wohl nicht mehr warm.

      Dazu bin ich wohl zu sehr Autor und zu wenig Webdesigner.

      Antworten
  1. Hallo Peer,

    hab mich auch erst schwergetan, aber jetzt will ich nicht anderes mehr sehen :). Die Flexibilität ist einfach unschlagbar.

    Antworten
  2. Hallo Peer,

    GP werde ich mir für mein nächstes Projekt holen. Bis jetzt nutze ich Child-Themes von Genesis (Studiopress), mit denen ich auch sehr zufrieden bin. Eine Frage hätte ich: wie hast Du es mit dem Willkommenstext auf deiner Startseite hinbekommen, da du ja SiN als Blog betreibst bzw. die Startseite ja nicht statisch ist?

    Danke im Voraus und beste Grüße!

    Antworten
    • Den Startseiten-Text oben habe ich mit dem Banner-Plugin AdvancedAds umgesetzt. Also quasi eine Anzeige, die nur auf der Startseite oben angezeigt wird.

      Antworten
        • Das wirft bei mir zwei Gedanken auf.

          1. Viele Divs der Ad-Plugins für WordPress werden von Werbeblockern bereits erkannt und entsprechend ausgeblendet. Je nach Plugin müsste man da sicherstellen, dass die erzeugten Divs individuell sind oder eben nicht von den großen Filterlisten geblockt werden. Das ist halt immer das Problem mit Plugins, die flächendeckend genutzt werden.

          2. Auf der anderen Seite könnte man ganz bewusst einen Div-Namen von AdBlockern nutzen, um eventuelle Zwangshinweise auf Cookies, Ads, Affiliatelinks (wie im Artikel oben) extra von den Adblockern ausblenden zu lassen. Dann sehen die nämlich fast alle gar nicht mehr. Das wäre natürlich nicht okay, wäre aber mal eine interessante Möglichkeit, AdBlock zu seinen Gunsten zu verwenden.

          Nur zwei fixe Gedanken, die mir gerade kamen.

          Antworten
          • zu 1) Das kann natürlich ein Problem sein. Dann wäre es wohl besser es als Sticky Beitrag zu erstellen. Man kann ja einen Artikel veröffentlichen und unter “Sichtbarkeit: Öffentlich” den Haken bei “Beitrag auf der Startseite halten” setzen. Das müsste auch gehen.

            zu 2) Das würde ich nicht machen, da es im Zweifel nur Ärger gibt, bzw die Website dann nicht richtig funktioniert.

  3. Ich finde die Umsetzung sehr gelungen.
    Reduziert, aufgeräumt und klar.
    Trotzdem findet sich jeder wie auch vorher zurecht, da du deinen Stil beibehalten hast.

    Lg…Peter

    Antworten

Schreibe einen Kommentar