Sommige mensen zijn terughoudend om de prijzen van hun diensten op hun Site web. Maar hoezeer het sommigen ook kan afschrikken bezoekers, het toont ook vertrouwen en expertise. Transparantie in uw prijzen stelt u in staat om de juiste klanten aan te trekken met een budget waarmee u kunt werken. In de tutorial van vandaag laten we u zien hoe u een verbluffend ontwerp voor prijsberekening kunt maken dat u kunt gebruiken voor uw volgende Divi-project. U kunt het JSON-bestand ook gratis downloaden!
Laten we gaan.
overzicht
Laten we, voordat we in de tutorial duiken, snel kijken hoe deze eruitziet op verschillende schermformaten.
Laten we beginnen met recreëren!
Sectie 1 toevoegen
Achtergrond kleur
Begin met het toevoegen van een nieuwe sectie aan de pagina waaraan u werkt. Open sectie-instellingen en verander de achtergrondkleur.
- Achtergrondkleur: # f8c5ac
Lagere scheidingswand
Voeg een lager scheidingsteken toe aan de volgende sectie.
- Stijl van scheiding: zoeken in de lijst
- Flip Divider: Verticaal
tussenruimte
Voeg ook wat vulling toe.
- Vulling onderzijde: 130px
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een nieuwe rij met behulp van de volgende kolomstructuur:
Voeg tekstmodule # 1 toe aan de kolom
Voeg H2-inhoud toe
Voeg de eerste tekstmodule toe aan uw kolom en voeg de H2-inhoud van uw keuze in.
H2 tekstinstellingen
Schakel over naar het tabblad Ontwerpen en wijzig de H2-tekstinstellingen dienovereenkomstig:
- Titel 2-lettertype: Montserrat
- Titel 2-lettertype: semi-vet
- Titel 2 Tekstuitlijning: midden
- Titel 2 Tekstkleur: # 0f1c4d
- Titel 2-tekstgrootte: 57-pixels (desktop), 35-pixels (tablet), 30-pixels (telefoon)
- Titel 2 Letterafstand: -2px
Voeg tekstmodule # 2 toe aan de kolom
Voeg inhoud toe
Voeg nog een tekstmodule toe net onder de vorige en voeg de inhoud van uw keuze in.
Tekst instellingen
Schakel over naar het tabblad Ontwerpen en wijzig de tekstinstellingen dienovereenkomstig:
- Tekst lettertype: Montserrat
- Uitlijning van de tekst: midden
- Tekstkleur: #0f1c4d
- Tekstgrootte: 22px (desktop), 18px (tablet), 16px (telefoon)
Voeg een divisiemodule toe aan de kolom
zichtbaarheid
De volgende en laatste module die in deze kolom nodig is, is een deelmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Divider weergeven: Ja
lijn
Ga naar het tabblad Ontwerpen en verander de lijnkleur in wit.
- Lijnkleur: #ffffff
sizing
Wijzig ook de breedte van de verdeler.
- Breedte: 12%
Sectie 2 toevoegen
Achtergrond kleur
Laten we verder gaan met de tekening! Voeg een nieuwe sectie toe en verander de achtergrondkleur.
- Achtergrondkleur: #0f1c4d
tussenruimte
Voeg vervolgens wat aangepaste opvulling op en neer toe.
- Topvulling: 70px
- Vulling onderzijde: 130px
Rij 1 toevoegen
Kolomstructuur
Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:
sizing
Open rij-instellingen en verander de breedte naar kleinere schermformaten zonder nog mods toe te voegen.
- Breedte: 80% (desktop), 90% (tablet en telefoon)
tussenruimte
Voeg vervolgens een beetje aangepaste donsvulling toe.
- Bekleding onderaan: 70px (desktop), 20px (tablet), 0px (telefoon)
grens
Voeg ook een onderrand toe aan de lijn.
- Breedte van de onderste rand: 1px
- Kleur onderrand: #ffffff
Tonen
Om er ten slotte voor te zorgen dat alle kolommen naast elkaar worden weergegeven, voegen we een regel CSS-code toe aan het hoofdelement van de rij.
weergave: flex;
Voeg de Blurb-module toe aan de 1-kolom
Selecteer het icoon
Het is tijd om modules toe te voegen! Voeg een Blurb-module toe aan de 1-kolom en selecteer het pictogram van uw keuze.
Standaard pictograminstellingen
Schakel over naar het tabblad Ontwerpen en wijzig de pictograminstellingen dienovereenkomstig:
- Pictogramkleur: # f7f7f7
- Cirkelpictogram: ja
- Cirkelpictogram: # f8c5ac
- Positioneringspictogrammen: Top
- Gebruik de tekengrootte van het pictogram: Ja
- Lettergrootte pictogram: 96px (desktop), 20px (tablet en telefoon)
Beweeg over pictograminstellingen
Wijzig de kleur van het zweefpictogram.
- Icoonkleur: # 000000
CSS-ID
Voer ook een CSS-ID in.
- CSS-ID: prijs-item-klik-1
Voeg tekstmodule # 1 toe aan kolom 2
Voeg H3-inhoud toe
Op de tweede kolom! Voeg de eerste tekstmodule toe en voeg H3-inhoud in.
H3 tekstinstellingen
Schakel over naar het tabblad Ontwerpen en wijzig de H3-tekstinstellingen dienovereenkomstig:
- Titel 3-lettertype: Montserrat
- Titel 3-lettertypen: semi-vetgedrukt
- Titel 3 Tekstkleur: # f8c5ac
- Titel 3-tekstgrootte: 40-pixels (desktop), 25-pixels (tablet), 18-pixels (telefoon)
- Titel 3 letters spatiëring: -1px
- Titel 3 Regelhoogte: 1.1em
Voeg tekstmodule # 2 toe aan kolom 2
Voeg inhoud toe
Voeg nog een tekstmodule toe aan de 2-kolom met de inhoud van uw keuze.
Tekst instellingen
Ga naar het tabblad Ontwerpen en wijzig de tekstinstellingen.
- Tekst lettertype: Montserrat
- Lettergewicht van de tekst: ultralicht
- Tekstkleur: #f8c5ac
- Tekstgrootte: 23px (desktop), 18px (tablet), 14px (telefoon)
- Letterafstand: -1px
- Hoogte van de regel tekst: 1.1em
Voeg een tekstmodule toe aan de 3-kolom
Voeg een prijs toe aan de inhoud
Laten we naar de derde kolom gaan! Voeg een tekstmodule toe en plaats de prijs in het inhoudsgebied.
Tekst instellingen
Schakel over naar het tabblad Ontwerpen en wijzig de tekstinstellingen dienovereenkomstig:
- Tekst lettertype: Montserrat
- Lettergewicht van de tekst: Zwaar
- Uitlijning van de tekst: midden
- Tekstkleur: #ffffff
- Tekstgrootte: 40px (desktop), 25px (tablet), 18px (telefoon)
Identifier en CSS-klasse
Schakel over naar het geavanceerde tabblad en voeg een CSS-ID en CSS-klasse toe.
- CSS-ID: prijs-1
- CSS-klasse: prijs verbergen eerst
Dupliceer de lijn zo vaak als nodig
Nadat u de lijn en alle modules die deze bevat hebt voltooid, kunt u deze zo vaak dupliceren als u wilt.
Wijzig CSS-ID's voor Blurb-module
Wijzig de CSS-ID van elke nieuwe Blurb-module dienovereenkomstig:
- Blurb 1-module: prijs-item-klik-1
- Blurb-module 2: prijs-item-klik-2
- Blurb-module 3: prijs-item-klik-3
- ...
Wijzig de prijs van de dubbele tekstmodule en CSS-id's
Doe hetzelfde voor de prijstekstmodule in de derde kolom van elke rij.
- 1-prijs: 1-prijs
- 2-prijs: 2-prijs
- 3-prijs: 3-prijs
- ...
Voeg een nieuwe regel toe
Kolomstructuur
Voeg nog een regel toe aan uw sectie met behulp van de volgende kolomstructuur:
sizing
Open rij-instellingen en verander de breedte naar kleinere schermformaten zonder nog mods toe te voegen.
- Breedte: 80% (desktop), 90% (tablet en telefoon)
Tonen
Om ervoor te zorgen dat alle kolommen naast elkaar worden weergegeven op kleinere schermformaten, voegen we ook een enkele regel CSS-code toe aan het hoofdrijelement.
weergave: flex;
Voeg een codemodule toe aan de 1-kolom
Voer CSS-code in
Ga verder door een codemodule toe te voegen aan de eerste kolom van de regel en de volgende regels CSS-code in te voegen:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Voeg een tekstmodule toe aan de 2-kolom
Voeg inhoud toe
Ga naar de tweede kolom en voeg een nieuwe tekstmodule toe met de inhoud van uw keuze.
Tekst instellingen
Wijzig de tekstinstellingen dienovereenkomstig:
- Tekst lettertype: Montserrat
- Lettergewicht van de tekst: ultralicht
- Tekstkleur: # f8c5ac
- Tekstgrootte: 23px (desktop), 18px (tablet), 14px (telefoon)
- Letterafstand: -1px
- Hoogte van de regel tekst: 1.1em
Voeg een lege tekstmodule toe aan de 3-kolom
Laat de inhoud leeg
Laten we naar de laatste kolom gaan. Voeg een tekstmodule toe en zorg ervoor dat het inhoudsgebied leeg blijft.
Tekst instellingen
Ga naar het tabblad Ontwerpen en wijzig de tekstinstellingen als volgt:
- Tekst lettertype: Montserrat
- Lettergewicht van de tekst: Zwaar
- Uitlijning van de tekst: midden
- Tekstkleur: #ffffff
- Tekstgrootte: 40px (desktop), 25px (tablet), 18px (telefoon)
CSS-ID
Voltooi de moduleparameters door een CSS-ID toe te voegen.
- CSS-ID: totaalprijs cal
Voeg JQuery-themaopties toe aan Divi
Ga naar het integratie tabblad
Nu het ontwerp klaar is, is het tijd om het te laten werken met wat JQuery-code. Als u de prijsberekeningen op één pagina wilt toevoegen, kunt u de code in een codemodule plaatsen. Als u het echter op meerdere pagina's gebruikt, gaat u naar de optie Divi-thema en selecteer het tabblad Integratie.
Voeg JQuery-code toe aan hoofdtags
Voeg de volgende regels van de JQuery-code in tussen scripttags en je bent klaar:
jQuery (function ($) {$ ('[id * = "price-item-click"]'). click (function () {var selector = $ (this) .attr ('id'). replace ('- item-click ',' '); var $ price = $ (' # '+ selector); 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 (som> 0) {$ ("# totale-prijs-cal"). show (); $ ("# totale-prijs-cal"). text ("$" + som + "k");} else {$ ("# totale-prijs-cal"). hide ();}});});
overzicht
Nu alle stappen zijn genomen, gaan we nog een laatste keer kijken naar wat er is gebeurd met verschillende schermformaten.
Final gedachten
In dit artikel hebben we u laten zien hoe u met Divi een uitzonderlijke prijsberekeningssjabloon kunt maken. Het is een geweldige manier om je te laten zien bezoekers tegen welke prijs uw diensten beginnen en om de juiste doelgroep aan te trekken. U kunt deze aanpak gebruiken voor elke prijsberekening die u maakt voor uw volgende Divi-project! Als u vragen of suggesties heeft, laat dan een opmerking achter in het opmerkingengedeelte hieronder.
