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.

Sie möchten Ihre Funktionalitäten oder Produkte in Form eines Reiters präsentieren Divi mit Hover-Effekt?

Suchen Sie nach neuen kreativen Möglichkeiten, Funktionen und/oder Produkte auf Ihren Webseiten zu präsentieren? 

Wenn ja, lesen Sie weiter, denn in diesem Artikel zeigen wir Ihnen, wie Sie Funktionen in Registerkarten beim Hover anzeigen, indem Sie nur die integrierten Optionen von verwenden Divi. Die Möglichkeiten, die Sie mit diesem Ansatz haben, sind endlos und sie werden es Ihnen sicherlich ermöglichen, Divi auf einer tieferen Ebene zu verstehen. 

Der Tab-Hover-Effekt tritt nur auf dem Desktop auf. Auf kleineren Bildschirmgrößen erscheinen sie in ihrer normalen Form.

Lassen Sie uns gehen!

Übersicht

Bevor wir in dieses Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das wir erreichen möchten.

Divi-Tab mit Hover-Effekt

Beginnen wir den Erstellungsprozess mit Divi

Einen neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie eine neue Seite hinzu oder öffnen Sie eine vorhandene Seite und fügen Sie einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie dem Abschnitt einen Hintergrund mit Farbverlauf hinzu.

  • Linke Farbe: #f2f2f2
  • Rechte Farbe: #ffffff
  • Verlaufsrichtung: 87 Grad
  • Linke Position: 20 %
  • Richtige Position: 80 %

Abstand

Als nächstes ändern Sie die folgenden Abstandseinstellungen:

  • Polsterung (oben und unten): 0px

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:

Hintergrundfarbe

Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

  • Hintergrundfarbe: #ffffff

Dimensionierung und Ausrichtung

In der Registerkarte Design, ziehen Sie die Option herunter Größe und ändern Sie die folgenden Einstellungen:

  • Benutzerdefinierte Bundstegbreite verwenden: JA
  • Rinnenbreite: 1
  • Breite: 400px
  • Zeilenausrichtung: Links

Hover-Größenanpassung

Option ändern Breite in den Hover-Größeneinstellungen. Dadurch kann die Linie beim Schweben erweitert werden.

  • Breite (Hover): 2 Pixel

Abstand

Gehen Sie dann zu den Abstandseinstellungen in der Option Abstand

  • Polsterung (oben und unten): 0px

Rahmen (Desktop)

Fügen Sie '20px' in die obere rechte Ecke der Linie ein und fügen Sie der Linie auch einen linken Rand hinzu.

  • Abgerundete Ecken (Desktop): 20 Pixel (obere rechte Ecke)
  • Linke Randbreite: 20px
  • Linke Randfarbe: #6d44ff

Grenze beim Schweben

Entfernen Sie die obere rechte abgerundete Ecke von „20px“ beim Hover, indem Sie stattdessen „0px“ 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.

Kastenschatten (Desktop)

Fügen Sie schließlich einen subtilen Schatten hinzu.

  • Box-Schattenunschärfe-Stärke: 80px
  • Feldschatten-Ausbreitungsstärke: -10px
  • Schattenfarbe: rgba(0,0,0,0.11)

Hover-Schatten

Und ändern Sie die Schattenfarbe beim Hover in eine vollständig transparente Farbe.

  • Box-Schatten: rgba(255,255,255,0)

Fügen Sie der Zeile ein Blurb-Modul hinzu

Inhalt hinzufügen

Nachdem wir nun alle Zeileneinstellungen geändert haben, können wir fortfahren und der Spalte ein Blurb-Modul hinzufügen. Fühlen Sie sich frei, jedes andere Modul Ihrer Wahl zu verwenden. 

Nachdem Sie das Modul hinzugefügt haben, fügen Sie Inhalte Ihrer Wahl hinzu.

Wählen Sie das Symbol

Wählen Sie dann ein Symbol Ihrer Wahl aus.

Symboleinstellungen

Und ändern Sie das Aussehen des Symbols in den Symboleinstellungen. Gehen Sie zur Registerkarte Design

  • Symbolfarbe: #5323ff
  • Bild-/Icon-Platzierung: Oben
  • Bild-/Symbolbreite: 50px

Einstellungen für Texttitel (Desktop)

Ändern Sie dann die Titeleinstellungen.

  • Titelschriftart: Poppins
  • Textausrichtung: zentriert
  • Titeltextfarbe: #5323ff
  • Titeltextgröße: 25px
  • Buchstabenabstand: -1px
  • Zeilenhöhe: 1 cm

Hovertext-Titeleinstellungen

Und ändern Sie die Höhe der Titelzeile beim Hover.

  • Titelzeilenhöhe: 1,5 em

Textkörpereinstellungen (Desktop)

Gehen Sie als Nächstes zu den Texteinstellungen und nehmen Sie einige Änderungen vor. Dazu gehört auch, die Textgröße auf „0px“ zu ändern. Dies hilft uns, den Textkörper nur beim Hovern anzuzeigen.

  • Körperschrift: Poppins
  • Körperschriftstärke: leicht
  • Textausrichtung: zentriert
  • Farbe des Textkörpers: #000000
  • Körpertextgröße: 0 Pixel (Desktop), 15 Pixel (Tablet und Telefon)
  • Zeilenhöhe: 2,2 cm

Body-Text-Einstellungen beim Hover

Um sicherzustellen, dass der Fließtext beim Hover angezeigt wird, ändern Sie die Größe des Hover-Texts.

  • Körpertextgröße: 15px
Hover-Tabs

Abstand (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.

Um dem Modul etwas Platz zu geben, ändern wir die folgenden Abstandsparameter:

  • Polsterung (oben und unten): 80px
Hover-Tabs

Schwebeabstand

Wir werden die Hover-Abstandseinstellungen ändern.

  • Polsterung (oben und unten): 80px
  • Polsterung (links und rechts): 20vw

Reihe 3 mal klonen

Sobald Sie mit der Bearbeitung der ersten Zeile und ihres Blurb-Moduls fertig sind, können Sie die Zeile beliebig oft klonen.

Line- und Blurb-Modul Nr. 2 bearbeiten

Linienrahmenfarbe ändern

Beginnen wir damit, die Farbe des linken Rands der Linie zu ändern.

  • Linke Randfarbe: #00ffcc

Bearbeiten Sie Blurb-Inhalt und -Symbol

Öffnen Sie als Nächstes die Einstellungen des Blurb-Moduls und ändern Sie das Symbol.

Ändern Sie die Symbolfarbe des Blurb-Moduls

Mit Symbolfarbe.

  • Symbolfarbe: #00eda6

Titelfarbe ändern

Und die Farbe des Titeltextes.

  • Titeltextfarbe: #00eda6

Linie und Modul Burb #3 bearbeiten

Farbe der Linienumrandung

Lassen Sie uns die Randfarbe der linken Reihe ändern.

  • Linke Randfarbe: #afebff

Bearbeiten Sie Blurb-Inhalt und -Symbol

Lassen Sie uns auch das Klappentext-Symbol und den Inhalt ändern.

Ändern Sie die Symbolfarbe des Blurb-Moduls

Ändern Sie auch die Symbolfarbe.

  • Symbolfarbe: #68d9ff

Titeltextfarbe ändern

Und die Farbe des Titeltextes auch.

  • Titeltextfarbe: #68d9ff

Line- und Blurb-Modul Nr. 4 bearbeiten

Linienrahmenfarbe ändern

Ändern Sie im nächsten und letzten Modul auch die Farbe des linken Rands der Linie.

  • Linke Randfarbe: #dd87cf

Bearbeiten Sie Blurb-Inhalt und -Symbol

Öffnen Sie das Blurb-Modul inline und bearbeiten Sie das Symbol und den Inhalt des Moduls.

Ändern Sie die Symbolfarbe des Blurb-Moduls

Mit Symbolfarbe.

  • Symbolfarbe: #dd6aca

Titeltextfarbe ändern

Und die Farbe des Titeltextes auch.

  • Titeltextfarbe: #dd6aca
Divi-Tab mit Hover-Effekt

Übersicht

Nachdem wir nun das Tutorial durchgearbeitet haben, werfen wir einen letzten Blick auf das Ergebnis.

Divi-Tab mit Hover-Effekt

Laden Sie DIVI jetzt herunter!!!

Fazit

In diesem Artikel haben wir Ihnen gezeigt, wie Sie die integrierten Optionen von Divi nur zum Erstellen von Registerkarten verwenden, die beim Hover verfügbar sind. 

Dieser Ansatz hilft Ihnen, Inhalte über Funktionen oder Produkte interaktiv zu teilen. 

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 RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der 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: