Una dintre paginile de destinație exclusive pe care vi le oferim ca membri pe viață și noi clienți de Black Friday este uimitoarea pagină de destinație pentru vânzări de software. Această pagină de destinație vă va surprinde cu divizoarele sale unice de secțiuni și machetele de înaltă calitate. În acest articol vă vom arăta cum să utilizați funcția de conținut dinamic Divi pentru a adăuga tabele de prețuri dinamice!

Dacă sunteți un client Lifetime actual sau dacă ați achiziționat un cont nou sau ați făcut upgrade în timpul vânzării noastre de Black Friday, puteți descărca acest aspect chiar acum.

Obțineți pagina de destinație exclusivă pentru vânzarea de software de Black Friday

Înainte de a intra în acest caz de utilizare, va trebui să puneți mâna pe pagina de destinație exclusivă pentru vânzarea de software de Black Friday, pe care o puteți obține devenind un nou membru Elegant Themes, actualizând contul dvs. existent sau fiind deja membru pe viață la noi. Dacă sunteți într-adevăr deja membru pe viață, vă puteți conecta la zona noastră de membri și puteți descărca toate paginile noastre de destinație exclusive aici. Toți ceilalți vor trebui să utilizeze butonul de mai jos pentru a cumpăra sau actualiza înainte de a putea urma împreună cu restul tutorialului nostru.

Revendicați afacerea înainte ca aceasta să dispară!

Folosirea modului de creare a tabelelor de prețuri dinamice cu Divi

Pentru restul acestei postări, vom presupune că ați profitat fie de afacerea noastră de Black Friday, fie că sunteți deja membru pe viață și aveți acces la pagina de destinație pentru vânzarea de software Black Friday

După ce ați descărcat noua pagină de destinație de vânzare software din zona noastră de membri, puteți urmări videoclipul de mai jos pentru a vedea cât de ușor este de configurat. De asemenea, vă încurajăm să urmați acest tutorial pentru a vă pregăti site-ul pentru o personalizare ulterioară.

În acest caz de utilizare, vă vom arăta cum să creați tabele de prețuri dinamice cu Divi și pluginul gratuit Advanced Custom Fields. Crearea tabelelor dinamice de stabilire a prețurilor este excelentă dacă aveți un client care schimbă frecvent prețurile abonamentului și doriți să îi permiteți să îl schimbe singuri fără a accesa Divi. Acest lucru vă va ajuta să vă asigurați că nu încurcă nimic pe pagina însăși, având în același timp posibilitatea de a schimba prețul, descrierea și nivelul de membru al unui anumit pachet.

previzualizare

Înainte de a ne arunca cu capul în el, să aruncăm o privire rapidă asupra rezultatului final.

Să începem!

Instalați pluginul Advanced Custom Fields

Primul lucru pe care va trebui să-l faceți este să instalați pluginul Advanced Custom Fields pe site-ul dvs. WordPress accesând Plugins> Add New> Căutând pluginul și instalându-l .

Creați un nou grup de câmp

După ce ați activat pluginul, puteți începe. Adăugați un nou grup de câmpuri.

Nume + Locație

Dați un nume noului grup de câmp. Rețineți că până la sfârșitul acestei părți a tutorialului, veți avea trei grupuri de câmp (egal cu numărul de tabele de prețuri), așa că asigurați-vă că îl denumiți corect. Modificați și setările de locație ale acestui grup de câmpuri.

Adăugați un câmp la nivel de membru

E timpul să începeți să adăugați câmpuri! Vom avea nevoie de trei în total. Adăugați un câmp la nivel de membru folosind următoarele setări:

• Etichetă de câmp: nivel 1 de membru
• Nume câmp: membership_level_1
• Tipul câmpului: Selectați
• Opțiuni: adăugați conținut la alegere

Adăugați câmpul de descriere a calității de membru

Continuați adăugând un câmp de descriere a membrilor.

• Etichetă câmp: Descrierea calității de membru 1
• Numele câmpului: membership_description_1
• Tipul câmpului: Text

Adăugați câmpul de preț

Ultimul câmp de care aveți nevoie este un câmp de preț.

• Etichetă de câmp: Preț 1
• Nume câmp: preț_1
• Tipul câmpului: Text

Duplicați grupul de câmpuri de două ori și ajustați numele și câmpurile la numărul tabelului de prețuri

Un grup de câmpuri este egal cu un tabel de prețuri de pe pagina noastră. Acum, după ce am terminat-o pe prima, putem continua și o clonăm de două ori pentru a ne asigura că avem suficiente grupuri de câmpuri pentru a se potrivi cu numărul de tabele de prețuri de pe pagina noastră.

Schimbați numărul tuturor câmpurilor din grup

Fiecare dintre câmpurile dinamice pe care le creați vor fi afișate în Visual Builder. Pentru a vă asigura că știți la ce informații conectați, dați grupurilor de câmpuri duplicate și câmpurilor acestora un număr diferit.

Creați o pagină nouă folosind pagina de destinație a software-ului Divi

În următoarea parte a acestui tutorial, vom adăuga tabelele de prețuri dinamice pe pagina noastră de destinație de vânzare software. Creați o pagină nouă utilizând acest aspect.

Adăugați conținut dinamic la pagină

Reveniți la backend-ul acestei pagini și adăugați conținut dinamic la fiecare dintre tabelele de prețuri.

Adăugați un rând nou sub tabelul de prețuri de pe pagină

Structura coloanei

Continuați activând Visual Builder și adăugând un nou rând chiar aici:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Apoi, accesați setările de spațiere și adăugați o marjă personalizată.

• Marja superioară: 100 px
• Marja inferioară: 100 px

Adăugați modulul CTA în coloana 1

Conectați câmpul de titlu la conținutul dinamic nivel 1 de membru

Primul modul de care vom avea nevoie în coloana 1 este un modul Call to Action. Conectați câmpul de titlu la câmpul nivel 1 de membru pe care l-ați creat în partea anterioară a acestui tutorial.

Conectați caseta de conținut la Descrierea calității de membru 1 Conținut dinamic

De asemenea, conectați caseta de conținut la Descrierea calității de membru 1.

Culoare de fundal

Apoi, accesați setările de fundal și schimbați culoarea de fundal a modulului CTA.

• Culoare fundal: #ffffff

Imagine de fundal

Adăugați și o imagine de fundal subtilă. Veți putea găsi următoarea imagine de fundal în biblioteca dvs. media după ce ați încărcat pagina de destinație de vânzare software:

• Imagine de fundal: software-sale-13.png

Setări text

Continuați accesând setările de text și schimbând orientarea textului modulului.

• Orientare text: stânga

Setări text titlu

Pentru a se potrivi cu stilul de design al paginii de destinație, efectuați și câteva modificări la setările textului titlului.

• Titlu Font: Rubik
• Titlu Greutate font: ușor
• Culoare text titlu: # 4258ff
• Dimensiune text titlu: 40 px
• Înălțimea liniei de titlu: 1.3em

Setări text corp

Același lucru este valabil și pentru setările pentru textul corpului.

• Font corp: Rubik
• Greutate font corp: mediu
• Culoarea textului corpului: rgba (0,0,0,0.34)
• Dimensiunea textului corpului: 15 px
• Înălțimea liniei corpului: 1,8em

Spațiere

Adăugați câteva umpluturi de top în continuare.

• Căptușeală superioară: 60 px

Frontieră

Și adăugați „8px” la fiecare dintre colțurile superioare ale modulului.

Box Shadow

Nu în ultimul rând, vom adăuga o umbră de casetă subtilă pentru a crea adâncimea paginii.

• Box Shadow Vertical Position: 50 px
• Puterea neclarității umbrei cutiei: 100 px
• Culoare umbră: rgba (66,88,255,0,2)

Adăugați un modul de text în coloana 1

Conectați caseta de conținut la conținutul dinamic din prețul 1

Continuați și adăugați un modul de text chiar sub modulul Apel la acțiune din coloana 1. Conectați caseta de conținut a acestui modul la conținutul dinamic Preț 1.

Culoare de fundal

Continuați schimbând culoarea de fundal a acestui modul.

• Culoare fundal: #ffffff

Setări text

Modificați și setările de text.

• Font text: Rubik
• Greutatea fontului textului: ușoară
• Culoare text: # 4258ff
• Dimensiune text: 70 px
• Înălțimea liniei de text: 1em

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală inferioară: 60 px
• Garnitura stânga: 40 px

Frontieră

Continuați accesând setările de margine și adăugând „8 px” în ambele colțuri de jos.

Box Shadow

Nu în ultimul rând, acordați acestui modul text o umbră de casetă.

• Box Shadow Vertical Position: 80px
• Puterea neclarității umbrei cutiei: 100 px
• Culoare umbră: rgba (66,88,255,0,2)

Trageți modulul butonului în coloana 1

Ultimul modul de care vom avea nevoie în prima coloană este un modul buton. Clonați unul dintre modulele de butoane pe care îl puteți găsi în rândul anterior și plasați-l în coloana 1.

Schimbați spațiul

Deschideți setările modulului de butoane și adăugați o marjă personalizată.

• Marja superioară: 30 px
• Marja inferioară: 50 px

Clonați toate modulele din coloana 1 și plasați-le în coloanele rămase

Pentru a economisi timp, vom clona toate cele trei module din coloana 1 de două ori și vom plasa duplicatele în coloanele rămase ale rândului.

Modificați modulele din coloana 2

Modulul CTA

Conectați câmpul de titlu la conținutul dinamic nivel 2 de membru

Va trebui să modificăm duplicatele, începând cu modulul CTA din a doua coloană. Conectați câmpul de titlu la conținutul dinamic nivel 2 de membru.

Conectați caseta de conținut la descrierea calității de membru 2 Conținut dinamic

Faceți același lucru pentru caseta de conținut.

Adăugați fundal de gradient

Adăugați un fundal de gradient la modulul următor.

• Culoare 1: # 6959ff
• Culoare 2: # c1bfff
• Direcția gradientului: 15 grade
• Poziția inițială: 22%
• Poziție finală: 95%

Schimbați culoarea textului titlului

Schimbați și culoarea textului titlului.

• Culoarea textului titlului: #ffffff

Schimbați culoarea textului corpului

Același lucru este valabil și pentru culoarea textului corpului.

• Culoarea textului corpului: #ffffff

Schimbați spațiul

Pentru a pune acest tabel special de prețuri în centrul atenției, ne vom juca și cu valorile spațierii.

• Marja superioară: -50 px (desktop), 0 px (tabletă și telefon)
• Căptușeală superioară: 100 px

Modul text

Conectați caseta de conținut la conținutul dinamic Preț 2

Continuați deschizând modulul de text din coloana 2 și conectați caseta de conținut la conținutul dinamic Preț 2.

Schimbați culoarea de fundal

Schimbați apoi culoarea de fundal a acestui modul.

• Culoare fundal: # 6959ff

Schimbați culoarea textului

Și schimbați culoarea textului în alb.

• Culoarea textului: #ffffff

Schimbați spațiul

Nu în ultimul rând, modificați valorile de umplere personalizate din setările de spațiere.

• Căptușeală inferioară: 120 px
• Garnitura stânga: 40 px

Modificați modulele din coloana 3

Modulul CTA

Conectați câmpul de titlu la conținutul dinamic nivel 3 de membru

Va trebui să schimbăm și modulele din coloana 3. Conectați câmpul de titlu la conținutul dinamic nivel 3 de membru.

Conectați caseta de conținut la descrierea calității de membru 3 Conținut dinamic

Același lucru este valabil și pentru caseta de conținut.

Adăugați fundal de gradient

Apoi, adăugați un fundal de gradient la modul.

• Culoare 1: # c87cff
• Culoare 2: # ffbcf8
• Direcția gradientului: 18 grade
• Poziția inițială: 22%
• Poziție finală: 95%

Schimbați culoarea textului titlului

Schimbați culoarea textului titlului în alb.

• Culoarea textului titlului: #ffffff

Schimbați culoarea textului corpului

Faceți același lucru pentru culoarea textului corpului.

• Culoarea textului corpului: #ffffff

Modul text

Conectați caseta de conținut la conținutul dinamic al prețului 3

Continuați deschizând modulul de text din coloana 3 și schimbând și conținutul dinamic.

Schimbați culoarea de fundal

Adăugați o altă culoare de fundal în continuare.

• Culoare fundal: # c87cff

Schimbați culoarea textului

Nu în ultimul rând, schimbați culoarea textului în alb și gata! Acum aveți trei tabele de prețuri complet dinamice pe pagina dvs.!

• Culoarea textului: #ffffff

Gânduri finale

Acest caz de utilizare face parte din oferta noastră de Black Friday, unde împărtășim 6 pagini gratuite de destinație în ediție limitată cu clienții Black Friday și membrii pe toată durata vieții. Alăturându-vă comunității noastre împuternicite în aceste zile și devenind membru, veți primi:

• 25% REDUCERE PE TOT
• Toate cele 6 pagini de destinație gratuite
• Acces la temele și pluginurile noastre minunate
• Premii bonus

Profitați de ocazie și deveniți membru astăzi!