Die meisten Websites verfügen über einen „Helden“-Bereich, der sich nicht mehr beweisen muss. Seine Aufgabe besteht nicht nur darin, hervorzustechen, sondern auch in mehrere Elemente zu gliedern, die den bestehenden Aufruf zum Handeln verstärken. Die Heldenabschnitte zu Inhalt Split mit leicht verständlicher Struktur sind sehr beliebt und werden häufig von verschiedenen Arten von Websites verwendet.
Und obwohl Heldenabschnitte erstellt werden Inhalt Für das Büro geteilt zu sein scheint einfach, man sollte nicht immer dem Schein trauen. Hier wird Ihnen dieses Tutorial nützlich sein. Wir werden einen hochgradig interaktiven mobilen Split-Helden-Bereich neu erstellen, der nicht nur auf Mobilgeräten, sondern unabhängig von der Bildschirmgröße großartig aussieht. Wir kombinieren auch hervorragende Animationen, die perfekt zum Designstil 2019 passen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen Abschnitte für mobile Helden zu erstellen Inhalt Teilt.
Lassen Sie uns gehen!
Übersicht
Bevor wir uns mit dem Tutorial befassen, werfen wir einen Blick darauf, was Sie nach Abschluss dieses Tutorials erhalten können.
Schnittstellen-Design
Einen neuen Abschnitt hinzufügen
Abstand
Erstellen Sie zunächst eine neue Seite oder öffnen Sie eine vorhandene. Fügen Sie einen neuen regulären Abschnitt hinzu, gehen Sie zu den Abstandseinstellungen und entfernen Sie alle Standardränder für den oberen und unteren Abstand.
- Beste Polsterung: 0px
- Polsterung unten: 0px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Wir werden weiterhin eine neue Zeile hinzufügen und die folgende Spaltenstruktur verwenden:
Hintergrundfarbe
Öffnen Sie die Leitungseinstellungen, ohne weitere Module hinzuzufügen, und fügen Sie eine vollständig 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
Gleiches gilt für die zweite Spalte.
- Spalte 2-Hintergrundfarbe: #000000
Sizing
Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile und ihre Spalten die gesamte Breite des Bildschirms einnehmen.
- Machen Sie diese Linie in voller Breite: Ja
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: Ja
Abstand
Wir entfernen auch alle oberen und unteren Standardränder der Linie.
- Polsterung oben: 0px
- Polsterung unten: 0px
- Polster rechts: 1vw
Anzeige
Schließlich stellen wir sicher, dass die beiden Spalten auf kleineren Bildschirmen nebeneinander angezeigt werden. Dazu müssen wir der Registerkarte Erweitert der Zeile eine einzelne Zeile CSS-Code hinzufügen.
display: flex; |
Fügen Sie Spalte 1 ein Bildmodul hinzu
Lassen Sie den Bildbereich leer
Wir haben jetzt alle Module, die wir brauchen! Sie müssen mit dem Bildmodul in der ersten Spalte beginnen. Anstatt ein Bild in den Bildbereich hochzuladen, laden wir das Bild in den nächsten Schritten in die Hintergrundeinstellungen hoch, sodass wir das standardmäßig hinzugefügte Bild entfernen müssen. So können wir damit spielen, wie das Bild positioniert ist und wie viel Platz es in unserer Reihe einnimmt.
Fügen Sie eine Hintergrundfarbe hinzu
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 mithilfe eines Überblendungseffekts, um das Bild abzudunkeln.
- Hintergrundfarbe: #686868
Fügen Sie ein Hintergrundbild hinzu
Fügen Sie ein Hintergrundbild Ihrer Wahl hinzu und ändern Sie die Hintergrundeinstellungen entsprechend:
- Hintergrundbildgröße: Cover
- Position des Hintergrundbildes: Mitte
- Hintergrundbild wiederholen: Keine Wiederholung
- Hintergrundbildmischung: multiplizieren
Sizing
Wir haben zwei gleich große Spalten für die Zeile verwendet, an der wir arbeiten, aber das Ergebnis ist nicht dasselbe. Wir werden die Größe jedes hinzugefügten Moduls 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, alles reaktionsfähig zu machen.
auf kleineren Bildschirmen. Greifen Sie auf die Größenparameter des Bildmoduls zu und ändern Sie die Breite.
- Breite: 88%
- Ausrichtung des Moduls: links
Abstand
Jetzt müssen wir die Größe unseres Bildes in den Abstandseinstellungen festlegen. Für diese Werte verwenden wir auch eine Anzeigeeinheit, um sicherzustellen, dass unser Design unabhängig von der Bildschirmgröße vollständig reagiert.
- Obere Polsterung: 26.3vw (Desktop), 48vw (Tablet), 72vw (Telefon)
- Polsterung unten: 26.3vw (Desktop), 48vw (Tablet), 72vw (Telefon)
Animation
Schließlich fügen wir dem Bildmodul eine Folienanimation hinzu. Sobald Sie die Animation angewendet haben, werden Sie feststellen, dass das Bild erst in dem Moment angezeigt wird, in dem es in die erste Spalte gelangt. Die Hintergrundfarbe der zweiten Spalte bleibt oben im Bildmodul, während sie nach links gezogen wird.
- Animationsstil: Folie
- Animation wiederholen: Einmal
- Animationsrichtung: links
- Animationsdauer: 1450ms
- Intensitätsanimation: 60%
- Animation Startopazität: 100%
Fügen Sie der 1-Spalte ein Schaltflächenmodul hinzu
Kopie hinzufügen
Das nächste Modul, das wir in Spalte 1 benötigen, ist ein Schaltflächenmodul. Geben Sie eine Kopie Ihrer Wahl ein.
Tasteneinstellungen
Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 1.5vw (Desktop), 2.5vw (Tablet), 4vw (Telefon)
- Knopftextfarbe: #ffffff
- Hintergrundfarbe der Schaltfläche: #e02b20
- Breite des Schaltflächenrandes: 0px
- Radius des Randes der Schaltfläche: 1px
- Schaltfläche Font: Poppins
- Schriftgewicht: Fett
Abstand
Ändern Sie auch die Abstandswerte.
- Oberer Rand: -3.3vw (Desktop), -6vw (Tablet), -9.1vw (Telefon)
- Linke Polsterung: 8vw
- Polster rechts: 8vw
Schattenkiste
Und fügen Sie einen subtilen Schatten hinzu, um Tiefe auf der Seite zu erzeugen.
- Box Shadow Blur Force: 20px
- Schattenfarbe: rgba (0,0,0,0.3)
Fügen Sie den Textbaustein # 1 in die Spalte 2 ein
Fügen Sie H1-Inhalte hinzu
In der zweiten Spalte! Das erste Modul, das wir benötigen, ist ein Textmodul. Fügen Sie einen beliebigen H1-Inhalt Ihrer Wahl hinzu.
H1-Texteinstellungen
Gehen Sie dann zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.
- Schrift: Poppins
- Titeltextfarbe: #ffffff
- Text Titelgröß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üge eine subtile Animation hinzu.
- Animationsstil: Folie
- Animation wiederholen: Einmal
- Animationsrichtung: Nach unten
- Animationsdauer: 1450ms
- Intensitätsanimation: 10%
- Animation Startopazität: 100%
Fügen Sie der 2-Spalte ein Divisionsmodul hinzu
Sichtbarkeit
Das nächste Modul, das wir in der zweiten Spalte benötigen, ist ein Teilungsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.
- Teiler anzeigen: Ja
Farbe
Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Trennzeichens.
- Farbe: #e02b20
Animation
Fügen Sie dem Divisionsmodul als Nächstes eine Animation hinzu.
- Animationsstil: Folie
- Animation wiederholen: Einmal
- Animationsrichtung: Rechts
- Animationsdauer: 1450ms
- Intensitätsanimation: 83%
- Animation Startopazität: 100%
Fügen Sie den Textbaustein # 2 in die Spalte 2 ein
Inhalt hinzufügen
Fahren wir mit dem nächsten und letzten Modul fort, das wir in der zweiten Spalte benötigen! Fügen Sie eine Beschreibung Ihrer Wahl hinzu.
Texteinstellungen
Gehen Sie dann zu den Texteinstellungen auf der Registerkarte Design und nehmen Sie einige entsprechende Änderungen vor:
- Textschrift: Poppins
- Schriftgröße des Textes: Light
- Textfarbe: #919191
- Textgröße: 0.9vw (Desktop), 1.8vw (Tablet), 2.2vw (Telefon)
- Abstand der Buchstaben: 0.1vw
- Höhe der Textzeile: 2.2em
Abstand
Ändern Sie auch die Abstandswerte.
- Oberer Rand: 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
Und am Ende fügen Sie dem Modul eine Überblendanimation hinzu, und fertig!
- Animationsstil: Verblassen
- Animation wiederholen: Einmal
- Animationsdauer: 1400ms
- Animationsverzögerung: 1000ms
- Animation Startopazität: 0%
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie fantastische Hero-Abschnitte mit geteiltem Inhalt erstellen Divi. Hero-Abschnitte mit geteiltem Inhalt sind sehr beliebt und werden häufig im Web verwendet, aber es ist auch wichtig sicherzustellen, dass sie sehr reaktionsschnell sind. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar und teilen Sie ihn gerne in den sozialen Medien!
