Come inserire un modulo in un altro nel tema Divi

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.

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…

Vedi demo con un esempio pratico di questo tutorial.

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 alrtro 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

codice da copiare nel file functions.php del tuo tema child

// codice per richiamare gli elementi della libreria di Divi tramite shortcode

  function showmodule_shortcode($moduleid) {
    extract(shortcode_atts(array('id' =>'*'),$moduleid));   
    return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}
add_shortcode('showmodule', 'showmodule_shortcode');

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: insereimo 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 Librera 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:

shortcode per mostrare il modulo attraverso l'ID della libreria Divi

[showmodule id="144"]

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 notre prossime risorse ricordati di unirti alla community!

Passa alla licenza lifetime di Divi!

Non pensare più al rinnovo annuale della tua licenza di Divi, passa alla licenza lifetime sfruttando lo sconto del 20% che ti mettiamo a disposizione!

Passa alla Lifetime con 20% di sconto