Erstellen einer Polaroid-Helden-Sektion mit den Transformationsoptionen von Divi

Kreative Heldenabschnitte machen Websites unvergesslich und besonders. Dieses Polaroid-Heldenschnitt-Design weckt ein Gefühl von Vintage-Wanderlust. Durch die Verwendung von Spaltentransformationsoptionen können die Polaroids beliebig angeordnet werden, als wären sie auf einem Tisch ausgebreitet.

Sie können dieses Design des Polaroid-Heldenabschnitts mit Ihren eigenen quadratischen Bildern nachbilden. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Desktop

Handy, Mobiltelefon

Laden Sie das Polaroid Hero Section Design KOSTENLOS herunter

Um das kostenlose Polaroid-Helden-Sektionsdesign 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!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung

Neuen Abschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen.

Unterteiler

Fügen Sie einen mintgrünen unteren Teiler hinzu.

• Platzierung der Trennwände: Unten
• Teiler-Stil: # 12
• Teilerfarbe: Mintgrün #d2f2d0
• Teilerhöhe: 23vw

Abstand

Passen Sie den Abstand des Abschnitts an.

• Oberer Rand: 7vw
• Unterer Rand: 0px
• Polsterung oben und unten: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen. Wählen Sie die folgende Spaltenstruktur:

Größe

Passen Sie nun die Größe der Zeile an.

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

Abstand

Passen Sie als Nächstes die obere und untere Polsterung in den Abstandseinstellungen an.

• Polsterung oben und unten: 0px

Anzeige

Fügen Sie dem Hauptelement der Zeile eine Zeile CSS-Code hinzu, um die Spalten auf kleineren Bildschirmgrößen nebeneinander zu halten.

• Benutzerdefiniertes CSS – Hauptelement: display: flex;

display: flex;

Bildmodul zu Spalte 1 hinzufügen

Quadratisches Bild hochladen

Fügen Sie in Spalte 1 ein Bildmodul hinzu und laden Sie ein quadratisches Bild hoch.

Ausrichtung

Passen Sie nun die Modulausrichtung an.

• Modulausrichtung: Mitte

Größe

Machen Sie dann das Modul in voller Breite.

• Volle Breite erzwingen: Ja

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie ein Textmodul hinzu und fügen Sie einige Inhalte ein. Wir verwenden das Wort „Polaroid“.

Text

Gestalten Sie die Textschriftart.

• Textschriftart: Advent Pro
• Textausrichtung: Mitte
• Textfarbe: Sehr Dunkelgrau #474747
• Textgröße:
  • Desktop: 1vw
  • Tablet + Telefon: 2vw
• Text Buchstabenabstand: 0.1vw
• Textzeilenhöhe: 1.8em

Größe

Verwenden Sie '100%' für die Breite in den Größeneinstellungen.

• Breite: 100%

Abstand

Passen Sie nun den Abstand an.

• Oberer Rand: 1vw

Module zweimal klonen und Duplikate in verbleibende Spalten platzieren

Bild und Kopie von Duplikaten ändern

Ändern Sie die Bilder in jedem doppelten Bildmodul. Wenn Ihr Design es erfordert, ändern Sie auch den Textinhalt.

Spalte 1 Einstellungen

Hintergrund

Fahren Sie fort, indem Sie die Einstellungen von Spalte 1 der Zeile öffnen. Stellen Sie den Hintergrund auf Weiß ein, um den Polaroid-Effekt zu erzeugen.

• Hintergrundfarbe: Weiß #ffffff

Abstand

Fügen Sie etwas untere Polsterung hinzu, um den breiteren unteren Rand des Polaroids zu erstellen.

• Untere Polsterung: 2vw

Grenze

Fügen Sie einen Rahmen hinzu, um das Polaroid-Visual zu vervollständigen.

• 4-seitige Rahmenbreite: 1vw
• Breite des oberen Rands: 2vw
• Breite des rechten Rands: 2vw
• Breite des unteren Rands: 1vw
• Linke Randbreite: 2vw
• Randfarbe: Weiß #ffffff

Box Schatten

Vervollständigen Sie die Einstellungen von Spalte 1, indem Sie einen subtilen Kastenschatten hinzufügen.

• Kastenschatten: #1

Einstellungen für Spalte 1 erweitern

Verwenden Sie die Option Stile erweitern, um die Spalteneinstellungen zu erweitern.

• Gehen Sie zurück zum Hauptfenster für die Zeileneinstellungen und klicken Sie auf die drei Punkte rechts neben der Registerkarte der ersten Spalte.
• Wählen Sie "Artikelstile erweitern" und dann "in dieser Zeile".

Spalte 1 Transformationsstile

Passen Sie nun die Transformationseinstellungen in der ersten Spalte an.

• Transformieren Übersetzen: x-Achse -11vw, y-Achse -6vw
• Transformieren Drehen: 341 Grad, 1. Option

Spalte 2 Transformationsstile

Passen Sie als Nächstes die Transformationseinstellungen für die zweite Spalte an.

• Transformieren Übersetzen: x-Achse -22w, y-Achse 0vw
• Transformieren Drehen: 10 Grad, 1. Option

Spalte 3 Transformationsstile

Passen Sie abschließend die Transformationseinstellungen für Spalte drei an.

• Transformationsskala: 68 % beide Achsen
• Transformieren Übersetzen: x-Achse -46w, y-Achse 12vw
• Transformieren Drehen: 31 Grad, 1. Option

Neuen Abschnitt hinzufügen

Hintergrund

Fügen Sie einen neuen Abschnitt hinzu und wenden Sie einen mintgrünen Hintergrund auf den Abschnitt an.

• Hintergrundfarbe: Mintgrün #d2f2d0

Unterteiler

Geben Sie dem Abschnitt einen unteren Teiler.

• Platzierung der Trennwände: Unten
• Teiler-Stil: # 12
• Teilerfarbe: Weiß #ffffff
• Teilerhöhe: 23vw

Abstand

Entfernen Sie die standardmäßige obere Polsterung.

• Obere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit 3 Spalten hinzufügen.

Zeilenstile kopieren und einfügen

Kopieren Sie in der Drahtmodellansicht die Zeilenstile aus dem ersten Abschnitt

• Klicken Sie zunächst auf die drei Punkte rechts neben dem Zeilenmenü im ersten Abschnitt. Wählen Sie „Zeilenstile kopieren“.
• Klicken Sie dann im zweiten Abschnitt auf die drei Punkte rechts neben dem Zeilenmenü. Wählen Sie „Zeilenstile einfügen“.

Spalteneinstellungen kopieren und einfügen

Kopieren Sie nun die Spalteneinstellungen in die erste Zeile und fügen Sie sie in die Spalten 1 und 2 der neuen Zeile ein.

• Öffnen Sie zunächst die Zeileneinstellungen in der ersten Zeile.
• Klicken Sie anschließend auf die drei Punkte auf der rechten Seite des ersten Spaltenreiters und wählen Sie „Elementstile kopieren“.
• Scrollen Sie dann nach unten zur neuen Zeile und öffnen Sie die Registerkarte Einstellungen.
• Klicken Sie abschließend auf die drei Punkte auf der rechten Seite der ersten Spalte und wählen Sie „Elementstile einfügen“.

Spalte 1 Transformationsstile

Passen Sie nun die Transformationsstile in Spalte 1 an.

• Transform Scale: 75% beide Achsen
• Transformieren Übersetzen: x-Achse -8w, y-Achse -14vw
• Transformieren Drehen: 35 Grad 1. Option

Spalte 2 Transformationsstile

Ändern Sie dann die Transformationsstile in Spalte 2.

• Transformieren Übersetzen: x-Achse -17w, y-Achse 2vw
• Transformieren Drehen: 346 Grad 1. Option

Bildmodule hinzufügen

Bildmodule duplizieren und ziehen

Gehen Sie nun zurück zur Drahtmodellansicht, um zwei Bildmodule zu duplizieren und zu ziehen.

• Zuerst duplizieren Sie das erste Bildmodul im ersten Abschnitt zweimal.
• Ziehen Sie sie dann in die erste und zweite Spalte des zweiten Abschnitts.
• Ändern Sie das Bild in jedem Modul für ein neues quadratisches Bild.

Textmodule hinzufügen

Duplizieren und Ziehen von Textmodulen

Machen Sie nach den Bildern dasselbe mit den Textbausteinen. Aus dem ersten Abschnitt duplizieren und in den zweiten Abschnitt ziehen.

• Duplizieren Sie in der Drahtmodellansicht das Textmodul aus der ersten Spalte im ersten Abschnitt zweimal.
• Ziehen Sie nun die neuen Textbausteine ​​in die Spalten 1 und 2 im zweiten Abschnitt.
• Wenn Sie den Inhalt ändern möchten, tun Sie dies jetzt.

Textmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Klicken Sie in der dritten Spalte auf das Plus-Symbol und fügen Sie einen Textbaustein hinzu. Fügen Sie einige H2- und Absatzinhalte ein.

Text

Stylen Sie den Text wie folgt.

• Textschriftart: Advent Pro
• Textausrichtung: Mitte
• Textfarbe: Dunkelgrau #848484
• Textgröße:
  • Desktop: 1vw
  • Tablet + Telefon: 1.9vw
• Text Buchstabenabstand: 0.1vw
• Höhe der Textzeile:
  • Desktop: 1.2em
  • Tablet + Telefon: 1.3em

Überschriftstext

Stylen Sie nun den H2-Text.

• Überschrift: H2
• H2 Schriftart: Adamina
• H2 Schriftstärke: Fett
• H2 Schriftfarbe: Sehr Dunkelgrau #444444
• H2 Schriftgröße:
  • Desktop: 2vw
  • Tablet + Telefon: 3vw
• H2-Buchstabenabstand: 4px
• H2-Linienhöhe:
  • Desktop: 1.7vw
  • Tablet + Telefon: 1.5vw

Größe

Passen Sie dann die Größe an.

• Breite:
  • Desktop: 60%
  • Tablette: 91%
  • Telefon: 100%
• Modulausrichtung: Mitte

Abstand

Passen Sie abschließend den Abstand an.

• Obere Marge: -12vw

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Klicken Sie auf das Plus-Symbol unter dem Text und fügen Sie ein Schaltflächenmodul hinzu. Fügen Sie der Schaltfläche eine Kopie hinzu.

Ausrichtung

Ändern Sie die Ausrichtung der Schaltfläche.

• Ausrichtung: Mitte

Benutzerdefinierte Schaltflächenstile

Stylen Sie die Schaltfläche entsprechend.

• Schaltflächentextgröße:
  • Desktop: 1vw
  • Tablet: 2.4vw
  • Telefon: 2.3vw
• Breite des Tastenrahmens: 0px
• Schaltflächentextfarbe: Schwarz #000000
• Tastenabstand: 4px
• Button-Schriftart: Advent Pro
• Schriftstärke der Schaltfläche: Fett

Abstand

Wenden Sie einen Wert für den oberen Rand an.

• Oberer Rand: 2vw

Trennmodul zu Spalte 3 hinzufügen

Sichtweite

Fügen Sie unter der Schaltfläche eine Trennlinie hinzu und gestalten Sie sie wie folgt.

• Sichtbarkeit: Ja

Leitung

Geben Sie dem Teiler eine hellgrüne Farbe.

• Linienfarbe: #55f252

Größe

Ändern Sie die Größeneinstellungen des Teilers und Sie sind fertig!

• Teilergewicht
  • Desktop: 7px
  • Tablet + Telefon: 4px
• Breite:
  • Desktop: 10 %
  • Tablet + Telefon: 30%
• Modulausrichtung: Mitte

Vorschau

Schauen wir uns noch einmal das fertige Design der Polaroid-Helden-Sektion über verschiedene Bildschirmgrößen an.

Desktop

Handy, Mobiltelefon

Es ist ein Wrap!

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den Transformationsoptionen von Divi einen Polaroid-Heldenabschnitt neu erstellen können. Dies ist eine großartige Möglichkeit, mehrere Bilder im Heldenbereich Ihrer Seite zu präsentieren. Wir hoffen, dass dieses Design Ihre eigenen kreativen Helden-Sektionsdesigns inspirieren wird! Wenn Sie Fragen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten.