Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

Möchten Sie wissen, wie Sie ein Blurb-Modul ablegen Divi hervorgehoben, während andere verwischt werden?

Unabhängig von der Art der Website Sie bauen, möchten Sie wahrscheinlich irgendwann eine Liste mit verschiedenen Diensten, Phasen und mehr sehen. 

Eine der einfachsten Möglichkeiten, eine solche Liste auf ansprechende Weise zu erstellen, ist die Verwendung des Blurb-Moduls von Divi. Mit Blurb-Modulen können Sie Listeninhalte schön strukturieren und gleichzeitig endlose Gestaltungsmöglichkeiten erhalten.

In diesem Tutorial gehen wir noch einen Schritt weiter und zeigen Ihnen, wie Sie ein Blurb-Modul beim Bewegen der Maus hervorheben und die anderen angezeigten Module unkenntlich machen. Es ist eine großartige Möglichkeit, jeweils ein Blurb-Modul hervorzuheben, ohne dass andere Blurb-Module den Leser ablenken. 

Gehen wir.

Übersicht

Bevor wir in dieses Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop-Computer

Markieren Sie ein Divi Blurb-Modul, während Sie die anderen unkenntlich machen

Mobile Version

Markieren Sie ein Divi Blurb-Modul, während Sie die anderen unkenntlich machen

Beginnen wir mit dem Designen mit Divi

Einen neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie, indem Sie einer neuen Seite oder der Seite, an der Sie gerade arbeiten, einen regulären Abschnitt hinzufügen. 

Sie können sich auch beraten lassen: Divi: So erstellen Sie einen Bereich für Teammitglieder als Karussell

Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

  • Hintergrund: #eaeaea

Abstand

Fügen Sie auch Abstandswerte hinzu.

  • Rand (oben, unten, links und rechts): 2vw
  • Polsterung (oben und unten): 0px

Grenze

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

  • Abgerundete Ecken: 20px

Fügen Sie eine neue Zeile hinzu

Struktur der Spalte

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

Größe

Öffnen Sie, ohne noch Module hinzuzufügen, die Leitungseinstellungen und ändern Sie die Größeneinstellungen.

  • Spaltenhöhen ausgleichen: JA
  • Breite: 90 %
  • Maximale Breite: 1 Pixel
  • Mindesthöhe: 500 Pixel (Desktop), automatisch (Tablet und Telefon)

Benutzerdefiniertes CSS (Hauptelement)

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

align-items: center;
Divis Blurb-Modul

Fügen Sie das Blurb-Modul zur 1-Spalte hinzu

Inhalt hinzufügen

Das einzige Modul, das wir in diesem Tutorial verwenden, ist ein Blurb-Modul.

Sie können dieses Modul jedoch 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 den Inhalt Ihrer Wahl ein.

Wählen Sie das Symbol

Wählen Sie dann ein Symbol aus.

  • Symbol verwenden: JA
  • Symbol: Siehe Screenshot

Hintergrundverlauf (Hover)

Verwenden Sie dann nur beim Hover einen Hintergrundverlauf.

  • Gradientenstopps
    • 20 %: #ffffff
    • 80 %: #0f1bff
  • Verlaufstyp: Linear

Symboleinstellungen (Desktop)

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Symboleinstellungen wie folgt:

  • Symbolfarbe: #ffffff
  • Abgerundete Ecken für Bild/Symbol: 50 Pixel
  • Breite des Bild-/Symbolrands: 5 Pixel
  • Rahmenfarbe: #ffffff
  • Bild-/Icon-Platzierung: Oben
  • Bild-/Symbolausrichtung: Links

Hover-Icon-Einstellungen

Ändern Sie die verschiedenen Symbolfarben beim Hover.

  • Symbolfarbe (Hover): #0f1bff
  • Hintergrundfarbe für Bild/Symbol (Hover): #f7f7f7

Einstellungen für den Titeltext

Fahren Sie fort, indem Sie die Titeltexteinstellungen ändern.

  • Titelschriftart: Source Sans Pro
  • Schriftdicke: fett
  • Titelschriftstil: TT (Großbuchstaben)

Hover-Titeltexteinstellungen

Ändern Sie die Textfarbe des Titels beim Hover.

  • Titeltextfarbe: #ffffff

Beschreibungstexteinstellungen (Desktop)

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

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

  • Körperschrift: Open Sans
  • Höhe der Körperlinie: 2 m

Hover-Beschreibungstext-Einstellungen

Verwenden Sie beim Hover eine Textfarbe.

  • Haupttextfarbe (Hover): #ffffff

Abstand

Gehen Sie als Nächstes zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Füllwerte hinzu.

  • Polsterung (oben, unten, links und rechts): 50 Pixel

Kastenschatten (Desktop)

Wir verwenden auch einen Boxschatten.

  • Feld-Schattenunschärfe-Stärke: 80px
  • Feldschatten-Ausbreitungsstärke: -20px
  • Schattenfarbe: rgba(255,255,255,0.18)

Kastenschatten (Hover)

Ändern Sie die Farbe des Hover-Schattens.

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

CSS-Klasse

Und damit der Blur-Effekt eintritt, müssen wir unserem Blurb-Modul eine CSS-Klasse zuweisen. Später in diesem Artikel werden wir diese CSS-Klasse in JQuery-Code verwenden.

  • CSS-Klasse: Klappentext

Klonen Sie das Blurb-Modul zweimal und platzieren Sie die Duplikate in den verbleibenden Spalten

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

Klonen Sie die ganze Reihe

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

Passen Sie Blurb-Module individuell an

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

Fügen Sie eine neue Zeile hinzu

Struktur der Spalte

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

Abstand

Öffnen Sie die Zeileneinstellungen und entfernen Sie standardmäßig alle oberen und unteren Polsterungen. Dies trägt dazu bei, den von dieser Reihe belegten Platz zu reduzieren.

  • Polsterung (oben und unten): 0px

Codemodul zur Spalte hinzufügen

Fügen Sie JQuery- und CSS-Code ein

Fügen Sie der Zeilenspalte ein Codemodul hinzu und fügen Sie etwas JQuery- und CSS-Code ein, um den Effekt zu erzielen. 

Vergessen Sie nicht, den JQuery-Code zwischen die script-Tags und den CSS-Code zwischen die 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');
 
});
});

Lesen Sie auch: Divi: So erstellen Sie einen Testimonials-Bereich in Form eines Rasters

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

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Desktop-Computer

Markieren Sie ein Divi Blurb-Modul, während Sie die anderen unkenntlich machen

Mobile Version

Markieren Sie ein Divi Blurb-Modul, während Sie die anderen unkenntlich machen

Laden Sie DIVI jetzt herunter!!!

Fazit

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit den Blurb-Modulen, die Sie auf Ihrem teilen, kreativ werden können Website

Insbesondere haben wir Ihnen gezeigt, wie Sie ein Blurb-Modul beim Hover hervorheben, indem Sie die anderen angezeigten Module unkenntlich machen. 

Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...

%d Blogger wie diese Seite: