So erstellen Sie eine Preisliste oder ein Menü in Elementor (3 Möglichkeiten)

So erstellen Sie eine Preisliste oder ein Menü in Elementor (3 Möglichkeiten)

Wichtige Erkenntnisse

  • Eine Elementor-Preisliste ist eine Liste mit einem Preis pro Zeile für Menüs, Servicetarife und Teilelisten; Es handelt sich um ein anderes Widget als eine Preistabelle, die einen Preis pro Karte hat.
  • Das elementoreigene Preislisten-Widget ist Teil von Elementor Pro, mit Titel, Beschreibung, Preis und optionalem Bild pro Artikel.
  • Das Master Addons Dynamic Table Widget erstellt eine Preisliste als echte HTML-Tabelle: eine Header-Zeile mit Spaltenbreiten, einen Body-Repeater, bei dem jedes Element eine neue Zeile startet, gestreifte Zeilen und einen Responsive-Modus für Telefone.
  • Ein Preistabellen-Widget ist das falsche Werkzeug für ein Menü, denn zehn Gerichte würden zehn Karten bedeuten, aber es ist das richtige für zwei oder drei Servicepakete mit jeweils einer Feature-Liste.
  • Die Preise in einer Liste sollten richtig in ihrer eigenen Spalte ausgerichtet sein, damit das Auge nach unten rennen kann, und die Beschreibungen sollten auf einer Zeile pro Artikel bleiben.
  • Eine tabellenbasierte Preisliste ist Klartext auf der Seite, sodass jeder Gerichtname und Preis für Suchmaschinen und Bildschirmleser lesbar ist.

Eine Elementor Preisliste ist eine Liste von Artikeln mit einem Preis auf jeder Zeile: ein Restaurant Menü, die Servicetarife eines Salons, die Teileliste einer Werkstatt Es ist keine Preistabelle Eine Preistabelle hat einen Preis pro Karte und verkauft Pläne; eine Preisliste hat einen Preis pro Zeile und informiert Elementor legt sein Preislisten-Widget in Elementor Pro, so auf dem kostenlosen Plugin benötigen Sie eine andere Route.

Diese Anleitung zeigt drei Möglichkeiten, eine zu bauen und wann jede passt Route 1 ist das Preislisten-Widget von Elementor Pro Route 2 ist das Dynamic Table-Widget von Master-Addons‘s, die aus einem Menü einen sauberen Tisch mit Preisspalte macht Route 3 sind Preiskarten für den Fall, wo die “Liste” zwei oder drei Pakete mit Features sind, was ja schließlich ein Preis-Tabellen-Job ist.

Preisliste vs. Preistabelle

Eine Preisliste hat viele Artikel und jeweils einen Preis; eine Preistabelle hat wenige Pläne und jeweils eine Featureliste Die Speisekarte eines Restaurants ist eine Preisliste Die drei Hosting-Pläne auf einer SaaS-Seite sind eine Preistabelle, sie zu vermischen ist der übliche Grund, warum ein in Elementor gebautes Menü falsch aussieht: Zehn Gerichte als zehn Preiskarten sind eine Wand aus Kartons, und drei Pläne als Liste verbergen die Funktionen, die sie verkaufen.

Drei Elementor-Preistabellenkarten für Starter-, Wachstums- und Agenturpläne, die das Kartenformat zeigen, das zu Plänen und nicht zu Menüs passt
Eine Preistabelle: wenige Pläne, je eine Feature-Liste Zehn Gerichte in diesem Format wären zehn dieser Karten.

Also die erste Frage ist, wie viele Artikel du hast und ob jeder eine Featureliste braucht Mehr als vier Artikel mit Preis und einer einzeiligen Beschreibung: Preisliste Zwei bis vier Artikel mit jeweils mehreren Features: Preistabelle.

Route 1: Das Preislisten-Widget von Elementor Pro

Elementor Pro hat ein Price List Widget für Menüs gemacht Jedes Element in seinem Repeater hat einen Titel, eine Beschreibung, einen Preis, ein optionales Bild und einen Link, und das Widget zeichnet ein gepunktetes oder durchgehendes Trennzeichen zwischen Titel und Preis, Der Registerkarte Stil steuert den Listenabstand, den Separatorstil und die Bildgröße Es braucht Elementor Pro, also erscheint auf dem kostenlosen Plugin das Widget nicht im Panel.

Wenn Sie bereits für Pro bezahlen, ist dies der kürzeste Weg für ein klassisches Menü Was es nicht tut, sind Spalten: Jeder Artikel ist eine Zeile mit dem Preis nach rechts geschoben, so dass eine Liste, die eine Größe oder Menge Spalte benötigt, oder drei Preise pro Artikel (klein, mittel, groß), nicht passt Quelle: Hilfe-Seite zum Widget der Preisliste von Elementor.

Route 2: ein Menü mit dem Dynamic Table Widget

Die Dynamisches Tabellen-Widget Baut eine echte HTML-Tabelle im Elementor-Panel auf: einen Header-Repeater für die Spalten und einen Body-Repeater für die Zellen Für eine Preisliste, die eine Dish-Spalte, eine Description-Spalte und eine Price-Spalte bedeutet, mit jedem Menüpunkt in einer eigenen Zeile Das Widget befindet sich im Master Addons Plugin und benötigt kein Elementor Pro.

Elementor-Preisliste, erstellt mit dem Master Addons Dynamic Table-Widget: ein sechsreihiges Restaurantmenü mit Spalten für Geschirr, Beschreibung und Preis und einem rechts ausgerichteten Preis
Ein Sechs-Punkte-Menü als dynamische Tabelle: drei Spalten, gestreifte Zeilen, Preise rechts ausgerichtet.

Richten Sie die Spalten ein

  1. Lassen Sie die fallen Dynamische Tabelle Widget auf die Seite und öffnen Sie die Kopfzeile Repeater.
  2. Fügen Sie drei Kopfzellen hinzu: Gericht, Beschreibung, Preis. Schalten Sie jeweils ein Benutzerdefinierte Breite und 28, 56 und 16 Prozent einstellen, damit die Beschreibung den Raum erhält und die Preisspalte schmal bleibt.
  3. Stellen Sie die Ausrichtung des Price-Headers auf rechts ein.

Fügen Sie die Artikel hinzu

  1. Öffnen Sie die Körper Repeater Jeder Eintrag ist eine Zelle Fügen Sie den ersten Schalennamen hinzu und schalten Sie ihn ein Neue Reihe starten Dafür.
  2. Fügen Sie die Beschreibung als nächste Zelle und den Preis als dritte hinzu, wobei die Preiszelle rechts ausgerichtet ist.
  3. Wiederholen Sie dies für jeden Artikel: Eine neue Zeile beginnt mit dem Schalennamen, dann zwei weitere Zellen. Sechs Artikel sind achtzehn Zellen.

Eine Zelle kann statt Text ein Icon oder ein Bild tragen, so erhält ein Menü ein kleines Foto neben einem Gericht oder ein Blattsymbol auf den vegetarischen Reihen Zellen können sich auch über Spalten erstrecken, so kann eine Kursüberschrift wie “Mains” über die volle Breite auf einer eigenen Reihe sitzen.

Stilisieren Sie es wie ein Menü

Stellen Sie auf der Registerkarte Stil den Kopfhintergrund auf eine dunkle Farbe und den Kopftext auf Weiß ein, schalten Sie ihn ein Gestreifte Reihen So wird jede zweite Zeile getönt, und geben Sie der Tabelle einen Ein-Pixel-Rand in einem hellen Grau Halten Sie den Fließtext auf der gleichen Größe wie Ihre Absätze und machen Sie die Preisspalte fett, wenn Sie möchten, dass das Auge auf den Zahlen landet Der Responsive-Modus des Widgets stapelt jede Zeile auf Telefonen in einen Block, wobei der Spaltenkopf neben jedem Wert gedruckt wird, so dass ein Dreispaltenmenü ohne seitliches Scrollen lesbar bleibt.

Route 3: Servicepakete als Preiskarten

Manche “Preislisten” sind wirklich zwei oder drei Pakete: ein einmaliger Service und ein Monatsplan, oder eine Basis - und eine Premiumstufe des gleichen Jobs Jedes Paket hat ein paar Dinge dabei, und der Leser wählt zwischen ihnen Das ist eine Preistabelle, und die Preistabellen-Widget Macht es in einer Karte pro Paket mit dem Preis groß und die Einschlüsse als Liste.

Abschnitt mit Servicepreislisten aus einem Master Addons-Vorlagenkit mit zwei Paketen, On-Demand für 20 Dollar pro Stunde und Wartung für 99 Dollar pro Stunde, jeweils mit enthaltenen und ausgeschlossenen Funktionen
Zwei Servicepakete aus dem Klyro-Vorlagenkit: eine Reihe pro Paket, Ein - und Ausschlüsse markiert, Preis und Button rechts.

Der Abschnitt oben, von der Vorlagenbibliothek, zeigt die Form: eine breite Zeile pro Paket mit dem Namen und der Beschreibung auf der linken Seite, die enthaltenen und ausgeschlossenen Artikel in zwei Spalten, und den Preis mit einem Knopf auf der rechten Seite Es ist eine Preisliste im Geiste und eine Preistabelle in der Struktur, und die Faustregel gilt: wenige Artikel, mehrere Merkmale jeweils, also Karten Weitere Kartendesigns sind in der Preistabelle Vorlagen Post.

Regeln für die Gestaltung von Preislisten

  • Preise in eigener Spalte, rechtsbündig. Der Leser scannt die Preise als Spalte Ein nach der Beschreibung auf jeder Zeile eingesteckter Preis kann nicht gescannt werden.
  • Eine Zeile pro Beschreibung. Es reicht “Basilikumöl, Sauerteigkrümel” Ein Absatz pro Gericht macht aus der Liste eine Seite.
  • Gruppe nach Kurs oder Kategorie Mit einer Überschriftenreihe über die gesamte Breite und halten Sie die Gruppen in der Reihenfolge, die ein Kunde bestellen würde.
  • Zeigen Sie die Währung einmal an Im Header oder dem ersten Preis, oder das Symbol auf jedem Preis behalten; das Mischen der beiden sieht wie ein Fehler aus.
  • Behalten Sie es im Text. Ein als Bild hochgeladenes Menü kann ohne Designer nicht durchsucht, vorgelesen oder aktualisiert werden Eine Tabelle in Elementor ist Text.
  • Überprüfen Sie es auf einem Telefon. Eine dreispaltige Tabelle mit einer Breite von 390 Pixeln benötigt den gestapelten Modus, und der Preis sollte immer noch direkt nach dem Schüsselnamen liegen.

Welche Route zu wählen

Wenn SieVerwendenDenn
Haben Elementor Pro und ein einfaches Ein-Preis-MenüRoute 1, Preislisten-WidgetHergestellt für die Arbeit, gepunkteter Separator eingebaut.
Führen Sie den kostenlosen Elementor aus oder benötigen Sie eine Größen- oder MengenspalteRoute 2, Dynamische TabelleEchte Spalten, gestreifte Zeilen, Stapel auf Telefonen.
Haben zwei bis vier Pakete mit jeweils FunktionenRoute 3, PreistischkartenWenige Artikel, jeweils eine Featureliste, eine Schaltfläche pro Paket.
Benötigen Sie Preise, die je nach Größe variieren (klein, mittel, groß)Route 2, Dynamische TabelleEine Spalte pro Größe in derselben Zeile.

Benötigen Sie ein Menü mit einer Preisspalte und ohne Elementor Pro? Die Dynamisches Tabellen-Widget Erstellen Sie es als echte Tabelle im Elementor-Panel mit gestreiften Zeilen und einem gestapelten Layout für Telefone.

Häufig gestellte Fragen

Ist das Elementor Preisliste Widget kostenlos?

Nr. Das Price List Widget ist Teil von Elementor Pro und erscheint nicht im Panel des kostenlosen Plugins, auf free Elementor kommt eine Preisliste von einem Addon Table Widget wie dem Master Addons Dynamic Table, oder von Preiskarten, wenn die Liste wirklich ein paar Pakete sind.

Was ist der Unterschied zwischen einer Preisliste und einer Preistabelle?

Eine Preisliste hat viele Artikel mit jeweils einem Preis und keine Featurelisten, wie ein Menü Eine Preistabelle hat ein paar Pläne mit einer Featureliste und je einem Button, wie Hosting-Stufen Verwenden Sie eine Liste für Artikel und eine Tabelle mit Karten für Pläne.

Wie mache ich ein Restaurantmenü in Elementor ohne Pro?

Verwenden Sie das Master Addons Dynamic Table Widget: Dish, Description und Price Header-Zellen mit benutzerdefinierten Breiten hinzufügen, dann jedes Element als drei Körperzellen hinzufügen mit Start New Row auf der ersten Schalten Sie gestreifte Zeilen und den Responsive-Modus ein, damit das Menü auf Telefonen stapelt.

Kann eine Preisliste mehr als einen Preis pro Artikel haben?

Ja, mit einer Tabelle Fügen Sie eine Spalte pro Größe oder Option hinzu, z. B. Klein, Mittel und Groß, und legen Sie jeden Preis in eine eigene Zelle in die Zeile des Artikels Das Preislisten-Widget von Elementor Pro zeigt einen Preis pro Artikel an.

Soll ein Menü ein Bild oder Text sein?

Text. ein Bildmenü kann nicht durchsucht, von Bildschirmlesern gelesen oder aktualisiert werden, ohne das Bild neu zu machen, und es verschwimmt auf Netzhauttelefonen Ein Tabellen- oder Listen-Widget behält jedes Gericht und jeden Preis als Text auf der Seite.

Letzte Gedanken

Eine Preisliste in Elementor ist ein Preis pro Zeile, und die Route hängt davon ab, was Sie haben Das Preislisten-Widget von Elementor Pro deckt ein einfaches Menü für Pro-Benutzer ab. Die Master Addons Dynamic Table deckt dasselbe Menü auf kostenlosem Elementor ab und fügt Spalten für Größen, Mengen oder Kurse hinzu. Zwei oder drei Pakete mit Funktionen sind eine Preistabelle, keine Liste, und das Preistabellen-Widget verarbeitet diese als Karten.

Beginnen Sie mit der Widget-Seite der Dynamischen Tabelle Für die Menüroute, oder die Widget-Seite der Preistabelle Wenn Ihre Liste wirklich eine Reihe von Paketen ist.

Bild von Roy Jemee
Roy Jemee
Ich bin Roy Jemee, Content Wrangler und Marketer bei Pixar Labs, arbeite an Master Addons für Elementor, ich schreibe die Tutorials, nehme die Videos auf, halte die Dokumentation aktuell, so dass man immer weiß, wie man jede Funktion nutzt Ich handhabe auch den Support, also wenn man einen Haken schlägt, bin ich die Person, die einem hilft, das zu beheben Echte Antworten, von jemandem, der diese Tools täglich benutzt.

Hinterlasse eine Antwort

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *