Preistabelle anpassen
Anpassen der Preistabelle in Divi
Das mit Divi gelieferte Preistabellenmodul ist einfach großartig. Es erledigt die Arbeit, für die wir normalerweise ein Plug-in herunterladen würden. Aber WordPress-Entwickler wissen, dass weniger Plug-ins für eine leistungsstärkere und sicherere Website sorgen. Und es gibt so viele Möglichkeiten, die Preistabelle mit benutzerdefiniertem CSS anzupassen, dass Sie das Plug-in wirklich nicht mehr in Betracht ziehen müssen.
Hier sind ein paar Optimierungen, die ich mir ausgedacht habe, damit wir hierfür kein weiteres Plug-In installieren müssen.
Als Erstes habe ich den Abschnitt erstellt, in dem ich dieses Modul verwenden möchte.
Da ich drei Tabellen verwenden werde, brauche ich etwas horizontalen Platz, daher verwende ich eine Spalte.
Jetzt bin ich bereit, mein Preistabellenmodul einzufügen.
Jetzt ist es an der Zeit, meine Tabellen zu erstellen. In meinem Fall möchte ich Preisspannen anstelle eines einzelnen Preises verwenden, daher lasse ich die Felder „Währung“ und „pro“ leer. Meine Tabellen werden also ungefähr so aussehen.
Und voilà, Ihre Tabelle sieht ungefähr so aus. Aber Ihre Farben können je nach den Farbeinstellungen Ihrer Website etwas anders sein.
Nehmen wir nun an, Sie möchten ein wenig Abwechslung. Ändern Sie die Farben, die abgerundeten Ecken, Symbole anstelle von Aufzählungszeichen und die Schriftgrößen (insbesondere bei den enormen Preisklassen).
Hier kommen die Leistungsfähigkeit der benutzerdefinierten Klassen von Divi und die Magie von CSS ins Spiel.
Normalerweise isoliere ich als Erstes diesen bestimmten Abschnitt, damit meine Anpassung keine anderen Bereiche meiner Site durcheinander bringt, die möglicherweise denselben Code verwenden, wie z. B. Schaltflächen, Ecken und Aufzählungszeichen. Dazu öffne ich das Modul und füge eine eindeutige benutzerdefinierte Klasse hinzu.
In diesem Fall habe ich die folgende CSS-Klasse hinzugefügt
.Web-Preistabelle
Großartig. Jetzt können wir anfangen, etwas STIL hinzuzufügen ! Fügen Sie einfach den folgenden Code zu Ihrem benutzerdefinierten CSS-Feld in Ihrem Divi ePanel oder noch besser zu Ihrem Child-Theme- Stylesheet hinzu.
Beginnen wir mit der Änderung des Überschriftentextes.
CSS-1
|
1 2 3 |
.web-price-table .et_pb_pricing_heading h2 {color: #fff; font-size: 22px; font-weight: 900;} |
Dieser kleine Teil bereinigt den Text direkt unter der Überschrift. Es ändert die Farbe, Größe, Polsterung und Stärke des Textes
CSS-2
|
1 2 3 |
.web-price-table .et_pb_best_value {color: #fff; font-size: 14px; display: block; padding: 5px 10px; font-weight: 500;} |
Ändern wir nun die Hintergrundfarbe für diese Header-Boxen. Das erste Element zielt auf die normalen Spalten und das zweite auf die vorgestellte Tabelle. Sie können jede gewünschte Farbe verwenden, indem Sie #xxxxxx ändern.
CSS-3
|
1 2 3 4 |
.web-price-table .et_pb_pricing_heading {background-color: #1e73be;} .web-price-table .et_pb_featured_table .et_pb_pricing_heading {background-color: #178624;} |
Jetzt ist es an der Zeit, diesen gigantischen und überfüllten Preisbereichstext zu korrigieren.
CSS-4
|
1 2 3 4 5 |
.web-price-table .et_pb_sum {font-size: 30px;line-height: 0px;font-weight: 700;color: #4F545A !important;} .web-price-table .et_pb_sum p {padding:10px 0px;} .web-price-table .et_pb_pricing_content_top { border-bottom: 1px solid #ccc; padding: 8px;} |
Fast geschafft. Ich wollte, dass meine Tabelle mit den beliebtesten Features ein wenig hervorsticht, also habe ich ihr etwas Schatten gegeben, damit sie sich ein wenig mehr von den anderen abhebt.
CSS-5
|
1 2 3 |
.web-price-table .et_pb_featured_table {-webkit-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); -moz-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6);} |
Ich musste auch den Abstand der einzelnen Funktionen anpassen. Anfangs war der Abstand zu groß, die Tabelle war viel zu lang. Diese einfache Lösung hat meine Spaltenlänge also erheblich verkürzt.
CSS-6
|
1 2 3 |
.web-price-table .et_pb_pricing li {line-height: 16px;padding: 0 0 15px 14px;position: relative;} |
Und nun zum Knopf
CSS-7
|
1 2 3 |
.web-price-table .et_pb_pricing_table_button {color: #fff !important; background: #1e73be;} |
Jetzt denkst du wahrscheinlich, dass das Kopieren und Einfügen all dieser Zeilen eine Menge Arbeit ist. Okay, ich verstehe dich. Wenn du einfach das gesamte CSS oben kopieren und einfügen möchtest, hier ist es.
CSS-8
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.web-price-table .et_pb_pricing_heading h2 {color: #fff; font-size: 22px; font-weight: 900;} .web-price-table .et_pb_best_value {color: #fff; font-size: 14px; display: block; padding: 5px 10px; font-weight: 500;} .web-price-table .et_pb_pricing_heading {background-color: #1e73be;} .web-price-table .et_pb_featured_table .et_pb_pricing_heading {background-color: #178624;} .web-price-table .et_pb_sum {font-size: 30px;line-height: 0px;font-weight: 700;color: #4F545A !important;} .web-price-table .et_pb_sum p {padding:10px 0px;} .web-price-table .et_pb_pricing_content_top { border-bottom: 1px solid #ccc; padding: 8px;} .web-price-table .et_pb_featured_table {-webkit-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); -moz-box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6); box-shadow: 0px 0px 15px 5px rgba(157, 157, 160, 0.6);} .web-price-table .et_pb_pricing li {line-height: 16px;padding: 0 0 15px 14px;position: relative;} .web-price-table .et_pb_pricing_table_button {color: #fff !important; background: #1e73be;} |
Das sind die Grundlagen. Ich habe sie aufgeschlüsselt, weil ich wollte, dass Sie jedes Element verstehen und wissen, wie Sie es gezielt angehen. Auf diese Weise können Sie sich sicherer fühlen, wenn Sie weitere Änderungen vornehmen.
Jetzt lasst uns etwas Spaß haben. Die Aufzählungszeichen sind langweilig. Ich wollte ein paar grüne Häkchen und ein paar rote x hinzufügen. Dazu musste ich die kleinen Symbole hochladen, die ich verwenden wollte.
Dann habe ich diesen Code hinzugefügt. Sie können die folgende URL durch den URL-Pfad Ihrer Bilder ersetzen.
CSS-9
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/*Change Bullets*/ .web-price-table .et_pb_pricing li:before { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("https://quiroz.co/wp-content/uploads/2014/09/green-plus.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: 50% 50% !important; border: medium none transparent !important; color: transparent; height: 16px; margin-left: -1px; margin-top: -5px; width: 16px;} .web-price-table li.et_pb_not_available:before { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("https://quiroz.co/wp-content/uploads/2014/09/red-x.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: 50% 50% !important; border: medium none transparent !important; color: transparent; height: 16px; margin-left: -1px; margin-top: -5px; width: 16px;} |
Haben wir schon Spaß? Lasst uns auch die Ecken ein wenig abrunden.
CSS-10
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/*Rounded Corners*/ .web-price-table .et_pb_pricing_table:nth-child(odd){ -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-topleft:6px; -moz-border-radius-bottomleft:6px; border-top-left-radius:6px; border-bottom-left-radius:6px;} .web-price-table .et_pb_pricing_table:nth-child(odd) .et_pb_pricing_heading{ -webkit-border-top-left-radius:4px; -moz-border-radius-topleft:4px; border-top-left-radius:4px;} .web-price-table .et_pb_pricing_table:nth-child(even){ -webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-topright:6px; -moz-border-radius-bottomright:6px; border-top-right-radius:6px; border-bottom-right-radius:6px;} .web-price-table .et_pb_pricing_table:nth-child(even) .et_pb_pricing_heading{ -webkit-border-top-right-radius:4px; -moz-border-radius-topright:4px; border-top-right-radius:4px;} .web-price-table .et_pb_pricing_table{ -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;} .web-price-table .et_pb_pricing_heading, .web-price-table .et_pb_tab_active:first-child{ -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; border-top-left-radius:4px; border-top-right-radius:4px;} .web-price-table .et_pb_featured_table{ -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;} .web-price-table .et_pb_featured_table .et_pb_pricing_heading, .web-price-table .et_pb_tabs_controls, .web-price-table .et_pb_column_1_3 .et_pb_tab_active:first-child, .web-price-table .et_pb_column_1_4 .et_pb_tab_active:first-child { -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; border-top-left-radius:4px; border-top-right-radius:4px;} .web-price-table .et_pb_pricing_table:first-child { -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-topleft:6px; -moz-border-radius-bottomleft:6px; border-top-left-radius:6px; border-bottom-left-radius:6px;} .web-price-table .et_pb_pricing_table:first-child .et_pb_pricing_heading, .web-price-table .et_pb_tab_active:first-child{ -webkit-border-top-left-radius:4px; -moz-border-radius-topleft:4px; border-top-left-radius:4px;} .web-price-table .et_pb_pricing_table:last-child { -webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-topright:6px; -moz-border-radius-bottomright:6px; border-top-right-radius:6px; border-bottom-right-radius:6px;} |
Das Endergebnis? Sagen Sie mir, das ist nicht die schönste kleine Preistabelle, die Sie je gesehen haben 🙂
Okay, vielleicht nicht das Schönste, aber zumindest hat es mir Spaß gemacht 😉
Sie müssen „ .web-price-table “ durch die CSS-Klasse ersetzen, nach der Sie diesen Abschnitt benannt haben.