So erstellen Sie mit Divi . einen animierten mobilen Split-Content-Heldenabschnitt

Es ist wirklich wichtig, einen herausragenden Heldenbereich zu erstellen. Und es sollte nicht nur auffallen, sondern auch in mehrere Elemente aufgeteilt werden, die den dortigen Handlungsaufruf stärken. Die leicht verständliche Struktur der Split-Content-Heldenabschnitte macht sie sehr beliebt und wird häufig auf verschiedenen Arten von Websites verwendet.

Und während es einfach ist, Heldenabschnitte mit geteiltem Inhalt für den Desktop zu erstellen, ist es möglicherweise nicht möglich, sie für kleinere Bildschirmgrößen zu erstellen. Hier wird dieses Tutorial nützlich sein. Wir werden einen hochinteraktiven Mobile-Split-Heldenbereich neu erstellen, der nicht nur auf Mobilgeräten, sondern auf allen verschiedenen Bildschirmgrößen gut aussieht. Wir kombinieren auch einige großartige Animationen, damit der Designstil perfekt zu 2019 passt. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen Heldenabschnitte mit geteiltem Inhalt für Mobilgeräte zu erstellen.

Lasst uns anfangen!

Vorschau

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

Handy, Mobiltelefon

Desktop

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Abstand

Beginnen Sie damit, eine neue Seite zu erstellen oder eine vorhandene zu öffnen. Fügen Sie einen neuen regulären Abschnitt hinzu, gehen Sie zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und fügen Sie eine komplett schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Spalte 1 Hintergrundfarbe

Fügen Sie auch der ersten Spalte eine schwarze Hintergrundfarbe hinzu.

• Spalte 1 Hintergrundfarbe: #000000

Spalte 2 Hintergrundfarbe

Das gleiche gilt für die zweite Spalte.

• Spalte 2 Hintergrundfarbe: #000000

Größe

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile und ihre Spalten die gesamte Breite des Bildschirms einnehmen.

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

Abstand

Wir entfernen auch alle standardmäßigen oberen und unteren Auffüllungen der Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Rechte Polsterung: 1vw

Anzeige

Zu guter Letzt sorgen wir dafür, dass beide Spalten auch auf kleineren Bildschirmgrößen nebeneinander angezeigt werden. Dazu müssen wir dem erweiterten Tab der Zeile eine einzelne Zeile CSS-Code hinzufügen.

display: flex;

Bildmodul zu Spalte 1 hinzufügen

Bildbox leer lassen

Zeit, all die verschiedenen Module hinzuzufügen, die wir brauchen! Beginnen Sie mit dem Image Module in der ersten Spalte. Anstatt ein Bild in die Bildbox hochzuladen, laden wir das Bild in den nächsten Schritten in die Hintergrundeinstellungen hoch. Auf diese Weise können wir mit der Positionierung des Bildes und dem Platzbedarf in unserer Reihe herumspielen.

Hintergrundfarbe hinzufügen

Gehen Sie zu den Hintergrundeinstellungen des Bildmoduls und fügen Sie eine Hintergrundfarbe hinzu. Im nächsten Schritt kombinieren wir diese Hintergrundfarbe und ein Hintergrundbild mit einem Mischeffekt, um das Bild abzudunkeln.

• Hintergrundfarbe: #686868

Hintergrundbild hinzufügen

Fügen Sie ein Hintergrundbild Ihrer Wahl hinzu und ändern Sie die Hintergrundeinstellungen entsprechend:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Multiplizieren

Größe

Wir haben zwei gleich große Spalten für die Zeile verwendet, an der wir arbeiten, aber das Ergebnis sieht nicht so aus. Wir werden die Größe jedes Moduls, das wir hinzufügen, manuell ändern, damit es so aussieht, als würden wir eine andere Spaltenstruktur verwenden. Der Grund, warum wir dies tun (anstatt nur eine andere Spaltenstruktur zu wählen), besteht darin, dass alles auch auf kleineren Bildschirmgrößen gut und reaktionsschnell aussieht. Gehen Sie zu den Größeneinstellungen des Bildmoduls und ändern Sie die Breite.

• Breite: 88%
• Modulausrichtung: Links

Abstand

Wir können nun die Größe unseres Bildes in den Abstandseinstellungen festlegen. Wir verwenden für diese Werte auch eine Darstellungsbereichseinheit, um sicherzustellen, dass unser Design auf allen Bildschirmgrößen vollständig responsive bleibt.

• Obere Polsterung: 26,3 vw (Desktop), 48 vw (Tablet), 72 vw (Telefon)
• Untere Polsterung: 26,3 vw (Desktop), 48 vw (Tablet), 72 vw (Telefon)

Animation

Zu guter Letzt fügen wir unserem Bildmodul eine Folienanimation hinzu. Sobald Sie die Animation angewendet haben, werden Sie feststellen, dass das Bild erst ab dem Moment angezeigt wird, in dem es in die erste Spalte eintritt. Die Hintergrundfarbe der zweiten Spalte bleibt oben auf dem Bildmodul, während es nach links gleitet.

• Animationsstil: Folie
• Animationswiederholung: Einmal
• Animationsrichtung: Links
• Animationsdauer: 1450 ms
• Animationsintensität: 60%
• Anfangsdeckkraft der Animation: 100 %

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das nächste Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1,5 vw (Desktop), 2,5 vw (Tablet), 4 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #e02b20
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 1px
• Schaltflächenschriftart: Poppins
• Schriftstärke: Schwer

Abstand

Ändern Sie auch die Abstandswerte.

• Obere Marge: -3.3vw (Desktop), -6vw (Tablet), -9.1vw (Telefon)
• Linke Polsterung: 8vw
• Rechte Polsterung: 8vw

Box Schatten

Fügen Sie einen subtilen Kastenschatten hinzu, um der Seite etwas Tiefe zu verleihen.

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

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H1-Inhalt hinzufügen

Auf zur zweiten Spalte! Das erste Modul, das wir dort brauchen, ist ein Textmodul. Fügen Sie H1-Inhalte Ihrer Wahl hinzu.

H1-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.

• Überschrift Schriftart: Poppins
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 4vw (Desktop), 5vw (Tablet), 6vw (Telefon)

Abstand

Ändern Sie auch die Abstandswerte.

• Oberer Rand: 12vw
• Linker Rand: -20vw
• Rechter Rand: 17vw (Desktop), 15vw (Tablet), 1vw (Telefon)

Animation

Und fügen Sie eine subtile Animation hinzu.

• Animationsstil: Folie
• Animationswiederholung: Einmal
• Animationsrichtung: Unten
• Animationsdauer: 1450 ms
• Animationsintensität: 10%
• Anfangsdeckkraft der Animation: 100 %

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das nächste Modul, das wir in der zweiten Spalte benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

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

• Farbe: #e02b20

Animation

Fügen Sie als Nächstes eine Animation zum Teilermodul hinzu.

• Animationsstil: Folie
• Animationswiederholung: Einmal
• Animationsrichtung: Rechts
• Animationsdauer: 1450 ms
• Animationsintensität: 83%
• Anfangsdeckkraft der Animation: 100 %

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zum nächsten und letzten Modul, das wir in der zweiten Spalte brauchen! Fügen Sie eine Beschreibung Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen im Design-Tab und nehmen Sie entsprechend einige Änderungen vor:

• Textschriftart: Poppins
• Schriftstärke des Textes: Leicht
• Textfarbe: #919191
• Textgröße: 0.7vw (Desktop), 1.8vw (Tablet), 2.2vw (Telefon)
• Text Buchstabenabstand: 0.1vw
• Textzeilenhöhe: 2.2em

Abstand

Ändern Sie auch die Abstandswerte.

• Obere Marge: 9vw (Desktop), 19vw (Tablet), 23vw (Telefon)
• Unterer Rand: 12vw (Desktop), 19vw (Tablet), 23vw (Telefon)
• Linker Rand: -3vw
• Rechter Rand: 20vw (Desktop), 6vw (Tablet), 3vw (Telefon)

Animation

Zu guter Letzt fügen Sie dem Modul eine Fade-Animation hinzu und Sie sind fertig!

• Animationsstil: Ausblenden
• Animationswiederholung: Einmal
• Animationsdauer: 1450 ms
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 0%

Vorschau

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

Handy, Mobiltelefon

Desktop

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divi atemberaubende Heldenabschnitte mit geteiltem Inhalt erstellen können. Hero-Abschnitte mit geteiltem Inhalt sind sehr beliebt und werden im Web häufig verwendet, aber es ist wichtig, sicherzustellen, dass sie auch sehr reaktionsschnell sind. Wir hoffen, dass dieses Tutorial Ihnen dabei hilft, mobile Split-Content-Heldenabschnitte für die kommenden Websites zu erstellen, die Sie erstellen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!