Divi-Plugin-Highlight: Content Intense

Der Divi Builder enthält ein Blog-Modul, um Beiträge basierend auf Kategorien entweder in voller Breite oder im Raster-Layout anzuzeigen. Wollten Sie schon immer mehr Kontrolle über Ihr Blog-Layout? Sie könnten an einem Drittanbieter-Plugin namens Content Intense interessiert sein.

Content Intense ist ein Plugin von BeSuperfly, das neue Layouts und Styling-Funktionen hinzufügt, um Ihrem Blog-Modul ein neues Aussehen zu verleihen. Es basiert auf dem Standard-Blog-Modul, enthält also alle bekannten Funktionen.

(Das Plugin ist auf der Website des Entwicklers verfügbar.)

In diesem Plugin-Highlight werfen wir einen Blick auf die Funktionen und sehen, wie es auf der Seite aussieht. Ich werde es auch in Extra laden (aber natürlich ist es auch mit Divi kompatibel).

Content Intense installieren

Hochladen und aktives Content Intense wie jedes Plugin. Sobald das Plugin aktiviert wurde, sehen Sie in den Einstellungen im Dashboard einen neuen Menüpunkt namens Content Intense Plugin Activation. Klicken Sie darauf und geben Sie Ihren API-Schlüssel und Ihre E-Mail-Adresse ein und speichern Sie die Änderungen.

Inhaltsintensives Modul

Dem Divi Builder wird ein neues Modul namens Content Intense hinzugefügt.

Auf der Registerkarte Inhalt können Sie nur Beiträge, nur Seiten oder Seiten und Beiträge, die anzuzeigende Anzahl, die Kategorien und die Offset-Nummer anzeigen. Zeigen Sie das vorgestellte Bild, die Meta (mit der Sie ein Trennzeichen auswählen können), den Auszug, die Navigation und den Hintergrund an. Wie Sie sehen werden, vereinfache ich die Anzahl der Optionen in den Einstellungen ernsthaft.

Eine der einzigartigsten Funktionen ist, dass WordPress-Kategorien zu Seiten hinzugefügt werden. Wenn Sie sich für die Anzeige von Seiten entscheiden, werden diese bei der Auswahl ihrer Kategorien ausgewählt.

Auf der Registerkarte Design können Sie eines von 5 Layouts auswählen, das Overlay aktivieren, den Kopfzeilentext, den Fließtext und den Metatext anpassen. Passen Sie auch Rahmen, Schaltfläche, Abstand und Animation an.

Das Advanced than enthält Funktionen für die Schaltflächenbeziehung, sodass Sie den Wert des rel-Attributs des Links angeben können. Dies ist ideal zum Erstellen von Lesezeichen, zum Setzen eines Links auf nofollow usw.

Inhaltsintensive Standardeinstellungen

In den Standardeinstellungen wird das vorgestellte Bild mit dem Gravatar des Autors angezeigt, der den unteren Rand des Bildes überlappt. Darauf folgen das Post-Meta, der Titel, eine Zeile, der Post-Auszug und die Schaltfläche Weiterlesen mit Hover-Animation. Ich habe dem Abschnitt einen Hintergrund hinzugefügt, um ihn hervorzuheben.

In diesem Beispiel habe ich ein Sternchen für das Metatrennzeichen hinzugefügt, die Auszugsanzahl von 270 auf 100 geändert und die Schaltfläche Weiterlesen durch zentrierten Text ersetzt. Anstelle des Datums wird angezeigt, wie lange der Beitrag zurückliegt. Ich habe die Kommentarzählung deaktiviert.

Dieser fügt dem Hintergrund hinter dem Text etwas Farbe hinzu. Ich habe auch den Button nach rechts verschoben und den Auszug auf 150 gesetzt.

Es gibt fünf verschiedene Layouts. Die Beispiele, die wir bisher gesehen haben, verwenden Atlas – 3 Spalten, vertikales Layout, mit Avatar. Schauen wir uns jedes Layout an. Ich verwende die Standardeinstellungen.

Dieses ist Alpen. Es ist ein einspaltiges, horizontal wechselndes Layout. Der Texthintergrund entspricht der Hintergrundfarbe, die ich im Abschnitt ausgewählt habe. Dies sind flache Karten mit Hover-Effekten für den Button.

Dies ist Himalayas, ein 3-spaltiges, vertikales Layout, das das vorgestellte Bild des Beitrags als Hintergrund verwendet. Es verwendet auch Schaltflächenanimationen. Dieser Text ist ohne Anpassungen schwieriger zu sehen. Wir werden dies später mit einem Overlay beheben.

Dies ist Rockies – ein vertikales 3-Spalten-Layout mit Hover-Effekten. Es platziert auch das vorgestellte Bild als Hintergrund. Die Hover-Effekte enthüllen den vollständigen Auszug und die Schaltfläche "Weiterlesen". Wir werden einige Anpassungen vornehmen, um den Text lesbarer zu machen.

Dies ist Andes – ein 1-spaltiges, vertikales Layout mit Avatar. Es verwendet eine abgeschnittene Version des vorgestellten Bildes und verwendet kleine Linien, um Meta zu trennen, und größere Linien, um Beiträge zu trennen.

Unten auf der Seite sehen Sie Navigationsschaltflächen. Sie können sie deaktivieren oder Ihren eigenen Text hinzufügen. Sie übernehmen das Styling der anderen Schaltflächen. Wenn Sie also die Weiterlesen-Schaltflächen gestaltet haben, haben Sie diese auch gestaltet. Anstelle einer Schaltfläche können Sie auch Text verwenden.

Beispiel – Alpen mit Atlas

Ich habe dieses Blog-Layout mit 2 Content Intense-Modulen erstellt. Der erste verwendet das Alpen-Layout ohne Navigation. Das zweite Modul verwendet Atlas. Ich habe den Offset auf 1 gesetzt, damit nicht das gleiche Bild wie im ersten Modul angezeigt wird. Ich habe die Schriftfarbe an Arimo angepasst (ein Favorit von mir). Die Schaltflächen verwenden einen Farbverlauf. Beim Schweben gehen sie zu einer Volltonfarbe und vergrößern den Buchstabenabstand. Die Navigationsschaltfläche stimmt überein.

Beispiel – Alpen

Ich bin ein Trottel für wechselnde Layouts. Ich liebe den Look von Alps ohne Änderungen, also habe ich nur ein paar kleine Anpassungen vorgenommen. Ich habe einen roten Rahmen und eine rote Überlagerung hinzugefügt und die Schaltflächen- und Kopfzeilenfarben geändert. Ich habe auch die Schriftart in Dosis geändert und sie fett gemacht. Dies zeigt die Überlagerung beim Schweben.

Ohne Rand gefällt es mir eigentlich besser. Dieser zeigt die Schaltfläche beim Schweben.

Beispiel – Anden

In diesem Beispiel werden 6 verschiedene Content Intense-Module verwendet – alle verwenden Andes und jedes ist um 1 mehr versetzt als das vorherige Modul. Ich habe dem Abschnitt einen Hintergrund mit einer Überlagerung hinzugefügt. Die Header-Schriftart ist Comfortaa. Das letzte Modul verwendet die Navigation. Ich habe die Schaltflächen in Text geändert.

Hier ist ein Blick auf das normale einspaltige Design. Ich habe auch ein Hover-Overlay hinzugefügt. Alles andere ist Standard.

Beispiel – Himalaya

Dieser verwendet Himalaya mit einer Überlagerung hinter dem Text. Ich habe Meta deaktiviert, den Text auf hell geändert, das Schaltflächendesign auf weiß geändert und die Schaltflächenschrift auf 12 Punkt reduziert. Der Kopfzeilentext ist Bitter. Die einzige Animation, die ich eingefügt habe, ist für den Button-Hover. Dies wäre ein großartiger CTA oder Links zu Seiten, die Ihre Dienste beschreiben.

Beispiel – Rockies

Ich liebe das Aussehen der Rockies. Es hat einen schönen Schatteneffekt mit Hover-Animation, der den Text und die Schaltfläche "Weitere Informationen" anzeigt. Ich hätte eine Textüberlagerung platzieren können, aber ich wollte das Bild nicht abdecken. Stattdessen habe ich den Text in hell geändert. Ich habe auch die Farben von Meta und der Schaltfläche geändert und das Trennzeichen in einen Bindestrich geändert.

Ein Overlay sieht natürlich gut aus. Ich habe eine schwarze Überlagerung hinzugefügt und die Deckkraft so geändert, dass ein wenig des Bildes durchscheint. Das Datum in der oberen linken Ecke verwendet ebenfalls die Überlagerung. Ich habe die Schaltfläche in Text geändert und nach rechts verschoben. Ich mag diese drei Punkte und die Linie am unteren Rand der Karten. Es ist ein kleines Detail, das einen Hauch von visuellem Flair hinzufügt.

Beispiel – Extra

Content Intense funktioniert hervorragend mit Extra. Ich musste nur einige kleinere Anpassungen vornehmen, wo ich Andes verwendet habe. In meinem Beispiel hatte ich einen weißen Hintergrund für den Textbereich platziert. Da ich weißen Text verwendet habe, habe ich ihn einfach auf dunkel geändert. Das obige Beispiel ist Rockies. Der einzige Unterschied war die Textfarbe für den Weiterlesen-Link.

Herunterladbare Stile

Animationen können über CSS hinzugefügt werden. Die Website des Entwicklers zeigt mehrere Animationen, die sie erstellt haben, wie die obige, die den Text beim Schweben bewegt. Dieser und andere Stile können von ihnen in einer JSON-Datei heruntergeladen werden.

Lizenz und Dokumentation

Wählen Sie aus zwei Lizenzen (keine ermöglicht den Weiterverkauf):

• Standardlizenz: zur Verwendung auf einer einzigen Website. Es enthält 1 für das Entwicklungsprojekt und 1 für das Live-Projekt.
• Unbegrenzte Lizenz: Kann auf unbegrenzten Websites sowohl für den persönlichen als auch für den Kundengebrauch verwendet werden.

Updates erfolgen automatisch. Content Intense ist auf der Website des Entwicklers verfügbar.

Die Dokumentation wird auf der Website des Entwicklers nachgewiesen. Es führt Sie durch die Anpassungen und bietet Demos auf dem Weg.

Abschließende Gedanken

Content Intense hat einige nette Layoutfunktionen und in Zukunft werden noch mehr Layouts hinzugefügt, also ist dies erst der Anfang. Jedes der Layouts kann mit den Anpassungen des Moduls gestaltet und mit CSS noch weiter angepasst werden. Es ist intuitiv zu bedienen. Wenn Sie Ihrem Blog ein anderes Aussehen verleihen möchten, ist Content Intense möglicherweise das Plugin, das Sie suchen.

Wir wollen von dir hören. Haben Sie Content Intense ausprobiert? Teilen Sie uns Ihre Erfahrungen damit in den Kommentaren unten mit.

Ausgewähltes Bild über LanKoga / shutterstock.com