Erstellen eines interaktiven Fragekartenrasters für Ihre nächste About-Seite mit Divi

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit Divi ein interaktives Fragekartenraster für Ihre nächste About-Seite erstellen. Wir verwenden die About-Seite des Internet Service Provider Layout Packs, aber Sie können den Ansatz auf jeder Seite verwenden, an der Sie gerade arbeiten. Es bietet Besuchern eine andere Benutzererfahrung und ermöglicht es Ihnen, mit ihnen über die von Ihnen geteilten Informationen zu interagieren. Sobald Sie den Ansatz verstanden haben, können Sie alternative Fragenkartenraster-Designs Ihrer Wahl erstellen, indem Sie mit den integrierten Optionen von Divi herumspielen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Fragekartenraster, das wir von Grund auf neu erstellen werden.

Desktop

Handy, Mobiltelefon

Beginnen wir mit dem Erstellen!

Erstellen Sie eine neue Seite mit der Info-Seite des ISP-Layout-Pakets

Um das oben gezeigte Design zu erstellen, verwenden wir die About-Seite des Internet Service Provider Layout Packs. Erstellen Sie also eine neue Seite mit diesem Layout. Sie finden es wie gewohnt in Ihren vorgefertigten Layouts.

Alle Abschnitte zwischen Heldenabschnitt und Fußzeile löschen

Wir werden den gesamten aktuellen Inhalt durch eine Fragerasterkarte ersetzen. Dazu müssen wir zunächst alle Abschnitte zwischen dem Heldenabschnitt und der Fußzeile entfernen.

Zwischendurch einen neuen Abschnitt hinzufügen

Das Fragenkartenraster, das wir erstellen werden, kann jede Art von Unternehmensfragen enthalten, die Sie beantworten möchten. Sie können das Raster auch verwenden, um häufig gestellte Fragen anzuzeigen. Fahren Sie fort, indem Sie einen neuen regulären Abschnitt zwischen dem Heldenabschnitt und der Fußzeile der Seite hinzufügen.

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu, ohne Änderungen an den Abschnittseinstellungen vorzunehmen:

Größe

Wir werden den gesamten Standardabstand zwischen den Spalten entfernen. Öffnen Sie die Zeileneinstellungen und nehmen Sie einige Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Wir brauchen immer noch etwas Platz zwischen den Spalten, um ein gut aussehendes Design zu haben. Gehen Sie zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Spalte 1 linker Abstand: 10px (Desktop), 5px (Tablet & Telefon)
• Spalte 1 rechte Polsterung: 5px
• Spalte 2 linker Abstand: 5px
• Spalte 2 rechts auffüllen: 5px
• Spalte 3 linker Abstand: 5px
• Spalte 3 Rechte Padding: 10px (Desktop), 5px (Tablet & Telefon)

Neues Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Um den Hover-Effekt zu erzeugen, brauchen wir nur ein Modul, das Blurb. Wir beginnen mit der Erstellung eines und klonen es anschließend, um das gesamte Ergebnis zu erstellen. Fügen Sie der ersten Spalte ein Blurb-Modul hinzu. Fügen Sie die Frage, die Sie beantworten möchten, in das Titelfeld und die Antwort in das Inhaltsfeld ein.

Symbol auswählen

Wählen Sie dann in den Bild- und Symboleinstellungen ein passendes Symbol aus. Dieses Symbol hilft Ihren Besuchern zu verstehen, dass sie mit der Maus über die Fragekarte fahren müssen, um die Antwort zu sehen.

Standardsymboleinstellungen

Fahren Sie fort, indem Sie die Symboleinstellungen auf der Registerkarte Design ändern.

• Symbolfarbe: #aaaaaa
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 40px

Hover-Symboleinstellungen

Und ändern Sie die Symbolfarbe beim Bewegen des Mauszeigers. Wir verwenden eine vollständig transparente Farbe beim Schweben, damit das Symbol beim Schweben verschwindet.

• Symbolfarbe: rgba(255,255,255,0)

Texteinstellungen

Ändern Sie als Nächstes die Textausrichtung in den Texteinstellungen.

• Textausrichtung: Mitte

Standardeinstellungen für den Titeltext

Nehmen Sie auch einige Änderungen an den Einstellungen für den Titeltext vor.

• Titelschriftart: Poppins
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #333333
• Titeltextgröße: 40px
• Titel-Buchstaben-Abstand: -3px

Hover-Titeltexteinstellungen

Und ändern Sie die Farbe des Titeltexts beim Bewegen der Maus. Wir verwenden wieder eine vollständig transparente Farbe, um sicherzustellen, dass die Frage nicht angezeigt wird, sobald jemand über das Blurb-Modul schwebt.

• Titeltextfarbe: rgba(255,255,255,0)

Standardeinstellungen für Textkörper

Fahren Sie fort, indem Sie die Textkörpereinstellungen ändern.

• Körperschriftart: Open Sans
• Schriftgewicht des Körpers: Leicht
• Textkörperfarbe: rgba(255,255,255,0)
• Textgröße: 25px
• Buchstabenabstand: -2px
• Körperlinienhöhe: 1,6em

Hover-Textkörper-Einstellungen

Und ändern Sie die Farbe des Textkörpers beim Bewegen des Mauszeigers.

• Textkörperfarbe: #000000

Abstand

Um unser Modul in ein Quadrat zu formen, fügen wir einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 9vw
• Untere Polsterung: 9vw
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Standardmäßig abgerundete Ecken

Wir geben auch unserem Modul '30px' abgerundete Ecken.

Abgerundete Ecken schweben

Wir entfernen diese abgerundeten Ecken beim Schweben.

Standardrahmen

Und wir fügen einen unteren Rand hinzu.

• Breite des unteren Rands: 0px
• Farbe des unteren Rands: #0fffeb

Grenze schweben

Ändern Sie die Breite des unteren Rahmens beim Bewegen des Mauszeigers, damit er angezeigt wird.

• Breite des unteren Rands: 10px

Box Schatten

Um etwas Tiefe hinzuzufügen, verwenden wir auch einen Kastenschatten.

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

Übergänge

Zu guter Letzt werden wir die Übergangsdauer im erweiterten Tab verkürzen.

• Übergangsdauer: 250ms

Blurb-Modul zweimal klonen und in verbleibende Spalten platzieren

Nachdem Ihr erstes Blurb-Modul fertig ist, können Sie Zeit sparen, indem Sie es klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt jedes der Duplikate ändern.

Farben des unteren Rands ändern

Zusammen mit der unteren Randfarbe.

Ganze Zeile zweimal klonen

Sie können das Fragenkartenraster erstellen, indem Sie die Zeile beliebig oft klonen.

Ändern Sie Inhalt und untere Farben für jeden Artikel einzeln

Aber vergiss nicht, den Inhalt und die unteren Farben zu ändern, um jede der Fragekarten einzigartig zu machen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Internet Service Provider Layout Pack ein interaktives Fragekartenraster erstellen. Obwohl wir sichergestellt haben, dass das Design dem Stil des Layoutpakets entspricht, können Sie mit dieser Methode jede Infoseite in eine interaktive Seite umwandeln. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!