Einrichtung eines Blogs mit dem Divi-Pagebuilder.

Mit dem Divi-Theme kann man selbstverständlich auch einen ganz normalen Blog betreiben. Grundsätzlich ist die Einrichtung eines Blogs denkbar einfach. Denn im Prinzip muss man gar nichts tun. Das Divi kann den ganz normalen Blog von WordPress nutzen. Wer jedoch einen etwas anspruchsvolleren Blog haben möchte, kann diesen komplett selbst gestalten. Wie dies geht, zeige ich in diesem Beitrag.

Einen Beitrag samt Kategorie anlegen.

Im ersten Schritt müssen wir einen neuen Beitrag anlegen. Solltet ihr bereits einen Blog mit verschiedenen Beiträgen haben, könnte diesen Punkt natürlich überspringen.

Auch hier gilt, dass ihr einen Standardbeitrag von WordPress nutzen könnt. Alternativ könnt ihr auch bei dem einzelnen Beitrag den Pagebuilder von Divi nutzen, wie ich dies in diesem Beispiel mache.

Wichtig ist an dieser Stelle, dass ihr eine Kategorie festlegt, welcher dieser Beitrag zugeordnet werden soll. Später werden wir nämlich auswählen müssen, welche Kategorien unser Blog enthalten soll.

Den Inhalt des Blogbeitrags könnt ihr beliebig gestalten. Hier nutze ich einfach eine Standardsektion mit einer einzelnen Zeile und dem Modul Text. Ich empfehle, auch ein Beitragsbild festzulegen. Dieses wird später als Vorschau im Block angezeigt.

Ganz wichtig: Bitte das Veröffentlichen des Beitrages nicht vergessen! Andernfalls wird der Block später anzeigen, dass keine Inhalte zur Verfügung stehen.

Eine Seite für den Blog anlegen.

Um unseren Blog zu erstellen, nutzen wir eine ganz normale Seite. Wir erstellen also eine Seite und geben ihr einen beliebigen Namen. Wir können die Standardeinstellungen der Seite komplett übernehmen. Wir müssen aber in diesem Fall den Pagebuilder von Divi benutzen.

Sobald wir den Pagebuilder aktivieren, werden wir nach der gewünschten Vorlage für die Aufteilung der Seite gefragt. Ich möchte einen Block mit einer Seitenleiste erstellen. Dazu wähle ich die Aufteilung zwei Drittel für meinen Textinhalt und ein Drittel für die Seitenleiste.

In der ersten Spalte füge ich nun das Modul Blog hinzu. Hier wähle ich die von mir gewünschten Kategorien aus, die in meinem Blog angezeigt werden sollen.

Darüber hinaus kann ich nun verschiedenste Einstellungen vornehmen, welche Elemente auf meiner Seite ausgegeben werden sollen oder nicht. Ich kann beispielsweise den vollen Text des Beitrags anzeigen oder nur einen Auszug. Ich kann das Beitragsbild anzeigen lassen das Datum, den Autor, die Anzahl der Kommentare und vieles mehr. Über die Buttons kann man einfach die gewünschten Funktionen aktivieren oder deaktivieren.

Schauen wir uns den Blog jetzt einmal an. Bisher haben wir nur einen einzelnen Blogartikel. Das Beitragsbild steht über dem Titel, samt Metaangaben und Textausschnitt. Als Textauschnitt werden übrigens die ersten Zeichen des Textes genommen. Sofern du beim Beitrag einen Auszug festlegst (was ich aus SEO-Sicht immer empfehle), wird automatisch dieser Text als Auszug genommen.

Hintergrundfarbe für die Sektion.

Auf der weißen Seite sieht unser Blog noch etwas verloren aus. Im nächsten Schritt füge ich daher der Sektion einen Hintergrund hinzu. Dazu öffne ich das Menü der Sektion.

Und unter dem Punkt Inhalt finde ich den Unterpunkt Hintergrund. Hier kann ich nun eine beliebige Farbe, einen Verlauf oder ein Bild auswählen. In diesem Fall nehme ich einen leichten Braunton als Hintergrund.

Schauen wir uns das Ergebnis an.

Dies sieht schon viel besser aus. Allerdings steht jetzt der Titel und der Text des Beitrags etwas verloren unter dem Vorschaubild. Schöner wäre es, wenn alle Elemente des Beitrages zusammengefasst sind. Dazu lege ich einen Hintergrund für den Blog fest.

Hintergrundfarbe für den Blog.

Ich öffne also das Menü des Blog und wähle dann eine Hintergrundfarbe.

Nun haben die Blogbeiträge eine andere Hintergrundfarbe als meine Seite, wodurch sich der Blog mehr von der Seite abhebt.

Was jetzt noch stört, ist, dass die Bilder, der Titel und die Vorschautexte direkt am Rand kleben. Um dies zu ändern, öffnen wir noch einmal das Blogmodul und gehen nun in die Kategorie Entwurf und dort zu dem Bereich Abstände. Bei den Abständen geben wir nun für oben, unten, links und rechts einen gewünschten Abstand ein. Ich wähle hier 20 Pixel. Im Ergebnis steht nun der Text sauber in meinem Blogbereich.

Zwischenergebnis:

Seitenleiste hinzufügen.

Was jetzt noch fehlt ist eine Seitenleiste. Dazu wählen wir für die letzte Spalte das Modul Seitenleiste.

In dem Menü der Seitenleiste müssen wir zunächst die gewünschte Seitenleiste auswählen. Hier hast du vollen Zugriff auf alle Seitenleisten, die du unter WordPress in dem Bereich Design/Widgets angelegt hast.

Tipp: Du kannst übrigens verschiedene Seiten leisten Anliegen und dann in den verschiedenen Bereichen deines Blocks entsprechend ausgeben. Natürlich kannst du auch hier das Design der Seitenleiste weiter anpassen. So kannst du einen Hintergrund festlegen. Weitere Funktionen zur Anpassung des Designs findest du auch hier unter dem Menüpunkt Entwurf.

Da wir die Seitenleiste rechts eingefügt haben, ist der Trenner am rechten Bildrand (die kleine Linie am äußeren Rand) überflüssig. In meinem Beispiel entferne ich diese einfach. Dazu öffne ich erneut das Modul Blog und gehe zu dem Punkt Entwurf > Layout. Hier kann ich den Trenner über die Einstellung Links/Rechts versetzen oder einfach deaktivieren. Hier setze ich den Punkt „Show Border Seperator“ auf „Nein“.

Zwischenergebnis

Damit ist unser Blog fertig. Natürlich könnt ihr alle Layoutfunktionen individuelle anpassen, ganz gleich ob Schriften, Farben, Animationen, Ränder, Schatten und vieles mehr.  

Damit ist unser Blog bereits fertig.

Ein Block im Masonry-Style.

Sehr beliebt sind auch Blogs in einer Gitterdarstellung. Auch dies ist mit dem Pagebuilder sehr einfach umzusetzen. Ich wähle dazu in diesem Fall nur eine Spalte aus, um mehr Platz für meine Darstellung zu haben.

Im nächsten Schritt öffne ich das Modul Block. Hier gehe ich zu dem unter. Entwurf und wähle als Layout Gitter aus. Natürlich kann ich auch hier alle Designelemente wieder anpassen. Die Hintergrundfarbe der Beiträge, die Textfarben und Größen und so weiter.

 

Tipp: für meinen Blog auf Designers Inn habe ich unter dem Menüpunkt Erweitert/Advanced noch die Abstände unter dem Text und unter den Metaangaben verringert.

Dies geht mit dem Befehl: margin-bottom: 5px

Der fertige Block in der Gitterdarstellung sieht dann in etwa so aus:

 

Marco

Marco

Designer

Später lesen?

Diesen Artikel als
E-Book downloaden!

DOWNLOAD

Hey, schreib mir deine Meinung!

4 Kommentare

  1. Dagmar

    Super!
    Und wie kann ich das machen, dass auch bei mir so ein Kasten mit MEHR LESEN erscheint?

  2. Marco

    Hi, dies stellst du direkt im Blogmodul ein.

  3. Dirk

    Vielen Dank für die Hinweise, wie ändere ich die Farbe des mehr lesen buttons?
    Gruß
    Dirk

  4. Marco

    Hi, dies geht derzeit leider noch nur über css:
    a.more-link {
    border: 1px solid #000000;
    padding: 5px 10px 5px 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 11px;
    line-height: 50px;
    }

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Pin It on Pinterest

Share This
';

Diese Website nutzt Cookies. Durch Bestätigung oder Nutzung der Website erteilst du dein Einverständnis. Impressum | Datenschutzerklärung