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.

Skyggemodul billeddelekonfiguration

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

Divi-billedmodul aksetransformation

Nederste skillelinje

Tilføj en bundseparator til næste afsnit.

  • Adskillelsesstil: Søg på listen
  • Flip Divider: Lodret

Ændring af andet divi-billede

afstand

Tilføj også noget polstring i bunden.

  • Bundpolstring: 130px

Divi-billedmodulets filterkonfiguration

Tilføj en ny linje

Kolonne struktur

Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:

Tilføj et nyt afsnit om divi

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.

Vælg divi-layout

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

Book en divi-modul eksamen

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.

Divi-tekstmodul til skrifttilpasning

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)

Endelig design bog en konsultation

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

Sådan tilpasser du wordpress-kommentarer formular 2

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

Border modul konfiguration divi lineudstilling

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;

Tilføj kode css divi

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.

Tilføj et divi-modulikon

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)

Ændring af divi-ikonmodulet

Hold markøren over ikonindstillinger

Skift farven på svæveikonet.

  • Ikonfarve: # 000000

Divi hover knap konfiguration

CSS ID

Indsæt også en CSS-id.

  • CSS ID: price-item-click-1

divi modul css id

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.

divi mærkeidentitet tekstmodul

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

Divi font konfiguration

Føj tekstmodul # 2 til kolonne 2

Tilføj indhold

Tilføj endnu et tekstmodul til kolonne 2 med indholdet efter eget valg.

Tilføj en divi-modultekst

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

Tekst divi farvetilpasningsmodul

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.

divi service pris

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)

prisberegninger

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

Tilpas pris divi tekstmodulet

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.

Dubleret divi-linje

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
  • ...

Ændring identificere divi modul blurb

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
  • ...

divi prisidentifikator

Tilføj en ny linje

Kolonne struktur

Tilføj endnu en række til din sektion ved hjælp af følgende kolonnestruktur:

Divi modul linje konfiguration

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)

Divi line parameter

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;

Tilpas Div Line Alignment

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;
}

divi-kode modulFøj et tekstmodul til 2-kolonnen

Tilføj indhold

Flyt til anden kolonne og tilføj et nyt tekstmodul med indholdet efter eget valg.

Tilbud starter fra divi tekstmodulTekstindstillinger

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

Divi modul tilpasning

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.

Tredje divi tekstboks

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)

Divi-tekstmodul til skrifttilpasning

CSS ID

Fuldfør modulparametrene ved at tilføje en CSS-id.

  • CSS ID: total-price-cal

divi tekstmodul css id

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(); } }); });

js kode integrationundersøgelse

Nu hvor alle trin er taget, lad os tage et sidste kig på, hvad der skete med forskellige skærmstørrelser.

Priserne starter fra kl

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.