Vissa människor är ovilliga att visa priserna på sina tjänster på sina webbplats. Men så mycket som det kan skrämma vissa besökare, det visar också på förtroende och expertis. Transparens i din prissättning gör att du kan attrahera rätt kunder med en budget som du kan arbeta med. I dagens handledning visar vi dig hur du skapar en fantastisk prisberäkningsdesign som du kan använda för ditt nästa Divi-projekt. Du kan också ladda ner JSON-filen gratis!
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på hur det ser ut på olika skärmstorlekar.
Låt oss börja återskapa!
Lägg till avsnitt 1
Bakgrundsfärg
Börja med att lägga till ett nytt avsnitt på sidan du arbetar med. Öppna sektionsinställningar och ändra bakgrundsfärg.
- Bakgrundsfärg: # f8c5ac
Nedre delare
Lägg till en nedre separator i nästa avsnitt.
- Separationsstil: Sök i listan
- Flip Divider: Vertikal
avstånd
Lägg också till lite stoppning.
- Botten stoppning: 130px
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
Lägg till textmodul # 1 i kolumnen
Lägg till H2-innehåll
Lägg till den första textmodulen i din kolumn och sätt in H2-innehåll som du väljer.
H2 textinställningar
Byt till fliken Design och ändra H2-textinställningarna i enlighet med detta:
- Rubrik 2 typsnitt: Montserrat
- Titel 2 Typsnitt: Semi Bold
- Titel 2 Textjustering: Center
- Titel 2 Textfärg: # 0f1c4d
- Titel 2 Textstorlek: 57 pixlar (skrivbord), 35 pixlar (surfplatta), 30 pixlar (telefon)
- Titel 2 Brevavstånd: -2px
Lägg till textmodul # 2 i kolumnen
Lägg till innehåll
Lägg till en annan textmodul precis under den föregående och sätt in innehållet du väljer.
Textinställningar
Byt till fliken Design och ändra textinställningarna i enlighet med detta:
- Teckensnittstext: Montserrat
- Justering av texten: centrum
- Textfärg: #0f1c4d
- Textstorlek: 22px (skrivbord), 18px (surfplatta), 16px (telefon)
Lägg till en delningsmodul i kolumnen
synlighet
Nästa och sista modul som behövs i den här kolumnen är en delningsmodul. Se till att alternativet "Visa separator" är aktiverat.
- Visa Divider: Ja
Linje
Gå till fliken Design och ändra linjefärgen till vit.
- Linjefärg: #ffffff
dimensionering
Ändra också delningsbredden.
- Bredd: 12%
Lägg till avsnitt 2
Bakgrundsfärg
Låt oss gå vidare till ritningen! Lägg till ett nytt avsnitt och ändra bakgrundsfärgen.
- Bakgrundsfärg: #0f1c4d
avstånd
Lägg sedan till lite anpassad stoppning upp och ner.
- Toppad padding: 70px
- Botten stoppning: 130px
Lägg till rad 1
Kolumnstruktur
Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:
dimensionering
Utan att lägga till några mods ännu, öppna radinställningar och ändra bredden till mindre skärmstorlekar.
- Bredd: 80% (skrivbord), 90% (surfplatta och telefon)
avstånd
Lägg till lite anpassad nedfyllning nästa.
- Klädsel längst ner: 70px (skrivbord), 20px (surfplatta), 0px (telefon)
gräns
Lägg också till en nedre kant på linjen.
- Bredden på den nedre kanten: 1px
- Nedre kantfärg: #ffffff
display
Slutligen, för att se till att alla kolumner visas bredvid varandra, lägger vi till en rad CSS-kod till huvudelementet på raden.
display: flex;
Lägg till Blurb-modulen i 1-kolumnen
Välj ikonen
Det är dags att börja lägga till moduler! Lägg till en Blurb-modul i 1-kolumnen och välj önskad ikon.
Standardikoninställningar
Byt till fliken Design och ändra ikoninställningarna i enlighet med detta:
- Ikonfärg: # f7f7f7
- Cirkelikon: ja
- Cirkelikon: # f8c5ac
- Positioneringsikoner: Överst
- Använd ikonstorlek: Ja
- Ikonstorlek: 96 pixlar (skrivbord), 20 pixlar (surfplatta och telefon)
Håll muspekaren över ikoninställningarna
Ändra färgen på svävarikonen.
- Ikonfärg: # 000000
CSS-identifierare
Sätt också in en CSS-identifierare.
- CSS-identifierare: pris-artikel-klicka-1
Lägg till textmodul # 1 i kolumn 2
Lägg till H3-innehåll
I den andra kolumnen! Lägg till den första textmodulen och sätt in H3-innehåll.
H3 textinställningar
Byt till fliken Design och ändra H3-textinställningarna i enlighet med detta:
- Rubrik 3 typsnitt: Montserrat
- Titel 3 Teckensnitt: Halv fet
- Titel 3 Textfärg: # f8c5ac
- Titel 3 Textstorlek: 40 pixlar (skrivbord), 25 pixlar (surfplatta), 18 pixlar (telefon)
- Titel 3 bokstäveravstånd: -1px
- Titel 3 Linjehöjd: 1.1em
Lägg till textmodul # 2 i kolumn 2
Lägg till innehåll
Lägg till en annan textmodul i 2-kolumnen med innehållet du väljer.
Textinställningar
Gå till fliken Design och ändra textinställningarna.
- Teckensnittstext: Montserrat
- Textens tyngdtext: Ultralätt
- Textfärg: #f8c5ac
- Textstorlek: 23px (skrivbord), 18px (surfplatta), 14px (telefon)
- Bokstavsavstånd: -1px
- Höjd på textrad: 1.1em
Lägg till en textmodul i 3-kolumnen
Lägg till ett pris till innehållet
Låt oss gå till den tredje kolumnen! Lägg till en textmodul och placera priset i innehållsområdet.
Textinställningar
Byt till fliken Design och ändra textinställningarna i enlighet med detta:
- Teckensnittstext: Montserrat
- Textens textvikt: Tung
- Justering av texten: centrum
- Textfärg: #ffffff
- Textstorlek: 40px (skrivbord), 25px (surfplatta), 18px (telefon)
Identifierare och CSS-klass
Byt till den avancerade fliken och lägg till en CSS-ID och CSS-klass.
- CSS-identifierare: pris-1
- CSS-klass: pris-dölj-först
Duplicera linjen så många gånger som behövs
När du har slutfört raden och alla moduler som den innehåller kan du kopiera den så många gånger du vill.
Ändra CSS-ID: er för fel
Ändra CSS-ID för varje ny Blurb-modul i enlighet med detta:
- Blurb 1-modul: pris-artikel-klicka-1
- Blurb Module 2: pris-artikel-klicka-2
- Blurb Module 3: pris-artikel-klicka-3
- .
Ändra priset för duplicerad textmodul och CSS-id
Gör samma sak för pristextmodulen i den tredje kolumnen i varje rad.
- 1-pris: 1-pris
- 2-pris: 2-pris
- 3-pris: 3-pris
- .
Lägg till en ny rad
Kolumnstruktur
Lägg till en ny rad i ditt avsnitt med följande kolumnstruktur:
dimensionering
Utan att lägga till några mods ännu, öppna radinställningar och ändra bredden till mindre skärmstorlekar.
- Bredd: 80% (skrivbord), 90% (surfplatta och telefon)
display
För att se till att alla kolumner visas sida vid sida på mindre skärmstorlekar lägger vi också till en rad CSS-kod i huvudradelementet.
display: flex;
Lägg till en kodmodul i 1-kolumnen
Sätt in CSS-kod
Fortsätt genom att lägga till en kodmodul i radens första kolumn och infoga följande CSS-kodrader:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Lägg till en textmodul i 2-kolumnen
Lägg till innehåll
Gå till den andra kolumnen och lägg till en ny textmodul med innehållet du väljer.
Textinställningar
Ändra textinställningarna i enlighet med detta:
- Teckensnittstext: Montserrat
- Textens tyngdtext: Ultralätt
- Textfärg: # f8c5ac
- Textstorlek: 23px (skrivbord), 18px (surfplatta), 14px (telefon)
- Bokstavsavstånd: -1px
- Höjd på textrad: 1.1em
Lägg till en tom textmodul i 3-kolumnen
Lämna innehållet tomt
Låt oss gå till den sista kolumnen. Lägg till en textmodul och se till att innehållsområdet förblir tomt.
Textinställningar
Gå till fliken Design och ändra textinställningarna enligt följande:
- Teckensnittstext: Montserrat
- Textens textvikt: Tung
- Justering av texten: centrum
- Textfärg: #ffffff
- Textstorlek: 40px (skrivbord), 25px (surfplatta), 18px (telefon)
CSS-identifierare
Slutför modulparametrarna genom att lägga till en CSS-identifierare.
- CSS-identifierare: totalpris-kal
Lägg till JQuery-temalternativ i Divi
Gå till fliken integration
Nu när designen är klar är det dags att få det att fungera med lite JQuery-kod. Om du vill lägga till prisberäkningarna på en sida kan du lägga koden i en kodmodul. Men om du använder det på flera sidor, gå till alternativet Divi Theme och välj fliken Integration.
Lägg till JQuery-kod i Head Taggar
Sätt in följande rader i JQuery-koden mellan skripttaggar och du är klar:
jQuery (funktion ($) {$ ('[id * = "pris-artikel-klick"]'). klicka (funktion () {var selector = $ (detta) .attr ('id'). ersätt ('- objekt-klicka ',' '); var $ pris = $ (' # '+ väljare); var sum = 0; $ price.toggle (); $ price.toggleClass (' pris-aktiv '); $ (detta) .toggleClass ('price-item-active'); $ ('. price-active'). varje (funktion () {sum + = parseFloat ($ (denna) .text (). ersätt (/ D / g, ' '));}); if (summa> 0) {$ ("# total-pris-kal"). visa (); $ ("# total-pris-kal"). text ("$" + summa + "k");} annat {$ ("# total-pris-kal"). göm ();}});});
undersökningen
Nu när alla steg har tagits, låt oss ta en sista titt på vad som hände med olika skärmstorlekar.
Avslutande tankar
I den här artikeln visade vi hur du skapar en exceptionell prisberäkningsmall med Divi. Det är ett bra sätt att visa din besökare till vilket pris dina tjänster startar och för att attrahera rätt publik. Du kan använda detta tillvägagångssätt för alla prisberäkningar du skapar för ditt nästa Divi-projekt! Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarsektionen nedan.