Geniales Layout für Deine Blogseite - So ziehst Du Deine Leser an

Du hast ein spezielles Hobby, das Du mit Deinen Besuchern teilen möchtest? Du schreibst regelmäßig Beiträge, worin Du über Deine Leidenschaft mit hervorragenden Bildern oder anderen Medien berichtest? Aber Deine Blog-Übersichtsseite sieht "so-lala" aus? Oder Du bist mit dem Aussehen gar unzufrieden? Das wird sich jetzt ändern! In diesem Beitrag erfährst Du, wie Du das Layout optimieren kannst. 

Das perfekte Theme für Deine Blogseite

Seitdem ich mit WordPress arbeite, habe ich schon einige Design-Vorlagen kennengelernt. Einige hiervon lassen sich nicht einmal wunschgemäß anpassen. Entweder sind keine Beitragsbilder über, unter oder neben dem Titel sowie Auszug aus dem Text vorhanden, oder diese sind einfach zu groß oder viel zu klein. Und das sind einer der Gründe, weshalb ich mich für das Premium-Theme "Avada" entschieden habe. 

Die Einstellungen für besseres Aussehen

Der Grund für diese Entscheidung waren die benutzerfreundlichen Einstellungen. Damit kannst Du einige Features (z.B. Social-Share) einblenden oder einfach verschwinden lassen. Sogar die Größe der Beitragsbilder können mit wenigen Klicks angepasst werden. Falls Du ebenfalls dieses Theme hast, switche zu den Theme-Einstellungen (Global Options) und dort im Menü zu "Blog". Dort kannst Du Deine Blogseite verändern. 

Wichtige Anpassungen:

  • Hinzufügen & entfernen der Page-title-Bar (z.B. bunte Leiste im Header-Bereich)
  • Anpassung des Blog-Layouts (z.B. Größe des Beitragsbildes)
  • Auszugslänge anpassen (Größe des Textbereichs)

Widgets für die Blog-Sidebar

Wenn Du eine Sidebar bei den Blog-Einzelbeiträgen den Lesern zur Verfügung gestellt hast, dann können diverse Widgets im Blog-Sidebar-Bereich eingefügt werden. Zu diesen WordPress Einstellungen kommst Du durch Klick auf Design / Widgets. Die gängigen Widgets für einen Blog-Beitrag sind:

  • Suche (Suchfeld)
  • Neue Beiträge
  • Neue Kommentare.

Es besteht hierfür auch andere Widgets hinzuzufügen, wie z.B.

  • Avada Author (Die Einstellungen findest Du im Menü: Benutzer. Fülle die Felder hierfür aus z.B. Biografie, dann werden diese in diesem Bereich angezeigt.)
  • Avada Contact Info
  • Avada Social Links
  • Avada Twitter
  • Avada Facebook Page Plugin

Ein Tipp: Schau Dich auf dieser Seite um. Vielleicht findest Du ein passendes Widget, das Du in der Seitenleiste einfügen möchtest.

Gestaltung des Headers mit einer Page-Title-Bar

Ebenfalls besteht die Möglichkeit eine benutzerdefinierte Page-Title-Bar in einzelne Blog Posts einzufügen. Hierfür wechsle wieder in die Theme-Einstellungen von Avada und dann in den Menü-Bereich "Options" sowie im Untermenü zu "Blog". Dort kannst Du neben dem Titel: "Blog Page Title Bar" im Dropdown Menü diverse Optionen auswählen:

  • Ausblenden
  • Zeige Leiste und Inhalte
  • Zeige nur Inhalte.

Wichtige Anleitungen zur Gestaltung einer PTB (Page-Title-Bar)

Klicke hierfür auf einen Bereich. Es öffnet sich die Anleitung zum jeweiligen Titel.

Anleitung: Eine Page-Title-Bar mit Canva erstellen

Dieses Tool eignet sich bestenfalls für die Erstellung einer Page-Title-Bar: "Canva". Damit können beliebige Bilder und Texte hinzugefügt werden. Wichtig hierfür ist, dass Du bereits über einen Account bei Canva verfügst.

  • Verwende hierfür die Option: "Benutzerdefinierte Abmessungen", wenn Du auf den Button: "Design erstellen" klickst.
  • Die Größe der Page-Title-Bar gleicht die eines schmalen Banners. Und hierfür habe ich die Maße: Breite - 1250 und Höhe 150 gewählt.
  • Möchtest Du andere Maße, dann klicke wieder auf den Button: "Design erstellen" und füge anschließend den Begriff "Banner" in der Suchleiste ein. Dir werden dann verschiedene Maße angezeigt, die Du für die Erstellung eines Banners verwenden könntest.
  • Es öffnet sich ein neues Fenster, worin Du eine weiße Page-Title-Bar findest.
  • In der linken Leiste findest Du die Bearbeitungs-Tools z.B. Fotos, Elemente, Text, Hintergrund...
  • Zur Auswahl klicke auf eines der genannten Tools und wähle ein Element aus. Du siehst dann, wie sich der weiße Bereich verändert.

Hier ein Tutorial zur ersten Anwendung: https://www.youtube.com/watch?v=65TRmIztIgE

 

Anleitung: Füge das Bild mit dem Theme "Avada" ein.

Folge jetzt alle Schritte, um dieses Bild einzufügen:

  • Wähle in den Theme-Einstellungen das Menü "Layouts" aus.
  • Gestalte mittels des "Blog Builders" zunächst ein neues Layout, indem Du in der Leiste einen X-beliebigen Namen einfügst und dann auf den blauen Button: "Create New Layout" klickst.
  • Jetzt sollte die Option "Select a Page-Title-Bar" ausgewählt werden.
  • Da es noch keine Page-Title-Bar gibt, füge dort in der Leiste einen weiteren X-beliebigen Namen ein und betätige dann den Button: "Create New Section".
  • Klicke dann rechts auf das kleine Icon mit der Füllfeder". Du wirst auf eine neue Seite weitergeleitet, wo Du dann auf den ersten Button "Avada Builder" klickst.
  • Du wirst nun aufgefordert ein neuen Container hinzuzufügen. Darum klicke jetzt auf den blauen Button: "+ Container".
  • Es öffnet sich ein neues Fenster. Wähle dort bei "Builder Containers" den ersten Bereich "1/1" aus. Das Fenster schließt sich dadurch und im Container steht jetzt "Element".
  • Klicke auf den vorhin genannten Titel und es öffnet sich ein weiteres Fenster. Wähle dort die Option: "Image" aus.
  • Ganz oben in dem kleinen Fenster findet man den Button: "Upload Image".
  • Du gelangst in die WordPress Bibliothek. Lade das Bild hoch, das Du zuvor mit Canva erstellt hast und klicke wie gewohnt unten rechts auf den Button: "In den Beitrag einfügen" klickst.
  • Du siehst in dem kleinen Fenster, dass das ausgewählte Bild eingefügt wurde. Wähle dann den Button "Save" aus und im ersten Bereich den Button: "Aktualisieren". 

ACHTUNG! Wenn eine Page-Title-Bar mit Avada eingefügt werden soll, achte hierbei darauf, dass Du für das Erstellen eines Beitrages keinen anderen Content-Builder verwendest. Denn es kann passieren, dass sich das Design dadurch unerwünscht verändert. (Probleme dem CSS)

Den Hintergrund anpassen

Selbst auch den Background kann man mit Avada anpassen. Hierfür switche wieder zurück in die Theme-Einstellungen und dann auf "Optionen". Dort wähle den Bereich "Hintergrund" aus. Entweder verfügst Du über ein Bild hierfür oder Du änderst die Hintergrundfarbe. Achtung! Wenn Du anschließend auf den Button "Änderungen speichern" klickst, dann ändert sich der Background der gesamten Webpräsenz. Ein helles Bild mit wenig Kontrast oder eine andere Hintergrundfarbe, die beispielsweise zum Logo passt kann sich durchaus positiv auswirken.

Fazit:

Nun hast Du sämtliche Tipps erhalten, um eine hervorragend aussehende Beitragsseite zu erstellen. Nicht nur die Übersichtsseite, sondern auch einen Beitragspost kann man mit Avada anpassen. Dies wirkt sich sehr einladend auf Deine Leser aus. Ein guter Tipp: Hole Dir dieses Premium-Theme, um von der Masse herauszustechen.