• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Awantego

  • Unique Content
  • Blog
  • Kontakt
You are here: Home / WordPress / WooCommerce Tutorial: Produktseiten mit Elementor erstellen

2. März 2020 by Janina Winkler

WooCommerce Tutorial: Produktseiten mit Elementor erstellen


Der E-Commerce gilt heute als eine besonders profitable und zukunftssichere Branche. Wenn du auf eine Idee gekommen bist, einen eigenen Onlineshop zu eröffnen, ist das deine Investition von Zeit und Geld absolut wert.

Geht es um Onlineverkäufe, ist es wichtig, nicht nur hochwertige Artikel anzubieten, sondern auch diese richtig und ansprechend zu präsentieren. Die Produktseiten sind dazu gedacht, dein Angebot im besten Licht zu zeigen und Aufschluss über dein Produkt zu geben.

Solltest du dich für WooCommerce als Shopsystem entscheiden, ist das Aussehen deiner Produktseiten meistens vordefiniert und kommt auf das WooCommerce Theme bzw. Design an. Du kannst natürlich diese im WooCommerce Customizer auf deine Produktpalette abstimmen, aber für ernste Änderungen am Layout brauchst du zusätzliche Tools wie WooCommerce Product Page Templates.

Der Elementor Page Builder gehört zu den besten WordPress Plugins, welche die Anpassung von Seiten besonders einfach und schnell machen. Auf WooCommerce-Seiten erweist sich doch die kostenlose Version von Elementor als hilflos. Das JetWooBuilder Plugin macht es möglich, die beiden Lösungen unter einen Hut zu bringen und die Möglichkeiten von Elementor für einen WooCommerce-Shop zu nutzen.

Mit diesem funktionsreichen Addon hast du es leicht, vorgefertigte Produktseiten wie beliebt zu ändern sowie eigene benutzerdefinierte Seiten zu erstellen. Ich diesem Beitrag möchten wir gerade zeigen, wie du eine Produktseite von Null auf neu erstellst, ohne dass du den Code editieren musst. Für dieses Tutorial verwende ich Monstroid2. Dieses WordPress Elementor Theme ist von Haus aus mit JetWooBuilder ausgestattet. Das Plugin lässt sich aber problemlos in jedes WooCommerce Theme implementieren.

Inhalt

  • So erstellst du eine benutzerdefinierte Produktseite mit JetWooBuilder
  • Elemente anpassen
  • Produkt Details und Beschreibung hinzufügen
  • Mache die Vorlage responsive
  • Fazit

So erstellst du eine benutzerdefinierte Produktseite mit JetWooBuilder

1. Geh zu WooCommerce >> Jet Woo Templates:

2. Klicke auf Add New Template, benenne das Template und klicke auf Create Template:

3. Klicke auf das Kreuz-Symbol und wähle Struktur. Ich verwende die erste Sektion und die folgenden Einstellungen:

4. Danach füge ich den Inneren Abschnitt hinzu. Ich klicke auf dieses Symbol:

5. Ich ziehe den Inneren Abschnitt auf die Struktur:

6. Die linke Spalte wird die Produktinfo enthalten und die rechte das Produktbild. Füge die folgenden Elemente zu linker Spalte hinzu:

● Überschrift – der Name des Verkäufers
● Abstand – 50px (Computer) und 1px (Tablet- und Handymodus)
● Icon – ein Icon des Produkts oder der Kategorie
● Überschrift – der Name des Produkts
● Abstand – 50px (Computer) und 1px (Tablet- und Handymodus)
● Single Price (Jet Woo Builder) – zeigt den Preis an
● Single Add to Cart (Jet Woo Builder) – der Button, um die Produkte in den Warenkorb hinzuzufügen

So sieht es bisher aus:

Elemente anpassen

1. Passen wir jetzt die Elemente an. Ich fange mit der ersten Überschrift an. Klicke auf Stil und pass den Text an. Die Auswahl der Einstellungen bleibt dir überlassen.

Typografie:
● Schriftfamilie – Montserrat
● Größe – 20
● Schriftschnitt – 500
● Auszeichnung – Unterstreichen

Textschatten >> Unschärfe >> 10

2. Passen wir jetzt Icon an. Dafür klick auf Icon >> Icon-Bibliothek oder SVG hochladen:

Ich habe Car ausgewählt und das Icon angepasst:

Inhalt >> Ausrichtung >> Center
Stil >> NORMAL:
● Primäre Farbe >> #000000
● Größe – 50
Stil >> HOVER:
● Primare Farbe >> #FFFFFF
● Animation bei Mausberührung >> Pulse
● Größe – 50

3. Bearbeiten wir die zweite Überschrift, die den Name des Produkts enthält:

Geh zu Stil:

Textfarbe >> #FFFFFF
Typografie:
● Schriftfamilie >> Montserrat
● Größe >> 37
● Schriftschnitt >> 500
● Umwandlung >> Versalien
● Stil >> Normal

4. Danach geh zu Stil noch einmal. Ich füge jetzt ein Hintergrundbild hinzu:

Hintergrund >> NORMAL >> Klassisch >> Lade ein Bild hoch

5. Bearbeiten wir jetzt die rechte Spalte. Verwende das Element namens Bild:

Danach lade ein Bild hoch:

Inhalt:
● Bildgröße >> Large – 1024 x 1024
● Ausrichtung >> Center
● Bildunterschrift >> Keine
● Link >> Medien-Datei
● Lightbox >> Ja

Ich habe Stil bearbeitet:

Eckenradius >> 8,8,8,8

Mehr zum Thema:
Remote Work bei Awantego: Wir fühlen uns wohl dort, wo wir arbeiten!

6. Dann klicke auf Single Price und bearbeite das Element. Dafür wähle Stil aus. Der schwarze durchgestrichene Preis ist Regular und der rote Preis – Sale:

Typografie:
● Schriftfamilie >> Montserrat
● Größe >> 25
● Schriftschnitt >> 600

Alignment >> Left

Regular:
● Color >> #000000
● Text Decoration >> Line Through
● Font weight >> 600

Sale:
● Color >> #FF5959
● Font Weight >> 600

7. Danach bearbeiten wir den Single Add to Cart Button:

Typografie:
Schriftfamilie >> Montserrat
Schriftschnitt >> 600
Umwandlung >> Versalien

Wähle Hover und füge eine Animation ein:

Hover:
Text Color >> #6C48FC
Background Color >> #FFFFFF

8. Fügen wir jetzt mehr Bilder ein. Dafür verwenden wir Bild Karussell:

Ich habe 3 Bilder ausgewählt und die folgende Einstellungen verwendet:

● Bildgröße – 150×150, da wir kleine Bilder möchten
● Anzuzeigende Slides – 3, sodass das Karussell breiter ist
● Scrollbare Slides – Vorgabe, sodass die Slides sich scrollen
● Bild strecken – Nein
● Link >> Medien-Datei
● Lightbox >> Ja
● Bildunterschrift >> Keine

Klicke auf Stil und drehe den Eckenradius:

Machen wir eine Vorschau der Änderungen

Die Seite sieht schon toll aus, aber wir vermissen noch etwas:

Produkt Details und Beschreibung hinzufügen

Jetzt müssen wir die Sektionen für und Beschreibung hinzufügen. Ich bin zurück zu der Produktseite gegangen, um die Eigenschaften einzustellen. Geh zurück zu Dashboard >> Produkte >> Alle Produkte und wähle dein letztes Produkt.

1. Füge zuerst den Beschreibungstext hier ein:

2. Dann klicke auf Produktdaten, um das Fenster zu erweitern. Da ich einen Wagen verkaufe, füge ich die folgende Eigenschaften ein: Zustand, Getriebeart, Hubraum, Antriebsart, Kraftstoff, Schadstoffklasse, und klicke Eigenschaften speichern:

3. Diesmal verwende ich die Sektion, die zwei Spalten enthält. Klicke auf das rote Kreuz und wähle die zweite Sektion:

Die linke Spalte enthält Single Content und die rechte Spalte – Single Attributes:

Der Abschnitt sieht jetzt so aus:

4. Wir müssen das noch anpassen. Wähle das Widget Single Content und bearbeite Stil:

Text Color >> #000000
Typografie:
● Schriftfamilie >> Montserrat
● Größe >> 15
● Schriftschnitt >> 300
Text Alignment >> Left

Geh zu Erweitert >> Margin >> 40,40,40,40

Margin ist der Abstand des Elemente, die von den Oberen/Rechten/Unteren/Linken Grenzen entfernt sind.

5. Jetzt bearbeiten wir die Eigenschaftstabelle bearbeiten. Wähle Single Attributes aus:

Inhalt >> Content >> Title Text >> Fahrzeugdetails

Stil >> Title:

Color >> #000000
Typografie:
● Schriftfamilie >> Montserrat
● Größe >> 18
● Schriftschnitt >> 700

Margin >> 40,40,10,40
Alignment >> Left

Attributes Table:

Table Width >> 500
Title >> Color >> #7A7A7A
Typografie:
● Schriftfamilie >> Montserrat
● Größe >> 18
● Schriftschnitt >> 400
Breite >> 0,0,0,0
Farbe >> #000000
Padding >> 0,0,0,40

Value >> Color >> #000000
Typografie:
● Schriftfamilie >> Montserrat
● Größe >> 18
● Schriftschnitt >> 500
Breite >> 0,0,0,0
Alignment >> Left

Ergebnis:

6. Wir möchten, dass unsere Kunden ihre Bewertungen hinterlassen können. Fügen wir das Element Single Reviews Form unter Produktdetails und Beschreibung hinzu. Bearbeite den Abschnitt:

Layout:
● Inhaltsbreite >> Boxed
● Spaltenabstand >> Breit

Mache die Vorlage responsive

Klicke auf Responsiv Modus und wähle Tablet aus. Sieht alles gut aus? Ich habe den Text kleiner gemacht und die Bilder zentriert. Die Änderungen, die Tablet oder Handy Zeichen haben, werden nur für die bzw. Tablets und Handys gemacht:

Wenn alles gut aussieht, klicke auf SPEICHERN.

Hinweis! Vergiss aber nicht, dieses Häkchen zu setzen, sonst wird das Template nicht funktionieren.

Fazit

Wie du sehen kannst, geht alles ganz einfach per Drag&Drop. Befolge diese Schritte, um eine neue Seite von Grund auf neu zu erstellen. Wie profitierst du von dieser Einfachheit? Nach einiger Zeit kannst du die Usability deines Shops testen und die Seiten mit nur wenigen Klicks anpassen, um deinen Kunden das optimale Shopping-Erlebnis bieten zu können.

Ähnliche Artikel

  • 5 Regeln einer erfolgreichen Produktpräsentation im Online… 24. Juli 2020
  • Konkurrenzfähig im E-Commerce mit personalisierten… 13. September 2021
  • Produktbeschreibung erstellen: Tipps für Einsteiger 12. November 2021
  • 5 Tipps, um den Warenkorbwert zu erhöhen 11. Mai 2022

Filed Under: Allgemein, Webdesign, WordPress Tagged With: Elementor, JetWooBuilder, onlineshop, WooCommerce

Primary Sidebar

Neueste Artikel im Blog

Warenkorbwert erhöhen

5 Tipps, um den Warenkorbwert zu erhöhen

11. Mai 2022

Automated Content erstellen: Ein Textkonzept ist erforderlich

Content generieren: So erstellen Sie automatisierte Texte

3. Mai 2022

Kundenzufriedenheit wird durch die Kundenansprache bestimmt

Kundenansprache im E-Commerce: 9 Tipps für wirkungsvolle Texte

26. April 2022

E Commerce KPIs

E-Commerce KPIs: Welche sind die wichtigsten für Ihr Online Shop?

22. April 2022

Kategorietexte für Onlineshops

Kategorietexte für Onlineshops: Pflicht oder nice-to-have?

8. April 2022

Kundennutzen_Frau_kauft_im-Online_Shop_Kundennutzen_Beispiele

Kundennutzen Beispiele: So kommunizieren Sie richtig

5. April 2022

Fashion Online Shop_Produktbeschreibung_Beispiele

Produktbeschreibung Beispiele für Fashion Onlineshops

31. März 2022

SEO Tools für Online Händler

SEO Tools für Online Händler: Unterschätzte Werkzeuge, die Ihren Umsatz steigern

15. März 2022

Customer Experience verbessern

21 Wege zur Verbesserung der Customer Experience für Online-Händler

14. März 2022

Kontakt zur Agentur

Agentur Awantego
Tel.: +49(0)711/48890-50
E-Mail: info@awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Traumjob bei Awantego:

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Downloads / Tutorials

  • Downloads
  • Tutorials

Weitere Anleitungen und Tutorials finden Sie im Blog von Awantego.com

Am meisten gelesen

  • Unique Content – Die Technik dahinter
  • Marketing Lexikon
  • Marketing Automation
  • Mehr Kunden mit Newsletter-Marketing

Weitere Beiträge im Blog

Remote Working

Remote Work bei Awantego: Wir fühlen uns wohl dort, wo wir arbeiten!

15. September 2021

Personalisierte Produktbeschreibungen stärken die Kundenbindung

Konkurrenzfähig im E-Commerce mit personalisierten Produktseiten

13. September 2021

Kundenexperience_Customer_Experience

So können Sie die Customer Experience mit Hilfe von Produktbeschreibungen verbessern

23. August 2021

7 Tipps für professionelle Produktbeschreibungen

6. August 2021

Produktpräsentation im Online Shop

Produktpräsentation für E-Commerce: So erstellen Sie ansprechende Produktseiten

2. August 2021

So setzen Sie ein mehrsprachiges Projekt um ohne ein Sprachtalent zu sein

22. Juli 2021

Analyse_Geld_Sparen_mit _Automatischen_Produktbeschreibungen

So sparen unsere Kunden Millionen mit automatisierten Produktbeschreibungen

1. Juli 2021

Produktvorteile

So bringen Sie Produktvorteile in Ihren Produktbeschreibungen auf den Punkt

25. Juni 2021

Was sind Produktkategorien im Marketing, wie werden diese erstellt und zu welchem Zweck?

8. Oktober 2020

AXCD 2020: Die Content Konferenz

AXCD 2020: Wir sind dabei. Und Sie?

25. September 2020

Wirkungsvolle Tipps, um die Konversionsrate in Ihrem Online Shop zu steigern

11. September 2020

So erstellen Sie Texte für Ihre Produktpalette

31. Juli 2020

5 Regeln einer erfolgreichen Produktpräsentation im Online Shop

24. Juli 2020

Footer

Kontakt

Digital-Agentur Awantego
Tel.: +49 (0)711/48890-50

E-Mail: info@awantego.com
Web: www.awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Jobs bei Awantego

Offene Stellen bei Awantego

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Jetzt bewerben

E-Mail: jobs@awantego.com
Tel.: 0711-4889050

Online Marketing Lexikon

Im Marketing-Lexikon von Awantego erläutern wir alle wichtigen Begriffe zum Thema Online-Marketing kompakt und verständlich.


Die wichtigsten Themen:

Automated Unique Content

Online Marketing Downloads

Downloads & Anleitungen

Im Download-Bereich von Awantego.com finden Sie Anleitungen, Tutorials und eBooks rund um das Thema Content und Marketing.


Gastautoren

Informationen für Gastautoren

Neueste Beiträge im Blog

User Generated Content für Online Händler: Wie Sie den Content Ihrer Kunden effektiv nutzen

10 effektive Marketing Tipps, um die Bekanntheit Ihres Online Shops zu erhöhen

Vom Kosten-Faktor zum Profit-Faktor: So pushen Sie Ihre Content-Karriere

Content Marketing – die 15 wichtigsten Trends 2022

Produktsuche im E-Commerce: So suchen Kunden nach Produkten

Darum geht’s im Blog

4.7.4A+ Amazon ContentAbfolgeAbfrageAbgrenzungAbonnenten für den NewsletterAbonnenten gewinnenAbrechnungAbsenderAbsicherungaccelerated mobile pagesAccountActiveCampaignAdobeAdresseAdvertisingAdwordsAffiliateAgenturAhrefs
  • Jobs
  • Blog
  • Datenschutz
  • Disclaimer
  • Impressum
  • Awantego.com in English

© 2022 · Awantego.com ·

Diese Website benutzt Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.OK