So erstellen Sie einen Kostenschätzungsrechner mit Elementor und Element Pack

Veröffentlicht: 2022-01-11

Das Erstellen eines Kostenschätzungsrechners mit Elementor kann für Ihre Website sehr nützlich sein, insbesondere wenn Sie eine WooCommerce-Geschäftsseite oder eine Website zur Paketplanung mit vielen Produktkombinationen betreiben.

Wir haben Tech-, Stoff-, Kosmetik-, Lebensmittel- und Bank-Websites gesehen, die auf ihrer Homepage einen Kostenschätzungsrechner anbieten, um den Besuchern zu helfen. Es ist praktisch, um Ihr Budget schnell festzulegen und auszuwählen, was Sie im Geschäft kaufen.

Jetzt ist es keine schwierige Aufgabe, mit Elementor Ihren eigenen Kostenschätzungsrechner zu erstellen, da Sie unser Element Pack Pro-Plugin installiert haben. Wir haben ein spezielles Taschenrechner-Plugin, das es noch einfacher macht, Ihren eigenen Taschenrechner mit vollständigen Anpassungen zu entwerfen.

In diesem Artikel zeigen wir, wie es geht. Lass uns anfangen!

Lohnt sich der Kalkulationsrechner?

Für eine typische WooCommerce-Website verbringen die Leute normalerweise eine angemessene Zeit mit dem Einkaufen.

Mehr als einmal finden sie Produkte, die sie suchen, und wollen sehen, wie sie inklusive Mehrwertsteuer und Versand kosten würden.

Sofern Sie nicht so etwas wie einen Kostenschätzungsrechner mit Elementor haben, wirkt sich dies auf die Benutzer aus, die keine geeignete Methode zur Schätzung der Produktpreise gefunden haben.

Um Ihre Benutzererfahrung zu verbessern, können Sie also unser benutzerdefiniertes Plugin für den Kostenschätzungsrechner verwenden, das Ihnen von Element Pack Pro zur Verfügung gestellt wird.

Um also den Kostenvoranschlagsrechner zu erstellen, müssen Sie Folgendes haben:

  • Eine WordPress-Site mit installiertem Elementor Page Builder
  • Element Pack Pro-Plugin
  • Erweitertes Rechner-Widget (aktiviert über das Dashboard)

Wenn alle Vorbereitungen getroffen sind, können wir uns dem Hauptziel nähern.

Erstellen Sie einen Kostenschätzungsrechner mit Elementor und Element Pack

Lassen Sie uns den Taschenrechner manuell mit dem Widget aus Element Pack entwerfen. Dies wird ein Schritt-für-Schritt-Prozess sein, daher empfehlen wir Ihnen, diesem Schritt zu folgen.

Jetzt fangen wir an-

Schritt-1: Fügen Sie den erweiterten Rechner ein und richten Sie die Rechnerfelder ein

Um den Kostenschätzungsrechner mit Elementor zu erstellen, müssen wir zunächst das Advanced Calculator -Widget auf der Zielseite abrufen.

Erstens

Kostenkalkulator mit Elementor

Geben Sie einfach den Namen unseres Widgets in das Widget-Menü im Elementor-Seiteneditor ein und ziehen Sie es in die Seite. Wie Sie sehen können, haben wir zuerst einen Abschnitt erstellt, um den Rechner schön auf der Seite anzuzeigen.

Nachdem

Lassen Sie uns die Taschenrechnerfelder nacheinander erstellen. Zuerst kommen die Produkte. Klicken Sie auf die Schaltfläche Artikel hinzufügen und beginnen Sie mit der Anpassung des Felds.

Hier wählen wir den Feldtyp „Auswählen“, legen eine Bezeichnung als „Produktname“ fest und fügen unsere Produkte in das Optionsfeld ein.

Beachten Sie, dass jede neue Zeile hier eine neue Option bedeutet und Sie das „|“ verwenden müssen. Zeichen vor dem Wert, um ihn zur Berechnung hinzuzufügen.

Nehmen Sie dies als das allererste Feld des Kostenschätzungsrechners mit Elementor.

Dann ähnlich

Wir werden mit genau den gleichen Einstellungen für das 2. und 3. Feld vorgehen. Der Typ geht auf „Auswählen“ und wir werden ihnen unterschiedliche Labels mit unterschiedlichen Wertesätzen zuweisen.

Wir setzen die Spaltenbreite auf 33 %, damit 3 Felder in 1 Zeile passen.

Fürs nächste

Wir haben unten 3 weitere Felder genommen, um unsere Anforderungen für den Kostenschätzungsrechner mit Elementor zu erfüllen.

Hier ist das Mengenfeld das Zahlentypfeld , in dem Sie eine Zahl für die Produktmenge auswählen müssen, die Sie kaufen möchten.

Auch hier ist das Mehrwertsteuerfeld ein Rechnerfeld vom Typ „ Deaktiviert “, das keine Eingaben von Drittanbietern entgegennimmt. Das heißt, es handelt sich um Fixkosten, die zu den Endkosten des Produkts hinzugerechnet werden.

Sie müssen nur zum Unterabschnitt Erweitert gehen, um einen Standardwert einzugeben, der für diesen Teil des Taschenrechners festgelegt wird.

Vergessen Sie nicht

Wechseln Sie zur Registerkarte „Inhalt“ des Widgets „ Erweiterter Rechner “ und legen Sie die Ausrichtung für den Inhalt fest. Wir halten es für eine bessere klassische Ansicht linksbündig ausgerichtet.

Schritt-2: Formel für den Kostenschätzungsrechner mit Elementor

Dies ist der wichtigste Schritt.

Vom Beginn der Erstellung der Formularfelder bis zu diesem Schritt hier ist der Rechner immer noch nicht funktionsbereit, es sei denn, wir fügen eine Formel ein.

Die Formel kann jede logische Gleichung aus einer großen Auswahl sein. Hier ist eine Liste der verfügbaren Formeln, mit denen Sie arbeiten können.

Ohnehin.

Wir haben die Arbeitsformel für den soeben entworfenen Kalkulationsrechner eingefügt. Sobald Sie die Formel eingegeben haben, wird sie sofort ausgeführt.

Schritt 3: Weitere Anpassungen des Kostenschätzungsrechners

Unser Hauptziel ist bereits erreicht. Aber der Rechner sieht schlicht und langweilig aus, ohne jegliche Farben.

Also, jetzt werden wir das Aussehen des Taschenrechners mit vielen Variablen anpassen.

Zur Zeit

Klicken Sie auf den Ergebnisbereich und wählen Sie die Option „ Bei Änderung “ für die Option „ Ergebnisanzeige “. Das bedeutet, dass das Ergebnis einfach mit dem Taschenrechner gebildet wird, ohne dass eine Taste gedrückt werden muss.

Dann zeigen wir das Ergebnis unten mit linksbündiger Ausrichtung und einem benutzerdefinierten Text dafür.

Nachdem

Wir werden einen Text in das untere Feld einfügen, der im Falle eines Fehlers angezeigt wird. Der Fehler kann aufgrund einer falschen Formel oder einer falschen Eingabe auftreten.

Jetzt sind wir beim letzten Teil der Erstellung eines Kostenrechner-Plugins mit Elementor angelangt.

Schritt-4: Lassen Sie uns Farben hinzufügen

Jetzt müssen Sie nur noch zum Stilteil des Widgets gehen und Änderungen am Erscheinungsbild gemäß Ihren Anforderungen vornehmen.

Erstens

Wir werden die Parameter aus dem Abschnitt Formularstil ändern, indem wir den Feldabstand und den Spaltenabstand anpassen.

Nachdem

Wir können die Etikettenfarbe und Typografie aus dem nächsten Abschnitt für den Kostenschätzungsrechner mit Elementor ändern.

Hier können Sie sich für eine einzigartige Schriftart für die Etiketten entscheiden, um die Dinge vom Rest des Marktes abzuheben.

Im nächsten Schritt

Wir haben die Eingabefelder angepasst, indem wir eine helle Textfarbe, eine sehr dünne Hintergrundfarbe, einen dünnen Rahmen und etwas Polsterung verwendet haben.

Wir haben auch die Schriftart mithilfe der Typografie-Option für den Kostenvoranschlagsrechner mit Elementor geändert.

Dann wieder

Wir haben Änderungen am Ergebnistext vorgenommen, indem wir einen ähnlichen Farbton für Text und Typografie angewendet haben.

Sieht bisher ziemlich glatt aus, oder?

Und zuletzt

Der Fehlertext hat jetzt eine neue Etikettenfarbe und wird für das Banner rot gemalt.

Wir haben die Texte etwas aufgefüllt und die Schriftart ein wenig geändert, um sie an den Rest anzupassen.

Jetzt ist Ihr Kostenvoranschlagsrechner mit Elementor anzeigebereit.

Fazit

Dieser Blog soll es Ihnen ermöglichen, das Elementor Page Builder-Plugin und das Element Pack zu verwenden, um anständige Taschenrechner-Plugins gemäß Ihren Anforderungen zu erstellen.

Hoffentlich hast du alles gelernt.

Vielen Dank, dass Sie bis zur Ziellinie an unserer Seite geblieben sind.

Dieser Blog wird von BdThemes präsentiert.