Einige Leute zögern, die Preise ihrer Dienstleistungen auf ihrer Website anzuzeigen Website. Aber so sehr es manche erschrecken mag Besucher, es zeigt auch Vertrauen und Kompetenz. Transparenz in Ihrer Preisgestaltung ermöglicht es Ihnen, die richtigen Kunden mit einem Budget zu gewinnen, mit dem Sie arbeiten können. Im heutigen Tutorial zeigen wir Ihnen, wie Sie ein beeindruckendes Preiskalkulationsdesign 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 in dieser Spalte ist ein Teilungsmodul. 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.
- 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
Anzeige
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 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.
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)
Bewegen Sie den Mauszeiger über die Symboleinstellungen
Ändern Sie die Farbe des Hover-Symbols.
- Symbolfarbe: # 000000
CSS-Kennung
Fügen Sie auch einen CSS-Bezeichner ein.
- CSS-Kennung: price-item-click-1
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.
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
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.
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
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.
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)
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
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.
Ä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
- ...
Ä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
- ...
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie Ihrem Abschnitt eine weitere 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)
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;
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;
}
Fü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.
Texteinstellungen
Ä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
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.
Texteinstellungen
Gehen Sie zur Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:
- Schriftart: Montserrat
- Schriftgröße des Textes: Schwer
- Textausrichtung: Mitte
- Textfarbe: #ffffff
- Textgröße: 40px (Desktop), 25px (Tablet), 18px (Telefon)
CSS-Kennung
Vervollständigen Sie die Modulparameter, indem Sie einen CSS-Bezeichner hinzufügen.
- CSS-Kennung: total-price-cal
Hinzufügen von JQuery-Designoptionen zu Divi
Gehen Sie zur Registerkarte Integration
Nachdem das Design nun fertig ist, ist es an der Zeit, es mit etwas JQuery-Code zum Laufen zu bringen. Wenn Sie die Preisberechnungen auf einer Seite hinzufügen möchten, können Sie den Code in einem Codemodul platzieren. Wenn Sie es jedoch auf mehreren Seiten verwenden, gehen Sie zur Option Divi Theme 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 ();}});});
Übersicht
Nachdem alle Schritte ausgeführt wurden, werfen wir einen letzten Blick darauf, was mit verschiedenen Bildschirmgrößen passiert ist.
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit Divi eine außergewöhnliche Preiskalkulationsvorlage erstellen. Es ist eine großartige Möglichkeit, Ihre zu zeigen Besucher zu welchem Preis Ihre Dienstleistungen beginnen und um 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 unten.
