Tutorial: Preislisten mit Elementor erstellen

Die Preisliste ist ein wichtiges Detail auf Dienstleister-Websites. Heute betrachten wir schrittweise, wie du eine Preisliste für deine WordPress-Website mit Elementor erstellen kannst.

Wenn man einen Onlineshop besucht, taucht wohl bei niemandem die Frage auf: Was kostet dieses oder jedes Produkt? Denn alle Preise sind auf der Produktseite zu sehen. Auf Websites, die Dienstleistungen anbieten, fehlen oft Preisinformationen. Und ein Interessent muss daher eine Firma telefonisch oder per E-Mail persönlich kontaktieren, um sich nach dem Preis zu erkundigen. Das verunsichert viele Menschen und wirkt intransparent. Wenn du potenzielle Kunden nicht verlieren möchtest, wäre es ratsam, Preislisten mindestens mit Ab-Preisen auf deiner Website zu platzieren. Deine Besucher bekommen somit Vorstellungen davon, was deine Dienstleistungen kosten.

In diesem Tutorial zeigen wir dir, wie du eine Preisliste zu deiner WordPress-Website mit Hilfe vom Elementor Page Builder hinzufügen kannst. Als erstes musst du sicherstellen, dass das JetElements-Plugin auf deiner WordPress-Website installiert ist. Dieses Plugin verfügt über viele nützliche Widgets, um Inhalte zu erstellen und zu bearbeiten, das Preislisten-Widget ist mit dabei. Also, wenn mit dem Plugin alles Ok ist, dann lass uns mal anfangen.

1. Öffne den Elementor Page-Builder und finde das Preislisten-Widget im Bereich “Elemente”.
2. Zieh das Widget auf die Sektion rechts und leg es ab.
3. Im Tab “Content” links siehst du eine Reihe von Elementen mit Einstellungen.
4. Ändere den Titel, Preis sowie die Beschreibung von jedem Element, damit Infos deinem Angebot entsprechen.  
5. Du kannst jedes Element anklickbar machen, wobei du  eine URL hinzufügst.
6. Füge ein Bild von der Medienbibliothek hinzu, um dem Element mehr Attraktivität zu verleihen.
7. Über den Button “Add Item” kannst du so viele Elemente hinzufügen, wie du brauchst.
8. Rufe jetzt den Tab “Style” auf.
9. Hier steht es dir frei, deine Elemente optisch zu editieren. Du kannst den Abstand zwischen Elementen vergrößern bzw. verkleinern, mit “Border type” einen Rahmen für jedes Element auswählen, vertikale Ausrichtung von Inhalten bearbeiten sowie die Rahmenbreite und -Farbe für das erste und letzte Element in deiner Liste ändern.
10. Um den Hintergrund für deine Preisliste festzulegen, fahre mit der Maus über die Sektion, klicke darauf mit der rechten Maustaste und wähle “Sektion editieren”.
11. Links im Layout-Tab sollst du die Option “Sektion ausdehnen” auf “Ja” setzen. Das erlaubt, die Sektion auf die ganze Breite auszudehnen.
12. Gehe zum Tab “Style”, wähle den Hintergrund-Typ “klassisch” und füge das Bild aus der Medienbibliothek hinzu.13. Weiter soll der Hintergrund-Overlay hinzugefügt werden.
    
13. Öffne “Erweiterte Einstellungen” und passe den Innenabstand an.
14. Jetzt gehe zum Style-Tab zurück und passe die Typografieeinstellungen für die Textelemente in deiner Liste an, damit sie auf diesem Hintergrund gut aussehen.
15. Als nächstes sollst du den Preis-Tab aufrufen. Hier kannst du das Aussehen des Preises bearbeiten, und zwar minimale Preisbreite ändern und die Farbe festlegen.
16. Du kannst auch einen Rahmen hinzufügen, den Rahmen-Radius ändern, den Innenabstand, vertikale Ausrichtung sowie die Textausrichtung festlegen.
17. Wechsle zum Beschreibung-Tab und passe die Typografieeinstellungen sowie den Außenabstand an.
18. Im nächsten Schritt sollst du den Trenner - eine horizontale Linie zwischen dem Titel und dem Preis - einrichten. Du kannst den Typ, die Farbe, Breite, Ausrichtung sowie den Außenabstand nach Belieben ändern.
19. Wenn du nicht willst, dass der Trenner in deiner Preisliste sichtbar ist, dann setze einfach deine Breite auf Null.
20. Möchtest du zwischen dem Titel und Trenner oder zwischen dem Trenner und Preis etwas Freiraum sehen, vergrößere den Abstand rechts und links.
21. Im letzten Tab kannst du Bildparameter editieren - einen Rahmen hinzufügen, den Radius ändern und den Schatten mit “Box shadow” anwenden.

Deine Preisliste ist fertig! Wie du sehen kannst, ist es mit dem JetElements-Plugin ganz einfach, benutzerdefinierte Preislisten zu erstellen. Wir hoffen, dass sich dieses Tutorial als hilfreich erweist. Hast du womöglich weitere Fragen zu JetPlugins? Dann freuen wir uns auf deinen Kommentar.

Dieses Tutorial hat Victoria für unseren englischsprachigen Blog vorbereitet. Den Originaltext auf Englisch ist bei MonsterPost zu lesen.