So erstellen Sie mit Divi . einen Blog im mittleren Stil

Veröffentlicht: 2017-07-06

Im heutigen Divi-Blogpost geben wir einige großartige Tipps, wie Sie Ihre eigene Blogging-Website im gleichen Stil wie der Medium-Blog erstellen können.

Medium ist bekanntlich eine der am häufigsten verwendeten Plattformen zum Bloggen. Sie haben nicht nur eine große Community von Bloggern, die regelmäßig mit ihrem Publikum interagieren, sondern ihre Blogging-Plattform bietet auch eine sehr schöne Benutzererfahrung. Genau das will jeder Blogger. Sie möchten sicher sein, dass sie die Botschaft klar und in einer Umgebung vermitteln, in der sich der Leser wohl fühlt.

Das Bloggen auf Medium hat jedoch seine Grenzen. Es gibt zum Beispiel keine Vorteile von SEO. Indem Sie Ihren eigenen Blog erstellen, der vom Medium-Blog-Stil inspiriert ist, können Sie das vertraute Gefühl, das Sie bereits mit dem Medium-Blog haben, fortsetzen und auf Ihre eigene Website übertragen.

Lass uns anfangen

Abonnieren Sie unseren Youtube-Kanal

Wir zeigen Ihnen die wichtigsten Teile beim Erstellen eines Blogs im mittleren Stil und zeigen Ihnen auch Schritt für Schritt, wie Sie einige der wichtigsten Teile erstellen. Zum Beispiel; So erstellen Sie eine Blog-Post-Vorlage im mittleren Stil, die Sie für alle Ihre Posts verwenden können. Die Vorlage sieht so aus:

Wir zeigen Ihnen auch, wie Sie die Worth The Read- und Highlight-and-Share-Plugins hinzufügen, damit es noch ähnlicher aussieht. Das Ergebnis von Worth The Read sieht wie folgt aus:

Und das Hervorheben und Teilen hat folgenden Effekt:

Erstellen Sie ein einfaches Menü wie das Medium Blog

Eines der Dinge, die Sie beim Besuch der Medium-Website deutlich bemerken können, ist die Einfachheit des Menüs. Es stehen nicht allzu viele Optionen zur Verfügung, was den Besuchern die Navigation sofort erleichtert. Die Besucher können die markierten Blogbeiträge auf der Homepage erkunden und von dort aus ihren Aufenthalt fortsetzen.

Menüelemente

Wählen Sie ein Logo, das der Einfachheit des Rests Ihrer Website entspricht, und achten Sie darauf, dass es dezent ist, indem Sie es in Ihrem Menü klein halten. Sie möchten auf keinen Fall, dass das Logo den Inhalt überlagert, den Sie auf Ihrer Website teilen.

Fügen Sie als Nächstes nicht zu viele Seiten in Ihre Navigation ein. Da sich auf Ihrer Website alles ums Bloggen dreht, reicht die Homepage wahrscheinlich aus. Sie können auch eine About-Seite hinzufügen, wenn Sie den Besuchern etwas mehr über sich erzählen möchten.

Fügen Sie im weiteren Verlauf ein Suchsymbol hinzu, damit die Leute Ihre Blog-Posts einfach mit wenigen Schlüsselwörtern durchsuchen können. Es dreht sich alles um die Inhalte, die Sie produzieren, und deren einfaches Auffinden.

Für das obige Beispiel haben wir die folgenden Einstellungen für die primäre Menüleiste im Theme Customizer verwendet:

  • Menühöhe: 54
  • Max. Höhe des Logos: 37
  • Textgröße: 18

Verwenden Sie eine Farbpalette mit Kontrast und einfachen Schriftarten

Der Medium-Blog verwendet auf seiner gesamten Plattform drei Hauptfarben, wodurch der Inhalt leicht zu lesen ist. Obwohl zwei der Farben wie Schwarz und Weiß erscheinen mögen, sind sie für die Augen etwas weicher. Der dritte ist eine hellgraue, aber lesbare Farbe. Nehmen Sie die folgenden Anpassungen an der primären Menüleiste im Theme Customizer vor, um die Farben und die Schriftart zu ändern, die im primären Menü verwendet werden:

  • Schriftart: Source Sans Pro
  • Textfarbe: rgba(0,0,0,.44)
  • Farbe des aktiven Links: rgba (0,0,0,.44)
  • Hintergrundfarbe: #fbfcfd

Suchsymbol einschließen

Um das Suchsymbol in Ihr Hauptmenü aufzunehmen, gehen Sie außerdem zu Kopfzeile & Navigation > Kopfzeilenelemente > Suchsymbol anzeigen.

Feste Navigationsleiste deaktivieren

Eine andere Sache des Medium-Blogs ist, die Navigationsleiste oben auf der Seite zu halten. So werden die Besucher beim Lesen nicht unnötig unterbrochen. Um die feste Navigationsleiste auf Ihrer Divi-Website zu deaktivieren, gehen Sie zu Ihrem WordPress-Panel > Divi > Themenoptionen > Allgemeine Einstellungen > Deaktivieren Sie die feste Navigationsleiste.

Gestalten Sie Ihre Homepage-Blog-Module nach Kategorien

Als Nächstes möchten Sie die Startseite Ihrer Website nach Kategorien gestalten. Je nach dem von Ihnen erstellten Blog können Sie verschiedene Abschnitte auf Ihrer Homepage erstellen, die dem entsprechen, was Ihre Besucher am liebsten lesen. Wir empfehlen, mindestens die folgenden Kategorien zu verwenden: beliebte, neueste und vorgeschlagene. Sie können diesen Kategorien Blogbeiträge zuweisen, indem Sie in Ihrem WordPress-Menü auf der Seite „Kategorien“ von „Beiträge“ verschiedene Kategorien erstellen und jeden Beitrag einer oder mehreren Kategorien innerhalb des Beitrags selbst zuordnen.

Eine andere Sache, die Sie wirklich tun möchten, ist, die verschiedenen Blog-Module und -Abschnitte auf Ihrer Homepage einfach zu gestalten. Um dies zu erreichen, können Sie das Standard-Blog-Raster im Divi-Builder verwenden oder nach etwas fortgeschritteneren suchen. Wir haben unten drei Plugins aufgelistet, die Sie verwenden können.

Divi-Artikelkarten-Plugin

Das Divi Article Card Plugin ist ein kostenloses Plugin, das während Divi 100 in unserem Blog geteilt wurde. Der Stil, der in diesem Plugin verwendet wird, ist sauber und hat einen schönen Hover-Effekt. Es ist ein einfacher Effekt, aber er kann Ihrem Blog das gewisse Etwas verleihen.

Das Plugin ist völlig kostenlos, gehen Sie einfach zum Beitrag und laden Sie es herunter!

Divi Custom Blog-Modul

Ein weiteres Plugin, das ein gut aussehendes Blog-Modul-Layout erstellt hat, ist das Divi Custom Blog-Modul. Dieser ähnelt den Medium-Blog-Posts mehr als der vorherige, indem das vorgestellte Bild auf der linken Seite platziert wird.

Der Preis des Plugins beträgt 20 US-Dollar.

Divi-Blog-Extras

Das letzte Plugin, das Ihnen helfen könnte, Ihr Blog dem Medium-Blog näher zu bringen, ist Divi Blog Extras. Dieses Plugin hat auch viele verschiedene Blog-Modul-Layouts, die Ihnen beim Aufbau Ihres Blogs im mittleren Stil helfen können.

Das Plugin kostet 15 US-Dollar für die Single Site License und 30 US-Dollar für die Extended License.

Blog-Post-Vorlage erstellen

Medium hat ein Standard-Blog-Post-Format für alle erstellten Posts. Das Design konzentriert sich auf das Wesentliche des Beitrags: den Inhalt. Das verwendete Blog-Post-Format entspricht dem Rest der Website: einfach. Es kommt auf den Punkt, indem es die Kombination aus geschriebenem Inhalt und Medien verwendet, die Sie in den Beitrag einfügen können.

Divi bietet dieselben Möglichkeiten. Sie können Ihren Blog-Beitrag so einfach oder raffiniert gestalten, wie Sie möchten, indem Sie die verschiedenen Module verwenden, die der Divi-Builder bereitstellt. Dies ist das Beispiellayout, das wir Ihnen Schritt für Schritt zeigen:

Divi-Post-Einstellungen

Beginnen Sie damit, einen neuen Beitrag hinzuzufügen, ihm einen Titel zu geben und den Divi-Builder zu aktivieren. Stellen Sie als Nächstes sicher, dass die Divi-Post-Einstellungen wie folgt sind:

  • Seitenlayout: Volle Breite
  • Punktnavigation: Aus
  • Navi vor dem Scrollen ausblenden: Standard
  • Beitragstitel: Verstecken

Autor (Desktop)

Um das Layout zu erstellen, wechseln wir zum Visual Builder. Beginnen Sie mit dem Hinzufügen eines neuen Abschnitts mit zwei Zeilen. Fahren Sie fort, indem Sie der ersten Spalte ein Bildmodul und der zweiten Spalte zwei Textmodule hinzufügen. Öffnen Sie die Einstellungen des Abschnitts und fügen Sie '#fbfcfd' als Hintergrundfarbe hinzu.

Bildmodul

Öffnen Sie das Bildmodul, laden Sie das Bild auf der Registerkarte Inhalt hoch und setzen Sie die Bildausrichtung auf 'Links' auf der Registerkarte Design. Fahren Sie fort, fügen Sie in der Unterkategorie „Abstand“ der Registerkarte „Entwurf“ '-5%' zum oberen Rand und '25%' zum linken Rand hinzu.

Fügen Sie anschließend den folgenden Code zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS der Registerkarte Erweitert hinzu: 

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Erstes Textmodul

Fügen Sie im Inhaltsfeld auf der Registerkarte Inhalt den Namen des Autors hinzu und nehmen Sie die folgenden Anpassungen an der Unterkategorie Text der Registerkarte Design vor:

  • Textausrichtung: Links
  • Textschriftart: Source Sans Pro
  • Schriftgröße des Textes: 18
  • Textfarbe: rgba(0,0,0,0.8)
  • Textzeilenhöhe: 1.7em

Scrollen Sie auf derselben Registerkarte nach unten, um "-3%" zum oberen Rand und "-70%" zum linken Rand hinzuzufügen.

Zweites Textmodul

Geben Sie den Slogan in das zweite Textmodul ein und nehmen Sie die folgenden Anpassungen an der Unterkategorie Text der Registerkarte Design vor:

  • Textausrichtung: Links
  • Textschriftart: Source Sans Pro
  • Schriftgröße des Textes: 14
  • Textfarbe: rgba(0,0,0,0.44)
  • Textzeilenhöhe: 1.7em

Scrollen Sie außerdem auf derselben Registerkarte nach unten und fügen Sie in der Unterkategorie "Abstand" "-5%" zum oberen Rand und "-70%" zum linken Rand hinzu.

Zeilensichtbarkeit

Öffnen Sie schließlich die Zeileneinstellungen und deaktivieren Sie die Zeile auf Telefonen und Tablets in der Unterkategorie Sichtbarkeit der Registerkarte Erweitert.

Autor (Mobil)

Fügen Sie dem gleichen Abschnitt eine weitere Zeile mit einer Zeile voller Breite hinzu. Fahren Sie fort, indem Sie das Bildmodul und die Textmodule in der vorherigen Reihe klonen und in die Reihe mit voller Breite platzieren. Wir müssen an jedem Modul einige Änderungen vornehmen, damit sie auf dem Bildschirm zentriert werden, wenn jemand die Seite auf einem Handy oder Tablet öffnet.

Bildmodul

Öffnen Sie das Bildmodul und stellen Sie die Bildausrichtung auf 'Mitte'.

Erstes Textmodul

Öffnen Sie das erste Textmodul und ändern Sie die Textausrichtung in der Unterkategorie Text der Registerkarte Design auf 'Center'.

Scrollen Sie auf derselben Registerkarte nach unten, löschen Sie den linken Rand und behalten Sie den oberen Rand bei.

Zweites Textmodul

Machen Sie dasselbe für das zweite Textmodul. Setzen Sie die Textausrichtung auf 'Center ' und löschen Sie den linken Rand in der Unterkategorie Abstand der Registerkarte Inhalt.

Zeilensichtbarkeit

Öffnen Sie abschließend die Zeileneinstellungen und deaktivieren Sie die Zeile für Desktops.

Beitragstitel-Modul

Da wir den Beitragstitel in unseren Divi-Beitragseinstellungen deaktiviert haben, fügen wir ein Beitragstitel-Modul in eine Zeile mit voller Breite innerhalb desselben Abschnitts ein, den wir bisher verwendet haben.

In der Unterkategorie Elemente der Registerkarte Inhalt können wir auswählen, welche Elemente angezeigt werden sollen. Da wir den Autor bereits erwähnt haben, haben wir alles außer dem Titel deaktiviert.

Außerdem; Nehmen Sie die folgenden Anpassungen an den Unterkategorien Text und Titeltext der Registerkarte Design vor:

  • Textausrichtung: Mitte
  • Titelschriftart: Source Sans Pro
  • Titelschriftart: Fett
  • Titelschriftgröße: 47px (Desktop), 40 (Tablet), 35 (Telefon)
  • Titeltextfarbe: rgba(0,0,0,0.8)

Bilder in voller Breite

Das erste Bild in voller Breite, das wir hinzufügen, ist eine Darstellung des vorgestellten Bildes. Fügen Sie einen Abschnitt mit voller Breite hinzu, platzieren Sie ein Bildmodul mit voller Breite darin und laden Sie ein Bild auf der Registerkarte Inhalt hoch. So einfach ist das.

Textmodule

Als nächstes erstellen wir die Textmodule, die für den Blogbeitrag verwendet werden. Fügen Sie einen Standardabschnitt mit einer Zeile in voller Breite hinzu und fügen Sie ein Textmodul darin ein. In diesem Beispiel verwenden wir die Schriftfamilie 'Cardo' anstelle von 'Georgia', einfach weil 'Cardo' eine integrierte Schriftfamilie ist.

Öffnen Sie außerdem die Einstellungen des Textmoduls, geben Sie einen Beispieltext in das Feld Inhalt ein und gehen Sie auf die Registerkarte Design. Nehmen Sie in der Unterkategorie Text die folgenden Anpassungen vor:

  • Textausrichtung: Links
  • Textschriftart: Cardo
  • Schriftgröße des Textes: 25px (Desktop), 19px (Tablet), 17px (Telefon)
  • Textfarbe: rgba(0,0,0,0.8)
  • Textzeilenhöhe: 1.8em

Scrollen Sie auf derselben Registerkarte nach unten, fügen Sie "800px" zur Max. Breite in der Unterkategorie "Größe" hinzu und fügen Sie "10%" zum linken Rand in der Unterkategorie "Abstand" hinzu.

Videomodul

Das Letzte, was Ihrem Blog-Beitrag einen Mehrwert verleihen kann, ist die Integration eines Videos. Dazu müssen Sie den zuvor erstellten Abschnitt mit dem Textbaustein klonen und den gesamten Inhalt, den Sie haben, auf die beiden Textbausteine ​​aufteilen. Direkt zwischen den beiden Abschnitten fügen wir einen weiteren Abschnitt mit einer Zeile voller Breite hinzu. In dieser Zeile mit voller Breite fügen wir ein Videomodul hinzu.

So sollte die Struktur im Backend aussehen:

Außer der URL haben wir keine Anpassungen am Videomodul vorgenommen.

Vorlage speichern

Sie können die verschiedenen Abschnitte wiederverwenden, um sie an den von Ihnen erstellten Blogbeitrag anzupassen, indem Sie sie klonen und den Inhalt ändern. Sobald Sie dies getan haben, können Sie die Blog-Post-Vorlage speichern, indem Sie auf "In Bibliothek speichern" klicken und ihr einen Namen geben.

Wenn Sie die Vorlage das nächste Mal verwenden möchten, klicken Sie einfach auf „Aus Bibliothek laden“ und laden Sie die Vorlage.

Lesenswert

Eine typische Sache beim Erstellen eines Medium-Blogs ist eine Anzahl von Minuten, die zum Lesen eines bestimmten Blog-Posts benötigt werden. Dies erscheint normalerweise direkt am Anfang der Seite und gibt den Benutzern eine Einschätzung darüber, wie lange sie brauchen, um das Lesen zu beenden. In einer Zeit, in der Zeit das kostbarste Gut ist, hilft dies den Menschen zu entscheiden, ob sie den Blogbeitrag lesen möchten oder nicht.

Ein kostenloses WordPress-Plugin, das Ihnen dabei hilft, dorthin zu gelangen, ist Worth The Read von Well Done Marketing. Sie können es auf der von uns verlinkten Seite herunterladen oder in den Plugins danach suchen. Das Schöne an diesem Plugin ist, dass Sie auswählen können, wo die Lesezeit angezeigt werden soll; Seiten, Beiträge oder beides. Sie können auch die Platzierung und das Format wählen.

Nachdem Sie das Plugin heruntergeladen und aktiviert haben, klicken Sie im Menü auf die Option „Lesefortschritt“. Fahren Sie fort und nehmen Sie die Änderungen vor, die Sie vornehmen müssen. Das Setzen einer Lesezeit wird normalerweise nur für Beiträge verwendet, daher werden die meisten Leute wahrscheinlich nur diese Option wählen.

Auf der Registerkarte Stil können Sie den gewünschten Stil auswählen. Stellen Sie sicher, dass Sie dieselbe Schriftart wie im Titel verwenden. Sie können auch benutzerdefinierten CSS-Code hinzufügen, wenn Sie zusätzliche Änderungen vornehmen möchten.

Hervorheben und teilen

Eine andere wirklich typische Eigenschaft von Medium ist die Möglichkeit, etwas hervorzuheben, es zu teilen oder zu kommentieren, wenn es Ihnen gefällt. Es verleiht dem Blogbeitrag einen Mehrwert, indem es mit den Menschen in Kontakt treten kann, die es lesen. Wir haben ein Plugin gefunden, mit dem Sie etwas Ähnliches tun können. das Highlight and Share-Plugin, das ebenfalls kostenlos verwendet werden kann.

Sie können entscheiden, auf welchen Social-Media-Kanälen Personen Inhalte teilen können, indem Sie zu Einstellungen > Hervorheben und Teilen > Aktivieren der Social-Media-Kanäle gehen, die Sie verwenden möchten.

Einpacken

Nachdem Sie diesen Beitrag gelesen haben, sollten Sie in der Lage sein, Ihren Blog im Medium-Stil aufzubauen, der einige der relevantesten Teile von Medium enthält. Sie haben viele Möglichkeiten, es einfach zu halten, wie es der Medium-Blog tut, aber dennoch mit einigen persönlichen Akzenten zu versehen. Wenn Sie Fragen oder Anregungen haben; Vergesst nicht, einen Kommentar im Kommentarbereich unten zu hinterlassen, damit wir mit unserer großartigen Divi-Community in Kontakt bleiben können!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Julia Tim / shutterstock.com