So rahmen Sie ein Produkt in Ihrem Hintergrundbild mit den Spaltenoptionen von Divi ein

Mit den WooCommerce-Modulen von Divi gibt es unzählige Designs, die Sie mit Divi erreichen können. Im heutigen Divi-Tutorial versuchen wir, Sie mit einer anderen Designidee zu inspirieren, die Sie nur mit den integrierten Optionen von Divi verwirklichen können. Genauer gesagt zeigen wir Ihnen, wie Sie ein Produkt in Ihr Hintergrundbild einrahmen. Das Ergebnis hängt ganz von Ihrem Hintergrundbild ab, aber wenn Sie dieses Tutorial durchgehen, wissen Sie, welche Schritte Sie unternehmen müssen, um die Technik für Ihre eigene Website zu personalisieren! Sie können auch die JSON-Datei des Tutorials 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

Laden Sie das Rahmenprodukt-Layout KOSTENLOS herunter

Um das kostenlose Rahmen-Produktlayout 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!

1. Abschnitt mit responsivem Hintergrundbild einrichten

Neuen Abschnitt hinzufügen

Responsive Hintergrundbild

Der erste Schritt zum Einrahmen eines Produkts in Ihr Hintergrundbild besteht darin, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und laden Sie ansprechende Hintergrundbilder hoch. Sie finden beide Bilder, die wir verwendet haben, in dem Ordner, den Sie am Anfang dieses Beitrags herunterladen konnten.

• Hintergrundbild: Landschaft
• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Oben Mitte

• Hintergrundbild: Quadrat

Abstand

Wechseln Sie zur Registerkarte Design und fügen Sie benutzerdefinierte obere und untere Abstände für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)
• Untere Polsterung: 3vw (Desktop), 7vw (Tablet), 18vw (Telefon)

Grenze

Vervollständigen Sie die Abschnittseinstellungen, indem Sie einen Rahmen hinzufügen.

• Randbreite: 2vw
• Rahmenfarbe: #ffffff

2. Fügen Sie der Spalte verschiedene Rahmenelemente hinzu

Neue Zeile hinzufügen

Spaltenstruktur

Nun, wie Sie im Hintergrundbild sehen können, befindet sich das Produkt auf der rechten Seite des Hintergrundbildes. Wir wählen eine passende Spaltenstruktur für eine neue Zeile in unserem Abschnitt. In diesem Fall ist das die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Vervollständigen Sie die Zeileneinstellungen, indem Sie einen benutzerdefinierten linken und rechten Abstand hinzufügen.

• Linke Polsterung: 5vw
• Rechte Polsterung: 5vw

Textmodul zu Spalte 2 hinzufügen

Inhaltsbox leer lassen

Zeit, Module hinzuzufügen! Damit das Produkt durchscheinen kann, verwenden wir ein leeres Textmodul.

Abstand

Als nächstes erhöhen wir die Höhe des Moduls in den Abstandseinstellungen.

• Obere Polsterung: 22vw (Desktop), 39vw (Tablet), 35vw (Telefon)
• Untere Polsterung: 15vw (Desktop), 39vw (Tablet), 35vw (Telefon)

Grenze

Und wir werden auch einen Rahmen hinzufügen.

• Randbreite: 3vw
• Breite des unteren Rands: 1vw
• Rahmenfarbe: rgba(255,255,255,0.7)

Woo-Titelmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Weiter zum nächsten Modul, das ein Woo Title-Modul ist. Wählen Sie ein Produkt Ihrer Wahl aus.

• Produkt: In Liste suchen

Hintergrundfarbe

Verwenden Sie die folgende Hintergrundfarbe:

• Hintergrundfarbe: rgba(255,255,255,0.7)

Einstellungen für Titeltext

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H3-Texteinstellungen entsprechend:

• Titelüberschriftsebene: H3
• Titelschriftart: Work Sans
• Titeltextgröße: 2.5vw (Desktop), 5vw (Tablet), 6vw (Telefon)

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

Woo-Beschreibungsmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Das nächste Modul, das wir brauchen, ist ein Woo Description Module. Wählen Sie ein Produkt Ihrer Wahl aus.

• Produkt: In Liste suchen
• Beschreibungstyp: Kurzbeschreibung

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe des Moduls entsprechend:

• Hintergrundfarbe: rgba(255,255,255,0.7)

Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Open Sans
• Textgröße: 0,9 vw (Desktop), 2,2 vw (Tablet), 2,8 vw (Telefon)
• Höhe der Titelzeile: 2.2em

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte Füllwerte hinzufügen.

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

Woo-Preis-Textmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Als nächstes haben wir das Woo Price Textmodul. Wählen Sie ein Produkt Ihrer Wahl aus.

• Produkt: In Liste suchen

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(255,255,255,0.7)

Preistexteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Preistexteinstellungen entsprechend:

• Preis Schriftart: Work Sans
• Preistextfarbe: #000000
• Preistextgröße: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte Füllwerte hinzufügen.

• Obere Polsterung: 2vw
• Untere Polsterung: 2vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

Woo Add To Cart Modul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Auf zum nächsten und letzten Modul, dem Woo Add To Cart Module! Wählen Sie ein Produkt Ihrer Wahl aus.

• Produkt: In Liste suchen

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(255,255,255,0.7)

Feldeinstellungen

Ändern Sie auch die Feldeinstellungen des Moduls.

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #000000
• Fields-Schriftart: Open Sans

• Breite des unteren Rands der Felder: 1px
• Farbe des unteren Rands der Felder: #000000

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche wie folgt gestalten:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1,1 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px

• Knopfrandradius: 10vw
• Schaltflächenschrift: Open Sans

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 4vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 4vw (Telefon)
• Linke Polsterung: 4vw (Desktop), 6vw (Tablet), 10vw (Telefon)
• Rechte Polsterung: 4vw (Desktop), 6vw (Tablet), 10vw (Telefon)

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Rand- und Abstandswerte hinzufügen.

• Unterer Rand: 2vw
• Obere Polsterung: 3vw
• Untere Polsterung: 3vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

3. Stil-, Größenänderungs- und Neupositionsspalte

Einstellungen für Spalte 2 ändern

Hintergrund mit Farbverlauf

Der letzte Teil dieses Tutorials erlaubt uns nun, die verschiedenen Module zu vereinen. Öffnen Sie die Einstellungen von Spalte 2 und verwenden Sie den folgenden Verlaufshintergrund dafür:

• Farbe 1: rgba(43,135,218,0)
• Farbe 2: #ffffff
• Verlaufstyp: Linear
• Startposition: 39%

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

• Alle Ecken: 1vw

Box Schatten

Wir schaffen etwas Tiefe, indem wir auch einen subtilen Kastenschatten hinzufügen.

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

Transformieren Übersetzen

Und wir vervollständigen die Spalteneinstellungen, indem wir die Transformationswerte für verschiedene Bildschirmgrößen ändern. In diesem Schritt können wir die Spalte nach Belieben neu positionieren. Wenn Sie Ihr eigenes Hintergrundbild verwenden, werden Sie diese Option auf jeden Fall genießen!

• Rechts: 0px (Desktop), 9vw (Tablet & Telefon)
• Unten: -5vw (Desktop), 0vw (Tablet & Telefon)

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 Beitrag haben wir Ihnen gezeigt, wie Sie mit den integrierten Optionen von Divi und den im Divi Builder enthaltenen WooCommerce-Modulen ein Produkt in Ihrem Hintergrundbild einrahmen. Der von Ihnen gewählte Ansatz hängt vom verwendeten Hintergrundbild ab, aber dieses Tutorial wird Ihnen helfen, den Gesamtansatz zu verstehen. Sie konnten auch die JSON-Datei des Layouts kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.