Bloglayout in DIVI erstellen

Bloglayout im DIVI Theme Builder erstellen – so wird bloggen easy!

8 Dez, 2022

Was bringt dir ein Bloglayout und wie kannst du das ganz einfach mit DIVI im Theme Builder erstellen?

In diesem Beitrag schauen wir uns die technischen Aspekte an. Wenn du wissen willst, wie du Step by Step beim bloggen vorgehst, habe ich dir unten noch einen Artikel verlinkt.

Wozu solltest du Blogartikel schreiben?

Eins möchte ich hier doch nochmal erwähnen, wieso jeder Blogbeiträge schreiben sollte.

Jeder googelt. Und was wir beim googeln meist lesen sind Blogbeiträge.

Sie helfen dir beim Erstkontakt mit einem Besucher auf deiner Website

  • mit Wissen zu überzeugen
  • Vertrauen aufzubauen
  • erhöhte Chancen über Suchmaschinen gefunden zu werden (höher als die Website allein)
  • häufige Fragen zu beantworten
  • zum Newslettereintrag oder Kauf zu animieren

Darum empfehle ich JEDEM zumindest 3-4 GUTE Blogartikel zu schreiben. Solche, die auf einer gründlichen Keywordrecherche aufbauen und ein vorzeigbares Ranking vorweisen. Dazu ist es eben wichtig, Blogartikel richtig zu schreiben.

Du kannst auch Cross-Posting machen, also zB aus einer Podcastfolge einen Blogbeitrag erstellen oder aus einem Youtubevideo und die dazugehörigen Folgen auch noch einbinden.

Der Blog ist eben der Kanal, den du am meisten verwenden kannst und so – im Unterschied zu Social Media und sonstigen Kanälen – mehr Besucher auf deine Website erhältst, was auch dein Ranking in Suchmaschinen positiv beeinflusst.

Wie bei der Website gilt: ein Business, das allein auf Social Media aufgebaut ist, ist keins.

Onlinemarketingbundle 1

Onlinemarketing-Guides für 0€!

...mit allem, was du über das Slow-Marketing mit Website & Newsletter wissen solltest - ideal für Introvertierte!

Verkaufen durch Vertrauen statt Kaltakquise und Social Media Stress!

Wieso ein Bloglayout mit DIVI erstellen?

Weil allein das schreiben schon viel Zeit kosten kann, sollte alles, was um den Beitrag rum erscheint, so einfach wie möglich sein und den Blog zum konvertieren bringen! Dafür ist das Bloglayout ideal.

Das Layout ist alles, was über, unter oder neben dem eigentlichen Text erscheint. Sowohl das Beitragsbild, der Titel, die Seitenleiste, die Newsletteranmeldung etc.

Vorteile:

  1. Du musst nur noch deinen Text einfügen, alle anderen Elemente und der Aufbau des Beitrags werden dynamisch generiert.
  2. Möchtest du eine Änderung vornehmen, dann machst du das einmalig im Bloglayout und nicht in jedem einzelnen Beitrag.
  3. Deine Beiträge bleiben auch nach Wechsel des Themes erhalten! Sie sind so nämlich in WordPress erstellt, nicht in DIVI. Lediglich die Optik wird von DIVI generiert.
  4. Und weil wir keine 80er-Webseiten und Blogs mehr sehen wollen, sollte der Blog eben auch zeitgemäß aussehen. Wir sind doch alle genervt von hässlich formatierten Texten mit 100 schlecht eingesetzten Anzeigeblöcken.

Was du vor dem Wechsel zum Bloglayout beachten solltest

Bevor du startest: du hast schon Blogartikel mit DIVI oder Gutenberg geschrieben? Dann mach unbedingt eine Sicherung aller Inhalte! 

Der gewaltige Unterschied zum bloggen mit DIVI ist, dass wir nur noch das Layout mit DIVI im Theme Builder aufbauen! Die Beiträge selbst erstellen wir anschließend im Classic Editor (alternativ Gutenberg, bitte testen!), also in WordPress selbst.

Ich empfehle sogar, das folgende zuerst gründlich auf einer Test-Umgebung zu probieren. Das geht zB mit dem Plugin WP-Staging. Nicht, dass eventuell doch Beiträge gelöscht werden, die Technik halt…

Deine Beiträge in DIVI dürften zwar auch nach Deaktivieren des DIVI Builders für Beiträge noch vorhanden sein, plus das erstellte Layout drumrum. Ich empfehle dir trotzdem, die Beiträge rauszukopieren, zum Standardeditor zu wechseln und sie dort einzufügen. Also im exakt selben Beitrag, denn so bleibt der Permalink erhalten.

Solange du DIVI noch aktiviert hast, kopiere also deine Inhalte raus und wechsel im Beitrag zum Standardeditor. Der Inhalt ist dann weg!

Standard Editor aktivieren

Bloglayout in DIVI erstellen als Videoanleitung

Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

DIVI Einstellungen vornehmen

Dann starten wir mit den Basics.

Steuer die DIVI Optionen an und wechsel in den Reiter Builder. Dort deaktivierst du den DIVI Builder für Beiträge. So kommen wir gar nicht mehr erst in Versuchung, den DIVI Builder bei der Beitragerstellung zu aktivieren.

DIVI Classic Editor Beiträge

 

Jetzt wechselst du in den Reiter Fortgeschritten und aktivierst den Classic Editor. Der ersetzt quasi den Gutenberg. Nach meinem Test könntest du wohl auch mit Gutenberg schreiben, ich finde den Classic Editor aber viel angenehmer und übersichtlicher zum bloggen. Wenn du bei Gutenberg bleiben möchtest, teste das bitte auf einer Staging-Seite.

DIVI Classic Editor

Nachdem du meine Favoriten-Einstellungen vorgenommen hast, können wir mit dem Bloglayout in DIVI loslegen.

Layout im DIVI Theme Builder anlegen

Wechsel jetzt unter den DIVI Optionen zum Theme Builder. Dort klickst du in ein leeres Feld, um eine neue Vorlage zu erstellen.

Wähle hier Alle Beiträge aus.

Theme Builder Beitraege

Speichern und dann bearbeite den Body (benutzerdefinierten Körper).

DIVI Beitraege Body

Jetzt öffnet sich eine völlig leere Seite, welche du mit DIVI gestalten kannst.

Dynamische Inhalte einfügen

Dynamische Inhalte sind die, welche du später im Beitrag selbst hinterlegst und die dann an der bestimmten Stelle im Layout erscheinen.

Dazu gehören:

  • Beitragsbild
  • Inhalt
  • Überschrift
  • Veröffentlichungsdatum, Kategorie, Autor

Du kannst das Layout gestalten, wie du willst. Füge an geeigneter Stelle die dynamischen Inhalte ein, die du brauchst.

Für den Inhalt, also deinen tatsächlichen Blogbeitrag, wählst du das Modul Inhalt posten.

Bild, Überschriften und Datum/Autor/Kategorie kannst du im jeweiligen Modul als dynamischen Inhalt auswählen.

Lösche dazu im Modul den jeweiligen Inhalt und klicke auf das kleine Symbol, das erscheint.

Dynamische Inhalte DIVI

Im Textmodul verwende ich immer Post / Archivtitel (die H1), das Post Veröffentlichungsdatum und die Post Kategorie.

Für das Beitragsbild wählst du ein Bildmodul, löschst das graue Vorschaubild und klickst ebenfalls auf den dynamischen Inhalt. Wähle Angezeigtes Bild.

Damit deine Überschrift auch wirklich eine H1 ist, öffne das Modul, wähle die Einstellung und füge das hier ein:

Dynamischer Text DIVI 1

H1 formatieren Blog DIVI

Die H1 wird automatisch aus deinem Beitragstitel in der einzelnen Zeile im Classic Editor generiert. Im Text verwende bitte nur noch die H2, H3 usw.

Seitenleiste und unteren Bereich füllen

Um eine schöne Seitenleiste zu gestalten, füge eine Zeile mit 2 Spalten ein.

In die erste Spalte platziere ich das Inhalt posten-Modul.

Die zweite Spalte kannst du frei gestalten. Zum Beispiel farbig hinterlegen, weitere Kategorien oder top Beiträge hinterlegen, ein Infotext über dich, eine Newsletteranmeldung, Affiliatelinks usw.

Damit das gleichmäßig gut aussieht, wechsel ich in der Zeileneinstellung auf Design, Größe und aktiviere Spaltenhöhe ausgleichen.

Spaltenhoehe ausgleichen DIVI

Für die einzelne (zweite) Spalte stelle ich unter Zwischenraum (in der Spalte, nicht Zeile) einen Rundum-Abstand von ca 15 px ein. Dann klebt dein Text der Seitenleiste nicht am Rand.

Hier könntest du auch die Hintergrundfarbe für diese Spalte ändern.

Einzelne Spalte in DIVI formatieren

Zwischenraum Spalte DIVI

Unterhalb des Beitrags platziere ich am liebsten das Modul Beitragsnavigation, um zum nächsten Artikel springen zu können.

Weitere Möglichkeiten wären die Kommentarfunktion (lasse ich gerne weg wegen Spam und Datenschutz), ein Kontaktformular (ist bei mir im Footer, der wird im fertigen Beitrag wieder angezeigt) und andere Blogartikel anzeigen zu lassen.

Dazu fügst du das Modul Blog ein, setzte den Beitragszähler auf 3 und wählst unter Design -> Layout die Ansicht Gitter.

Tob dich aus! 🙂

Kleiner Tipp für Seitenleisten:

Ich verwende meine Seitenleiste sowohl auf der Blogseite, den Archivseiten und den Beiträgen. Damit ich Änderungen nicht 3 mal machen muss, sind alle Elemente der Seitenleiste als globale Elemente in der Bibliothek gespeichert. So ändern sich alle, wenn ich eine Änderung vornehme.

Mockup Autoren

Kleines Budget, aber Website soll her?

Da sind meine fertigen Webseiten für Business-Starter perfekt!

Archivseiten im DIVI Theme Builder erstellen

Die allgemeine Blogseite (bei mir die: nadinschmidt.com/blog/) gestaltest du als ganz normale Seite (nicht Beitrag oder Theme Builder) und fügst auch hier das Modul Blog ein. Hier genügt es, nur die Ansicht optisch anzupassen. Achte darauf, dass unter Elemente die Nummerierung angezeigt wird, so können Besucher auf die nächste Seite deiner Beiträge springen.

Damit auch deine Kategorieseiten schön aussehen, musst du wieder auf den Theme-Builder zurückgreifen (hier meine Kategorieseite: nadinschmidt.com/category/best-of/)

Hier wählst du eine neue Vorlage, statt alle Beiträge jetzt Alle Kategorieseiten und Alle Archivseiten.

Die blanke Seite kannst du ebenfalls frei gestalten. Hübsch ist es, oben wieder ein dynamisches Textmodul einzufügen und Archivtitel als H1 anzeigen zu lassen.

Füge wieder das Modul Blog ein, allerdings wählst du jetzt unter Inhalt bei enthaltene Kategorien aus Aktuelle Kategorie. So werden nur die Artikel dieser Kategorie angezeigt.

Was du zum Bloggen noch beachten darfst

Technisch steht dein Blog nun. Ich empfehle dir, den bereits erwähnten Artikel zu lesen: Blogartikel optimieren

Kurzgefasst solltest du vor dem Bloggen das machen

  1. Recherchiere dein Keyword (merke: du schreibst dann zwar optimiert für dieses Keyword, aber Google sucht sich selbst relevante Keywords zusammen und entscheidet, ob dein Beitrag auch bei anderen Suchanfragen erscheint)
  2. Gliedere den Inhalt in sinnvolle Überschriften mit Keywords
  3. Schreibe den Inhalt
  4. Lege Bild und Kategorie fest
  5. Fülle die Metadescription aus (zB mit Yoast oder mein Favorit Rank Math)
  6. Ergänze die Beschreibung in den verwendeten Bildern
  7. Teile den Artikel im Newsletter oder Social Media
  8. Melde den Artikel in der Google Search Console an und prüfe die Indexierierung und das Ranking nach 4-6 Wochen!

Vermeide

  • Ohne Keyword zu schreiben, außer du setzt den Artikel auf No Index (wird nicht in Suchmaschinen gelistet) oder willst ihn nur verwenden, um ihn auf häufige Fragen verschicken zu können.
  • Duplicate Content – Artikel mit ähnlichen Inhalten schaden dem Ranking beider Artikel. Fasse zusammen oder setze auf No Index.
  • Schreibe besser als die Konkurrenz (ok, das ist kein vermeiden…)

Tools, die dir beim Bloggen helfen

  • Google Search Console – prüfe Keywords und aufgerufene Seiten sowie Klicks
  • Ubersuggest – recherchiere Keywords und prüfe das Ranking deiner Keywords und Artikel
  • Google Suche – öffne Google und tippe in die Leiste site:domain (in meinem Fall site:nadinschmidt.com). So erkennst du, welche deiner Artikel überhaupt bei Google gelistet sind und um welche du dich noch in der Search Console kümmern solltest

 

Glückwunsch, du bist jetzt bereit zum Erstellen deiner Beiträge!

Bei Fragen melde dich gerne.

Onlinemarketingbundle 1

Onlinemarketing-Guides für 0€!

...mit allem, was du über das Slow-Marketing mit Website & Newsletter wissen solltest - ideal für Introvertierte!

Verkaufen durch Vertrauen statt Kaltakquise und Social Media Stress!

 

8. Dezember 2022

Kategorien

Marketing von
Nadin Schmidt

Hi, ich bin Nadin.

Ich bin Nadin und ich verhelfe (introvertierten) Soloselbständigen zu ihrer Wohlfühlsichtbarkeit mit Website und Newslettern.

Am liebsten arbeite ich dafür mit Divi und Active Campaign.

Für mehr „slow“ im Onlinemarketing statt Social Media Stress!

Fragen? Schrei(b).



ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Theme & Pagebuilder: Divi*

*Hierbei handelt es sich um einen Affiliate-Link. Wenn du darüber kaufst, erhalte ich eine kleine Provision – du zahlst dafür nicht mehr.

Lies doch auch mal…