Springe zum Hauptinhalt

So erstellen Sie eine Berechnungstabelle für Divi mit jQuery

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Einige Leute zögern, die Preise für ihre Dienstleistungen auf ihrer Website zu veröffentlichen. Aber so sehr es einige Besucher erschrecken mag, zeigt es auch Vertrauen und Fachwissen. Durch Transparenz in Ihrer Preisgestaltung können Sie die richtigen Kunden mit einem Budget gewinnen, an dem Sie arbeiten können. Im heutigen Tutorial zeigen wir Ihnen, wie Sie ein beeindruckendes Preisberechnungsdesign erstellen, das Sie für Ihr nächstes Divi-Projekt verwenden können. Sie können die JSON-Datei auch kostenlos herunterladen!

Gehen wir.

Übersicht

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Beginnen wir mit der Neuerstellung!

Abschnitt 1 hinzufügen

Hintergrundfarbe

Fügen Sie zunächst der Seite, an der Sie arbeiten, einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

  • Hintergrundfarbe: # f8c5ac

Untere Trennwand

Fügen Sie dem nächsten Abschnitt ein unteres Trennzeichen hinzu.

  • Art der Trennung: Suche in der Liste
  • Flip Divider: Vertikal

Abstand

Fügen Sie auch etwas Polsterung hinzu.

  • Bodenpolsterung: 130px

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

Fügen Sie der Spalte den Textbaustein # 1 hinzu

Fügen Sie H2-Inhalte hinzu

Fügen Sie das erste Textmodul zu Ihrer Spalte hinzu und fügen Sie H2-Inhalte Ihrer Wahl ein.

H2-Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

  • Überschrift 2-Schriftart: Montserrat
  • Titel 2 Font: Semi Bold
  • Titel 2 Textausrichtung: Mitte
  • Titel 2 Textfarbe: # 0f1c4d
  • Titel 2-Textgröße: 57-Pixel (Desktop), 35-Pixel (Tablet), 30-Pixel (Telefon)
  • Titel 2 Buchstabenabstand: -2px

Fügen Sie der Spalte den Textbaustein # 2 hinzu

Inhalt hinzufügen

Fügen Sie einen weiteren Textbaustein direkt unter dem vorherigen hinzu und fügen Sie den gewünschten Inhalt ein.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

  • Schriftart: Montserrat
  • Textausrichtung: Mitte
  • Textfarbe: #0f1c4d
  • Textgröße: 22px (Desktop), 18px (Tablet), 16px (Telefon)

Fügen Sie der Spalte ein Unterteilungsmodul hinzu

Sichtbarkeit

Das nächste und letzte Modul, das in dieser Spalte benötigt wird, ist ein Divisionsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Teiler anzeigen: Ja

Linie

Gehen Sie zur Registerkarte Design und ändern Sie die Linienfarbe in Weiß.

  • Linienfarbe: #ffffff

Sizing

Ändern Sie auch die Teilerbreite.

  • Breite: 12%

Abschnitt 2 hinzufügen

Hintergrundfarbe

Fahren wir mit der Zeichnung fort! Fügen Sie einen neuen Abschnitt hinzu und ändern Sie die Hintergrundfarbe.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Hintergrundfarbe: #0f1c4d

Abstand

Fügen Sie dann einige benutzerdefinierte Auf- und Abpolsterungen hinzu.

  • Polsterung oben: 70px
  • Bodenpolsterung: 130px

Fügen Sie die Zeile 1 hinzu

Spaltenstruktur

Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Sizing

Öffnen Sie die Zeileneinstellungen und ändern Sie die Breite auf kleinere Bildschirmgrößen, ohne noch Mods hinzuzufügen.

  • Breite: 80% (Desktop), 90% (Tablet und Telefon)

Abstand

Fügen Sie als nächstes ein wenig benutzerdefinierte Daunenfüllung hinzu.

  • Polsterung unten: 70px (Desktop), 20px (Tablet), 0px (Telefon)

Grenze

Fügen Sie der Linie auch einen unteren Rand hinzu.

  • Breite des unteren Randes: 1px
  • Farbe des unteren Randes: #ffffff

Konfiguration des Divi-Line-ModulrahmensAnzeige

Um sicherzustellen, dass alle Spalten nebeneinander angezeigt werden, fügen wir dem Hauptelement der Zeile eine Zeile CSS-Code hinzu.

Anzeige: Flex;

Fügen Sie CSS-Divi-Code hinzu

Fügen Sie das Blurb-Modul zur 1-Spalte hinzu

Wählen Sie das Symbol

Es ist Zeit, Module hinzuzufügen! Fügen Sie der 1-Spalte ein Blurb-Modul hinzu und wählen Sie das Symbol Ihrer Wahl.

Fügen Sie ein Divi-Modul-Symbol hinzu

Standard-Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen entsprechend:

  • Symbolfarbe: # f7f7f7
  • Kreissymbol: Ja
  • Kreissymbol: # f8c5ac
  • Positionierungssymbole: Oben
  • Verwenden Sie die Schriftgröße des Symbols: Ja
  • Symbol Schriftgröße: 96px (Desktop), 20px (Tablet & Telefon)

Änderung des Divi-Icon-Moduls

Bewegen Sie den Mauszeiger über die Symboleinstellungen

Ändern Sie die Farbe des Hover-Symbols.

  • Symbolfarbe: # 000000

Tastenkonfiguration auf Hover Divi

CSS-Kennung

Fügen Sie auch einen CSS-Bezeichner ein.

  • CSS-Kennung: price-item-click-1

Kennung CSS-Modul Divi

Fügen Sie den Textbaustein # 1 in die Spalte 2 ein

Fügen Sie H3-Inhalte hinzu

In der zweiten Spalte! Fügen Sie den ersten Textbaustein hinzu und fügen Sie H3-Inhalte ein.

Divi Markenidentitätstextmodul

H3-Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen entsprechend:

  • Überschrift 3-Schriftart: Montserrat
  • Titel 3 Fonts: Semi Bold
  • Titel 3 Textfarbe: # f8c5ac
  • Titel 3-Textgröße: 40-Pixel (Desktop), 25-Pixel (Tablet), 18-Pixel (Telefon)
  • Titel 3 Buchstabenabstand: -1px
  • Titel 3 Zeilenhöhe: 1.1em

Divi Schriftkonfiguration

Fügen Sie den Textbaustein # 2 in die Spalte 2 ein

Inhalt hinzufügen

Fügen Sie der 2-Spalte einen weiteren Textbaustein mit dem Inhalt Ihrer Wahl hinzu.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Fügen Sie einen Divi-Modul-Text hinzu

Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

  • Schriftart: Montserrat
  • Schriftgröße des Textes: Ultraleicht
  • Textfarbe: #f8c5ac
  • Textgröße: 23px (Desktop), 18px (Tablet), 14px (Telefon)
  • Buchstabenabstand: -1px
  • Höhe der Textzeile: 1.1em

Modul zur Anpassung der Textdivifarbe

Fügen Sie der 3-Spalte einen Textbaustein hinzu

Fügen Sie dem Inhalt einen Preis hinzu

Gehen wir zur dritten Spalte! Fügen Sie einen Textbaustein hinzu und platzieren Sie den Preis im Inhaltsbereich.

Divi Service Preis

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

  • Schriftart: Montserrat
  • Schriftgröße des Textes: Schwer
  • Textausrichtung: Mitte
  • Textfarbe: #ffffff
  • Textgröße: 40px (Desktop), 25px (Tablet), 18px (Telefon)

Preisberechnungen

Bezeichner und CSS-Klasse

Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie eine CSS-ID und eine CSS-Klasse hinzu.

  • CSS-Kennung: price-1
  • CSS-Klasse: price-hide-first

Passen Sie den Preis des Preisunterteilungsmoduls an

Duplizieren Sie die Zeile so oft wie nötig

Sobald Sie die Zeile und alle darin enthaltenen Module ausgefüllt haben, können Sie sie beliebig oft duplizieren.

Doppelte Divi-Linie

Ändern Sie die CSS-IDs des Blurb-Moduls

Ändern Sie die CSS-ID jedes neuen Blurb-Moduls entsprechend:

  • Blurb 1-Modul: Preis-Artikel-Klick-1
  • Klappentext 2: Preis-Artikel-Klick-2
  • Klappentext 3: Preis-Artikel-Klick-3
  • ...

Änderung identifizieren Klappentext des Divi-Moduls

Ändern Sie den Preis für den doppelten Textbaustein und die CSS-IDs

Machen Sie dasselbe mit dem Preistext-Modul in der dritten Spalte jeder Zeile.

  • 1-Preis: 1-Preis
  • 2-Preis: 2-Preis
  • 3-Preis: 3-Preis
  • ...

Divi-Preiskennung

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie Ihrem Abschnitt eine weitere Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Konfiguration der Divi-Modulleitung

Sizing

Öffnen Sie die Zeileneinstellungen und ändern Sie die Breite auf kleinere Bildschirmgrößen, ohne noch Mods hinzuzufügen.

  • Breite: 80% (Desktop), 90% (Tablet und Telefon)

Divi-Linienparameter

Anzeige

Um sicherzustellen, dass alle Spalten auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, fügen wir dem Hauptzeilenelement auch eine einzelne Zeile CSS-Code hinzu.

Anzeige: Flex;

Passen Sie die Ausrichtung der Teilungslinien an

Fügen Sie der 1-Spalte ein Codemodul hinzu

Fügen Sie den CSS-Code ein

Fügen Sie der ersten Spalte der Zeile ein Codemodul hinzu und fügen Sie die folgenden Zeilen des CSS-Codes ein:

.price-hide-first {
display: none;
}


.price-item-active .et-pb-icon {
color: black !important;
}

Divi-Code-ModulFügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Gehen Sie in die zweite Spalte und fügen Sie einen neuen Textbaustein mit dem Inhalt Ihrer Wahl hinzu.

Angebote beginnen mit dem Divi-TextmodulTexteinstellungen

Ändern Sie die Texteinstellungen entsprechend:

  • Schriftart: Montserrat
  • Schriftgröße des Textes: Ultraleicht
  • Textfarbe: # f8c5ac
  • Textgröße: 23px (Desktop), 18px (Tablet), 14px (Telefon)
  • Buchstabenabstand: -1px
  • Höhe der Textzeile: 1.1em

Anpassung des Divi-Moduls

Fügen Sie der 3-Spalte einen leeren Textbaustein hinzu

Lass den Inhalt leer

Gehen wir zur letzten Spalte. Fügen Sie einen Textbaustein hinzu und stellen Sie sicher, dass der Inhaltsbereich leer bleibt.

Drittes Divi-Textfeld

Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • Schriftart: Montserrat
  • Schriftgröße des Textes: Schwer
  • Textausrichtung: Mitte
  • Textfarbe: #ffffff
  • Textgröße: 40px (Desktop), 25px (Tablet), 18px (Telefon)

Divi-Textmodul zur Anpassung der Schriftarten

CSS-Kennung

Vervollständigen Sie die Modulparameter, indem Sie einen CSS-Bezeichner hinzufügen.

  • CSS-Kennung: total-price-cal

Kennung CSS-Modul Text Divi

Hinzufügen von JQuery-Designoptionen zu Divi

Gehen Sie zur Registerkarte Integration

Nachdem der Entwurf abgeschlossen ist, ist es Zeit, ihn mit JQuery-Code arbeiten zu lassen. Wenn Sie Preisberechnungen auf einer einzelnen Seite hinzufügen möchten, können Sie den Code in ein Codemodul einfügen. Wenn Sie es jedoch auf mehreren Seiten verwenden, wechseln Sie zur Option "Divi-Design" und wählen Sie die Registerkarte "Integration".

Fügen Sie JQuery-Code zu Head-Tags hinzu

Fügen Sie die folgenden Zeilen des JQuery-Codes ein zwischen Skript-Tags und du bist fertig:

jQuery (function ($) {$ ('[id * = "price-item-click"]'). click (function () {var selector = $ (this) .attr ('id'). replace ('- item-click ',' '); var $ price = $ (' # '+ Selektor); var sum = 0; $ price.toggle (); $ price.toggleClass (' price-active '); $ (this) .toggleClass ('price-item-active'); $ ('. price-active'). each (function () {sum + = parseFloat ($ (this) .text (). replace (/ D / g, ') '));}); if (sum> 0) {$ ("# total-price-cal"). show (); $ ("# total-price-cal"). text ("$" + sum + "k");} else {$ ("# total-price-cal"). hide ();}});});

Integrationscode jsÜbersicht

Nachdem alle Schritte ausgeführt wurden, werfen wir einen letzten Blick darauf, was mit verschiedenen Bildschirmgrößen passiert ist.

Die Preise beginnen ab

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit Divi ein außergewöhnliches Preisberechnungsmodell erstellen. Dies ist eine großartige Möglichkeit, Ihren Besuchern zu zeigen, wie Ihre Dienste beginnen, und das richtige Publikum anzuziehen. Sie können diesen Ansatz für jede Preiskalkulation verwenden, die Sie für Ihr nächstes Divi-Projekt erstellen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren