Una delle pagine di destinazione esclusive che ti offriamo come membri a vita e nuovi clienti del Black Friday è la straordinaria pagina di destinazione della vendita di software. Questa pagina di destinazione ti sorprenderà con i suoi divisori di sezione unici e i modelli di alta qualità. In questo articolo ti mostreremo come utilizzare la funzione di contenuto dinamico di Divi per aggiungere tabelle dei prezzi dinamiche!

Se sei un cliente a vita o se hai acquistato un nuovo account o hai effettuato l'upgrade durante i nostri saldi del Black Friday, puoi scaricare questo layout in questo momento.

Ottieni l'esclusiva pagina di destinazione della vendita del software del Black Friday

Prima di entrare in questo caso d'uso, dovrai mettere le mani sull'esclusiva pagina di destinazione della vendita del software del Black Friday che puoi ottenere diventando un nuovo membro di Elegant Themes, aggiornando il tuo account esistente o essendo già un membro a vita con noi. Se sei già un membro a vita puoi accedere alla nostra area membri e scaricare tutte le nostre pagine di destinazione esclusive qui. Tutti gli altri dovranno utilizzare il pulsante in basso per acquistare o aggiornare prima di poter seguire il resto del nostro tutorial.

Richiedi l'accordo prima che scompaia!

Utilizzo di Come creare tabelle prezzi dinamiche con Divi

Per il resto di questo post, supponiamo che tu abbia approfittato del nostro accordo del Black Friday o che tu sia già un membro a vita e abbia accesso alla pagina di destinazione della vendita del software del Black Friday

Dopo aver scaricato la nuova pagina di destinazione per la vendita del software dalla nostra area membri, puoi guardare il video qui sotto per vedere quanto è facile da configurare. Ti invitiamo inoltre a seguire questo tutorial per preparare il tuo sito per un'ulteriore personalizzazione.

In questo post sui casi d'uso, ti mostreremo come creare tabelle dei prezzi dinamiche con Divi e il plug-in gratuito Advanced Custom Fields. La creazione di tabelle dei prezzi dinamiche è ottima se hai un cliente che cambia spesso i prezzi degli abbonamenti e vuoi consentire loro di cambiarli da soli senza accedere a Divi. Questo ti aiuterà a garantire che non incasinino nulla sulla pagina stessa pur avendo la possibilità di modificare il prezzo, la descrizione e il livello di iscrizione di un determinato pacchetto.

Anteprima

Prima di approfondire, diamo una rapida occhiata al risultato finale.

Iniziamo!

Installa il plug-in per campi personalizzati avanzati

La prima cosa che devi fare è installare il plug-in Advanced Custom Fields sul tuo sito Web WordPress andando su Plugin> Aggiungi nuovo> Cerca il plug-in e installalo .

Crea nuovo gruppo di campi

Una volta attivato il plugin, puoi iniziare. Aggiungi un nuovo gruppo di campi.

Nome + Località

Dai un nome al tuo nuovo gruppo di campi. Tieni presente che entro la fine di questa parte del tutorial, avrai tre gruppi di campi (pari al numero di tabelle dei prezzi), quindi assicurati di nominarli correttamente. Modifica anche le impostazioni di posizione di questo gruppo di campi.

Aggiungi campo livello di iscrizione

È ora di iniziare ad aggiungere campi! Ne serviranno tre in totale. Aggiungi un campo per il livello di appartenenza utilizzando le seguenti impostazioni:

• Etichetta del campo: Livello di appartenenza 1
• Nome campo: membership_level_1
• Tipo di campo: Seleziona
• Scelte: aggiungi contenuto a scelta

Aggiungi campo descrizione abbonamento

Continua aggiungendo un campo per la descrizione dell'appartenenza.

• Etichetta campo: Descrizione iscrizione 1
• Nome campo: membership_description_1
• Tipo di campo: testo

Aggiungi campo prezzo

L'ultimo campo di cui avrai bisogno è un campo del prezzo.

• Etichetta campo: Prezzo 1
• Nome campo: prezzo_1
• Tipo di campo: testo

Duplica il gruppo di campi due volte e adatta il nome e i campi al numero della tabella dei prezzi

Un gruppo di campi equivale a una tabella dei prezzi sulla nostra pagina. Ora che abbiamo finito il primo, possiamo andare avanti e clonarlo due volte per assicurarci di avere abbastanza gruppi di campi per abbinare il numero di tabelle dei prezzi sulla nostra pagina.

Modifica il numero di tutti i campi all'interno del gruppo

Ciascuno dei campi dinamici che crei verrà mostrato nel Visual Builder. Per assicurarti di sapere a quali informazioni ti stai collegando, assegna un numero diverso ai gruppi di campi duplicati e ai loro campi.

Crea una nuova pagina utilizzando la pagina di destinazione della vendita del software Divi

Nella parte successiva di questo tutorial, aggiungeremo le tabelle dei prezzi dinamici alla nostra pagina di destinazione della vendita del software. Crea una nuova pagina utilizzando questo layout.

Aggiungi contenuto dinamico alla pagina

Torna al backend di questa pagina e aggiungi contenuto dinamico a ciascuna delle tabelle dei prezzi.

Aggiungi una nuova riga sotto la tabella dei prezzi sulla pagina

Struttura della colonna

Continua abilitando Visual Builder e aggiungendo una nuova riga proprio qui:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi un margine personalizzato.

• Margine superiore: 100 px
• Margine inferiore: 100 px

Aggiungi modulo CTA alla colonna 1

Collega il campo del titolo al contenuto dinamico del livello di appartenenza 1

Il primo modulo di cui avremo bisogno nella colonna 1 è un modulo di invito all'azione. Collega il campo del titolo al campo Livello di appartenenza 1 che hai creato nella parte precedente di questo tutorial.

Collega la casella dei contenuti alla descrizione dell'abbonamento 1 Contenuto dinamico

Allo stesso modo, collega la casella del contenuto a Descrizione abbonamento 1.

Colore di sfondo

Quindi, vai alle impostazioni dello sfondo e cambia il colore di sfondo del modulo CTA.

• Colore di sfondo: #ffffff

Immagine di sfondo

Aggiungi anche un'immagine di sfondo sottile. Sarai in grado di trovare la seguente immagine di sfondo nella tua libreria multimediale dopo aver caricato la pagina di destinazione della vendita del software:

• Immagine di sfondo: software-sale-13.png

Impostazioni testo

Continua andando alle impostazioni del testo e modificando l'orientamento del testo del modulo.

• Orientamento del testo: a sinistra

Impostazioni del testo del titolo

Per abbinare lo stile di design della pagina di destinazione, apporta alcune modifiche anche alle impostazioni del testo del titolo.

• Carattere del titolo: Rubik
• Peso del carattere del titolo: leggero
• Colore del testo del titolo: #4258ff
• Dimensione del testo del titolo: 40px
• Altezza della riga del titolo: 1,3 em

Impostazioni del corpo del testo

Lo stesso vale per le impostazioni del testo del corpo.

• Carattere del corpo: Rubik
• Peso del carattere del corpo: medio
• Colore del corpo del testo: rgba(0,0,0,0.34)
• Dimensione del testo del corpo: 15px
• Altezza della linea del corpo: 1,8 em

Spaziatura

Aggiungi un po' di imbottitura superiore in seguito.

• Imbottitura superiore: 60px

Frontiera

E aggiungi "8px" a ciascuno degli angoli superiori del modulo.

Scatola ombra

Ultimo ma non meno importante, aggiungeremo un'ombra sottile per creare profondità sulla pagina.

• Posizione verticale dell'ombra del riquadro: 50 px
• Forza sfocatura dell'ombra della scatola: 100 px
• Colore ombra: rgba (66,88,255,0.2)

Aggiungi modulo di testo alla colonna 1

Connetti la casella dei contenuti al contenuto dinamico del prezzo 1

Vai avanti e aggiungi un modulo di testo proprio sotto il modulo Call to Action nella colonna 1. Collega la casella del contenuto di questo modulo al contenuto dinamico Prezzo 1.

Colore di sfondo

Continua cambiando il colore di sfondo di questo modulo.

• Colore di sfondo: #ffffff

Impostazioni testo

Modifica anche le impostazioni del testo.

• Carattere del testo: Rubik
• Peso del carattere del testo: leggero
• Colore del testo: #4258ff
• Dimensione del testo: 70px
• Altezza riga di testo: 1em

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura inferiore: 60 px
• Imbottitura sinistra: 40px

Frontiera

Continua andando alle impostazioni del bordo e aggiungendo "8px" ad entrambi gli angoli in basso.

Scatola ombra

Ultimo ma non meno importante, dai anche a questo modulo di testo un'ombra di scatola.

• Posizione verticale dell'ombra del riquadro: 80 px
• Forza sfocatura dell'ombra della scatola: 100 px
• Colore ombra: rgba (66,88,255,0.2)

Trascina il modulo del pulsante nella colonna 1

L'ultimo modulo di cui avremo bisogno nella prima colonna è un modulo pulsante. Clona uno dei moduli pulsante che trovi nella riga precedente e posizionalo nella colonna 1.

Cambia spaziatura

Apri le impostazioni del modulo pulsanti e aggiungi un margine personalizzato.

• Margine superiore: 30px
• Margine inferiore: 50px

Clona tutti i moduli nella colonna 1 e posizionali nelle colonne rimanenti

Per risparmiare tempo, cloneremo due volte tutti e tre i moduli nella colonna 1 e posizioneremo i duplicati nelle colonne rimanenti della riga.

Modifica moduli nella colonna 2

Modulo CTA

Collega il campo del titolo al contenuto dinamico del livello di appartenenza 2

Avremo bisogno di modificare i duplicati, a partire dal Modulo CTA nella seconda colonna. Collega il campo del titolo al contenuto dinamico Livello 2 di appartenenza.

Collega la casella dei contenuti alla descrizione dell'abbonamento 2 Contenuto dinamico

Fai la stessa cosa per la casella del contenuto.

Aggiungi sfondo sfumato

Aggiungi uno sfondo sfumato al modulo successivo.

• Colore 1: #6959ff
• Colore 2: #c1bfff
• Direzione del gradiente: 15deg
• Posizione di partenza: 22%
• Posizione finale: 95%

Cambia il colore del testo del titolo

Cambia anche il colore del testo del titolo.

• Colore del testo del titolo: #ffffff

Cambia il colore del corpo del testo

Lo stesso vale per il colore del testo del corpo.

• Colore del corpo del testo: #ffffff

Cambia spaziatura

Per mettere in evidenza questa particolare tabella dei prezzi, giocheremo anche con i valori di spaziatura.

• Margine superiore: -50 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore: 100 px

Modulo di testo

Connetti la casella dei contenuti al contenuto dinamico del prezzo 2

Continua aprendo il modulo di testo nella colonna 2 e collega la casella del contenuto al contenuto dinamico Prezzo 2.

Cambia colore di sfondo

Successivamente cambia il colore di sfondo di questo modulo.

• Colore di sfondo: #6959ff

Cambia il colore del testo

E cambia il colore del testo in bianco.

• Colore del testo: #ffffff

Cambia spaziatura

Ultimo ma non meno importante, modifica i valori di riempimento personalizzato nelle impostazioni di spaziatura.

• Imbottitura inferiore: 120 px
• Imbottitura sinistra: 40px

Modifica moduli nella colonna 3

Modulo CTA

Collega il campo del titolo al contenuto dinamico di livello 3 di appartenenza

Dovremo cambiare anche i moduli nella colonna 3. Collega il campo del titolo al contenuto dinamico Livello 3 di appartenenza.

Collega la casella dei contenuti alla descrizione dell'abbonamento 3 Contenuto dinamico

Lo stesso vale per la casella del contenuto.

Aggiungi sfondo sfumato

Quindi, aggiungi uno sfondo sfumato al modulo.

• Colore 1: #c87cff
• Colore 2: #ffbcf8
• Direzione del gradiente: 18deg
• Posizione di partenza: 22%
• Posizione finale: 95%

Cambia il colore del testo del titolo

Cambia il colore del testo del titolo in bianco.

• Colore del testo del titolo: #ffffff

Cambia il colore del corpo del testo

Fai la stessa cosa per il colore del testo del corpo.

• Colore del corpo del testo: #ffffff

Modulo di testo

Connetti la casella dei contenuti al contenuto dinamico del prezzo 3

Continua aprendo il modulo di testo nella colonna 3 e modificando anche qui il contenuto dinamico.

Cambia colore di sfondo

Aggiungi successivamente un colore di sfondo diverso.

• Colore di sfondo: #c87cff

Cambia il colore del testo

Ultimo ma non meno importante, cambia il colore del testo in bianco e il gioco è fatto! Ora hai tre tabelle dei prezzi completamente dinamiche sulla tua pagina!

• Colore del testo: #ffffff

Pensieri finali

Questo caso d'uso fa parte del nostro Black Friday Deal in cui condividiamo 6 landing page GRATUITE in edizione limitata con i clienti del Black Friday e i membri a vita. Unendoti alla nostra community autorizzata in questi giorni e diventando un membro, otterrai:

• 25% DI SCONTO SU TUTTO
• Tutte le 6 landing page gratis
• Accesso ai nostri fantastici temi e plugin
• Premi bonus

Cogli l'opportunità e diventa un membro oggi!