So heben Sie ein schwebendes Blurb-Modul hervor, indem Sie die anderen mit Divi . verwischen

Veröffentlicht: 2020-02-01

Egal welche Art von Website Sie erstellen, die Chancen stehen gut, dass Sie irgendwann eine Liste mit verschiedenen Diensten, Schritten und mehr anzeigen möchten. Eine der einfachsten Möglichkeiten, eine solche Liste attraktiv zu erstellen, ist die Verwendung des Blurb-Moduls von Divi. Blurb-Module ermöglichen es Ihnen, Listeninhalte schön zu strukturieren und bieten Ihnen gleichzeitig endlose Gestaltungsmöglichkeiten.

Im heutigen Tutorial gehen wir noch einen Schritt weiter und zeigen Ihnen, wie Sie ein schwebendes Blurb-Modul hervorheben, indem Sie die anderen, die Sie angezeigt haben, verwischen. Dies ist eine großartige Möglichkeit, den Fokus auf jeweils ein Blurb-Modul zu legen, ohne dass die anderen Blurb-Module den Leser ablenken. Sobald ein Besucher zu einem anderen Blurb-Modul wechselt, wird dieses stattdessen zum hervorgehobenen Modul. Sie können auch die JSON-Datei des Layouts kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Hovered Klappenmodul

Handy, Mobiltelefon

Hovered Klappenmodul

Laden Sie das Hovered Blurb-Modul-Layout KOSTENLOS herunter

Um das frei schwebende Klappenmodul-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, einer neuen Seite oder der Seite, an der Sie gerade arbeiten, einen regulären Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

Hintergrundfarbe: #eaeaea

Hovered Klappenmodul

Abstand

Fügen Sie auch einige benutzerdefinierte Rand- und Abstandswerte hinzu.

Oberer Rand: 2vw
Unterer Rand: 2vw
Linker Rand: 2vw
Rechter Rand: 2vw
Obere Polsterung: 0px
Untere Polsterung: 0px

Hovered Klappenmodul

Grenze

Vervollständigen Sie die Abschnittseinstellungen, indem Sie einen Randradius hinzufügen.

Alle Ecken: 20px

Hovered Klappenmodul

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hovered Klappenmodul

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen. Das Aktivieren der Option 'Spaltenhöhen ausgleichen' hilft beim nächsten Schritt, der den Spalteninhalt ausrichtet.

Spaltenhöhen ausgleichen: Ja
Breite: 90%
Maximale Breite: 1580px
Mindesthöhe: 500px (Desktop), automatisch (Tablet & Telefon)

Hovered Klappenmodul

Hauptelement

Richten Sie den Spalteninhalt aus, indem Sie dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

align-items: center;

Hovered Klappenmodul

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das einzige Modul, das wir in diesem Tutorial verwenden, ist ein Blurb-Modul, aber Sie können dieses Modul durch ein beliebiges Modul Ihrer Wahl ersetzen, solange Sie die CSS-Klasse hinzufügen, die wir in den nächsten Schritten teilen werden. Fügen Sie das erste Blurb-Modul zu Spalte 1 hinzu und fügen Sie Inhalte Ihrer Wahl ein.

Hovered Klappenmodul

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Hovered Klappenmodul

Hintergrund mit Farbverlauf schweben

Verwenden Sie dann einen Verlaufshintergrund nur beim Schweben.

Farbe 1: #ffffff
Farbe 2: #0f1bff
Verlaufstyp: Linear
Startposition: 20%
Endposition: 20%

Hovered Klappenmodul

Standardsymboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Symboleinstellungen wie folgt:

Symbolfarbe: #ffffff
Kreissymbol: Ja
Kreisfarbe: #ffffff
Bild-/Symbolplatzierung: Oben
Bild-/Symbolausrichtung: Links

Hovered Klappenmodul

Hover-Symboleinstellungen

Ändern Sie die verschiedenen Symbolfarben beim Hover.

Symbolfarbe: #0f1bff
Kreisfarbe: #f7f7f7

Hovered Klappenmodul

Standardeinstellungen für den Titeltext

Fahren Sie fort, indem Sie die Einstellungen für den Titeltext ändern.

Titelschriftart: Source Sans Pro
Schriftstärke des Titels: Fett
Titelschriftart: Großbuchstaben

Hovered Klappenmodul

Hover-Titeltexteinstellungen

Ändern Sie die Farbe des Titeltexts beim Bewegen des Mauszeigers.

Titeltextfarbe: #ffffff

Hovered Klappenmodul

Standardeinstellungen für Textkörper

Als nächstes sind die Einstellungen für den Textkörper dran.

Körperschriftart: Open Sans
Körperlinienhöhe: 2em

Hovered Klappenmodul

Hover-Textkörper-Einstellungen

Verwenden Sie eine weiße Hover-Textfarbe.

Textkörperfarbe: #ffffff

Hovered Klappenmodul

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

Obere Polsterung: 50px
Untere Polsterung: 50px
Linke Polsterung: 50px
Rechte Polsterung: 50px

Hovered Klappenmodul

Standard-Box-Schatten

Wir verwenden auch einen Box-Schatten.

Stärke der Box-Schattenunschärfe: 80px
Stärke der Box-Schattenausbreitung: -20px
Schattenfarbe: rgba(255,255,255,0.18)

Hovered Klappenmodul

Hoverbox-Schatten

Ändern Sie die Schattenfarbe beim Schweben.

Schattenfarbe: rgba(0,0,0,0.18)

Hovered Klappenmodul

CSS-Klasse

Und um den Unschärfeeffekt zu erzielen, müssen wir unserem Blurb-Modul eine CSS-Klasse zuweisen. Später in diesem Beitrag werden wir diese CSS-Klasse in etwas JQuery-Code verwenden.

CSS-Klasse: Klappentext

Hovered Klappenmodul

Blurb-Modul zweimal klonen und Duplikate in verbleibende Spalten platzieren

Sobald Sie das Blurb-Modul in Spalte 1 fertiggestellt haben, können Sie es zweimal klonen und die Duplikate in die verbleibenden Spalten der Zeile einfügen.

Hovered Klappenmodul

Ganze Zeile klonen

Sie können die Zeile beliebig oft klonen, je nachdem, wie viele Blurb-Module Sie auf Ihrer Seite anzeigen möchten.

Hovered Klappenmodul

Passen Sie Blurb-Module individuell an

Natürlich müssen Sie die einzelnen Inhalte jedes Blurb-Moduls ändern.

Hovered Klappenmodul

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Hovered Klappenmodul

Abstand

Öffnen Sie die Zeileneinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Abstände. Dies wird dazu beitragen, den Platzbedarf dieser Reihe zu reduzieren.

Obere Polsterung: 0px
Untere Polsterung: 0px

Hovered Klappenmodul

Codemodul zur Spalte hinzufügen

JQuery- und CSS-Code einfügen

Fügen Sie der Spalte der Zeile ein Code-Modul hinzu und fügen Sie etwas JQuery- und CSS-Code ein, um den Effekt zu erzielen. Vergessen Sie nicht, den JQuery-Code zwischen Skript-Tags und den CSS-Code zwischen Style-Tags einzufügen, wie Sie im Druckbildschirm unten sehen können.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Hovered Klappenmodul

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Hovered Klappenmodul

Handy, Mobiltelefon

Hovered Klappenmodul

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den Blurb-Modulen, die Sie auf Ihrer Website teilen, kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie ein schwebendes Blurb-Modul hervorheben, indem Sie die anderen, die Sie angezeigt haben, verwischen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.