So erstellen Sie mit Divi . eine lustige Produktseitenvorlage für Kinderprodukte

Produkt-Websites für Kinder haben einen einzigartigen Stil. Sie sind in der Regel lustig, farbenfroh und inspirieren ein Lächeln. Ihr WooCommerce-Shop für Kinderprodukte ist jetzt mit dem Divi-Theme-Builder und anpassbaren Woo-Modulen einfacher zu erstellen. Warum nicht mit einem einzigartigen und lustigen Design etwas Besonderes machen? In diesem Beitrag zeigen wir Ihnen, wie Sie im Theme Builder eine Vorlage für eine Produktseite für Kinder erstellen, die für alle Ihre Produkte gilt. Dies funktioniert am besten mit Produktbildern, die einen transparenten Hintergrund haben. Sie können die JSON-Datei auch kostenlos herunterladen!

Lass uns anfangen.

Vorschau

Bevor wir mit der Neuerstellung des Designs beginnen, werfen wir einen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Produktvorlage für lustige Kinder KOSTENLOS herunter

Um die kostenlose Vorlage für lustige Kinderprodukte in die Hände zu bekommen, müssen Sie sie 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. Design-Vorbereitung für die Produktvorlage für Kinder

Hintergrund vom Produktfoto entfernen

Bevor wir mit dem Produktdesign für Kinder beginnen, bereiten wir zunächst die Bilder vor. Entfernen Sie den Hintergrund aus den Produktbildern. Dies erreichen Sie mit Adobe Photoshop, Adobe Illustrator oder remove.bg. Lassen Sie etwas Platz um das Produkt herum, damit es gut in das Design passt. Die beste Größe für das endgültige Bild ist 600 x 400 Pixel.

Hintergrunddesign erstellen

Der zweite Schritt besteht darin, ein Hintergrunddesign zu erstellen, das hinter dem Bild platziert wird. Dieses Design mit überlappenden Formen lässt sich ganz einfach in Adobe Illustrator erstellen. Alternativ finden Sie dieses Hintergrundbild im Download-Ordner oben. Gehen Sie wie folgt vor, wenn Sie den Hintergrund erstellen möchten:

• Erstellen (oder Quelle) einer Form.
• Geben Sie der Form die gewünschte Farbe.
• Duplizieren Sie die Form.
• Färben Sie es in einem ähnlichen Ton wie das Original.
• Drehen Sie die zweite Form, um eine schöne Komposition zu erstellen.
• Fügen Sie beiden Formen etwas Transparenz hinzu.
• Fügen Sie einen Hintergrund in derselben Farbe wie der Hintergrund im endgültigen Design hinzu.
• Speichern Sie als JPG mit etwa 1750 x 1650 Pixeln.

2. Neues Woocommerce-Produkt erstellen/hinzufügen

Produktdaten

Sobald wir das Produktbild und die Hintergrunddesigns fertig haben, ist es an der Zeit, ein Kinderprodukt zu erstellen. Um ein Design genau wie unseres zu erstellen, geben Sie die folgenden Informationen ein.

• Titel: Holzbuchstabenblöcke
• Lange Beschreibung: Diese Naturholzblöcke eignen sich hervorragend für Kinder, um ihre Buchstaben und Zahlen auf unterhaltsame und kreative Weise zu lernen. Die Ränder sind für kleine Finger abgerundet und die Farbe ist ungiftig.
• Alter Verkaufspreis: 12,99
• Neuer Verkaufspreis: 7,99
• Ausgewähltes Bild: Holzklötzchenbild ausschneiden. Bevorzugte Größe: 600 x 400 px
• Attribute: Siehe unten

Geben Sie auf der Registerkarte Attribute die Werte für das Zusatzinformationsmodul ein.

• Material: Natürliches Kiefernholz
• Farbe: Ungiftige weiße Farbe
• Lackfarben: Weiß, Blau, Grün, Fuchsia

3. Neue Vorlage im Theme Builder erstellen

Öffnen Sie den Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Jetzt ist es an der Zeit, zum Divi-Theme-Builder zu gehen. Dort bauen wir das Design ein. Fügen Sie eine neue Vorlage hinzu.

Beginnen Sie mit dem Bau eines benutzerdefinierten Körpers für alle Produkte

Verwenden Sie diese Vorlage für alle Produkte und beginnen Sie mit dem Aufbau des Körpers.

Theme Builder Pro-Tipp:

Lassen Sie beim Erstellen eines Produktdesigns im Theme Builder immer eine Produktseite in einem anderen Fenster geöffnet, um die Änderungen zu überprüfen.

4. Erstellen Sie das Produktdesign der Kinder neu

Neuen Abschnitt hinzufügen

Hintergrund

Im Body Template Builder wird ein Abschnitt angezeigt. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: Palest Pink #f9f2f2

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie nun eine neue Zeile mit 2 Spalten hinzu.

Größe

Passen Sie dann die Größe der Reihe an.

• Benutzerdefinierte Dachrinnenbreite: 2
• Breite: 90%
• Maximale Breite: 90%

Spalte 1 Einstellungen

Hintergrund

Fügen Sie in der Einstellung für Spalte 1 das Hintergrundbild-Design hinzu, das Sie mit den überlappenden Formen erstellt haben.

• Hintergrundbild

Abstand

Passen Sie dann den Abstand entsprechend an.

• Obere und untere Polsterung: 5vw
• Linke und rechte Polsterung
  • Tablet: 2vw
  • Telefon: 0vw

Spalte 2 Einstellungen

Abstand

Gehen Sie zu Spalte 2 und passen Sie die Abstandswerte wie folgt an.

• Obere Polsterung: 1vw
• Untere Polsterung:
  • Tablet + Telefon: 1vw
• Linke und rechte Polsterung:
  • Desktop: 2vw
  • Tablet und Telefon: 7vw

Woo Image Module zu Spalte 1 hinzufügen

Inhalt

Jetzt ist es an der Zeit, die Module hinzuzufügen. Fügen Sie zunächst in Spalte 1 ein Woo-Image-Modul hinzu und wählen Sie dieses Produkt unter Inhalt aus.

• Produkt: Dieses Produkt

Elemente

Wählen Sie dann die Elemente aus, die im Design angezeigt werden sollen.

• Ausgewähltes Bild: Ja
• Galerie: Nein
• Verkaufsabzeichen: Ja

Sale-Badge-Text

Passen Sie auf der Registerkarte Design die Werte für das Verkaufslogo wie folgt an.

• Abzeichenfarbe: Transparent
• Schriftart: Nunito
• Schriftdicke: fett
• Textfarbe: Rosa #f24881
• Textgröße:
  • Desktop: 5vw
  • Tablet: 12vw
  • Telefon: 10vw

Größe

Passen Sie dann den Abstand an, damit die Dinge besser passen.

• Obere Polsterung:
  • Desktop und Tablet: 1vw
  • Telefon: 2vw
• Untere Polsterung: 0vw
• Linke und rechte Polsterung: 0vw

Woo-Titelmodul zu Spalte 2 hinzufügen

Inhalt

Fügen Sie in der zweiten Spalte ein Woo-Titelmodul hinzu und wählen Sie dieses Produkt im Inhalts-Tab aus.

• Produkt: Dieses Produkt

Hintergrund

Geben Sie dem Modul einen weißen Hintergrund.

• Hintergrundfarbe: Weiß #ffffff

Titeltext

Dann formatieren Sie den Titeltext auf H1-Ebene.

• Überschriftsebene: H1
• Schriftart: Nunito
• Schriftstärke: Ultra Bold
• Textausrichtung: Mitte
• Textfarbe: Grünlich Dunkelgrau #314942
• Textgröße:
  • Desktop: 2.6vw
  • Tablet und Telefon: 6.4vw

Abstand

Fahren Sie fort, indem Sie den Abstand im Modul anpassen.

• Polsterung oben und unten:
  • Desktop: 1.5vw
  • Tablet und Telefon: 2.5vw
• Linke und rechte Polsterung: 2vw

Grenze

Passen Sie schließlich den Rahmen für Desktop- und Responsive-Größen an.

• Abgerundete Ecken:
  • Desktop: 1vw alle vier Ecken
  • Tablet und Telefon: 3vw alle vier Ecken

Woo-Beschreibungsmodul zu Spalte 2 hinzufügen

Inhalt

Fügen Sie unter dem Produkttitel ein woo-Beschreibungsmodul hinzu. Wählen Sie den Beschreibungstyp und dieses Produkt auf der Registerkarte Inhalt aus.

• Produkt: Dieses Produkt
• Beschreibungstyp: Beschreibung

Hintergrund

Geben Sie dem Modul dann eine Hintergrundfarbe.

• Hintergrundfarbe: Weiß #ffffff

Text

Wechseln Sie zur Registerkarte Design und gestalten Sie den Text.

• Schriftart: Nunito
• Farbe: Grünlich Dunkelgrau #314942
• Größe:
  • Desktop: 1vw
  • Tablet: 2.5vw
  • Telefon: 3vw

Abstand

Passen Sie dann den Abstand für das Modul an.

• Oberer Rand:
  • Desktop und Tablet: -0.5vw
  • Telefon: -3vw
• Polsterung oben und unten:
  • Desktop: 1.5vw
  • Tablet und Telefon: 4vw
• Linke und rechte Polsterung:
  • Desktop: 2vw
  • Tablet und Telefon: 6vw

Grenze

Schließlich fügen Sie die abgerundeten Ecken hinzu.

• Abgerundete Ecken:
  • Desktop: 1vw alle vier Ecken
  • Tablet und Telefon: 3vw alle vier Ecken

Woo Zusatzinfo-Modul zu Spalte 2 hinzufügen

Inhalt

Fügen Sie unterhalb des Beschreibungsmoduls das woo-Zusatzinfo-Modul hinzu. Wählen Sie dieses Produkt in der Registerkarte Inhalt aus.

• Produkt: Dieses Produkt

Hintergrund

Fügen Sie dann einen weißen Hintergrund hinzu.

• Hintergrundfarbe: Weiß #ffffff

Text

Beginnen Sie auf der Registerkarte Design mit dem Gestalten der verschiedenen Texttypen. Zuerst der Text, der für die Werte der Attribute gilt.

• Schriftart: Nunito
• Stil: Kursiv
• Farbe: Grünlich Dunkelgrau #314942
• Größe:
  • Desktop: 0.8vw
  • Tablet: 1.5vw
  • Telefon: 2vw

Titeltext

Zweitens formatieren Sie den Titeltext.

• Schriftart: Nunito
• Gewicht: Ultra Bold
• Farbe: Rosa #f24881
• Größe:
  • Desktop: 1.7vw
  • Tablet: 3vw
  • Telefon: 3.5vw
• Linienhöhe: 1em

Attributtext

Drittens formatieren Sie den Attributtext.

• Schriftart: Nunito
• Gewicht: Fett
• Farbe: Grünlich Dunkelgrau #314942
• Größe:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw

Abstand

Passen Sie dann den Abstand wie folgt an.

• Oberer Rand:
  • Desktop und Tablet: -0.5vw
  • Telefon: -3vw
• Obere Polsterung:
  • Desktop: 1.5vw
  • Tablet: 3vw
  • Telefon: 5vw
• Linke Polsterung: 1vw
• Rechte Polsterung:
  • Desktop: 2vw
  • Tablet und Telefon: 5vw

Grenze

Schließlich fügen Sie die abgerundeten Ecken hinzu.

• Abgerundete Ecken:
  • Desktop: 1vw alle vier Ecken
  • Tablet und Telefon: 3vw alle vier Ecken

Woo-Preismodul zu Spalte 2 hinzufügen

Inhalt

Fügen Sie ein woo-Preismodul hinzu und wählen Sie dieses Produkt auf der Registerkarte "Inhalt" aus.

• Produkt: Dieses Produkt

Hintergrund

Fügen Sie dem Modul außerdem einen rosa Hintergrund hinzu, um es hervorzuheben.

• Hintergrundfarbe: Rosa #f24881

Verkauf alter Preistext

Wechseln Sie zur Registerkarte Design und gestalten Sie den alten Verkaufspreis.

* Wenn Sie einem Produkt einen neuen und einen alten Verkaufspreis hinzufügen, zeigt das woo-Preismodul nicht beide im Theme Builder an. Überprüfen Sie auf der Produktseite, wie das endgültige Design aussieht.

• Schriftart: Nunito
• Farbe: Weiß #ffffff
• Größe:
  • Desktop: 1.5vw
  • Tablet: 2.5vw
  • Telefon: 3vvw

Verkauf Neuer Preistext

Fahren Sie fort, indem Sie den neuen Preis gestalten.

• Schriftart: Nunito
• Gewicht: Fett
• Farbe: Weiß #ffffff
• Größe:
  • Desktop: 2vw
  • Tablet: 2vw
  • Telefon: 4vw
• Buchstabenabstand: 1px

Abstand

Passen Sie dann den Abstand des Moduls an.

• Oberer Rand:
  • Desktop und Tablet: -0.5vw
  • Telefon: -3vw
• Polsterung oben und unten:
  • Desktop: 1.5vw
  • Tablet und Telefon:
• Linke und rechte Polsterung:
  • Desktop: 2vw
  • Tablet und Telefon: 5vw

Grenze

Schließlich fügen Sie die abgerundeten Ecken hinzu.

• Abgerundete Ecken:
  • Desktop: 1vw alle vier Ecken
  • Tablet und Telefon: 3vw alle vier Ecken

Endgültiges Design

So sieht das Design auf dem tatsächlichen Produkt im Vergleich zu dem im Theme Builder aus.

Woo Add to Cart Modul zu Spalte 2 hinzufügen

Inhalt

Platzieren Sie unter dem Preismodul ein Woo Add to Cart-Modul. Wählen Sie dieses Produkt auf der Registerkarte Inhalt aus.

* Wenn Sie ein Woo Add to Cart-Modul hinzufügen, werden Sie feststellen, dass es oben ein Dropdown-Menü für eine Farboption enthält. Wenn Sie dies nicht auf Ihrer Produktseite angegeben haben, wird es nicht in Ihrem endgültigen Design angezeigt. Sie können dies sicherstellen, indem Sie das Live-Produkt überprüfen, während Sie im Theme Builder erstellen.

• Produkt: Dieses Produkt

Elemente

Wählen Sie im weiteren Verlauf die Elemente aus, die im Modul angezeigt werden.

• Mengenfeld: Aus
• Lager: Aus

Hintergrund

Fügen Sie dann eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: Weiß #ffffff

Taste

Jetzt ist es Zeit, den Button zu stylen. Fügen Sie die Werte wie folgt hinzu.

• Textgröße:
  • Desktop: 2vw
  • Tablet: 3vw
  • Telefon: 5vw
• Textfarbe: Rosa #f24881
• Hintergrundfarbe: Weiß #ffffff
• Buchstabenabstand: 1px
• Schriftart: Nunito
• Gewicht: Schwer
• Oberer und unterer Rand: -0.3vw

Abstand

Passen Sie dann den Abstand des Moduls an.

• Oberer Rand:
  • Desktop und Tablet: -0.5vw
  • Tablet: -3vw
• Polsterung oben und unten: 0vw
• Linker und rechter Rand: 0vw

Grenze

Fügen Sie schließlich einen abgerundeten Rahmen hinzu.

• Abgerundete Ecken:
  • Desktop: 1vw alle vier Ecken
  • Tablet und Telefon: 3vw alle vier Ecken

Vorschau

Werfen wir einen letzten Blick auf das fertige Design für verschiedene Bildschirmgrößen. Die Produktdesignvorlage für Kinder gilt jetzt für alle Produkte in Ihrem Geschäft. Stellen Sie sicher, dass Sie zurückgehen, um die Bildgrößen zu überprüfen, um sicherzustellen, dass sie alle gut passen.

Desktop

Handy, Mobiltelefon

Es ist ein Wrap auf der Produktseite für Kinder!

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein Design für eine Produktseite für Kinder neu erstellen. Dieses Design mit weichen Kanten, einem lustigen Hintergrunddesign und fröhlichen Farben lässt alle Ihre Produkte einladend und kaufbereit aussehen. Wir hoffen, dass Ihnen dieses Design gefällt und Sie es verwenden, um Ihre eigenen Divi-Kreationen zu inspirieren. Hinterlasse uns deine Gedanken in den Kommentaren!