Come inserire moduli Divi o righe all'interno di altri moduli Divi (senza plug-in)
Pubblicato: 2020-12-31Se sei un utente Divi da un po', il pensiero di inserire un Modulo Divi (o Riga) all'interno di un altro Modulo potrebbe esserti passato per la mente. Nella maggior parte dei casi, se sai come usare Divi con competenza, questo genere di cose non è realmente necessario. I moduli Divi sono già potenti elementi ricchi di funzionalità e impostazioni di progettazione integrate. Tuttavia, a volte sarebbe bello migliorare queste funzionalità progettando due moduli utilizzando Divi e inserendone uno nell'altro. Un buon esempio di ciò potrebbe essere l'inserimento di un modulo (come un modulo di contatto) in un modulo di attivazione/disattivazione in modo che il modulo venga visualizzato quando si fa clic sull'interruttore.
In questo tutorial, condivideremo come inserire moduli Divi o righe in un altro modulo Divi. Per fare ciò è necessario aggiungere alcuni piccoli frammenti di JQuery. Una volta che il codice è a posto, possiamo usare Divi Builder per aggiungere le classi CSS appropriate per indirizzare gli elementi che vogliamo inserire/spostare e il modulo in cui vogliamo inserirli.
Iniziamo!
Sbirciata
Ecco una rapida occhiata agli esempi che creeremo in questo tutorial.
Un modulo di contatto all'interno di un modulo di commutazione
Un modulo Toggle e un modulo Button all'interno di un modulo Blurb (colonna destra)
Una riga Divi all'interno di un modulo Toggle
Scarica il layout GRATUITAMENTE
Per mettere le mani sul layout di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Iscriviti al nostro canale Youtube
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Cose da tenere a mente
Per questo tutorial, il processo di stile di tutti i moduli che desideri utilizzare in questo processo può ancora essere eseguito visivamente utilizzando le impostazioni integrate di Divi Builder, quindi lasceremo quella parte a te. Ci concentreremo maggiormente su come applicare le classi CSS e HTML corrette a ciascun elemento Divi per inserire il modulo/i/le righe all'interno di un altro modulo.
Tieni presente che saremo in grado di vedere il risultato finale solo su una pagina live, non durante la modifica dal Divi Builder visivo. In altre parole, possiamo progettare i moduli con Divi ma rimarranno separati nel builder finché non visualizzerai la versione live della pagina.
Puoi inserire solo moduli o righe all'interno di un modulo che ha la capacità di aggiungere testo/html.
Inoltre, come spiegheremo più avanti, ci sono alcuni limiti al numero di istanze (moduli o righe che vengono inseriti in un altro modulo) che puoi avere all'interno di una colonna o di una sezione. Quando si inseriscono moduli in un altro modulo, si è limitati a un modulo di "destinazione" (il modulo conterrà i moduli che si desidera inserire) per colonna. E, quando si inseriscono righe in un altro modulo, si è limitati a un modulo di "destinazione" per sezione. Sebbene questa sia una limitazione in un certo senso, ti dà la possibilità di avere più istanze sulla tua pagina quando necessario.
Parte 1: Come inserire i moduli Divi in un altro modulo
Per la prima parte di questo tutorial, ti mostreremo come inserire i moduli Divi in un altro modulo. Innanzitutto, ti mostreremo come aggiungere un modulo di contatto all'interno di un modulo di commutazione. Quindi, ti mostreremo come aggiungere un modulo Toggle e un modulo pulsanti all'interno di un modulo Blurb.
Esempio 1: Inserimento di un modulo di contatto all'interno di un modulo Toggle
Aggiungi nuova riga
Per iniziare, aggiungi una nuova riga a una colonna alla sezione.
Aggiungi modulo di commutazione (il modulo di destinazione)
All'interno della colonna, aggiungi un modulo di attivazione/disattivazione.
Per questo esempio, vogliamo inserire un modulo all'interno di questo modulo Toggle che possiamo chiamare il nostro modulo di destinazione. Tecnicamente, la destinazione effettiva sarà all'interno del contenuto del corpo del modulo Toggle (dove è possibile aggiungere testo/HTML). Per designare la posizione di destinazione, dobbiamo inserire un nuovo div con una classe CSS necessaria che servirà come posizione di destinazione per il nostro modulo portatile (il modulo che vogliamo inserire).
Nella scheda contenuto delle impostazioni di commutazione, aggiungi il seguente codice HTML al corpo. Assicurati di fare clic sulla scheda Testo prima di inserire HTML.
<div class="divi-module-destination"></div>
Aggiungi il modulo modulo di contatto (il modulo portatile)
Successivamente, dobbiamo aggiungere il modulo che vogliamo inserire nel modulo Toggle. In questo esempio, inseriremo un modulo di contratto nel corpo del modulo di commutazione. È importante aggiungere il nuovo modulo “portatile” all'interno della stessa colonna del modulo di destinazione.
Per fare ciò, aggiungi un nuovo modulo di modulo di contatto direttamente sotto il modulo di attivazione/disattivazione.
Fare clic sulla scheda Avanzate sotto le impostazioni del Modulo di contatto (di qualsiasi modulo che si desidera inserire) e aggiungere la seguente Classe CSS:
- Classe CSS: divi-portable-module
Aggiungi classe di colonna
Quindi dobbiamo aggiungere una classe personalizzata alla colonna che contiene entrambi i moduli. Apri le impostazioni della colonna e aggiungi la seguente classe CSS:
- Classe CSS: colonna-genitore
Aggiungi il codice
Il codice necessario per farlo funzionare è piuttosto breve e semplice. Fondamentalmente, vogliamo usare JQuery per trovare ogni modulo con la classe "divi-portable-module" con la colonna genitore (quella con la classe "colonna-genitore") e aggiungere ciascuno di quei moduli all'interno del div con la classe " divi-modulo-destinazione”.
Il codice include anche uno snippet per inserire un modulo pulsante in un altro modulo e uno snippet per inserire righe Divi in un modulo.
Per aggiungere il codice, aggiungi un nuovo modulo di codice sotto il modulo del modulo di contatto.
Prima di incollare il codice necessario, aggiungi i tag di script necessari per incorporare JS in HTML all'interno della casella Codice:
Quindi incolla il seguente codice tra i tag dello script :
(function ($) {
$(document).ready(function () {
// Option #1: Move Divi Module(s) into a Module
// Limit: One Instance per Column
// Use following code if you want to move
// a module inside another module. Each column with the
// class 'parent-column' will append any module(s)
// with the class 'divi-portable-module' to the div
// with the class 'divi-module-destination'.
// Only one instance of 'divi-module-destination' should
// be added per column.
$('.divi-portable-module').each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Buttons: Insert Button Module(s) into a Module
// Adding a custom CSS class to a button module
// is applied to the 'a' tag which is a child element
// of the module wrapper. This code makes sure to append
// the entire button module wrapper (the parent element)
// as well. This functionality is the same as option #3 above.
// Siimply use the class 'divi-portable-button' on a button module
// instead of 'divi-portable-module'.
$('.divi-portable-button').parent().each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Option #2: Move Divi Row(s) into a Module
// Limit: One Instance per Section
// Use the following code if you want to move
// a row inside a module on more than one section
// of a page. Each section with the
// class 'parent-section' will append any row(s)
// with the class 'divi-portable-row' to the div
// with the class 'divi-row-destination'.
// Only one instance of 'divi-row-destination' should
// be added per section.
$('.divi-portable-row').each(function () {
$(this).closest('.parent-section').find('.divi-row-destination').append($(this));
});
});
})(jQuery);
Comprendere la funzionalità
All'interno di Divi Builder sul backend, i moduli rimarranno separati. Tuttavia, se visualizzi i risultati sulla pagina live sul frontend, vedrai che il modulo di contatto è stato inserito nel modulo Toggle.
Se controlli il codice sulla pagina live, puoi vedere che il Modulo Modulo di contatto è stato inserito correttamente all'interno del div con la classe "divi-modulo-destinazione".
Disegnare i moduli
Come accennato in precedenza, i moduli rimarranno separati nel backend Divi Builder. Tuttavia, gli stili aggiunti a ciascuno di essi verranno comunque applicati. Quindi sentiti libero di aggiungere aggiornare gli stili sia del modulo di destinazione che del modulo portatile utilizzando Divi Builder.
NOTA: In alcuni casi, gli stili del modulo di destinazione (ora un modulo padre) possono essere applicati al modulo inserito. In tal caso, dovresti essere in grado di sovrascrivere quello stile aggiornando le impostazioni del modulo inserito.
Il risultato
Ecco il risultato finale durante la visualizzazione della pagina live.
Esempio 2: inserimento di un modulo Toggle all'interno di un modulo Blurb
Per il nostro prossimo esempio, inseriremo un modulo Toggle all'interno di un modulo Blurb. Il processo è lo stesso di prima. Il frammento di codice limita l'utilizzo di un modulo di destinazione per colonna. In altre parole, puoi avere più moduli portabili con la classe "divi-portable-module" che possono essere aggiunti al modulo di destinazione, ma puoi avere solo un'istanza del div con la classe "divi-module-destination" per colonna.
Per dimostrarlo, ripetiamo lo stesso processo con un altro gruppo di moduli in un'altra colonna della stessa riga.
Aggiungi nuova colonna alla riga
Innanzitutto, aggiungi una nuova colonna alla riga esistente.
Aggiungi classe di colonna
Assegna alla nuova colonna la seguente classe CSS come abbiamo fatto nella prima colonna:
- Classe CSS: colonna-genitore
Aggiungi modulo Blurb (il modulo di destinazione)
All'interno della nuova colonna, aggiungi un modulo blurb che fungerà da nostro modulo di destinazione.
All'interno del corpo del blurb, incolla il seguente codice HTML che include lo stesso div con la classe "divi-module-destination" in cui desideri inserire i moduli portatili (in questo caso sotto il testo del corpo fittizio):
<div class="divi-module-destination"></div>
Aggiungi modulo di commutazione (modulo portatile)
Poiché vogliamo aggiungere un modulo di attivazione/disattivazione alla descrizione, crea un nuovo modulo di attivazione nella stessa colonna della descrizione.
Quindi aggiungi la seguente classe CSS al modulo Toggle per designarlo come il modulo che vogliamo spostare/inserire nel blurb:
- Classe CSS: divi-portable-module
Risultato
Ora controlla la pagina live per vedere il risultato. L'interruttore ora risiederà all'interno del modulo blurb.
Esempio 3: inserimento di un modulo pulsanti all'interno di un modulo Blurb
Per questo prossimo esempio, inseriremo un modulo pulsante nello stesso modulo blurb del nostro esempio precedente. Normalmente, per qualsiasi altro modulo, ripeteremmo lo stesso processo per aggiungere un nuovo modulo portatile al blurb. Ma, poiché il modulo del pulsante è costruito in modo leggermente diverso sul backend, è necessario aggiungere una classe diversa al modulo del pulsante.
Aggiungi modulo pulsante (modulo portatile n. 2)
Per fare ciò, aggiungi un nuovo modulo pulsante sotto il modulo di attivazione/disattivazione già inserito nel blurb.
Quindi, aggiungi la seguente classe CSS al modulo pulsante:
- Classe CSS: divi-portable-button
Il risultato
Ora controlla il risultato sulla pagina live. Il modulo Blurb ora contiene il modulo interruttore e il modulo pulsanti.
Ed ecco lo snippet di codice corrispondente utilizzato per inserire il modulo pulsante all'interno del modulo con il div "destinazione". La differenza principale con questo frammento di codice è che stiamo prendendo di mira l'elemento genitore (il div wrapper del pulsante dietro le quinte) della classe del pulsante "divi-portable-button".
Parte 2: Come inserire righe Divi in un modulo
Se si desidera inserire un'intera riga (o righe) all'interno di un modulo, il processo è molto simile all'inserimento di un modulo in un altro modulo. Dobbiamo aggiungere la classe "parent-section" alla sezione contenente il modulo di destinazione e le righe portabili che vogliamo inserire. Dobbiamo aggiungere il div con la classe "divi-row-destination" al modulo di destinazione. E dobbiamo aggiungere la classe "divi-portable-row" alle righe che vogliamo inserire nel modulo di destinazione.
Ecco come farlo.
Aggiungi sezione
Innanzitutto, aggiungi una nuova sezione normale alla pagina.
Nella scheda Avanzate delle impostazioni della sezione, aggiungi la seguente Classe CSS:
- Classe CSS: sezione genitore
Aggiungi riga per il modulo di destinazione
Aggiungi una nuova riga a una colonna per contenere il modulo di destinazione.
Add Toggle Module (il modulo di destinazione riga)
Per questo esempio, inseriremo una riga all'interno di un modulo Toggle. Pertanto, aggiungi un nuovo modulo di commutazione alla riga.
Poiché il modulo Toggle è il nostro modulo di destinazione, apri le impostazioni per l'interruttore e aggiungi il seguente HTML al contenuto del corpo:
<div class="divi-row-destination"></div>
Crea riga portatile
Ora che il modulo di destinazione è a posto, aggiungi una nuova riga sotto la riga precedente. Questo servirà come riga portatile che inseriremo nel modulo Toggle.
Riempi riga con contenuto
A questo punto, puoi riempire la riga con qualsiasi contenuto/modulo che desideri utilizzando Divi Builder. Tieni presente che tutto all'interno della riga verrà eventualmente inserito nel modulo di commutazione poiché risiede all'interno della riga.
Aggiungi classe alla riga
Quindi apri le impostazioni della riga e designala come riga che desideri inserire nel modulo Toggle assegnandole la seguente Classe CSS:
- Classe CSS: divi-portable-row
Come funziona
Come promemoria, la riga rimarrà separata dal modulo durante la modifica del layout utilizzando Divi Builder sul backend. Ma la funzionalità è in atto per inserire la riga all'interno del modulo Toggle.
Il risultato
Per vedere il risultato, controlla la pagina live e apri il modulo di attivazione/disattivazione. Ora contiene l'intera riga.
Ed ecco lo snippet di codice corrispondente che lo rende possibile. Notare le classi corrispondenti in uso.
Inserimento di più righe all'interno del modulo
Finché mantieni un'istanza del modulo di destinazione (cioè il div con la classe "divi-row-destination") per sezione, puoi inserire più righe a quella destinazione semplicemente assegnandogli la stessa classe "divi-portable-row ”.
Ad esempio, potresti aggiungere un'altra riga con un modulo galleria sopra la riga con le voci di menu create in precedenza. Quindi assegna alla riga la stessa classe "divi-portable-row"
Entrambe le righe con la classe "divi-portable-row" verranno inserite nel modulo Toggle.
Utilizzo di un plug-in/codice breve
Se stai cercando un plug-in che faccia qualcosa di simile e offra maggiore flessibilità o opzioni, puoi controllare il plug-in Shortcode per Divi dal nostro marketplace che ti consente di incorporare qualsiasi layout Divi nella tua pagina utilizzando uno shortcode. Una volta installato, il plugin genererà uno shortcode incorporabile per ogni layout che hai salvato nella tua libreria Divi.
Pensieri finali
Nella maggior parte dei casi, non dovrebbe essere necessario inserire moduli o righe in altri moduli a meno che non ci sia un'esigenza speciale. Di solito, puoi ottenere il layout/design di cui hai bisogno senza dover fare questo tipo di cose. Tuttavia, per quelli di voi che cercano un modo semplice per farlo senza dover ricorrere a un plug-in, si spera che questa soluzione torni utile.
Inoltre, pensa a tutte le possibili applicazioni!
Non vedo l'ora di sentirti nei commenti.
Saluti!