Verwenden der Transform-Optionen von Divi zum Erstellen von Inhalten für expandierende Abschnitte bei Hover

Heute werden wir die Designoption für die Transformationsskalierung hervorheben, die mit den neuen Transformationsoptionen von Divi geliefert wird. Darüber hinaus werden wir ein atemberaubendes Design neu erstellen, das es ermöglicht, dass Abschnitte auf elegante Weise beim Schweben erweitert werden.

Sie können dieses Design für jede Art von Website verwenden, die Sie erstellen. Es hilft Ihnen, relevante Inhalte auf strukturierte und minimale Weise zu teilen. Am Ende dieses Tutorials können Sie das gesamte Seitenlayout 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

Handy, Mobiltelefon

Beginnen wir mit der Neuerstellung!

Abschnitt 1 hinzufügen

Abstand

Beginnen Sie damit, eine neue Seite zu erstellen. Fügen Sie der Seite Ihren ersten regulären Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Abstände in den Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster. Wir tun dies, um den Platz zu begrenzen, der von der Zeile und dem Abschnitt eingenommen wird.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Trennmodul hinzufügen

Sichtweite

Das einzige Modul, das wir in dieser Reihe benötigen, ist ein Teilermodul. Am Ende dieses Tutorials verwandeln wir den Teiler in einen vertikalen Teiler, der alle kommenden Abschnitte verbindet. Stellen Sie nach dem Hinzufügen des Teilermoduls sicher, dass die Option „Teiler anzeigen“ aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Teilers in Schwarz.

• Farbe: #000000

Größe

Ändern Sie auch die Größenwerte.

• Teilergewicht: 1px
• Höhe: 0px

Abstand

Und erhöhen Sie die Länge des Teilers, indem Sie einige negative linke und rechte Ränder hinzufügen.

• Linker Rand: -135vw (Desktop), -300vw (Tablet), -340vw (Telefon)
• Rechter Rand: -135vw (Desktop), -300vw (Tablet), -340vw (Telefon)

Abschnitt 2 hinzufügen

Hintergrundfarbe

Auf zum nächsten regulären Abschnitt! Nachdem Sie den neuen Abschnitt hinzugefügt haben, öffnen Sie die Abschnittseinstellungen und fügen Sie eine vollständig weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 5vw
• Untere Polsterung: 5vw

Standardrahmen

Fügen Sie dem Abschnitt auch einen Rahmen hinzu.

• Randbreite: 1px
• Randfarbe: #000000

Grenze schweben

Und entfernen Sie die Rahmenbreite beim Schweben.

• Rahmenbreite: 0px

Standard-Box-Schatten

Wir fügen auch einen Box-Schatten beim Hover hinzu. Dazu müssen wir zuerst einen Standard hinzufügen. Um sicherzustellen, dass der Boxschatten nicht standardmäßig angezeigt wird, verwenden wir eine vollständig transparente Schattenfarbe.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0)

Hoverbox-Schatten

Ändern Sie die Schattenfarbe beim Schweben mit dem folgenden Farbcode:

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

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile mit der folgenden Spaltenstruktur zum Abschnitt hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnitts einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Textmodul hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Textmodul mit H2-Inhalten.

H2-Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen nach Ihren Wünschen.

• Überschrift 2 Schriftart: Abril Fatface
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 7vw

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte hinzu.

• Unterer Rand: 5vw
• Linker Rand: 5vw
• Rechter Rand: 5vw

Trennmodul hinzufügen

Sichtweite

Das nächste und letzte Modul, das wir in dieser Reihe benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Farbe des Teilers in Schwarz.

• Farbe: #000000

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die zweite Reihe! Verwenden Sie die folgende Spaltenstruktur:

Größe

Auch hier stellen wir sicher, dass die Zeile die gesamte Breite des Bildschirms einnimmt, indem wir die Größeneinstellungen im Design-Tab ändern.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Wir verkleinern auch die Größe der Zeile leicht, indem wir in den Abstandseinstellungen einige benutzerdefinierte linke und rechte Auffüllungen hinzufügen.

• Linke Polsterung: 10vw
• Rechte Polsterung: 10vw

Anzeige

Um sicherzustellen, dass alle drei Spalten auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, fügen wir dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzu.

display: flex;

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte der Zeile ein Blurb-Modul hinzufügen. Geben Sie einen Inhalt Ihrer Wahl ein.

Symbol auswählen

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

Symboleinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Symbolfarbe.

• Symbolfarbe: #000000

Einstellungen für Titeltext

Gehen Sie zu den Titeltexteinstellungen und ändern Sie die Einstellungen nach Ihren Wünschen.

• Titelschriftart: Abril Fatface
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #000000
• Titeltextgröße: 1,5 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)
• Höhe der Titelzeile: 2em

Textkörpereinstellungen

Machen Sie dasselbe für die Textkörpereinstellungen.

• Körperschriftart: Open Sans
• Ausrichtung des Textkörpers: Mitte
• Körpertextfarbe: #666666
• Textgröße: 0,8 vw (Desktop), 1,5 vw (Tablet), 2 vw (Telefon)
• Körperlinienhöhe: 2em

Abstand

Zu guter Letzt fügen Sie dem Blurb-Modul einen benutzerdefinierten linken und rechten Rand hinzu.

• Linker Rand: 2vw
• Rechter Rand: 2vw

Blurb-Modul zweimal klonen und in verbleibende Spalten platzieren

Sobald Sie mit der Anpassung des Blurb-Moduls fertig sind, können Sie es zweimal klonen. Platzieren Sie die Duplikate in den beiden verbleibenden Spalten der Zeile.

Zeile 3 hinzufügen

Spaltenstruktur

Weiter zur nächsten und letzten Reihe. Wählen Sie dafür folgende Spaltenstruktur:

Größe

Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen und lassen Sie die Zeile die gesamte Breite des Abschnitts einnehmen, indem Sie die Größeneinstellungen ändern.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Schaltflächenmodul hinzufügen

Inhalt hinzufügen

Das einzige Modul, das wir hier brauchen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Ändern Sie als nächstes die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1,5 vw (Desktop), 2,5 vw (Tablet und Telefon)
• Schaltflächentextfarbe: #000000
• Breite des Tastenrahmens: 1px
• Farbe des Knopfrahmens: #000000
• Schaltflächenrandradius: 1px
• Schaltflächenschrift: Open Sans
• Schriftstärke: Ultra Bold

Abstand

Und erstellen Sie eine Form für die Schaltfläche mit einigen benutzerdefinierten Rand- und Abstandswerten.

• Oberer Rand: 5vw
• Obere Polsterung: 2vw
• Untere Polsterung: 2vw
• Linke Polsterung: 10vw
• Rechte Polsterung: 10vw

Transform-Einstellungen zu Abschnitt 2 hinzufügen

Fügen Sie die Standard-Transformationsskala zu Abschnitt 2 hinzu

Nachdem wir nun die beiden Abschnitte, die wir unserer Seite hinzugefügt haben, erstellt und geändert haben, können wir mit der Anwendung der Transformationsoptionen beginnen. Öffnen Sie Abschnitt 2 und fügen Sie einige benutzerdefinierte Transformationsskalierungswerte hinzu.

• Unten: 60 % (Desktop), 90 % (Tablet und Telefon)
• Rechts: 60 % (Desktop), 90 % (Tablet und Telefon)

Bewegen Sie den Mauszeiger auf Transform Scale to Section #2

Ändern Sie diese Werte beim Hover. Beachten Sie, dass wir denselben Wert wie für kleinere Bildschirmgrößen verwenden. Dadurch wird sichergestellt, dass der Hover-Effekt nur auf größeren Bildschirmgrößen auftritt.

• Unten: 90%
• Rechts: 90%

Abschnitt zweimal klonen

Klonen Sie dann den zweiten Abschnitt zweimal (oder so oft Sie möchten).

Fügen Sie Transform Rotate to Divider-Modul in Abschnitt 1 hinzu

Und transformieren Sie den Teiler, den Sie dem ersten Abschnitt hinzugefügt haben, indem Sie mit dem Transformationsdrehwert herumspielen.

• Links: 90 Grad

Laden Sie das expandierende Abschnittslayout KOSTENLOS herunter

Um das expandierende Abschnittslayout 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.

HERUNTERLADEN

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!

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Tutorial haben wir die Transformationsskalierungsoption hervorgehoben, die mit den neuen Transformationsoptionen von Divi geliefert wird. Darüber hinaus haben wir ein atemberaubendes Design neu erstellt, das es dem Hover-Effekt ermöglicht, Sinn zu machen und die allgemeine Benutzererfahrung beim Besuch der Seite zu verbessern. Am Ende des Tutorials konnten Sie auch das gesamte Layout kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!