Accedi a tutti i corsi

75 / 3 mesi

Accesso senza limiti a tutti i corsi online di imparaqui.it

Attiva abbonamento
oppure
👉 vedi altre opzioni di accesso disponibili

Stai per richiedere la pubblicazione del tuo corso su imparaqui.

Il team effettuerà un controllo qualitativo e verificherà che i contenuti siano in linea con l'offerta della piattaforma.

Se il corso viene approvato riceverai un messaggio di conferma via email e potrai subito condividerlo e iniziare ad accumulare le commissioni mensili.

Se non ricevi il messaggio di conferma entro 10 giorni lavorativi significa che il corso non è stato approvato.

Pubblica il tuo corso

Come inserire un modulo in un altro nel tema Divi

Tutorial completo su come inserire un modulo di Divi dentro un altro modulo. Molto utile in tantissimi casi! Per esempio: inserire un modulo di contatto nella descrizione di WooCommerce, inserire un modulo dentro le tab, gli accordion o le schede, e tanto altro!

Tutorial completo su come inserire un modulo di Divi dentro un altro modulo. Molto utile in tantissimi casi! Per esempio: inserire un modulo di contatto nella descrizione di WooCommerce, inserire un modulo dentro le tab, gli accordion o le schede, e tanto altro!

Introduzione

In questa guida gratuita di imparaqui.it vediamo insieme come si può inserire un modulo dentro l’altro nel tema Divi di Elegant Themes.

Durante il tutorial modificheremo il file functions.php del tema Divi e sarà quindi indispensabile che tu abbia installato e attivato un tema child Divi.

Se non hai un tema child attivo, ti consigliamo di leggere la nostra guida completa su come creare un tema child per Divi, in modo che ne potrai facilmente installarne e attivarne uno sul tuo sito.

Ringraziamo il sito inglese CreaWeb2B dal quale abbiamo preso spunto per realizzare questa guida gratuita

Indice dei contenuti

  • Esempi di utilizzo
  • Inserire il codice aggiuntivo nel functions.php
  • Sblocca il codice e copialo nel functions.php
  • Creare il modulo Divi che inseriremo in un altro
  • Inserire il modulo tramite shortcode
  • Conclusioni e Risorse

Esempi di utilizzo

Prima di cominciare il tutorial ti mostriamo alcuni esempi di come può essere sfruttato l’inserimento di un modulo in un altro modulo nel tema Divi.

Esempi pratici:

  • Inserire un modulo di contatto nella tab descrizione di WooCommerce
  • Inserire un blurb o un qualsiasi altro modulo di Divi dentro al modulo tab o al modulo accordion
  • Inserire qualsiasi modulo di Divi in posizioni in cui non sarebbe possibile: per esempio nei widget della sidebar

Questi sono solo alcuni esempi, ovviamente le possibilità sono infinite quando si può inserire qualsiasi modulo di Divi ovunque si voglia.

Bene, ora siamo pronti per iniziare!

Inserire un codice aggiuntivo nel functions.php

Il processo di questo tutorial si basa sull’utilizzo della libreria Divi e sull’implementazione di uno shortcode, che utilizzeremo per inserire il contenuto creato nella libreria, all’interno di qualsiasi altro modulo.

Come prima cosa, accediamo dalla bacheca di WordPress a Temi » Editor come mostrato nello screenshot qui sotto.

Controlliamo che sulla destra sia selezionato il nostro tema child e nel function.php di quest’ultimo inseriamo il codice riportato qui sotto e salviamo.

Se il vostro functions.php termina con il simbolo ?> dovrete copiare il codice esattamente prima di questo simbolo. Se non è presente questo simbolo copiate semplicemente il codice in fondo al file functions.php.

Siccome si tratta di un’operazione delicata, se non siete utenti esperti vi consigliamo di preparare una copia di backup del vostro sito prima di procedere e di avere a portata di mano la possibilità di accedere via ftp per riparare eventuali errori che potreste commettere durante la modifica del functions.php.

Sblocca il codice e copialo nel functions.php

Qui sotto trovi il codice da copiare nel tuo functions.php

Clicca qui per scaricare il codice php

Creare il modulo che andremo a inserire in un altro

Rechiamoci ora nella libreria di Divi andando dalla bacheca di WordPress su Divi » Libreria Divi e in cima, vicino a Layout, clicchiamo su “Add new” o “Aggiungi nuovo”.

Apparirà una finestra in cui ci viene richiesto di dare un nome al nostro modulo: inseriamo il nome e poco sotto, dove appare scritto “Tipo di layout”, selezioniamo “Modulo”. Poi clicchiamo su invia e vedremo apparire la schermata con il Divi Builder, come da screenshot qui sotto.

Nel nostro esempio inseriamo un modulo di contatto (voi potrete creare il modulo che desiderate). Questo sarà il modulo che andremo ad inserire all’interno di un altro.

Una volta finito di creare il nostro modulo possiamo salvare il tutto.

Ora, rimanendo sempre nella pagina del modulo che abbiamo appena creato all’interno della Libreria di Divi, andiamo a estrapolare dall’URL di navigazione l’ID che useremo per integrarlo in qualunque parte del sito desideriamo.

Nel nostro esempio l’ID è 144.

Selezioniamolo e copiamolo come si vede nell’immagine qui sotto. Quindi andiamo a cliccare su aggiorna per salvare.

Inserire il modulo tramite shortcode

Ora per inserire questo modulo in un altro nel nostro sito creato con Divi ci basterà usare uno shortcode con questa struttura:

[ showmodule id=”144″ ] (da inserire senza spazi tra il contenuto dello shortcode e le parentesi quadre)

Dove al posto di 144 andremo a inserire l’ID del nostro elemento creato in libreria.

Ora nel nostro esempio ti faremo vedere come inserire il nostro modulo di contatto all’interno di un modulo scheda di Divi.

Creiamo una nuova pagina e inseriamo il modulo scheda.

All’interno di questa scheda, diamo un titolo e inseriamo il nostro shortcode nella casella Contenuti selezionando la modalità testo, per richiamare il modulo precedentemente creato.

Salviamo e così facendo, otterremo un modulo contatti all’interno del modulo Scheda.

Conclusione

Questa operazione può essere eseguita con qualsiasi modulo o con qualsiasi contenuto creato nella libreria di Divi, immagina quante implicazioni ci sono… praticamente le opportunità di utilizzo sono infinite!

Se non riesci a seguire qualche passaggio scrivi nei commenti in fondo a questo post e non dimenticare di guardare gli altri tutorial per il tema Divi.

Per restare aggiornato/a con le nostre prossime risorse ricordati di unirti alla community!

CONDIVIDI
Marco Melis
Marco Melis

Appassionato di Divi e di Elementor, vivo nel cuore della Sardegna e ho un simpatico cane che si chiama Lillo :) Mi piace creare tutorial per imparaqui.it ogni volta che ho l'ispirazione!

4 commenti

  1. Salve,
    ho inserito nella sezione Divi Opzioni Tema nella finestra CSS aggiuntivo, il codice da voi creato.
    Ma mi da degli errori segnati in rosso. vorrei inviarvi uno screenshot, ma non so come inviarvelo.
    Io vorrei inserire il modulo Social e un modulo pulsante in un modulo intestazione, oltre questo metodo da voi suggerito c’è un altro modo?
    Saluti,
    Luca Gianni

  2. Buongiorno,
    ho seguito passo passo questa guida, e il modulo si visualizza (come potrà vedere poi dal sito web), l’unica cosa è che non funziona 🙁 , nel momento in cui si inseriscono i dati richiesti e si clicca sul pulsante invia, il modulo sparisce e la mail non viene inviata.
    Inutile dire che ho fatto gli opportuni controlli, le mail del sito vengono inviate, dalla pagina del modulo contatto viene inviata, ma da quello creato in home (seguendo la guida) non invia mail e sparisce.

    • Buongiorno Tonino, abbiamo appena effettuato un nuovo test e tutto funziona correttamente dal nostro lato. Dal momento che il modulo si visualizza correttamente dovresti ricontrollare le impostazioni di invio dei messaggi nel modulo stesso (verificando che tutti i campi siano correttamente configurati). Se il problema non si risolve ti converrà contattare l’assistenza di Elegant Themes via chat. Un saluto dal team di Imparaqui!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Sblocca l'accesso a centinaia di lezioni online

Accedi immediatamente a tutti i corsi e alla community di imparaqui, senza limiti.