Nogle mennesker er tilbageholdende med at vise priserne på deres tjenester på deres Websted. Men så meget som det kan skræmme nogle besøgende, det viser også tillid og ekspertise. Gennemsigtighed i din prissætning giver dig mulighed for at tiltrække de rigtige kunder med et budget, du kan arbejde med. I dagens vejledning viser vi dig, hvordan du opretter et fantastisk prisberegningsdesign, som du kan bruge til dit næste Divi-projekt. Du kan også downloade JSON-filen gratis!
Lad os gå.
undersøgelse
Før vi dykker ned i vejledningen, skal vi se hurtigt på, hvordan vi ser på forskellige skærmstørrelser.
Lad os begynde at genskabe!
Tilføj sektion #1
Baggrundsfarve
Start med at tilføje et nyt afsnit til den side, du arbejder på. Åbn sektionsindstillinger og skift baggrundsfarven.
- Baggrundsfarve: #f8c5ac
Nederste skillelinje
Tilføj en bundseparator til næste afsnit.
- Adskillelsesstil: Søg på listen
- Flip Divider: Lodret
afstand
Tilføj også noget polstring i bunden.
- Bundpolstring: 130px
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
Føj tekstmodul nr. 1 til kolonnen
Tilføj H2 indhold
Tilføj det første tekstmodul til din kolonne og indsæt H2-indhold efter eget valg.
H2 tekstindstillinger
Skift til fanen Design, og rediger H2-tekstindstillingerne i overensstemmelse hermed:
- Sektion 2 Skrifttype: Montserrat
- Titel 2 Font: Semi fed
- Titel 2 Tekstjustering: Center
- Overskrift 2 Tekstfarve: #0f1c4d
- Titel 2 Tekststørrelse: 57 pixels (skrivebord), 35 pixels (tablet), 30 pixels (telefon)
- Titel 2 Brevafstand: -2px
Føj tekstmodul nr. 2 til kolonnen
Tilføj indhold
Tilføj endnu et tekstmodul lige under det forrige, og indsæt indholdet efter eget valg.
Tekstindstillinger
Skift til fanen Design, og skift tekstindstillingerne i overensstemmelse hermed:
- Tekstskrifttype: Montserrat
- Justering af teksten: center
- Tekstfarve: #0f1c4d
- Tekststørrelse: 22px (desktop), 18px (tablet), 16px (telefon)
Føj et opdelingsmodul til kolonnen
synlighed
Det næste og sidste modul, der er nødvendigt i denne kolonne, er et divisionsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.
- Vis divider: Ja
Linje
Skift til fanen Design og skift stregfarven til hvid.
- Stregfarve: #ffffff
dimensionering
Skift også bredden på skillevæggen.
- Bredde: 12%
Tilføj sektion #2
Baggrundsfarve
Lad os gå videre til tegningen! Tilføj en ny sektion og skift baggrundsfarven.
- Baggrundsfarve: #0f1c4d
afstand
Tilføj derefter noget tilpasset polstring til toppen og bunden.
- Top polstring: 70px
- Bundpolstring: 130px
Tilføj række 1
Kolonne struktur
Fortsæt ved at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillinger og ændre bredden til mindre skærmstørrelser.
- Bredde: 80% (desktop), 90% (tablet og telefon)
afstand
Tilføj noget tilpasset bundfyld derefter.
- Bundpolstring: 70px (desktop), 20px (tablet), 0px (telefon)
Border
Tilføj også en bundramme til linjen.
- Bredde på bundkanten: 1px
- Farve på nederste kant: #ffffff
udstilling
Til sidst, for at sikre, at alle kolonnerne vises ved siden af hinanden, tilføjer vi en linje med CSS-kode til hovedrækkeelementet.
display: flex;
Føj Blurb-modulet til 1-kolonnen
Vælg ikonet
Det er tid til at begynde at tilføje moduler! Tilføj et Blurb-modul til kolonne 1, og vælg det ønskede ikon.
Standardikonindstillinger
Skift til fanen Design, og skift ikonindstillingerne i overensstemmelse hermed:
- Ikonfarve: # f7f7f7
- Cirkelikon: ja
- Cirkelikon: #f8c5ac
- Ikonplacering: Øverst
- Brug ikonets skriftstørrelse: Ja
- Ikon skriftstørrelse: 96px (desktop), 20px (tablet og telefon)
Hold markøren over ikonindstillinger
Skift farven på svæveikonet.
- Ikonfarve: # 000000
CSS ID
Indsæt også en CSS-id.
- CSS ID: price-item-click-1
Føj tekstmodul # 1 til kolonne 2
Tilføj H3 indhold
I anden kolonne! Tilføj det første tekstmodul og indsæt H3-indhold.
H3 tekstindstillinger
Skift til fanen Design, og rediger H3-tekstindstillingerne i overensstemmelse hermed:
- Sektion 3 Skrifttype: Montserrat
- Titel 3 skrifttyper: Semi fed
- Overskrift 3 Tekstfarve: #f8c5ac
- Titel 3 Tekststørrelse: 40 pixels (skrivebord), 25 pixels (tablet), 18 pixels (telefon)
- Titelbogstavafstand 3: -1px
- Overskrift 3 Linjehøjde: 1.1em
Føj tekstmodul # 2 til kolonne 2
Tilføj indhold
Tilføj endnu et tekstmodul til kolonne 2 med indholdet efter eget valg.
Tekstindstillinger
Skift til fanen Design, og skift tekstindstillingerne.
- Tekstskrifttype: Montserrat
- Tekstskrifttypevægt: Ultralet
- Tekstfarve: #f8c5ac
- Tekststørrelse: 23px (desktop), 18px (tablet), 14px (telefon)
- Bogstavafstand: -1px
- Højde på tekstlinjen: 1.1em
Føj et tekstmodul til 3-kolonnen
Tilføj en pris til indholdet
Lad os gå til tredje kolonne! Tilføj et tekstmodul og placer prisen i indholdsområdet.
Tekstindstillinger
Skift til fanen Design, og skift tekstindstillingerne i overensstemmelse hermed:
- Tekstskrifttype: Montserrat
- Skrifttype vægt af teksten: Tung
- Justering af teksten: center
- Tekstfarve: #ffffff
- Tekststørrelse: 40px (desktop), 25px (tablet), 18px (telefon)
Identifikator og CSS-klasse
Skift til den avancerede fane, og tilføj et CSS-id og en CSS-klasse.
- CSS ID: pris-1
- CSS-klasse: pris-skjul-først
Dupliker linjen så mange gange som nødvendigt
Når du har gennemført linjen og alle de moduler, den indeholder, kan du duplikere den så mange gange, du vil.
Rediger Duplicate Blurb Mod CSS ID'er
Skift CSS-id'et for hvert nyt Blurb-modul i overensstemmelse hermed:
- Blurb Mod 1: pris-vare-klik-1
- Blurb-modul 2: pris-vare-klik-2
- Blurb-modul 3: pris-vare-klik-3
- ...
Skift Duplicate Text Module Pris og CSS ID'er
Gør det samme for pristekstmodulet i tredje kolonne i hver række.
- Pris 1: pris-1
- Pris 2: pris-2
- Pris 3: pris-3
- ...
Tilføj en ny linje
Kolonne struktur
Tilføj endnu en række til din sektion ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillinger og ændre bredden til mindre skærmstørrelser.
- Bredde: 80% (desktop), 90% (tablet og telefon)
udstilling
For at sikre, at alle kolonner vises side om side på mindre skærmstørrelser, tilføjer vi også en enkelt linje med CSS-kode til hovedrækkeelementet.
display: flex;
Føj et kodemodul til 1-kolonnen
Indsæt CSS-kode
Fortsæt ved at tilføje et kodemodul til den første kolonne i rækken og indsætte følgende linjer med CSS-kode:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Føj et tekstmodul til 2-kolonnen
Tilføj indhold
Flyt til anden kolonne og tilføj et nyt tekstmodul med indholdet efter eget valg.
Tekstindstillinger
Skift tekstindstillingerne i overensstemmelse hermed:
- Tekstskrifttype: Montserrat
- Tekstskrifttypevægt: Ultralet
- Tekstfarve: #f8c5ac
- Tekststørrelse: 23px (desktop), 18px (tablet), 14px (telefon)
- Bogstavafstand: -1px
- Højde på tekstlinjen: 1.1em
Tilføj tomt tekstmodul til kolonne 3
Lad indholdet være tomt
Lad os gå til den sidste kolonne. Tilføj et tekstmodul, og sørg for, at indholdsområdet forbliver tomt.
Tekstindstillinger
Skift til fanen Design og skift tekstindstillingerne som følger:
- Tekstskrifttype: Montserrat
- Skrifttype vægt af teksten: Tung
- Justering af teksten: center
- Tekstfarve: #ffffff
- Tekststørrelse: 40px (desktop), 25px (tablet), 18px (telefon)
CSS ID
Fuldfør modulparametrene ved at tilføje en CSS-id.
- CSS ID: total-price-cal
Tilføj JQuery-temaindstillinger til Divi
Gå til integrationsfanen
Nu hvor designet er færdigt, er det tid til at få det til at fungere med noget JQuery-kode. Ønsker du at tilføje prisberegningerne til én side, kan du placere koden i et kodemodul. Men hvis du bruger det på flere sider, skal du gå til indstillingen Divi-tema og vælg fanen Integration.
Tilføj JQuery-kode til Head-tags
Indsæt følgende linjer med JQuery-kode mellem script-tags og du er færdig:
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 (sum > 0){ $("#total-price-cal").show(); $("#total-price-cal").text("$" + sum + "k"); } andet { $("#total-price-cal").hide(); } }); });
undersøgelse
Nu hvor alle trin er taget, lad os tage et sidste kig på, hvad der skete med forskellige skærmstørrelser.
endelige tanker
I denne artikel viste vi dig, hvordan du opretter en exceptionel prisberegningsskabelon med Divi. Det er en fantastisk måde at vise din besøgende til hvilken pris dine tjenester starter og for at tiltrække det rigtige publikum. Du kan bruge denne tilgang til enhver prisberegning, du opretter til dit næste Divi-projekt! Hvis du har spørgsmål eller forslag, skal du sørge for at efterlade en kommentar i kommentarfeltet nedenfor.