Come creare un modulo Persona con Bio su Click

Pubblicato: 2017-08-16

In questo post, ti mostreremo come creare un modulo persona con bio al clic. Non appena fai clic sul modulo di un'altra persona nella stessa riga, il testo all'interno della biografia cambierà. In qualsiasi momento, puoi chiudere la biografia facendo nuovamente clic sul modulo persona.

Puoi usarlo per, ad esempio, mostrare alcune informazioni aggiuntive sui tuoi dipendenti sul sito web della tua azienda. Il concetto ti aiuta a fare due cose: interagire con i tuoi visitatori e salvare il posto sul tuo sito web. L'unica volta che la biografia verrà effettivamente mostrata è quando un visitatore mostra interesse e decide di fare clic sugli elementi all'interno del Modulo Persona.

Modulo persona risultato con biografia su clic

Prima di immergerci nei diversi passaggi che devi seguire per ottenere un Modulo Persona con biografia al clic, diamo un'occhiata al risultato finale sul desktop:

modulo persona con bio

e il risultato finale su cellulare e tablet:

modulo persona con bio

Con il cellulare, se una biografia viene aperta, le altre due verranno automaticamente chiuse. Avrai sempre una sola sezione bio aperta, anche se ogni biografia ha la sua sezione.

Modulo Persona con biografia su Click for Desktop

Iscriviti al nostro canale Youtube

Per far funzionare tutto senza problemi, dovremo creare due versioni: una per desktop e una per tablet e telefoni. Ognuna di queste versioni avrà bisogno del proprio codice jQuery. Inizieremo con la versione desktop e nella parte successiva del post ti mostreremo come creare la versione per tablet e telefoni.

Aggiungi la sezione standard della persona con una riga a tre colonne

La prima cosa che dovremo fare è aggiungere una sezione che contenga i Moduli Persona.

Apri una nuova pagina (o la pagina in cui desideri aggiungere il Modulo Persona con biografia) e aggiungi una nuova sezione standard. All'interno di quella sezione, posiziona una riga di tre colonne. Certo, potresti usare anche un altro numero di colonne, ma il codice che useremo prende in considerazione 3 Moduli Persona. Se vuoi creare la stessa cosa per altri tipi di righe, dovrai apportare alcune modifiche al codice jQuery che forniremo più avanti in questo post.

Impostazioni riga

Apri le impostazioni della riga e nella scheda dei contenuti aggiungi "#e5e5e5" come colore di sfondo di ogni colonna.

person module with bio

Quindi, passa alla scheda Avanzate e inserisci la seguente ombra di casella nell'Elemento principale di ciascuna delle tre righe:

Aggiungi un modulo Persona

La prossima cosa che devi fare è aggiungere un Modulo Persona alla prima colonna della riga.

Scheda Contenuto

All'interno della scheda Contenuto di quel modulo, digita le informazioni e i collegamenti ai social media e carica l'immagine.

Scheda Avanzate

Non apporteremo alcuna modifica alla scheda Design di questo modulo (sentiti libero di apportare modifiche all'aspetto in seguito). Invece, andremo subito alla scheda Avanzate dove aggiungeremo la stessa ombra della scatola che abbiamo aggiunto alle colonne della riga, all'immagine del membro.

Modulo Clona La Persona

La prossima cosa che devi fare è clonare due volte il Modulo Persona e posizionarlo nelle altre due colonne. Dovremo tornare in questa sezione per aggiungere le diverse classi CSS. Ma prima di farlo, aggiungeremo prima la sezione bio.

Aggiungi la sezione Bio Standard con una riga a larghezza intera

Aggiungi un'altra sezione standard proprio sotto la sezione precedente che hai creato. In questa sezione, dovremo aggiungere i diversi moduli di testo che sono collegati ai vari Moduli Persona. Apri le impostazioni della sezione e usa il colore '#a0a0a0' come colore di sfondo.

Aggiungi due moduli di testo

A seconda di quanti moduli di testo vuoi che abbia la biografia del modulo persona, puoi aggiungere moduli di testo. In questo caso, aggiungeremo due moduli di testo per modulo persona.

Primo modulo di testo

Digita del testo nel primo modulo di testo e vai alla scheda Design. All'interno della scheda Progettazione, apporta le seguenti modifiche alla sottocategoria Testo:

  • Orientamento del testo: al centro
  • Dimensione carattere del testo: 31
  • Colore del testo: #FFFFFF
  • Altezza riga di testo: 1,7 em

Secondo modulo di testo

Aggiungi un altro modulo di testo e apporta le seguenti modifiche alla sottocategoria Testo della scheda Progettazione:

  • Orientamento del testo: al centro
  • Dimensione carattere del testo: 16
  • Colore del testo: #FFFFFF
  • Altezza riga di testo: 1,7 em

Clona ogni modulo due volte

Questi due moduli di testo saranno gli stessi per ciascuno dei bios. Ecco perché dovresti clonare ciascuno dei moduli di testo due volte. Ecco come dovrebbe apparire la struttura finale nel back-end della pagina:

Le diverse classi CSS

Assegna classi CSS ai moduli Persona

Vai alla scheda Avanzate di ciascuno dei Moduli Persona e assegna le seguenti classi CSS:

  • Modulo in prima persona: persona1
  • Modulo seconda persona: persona2
  • Modulo Terza Persona: persona3

Assegna la classe CSS alla sezione

Apri le impostazioni della sezione in cui si trova il tuo bios. Vai alla scheda Avanzate e scrivi "section_1" nella classe CSS.

Assegna classi CSS ai moduli di testo

Ora aggiungi le classi CSS ai moduli di testo che hai creato nel modo seguente:

  • Collegato al primo Modulo Persona: div_text_1
  • Collegato al secondo Modulo Persona: div_text_2
  • Collegato al Modulo Terza Persona: div_text_3

Aggiungi il codice CSS di visualizzazione alla sezione e a tutti i moduli di testo

Il prossimo passo che dovrai fare è andare alla scheda Avanzate della sezione e tutti i moduli di testo. Quindi, aggiungi la seguente riga di codice CSS all'elemento principale della sezione: 

display: none;

Disattiva su telefono e tablet

Ora disabilita entrambe le sezioni che hai creato per dispositivi mobili e tablet.

Modulo persona con biografia su clic per tablet e telefono

Ora che ti abbiamo mostrato come creare il modulo persona con biografia su clic per desktop, ti mostreremo come farlo anche per tablet e telefono. Abbiamo già disabilitato le sezioni precedenti per telefono e tablet. Ecco come appare il layout del desktop sul backend:

E questa è la struttura di cui abbiamo bisogno per la versione tablet e telefono.

Aggiungi sei nuove sezioni

Quindi, vai avanti e aggiungi sei nuove sezioni alla pagina. Quindi, clona i moduli persona e inseriscili singolarmente in una sezione. Assicurati di lasciare una sezione in mezzo, è lì che arriverà la biografia.

Quindi, aggiungi clonare i moduli di testo e posizionali nella sezione sotto ogni sezione che contiene un modulo Persona. La biografia, per impostazione predefinita, verrà mostrata sotto il modulo Persona su dispositivi mobili e tablet.

.

Le diverse classi e ID CSS

Dopo aver posizionato tutte le sezioni e i moduli, è il momento di iniziare ad aggiungere le classi CSS.

Assegna classi CSS ai moduli Persona

Inizia aprendo ogni modulo persona individualmente e modificando le classi CSS nella scheda Avanzate in:

  • Modulo in prima persona: mobile_person1
  • Modulo seconda persona: mobile_person2
  • Modulo Terza Persona: mobile_person3

Assegna classi CSS alle sezioni

Quindi, apri tutte le diverse sezioni bio e assegna quanto segue a ciascuna di esse:

  • Prima Sezione Bio: section_mobile_1
  • Seconda Sezione Bio: secton_mobile_2
  • Terza Sezione Bio: section_mobile_3

Assegna classi CSS ai moduli di testo

Le ultime classi CSS a cui dovrai dare un posto sono quelle collegate ai Moduli di Testo nelle diverse sezioni bio. Secondo la sezione bio, assegna le seguenti classi CSS ai moduli di testo all'interno di quella sezione:

  • Collegato al modulo prima persona: div_mobile_text_1
  • Collegato al secondo Modulo Persona: div_mobile_text_2
  • Collegato al Modulo Terza Persona: div_mobile_text_3

Aggiungi il codice CSS di visualizzazione alle sezioni

Andando avanti, dovrai rendere invisibili tutte le sezioni bio. Vai alla scheda Avanzate di ciascuna delle sezioni e copia e incolla la seguente riga di codice CSS nell'elemento principale: 

display: none;

Assicurati di rimuovere questa riga di codice CSS nell'elemento principale di ciascun modulo di testo. Nella versione desktop, dovevamo renderli invisibili, ma non è necessario per dispositivi mobili e tablet.

Disabilita sul desktop

Ora, dopo aver apportato tutte le modifiche, resta una cosa da fare prima di aggiungere il codice: disabilitare le tre sezioni bio sul desktop. Vai avanti e apri ciascuna delle sezioni e vai alla scheda Avanzate. All'interno della sottocategoria Visibilità della scheda Avanzate, disabilitare le sezioni sul desktop.

Aggiungi il codice jQuery

Ora che abbiamo apportato tutte le modifiche pratiche al Divi builder, è il momento di passare all'ultimo passaggio; aggiungendo il codice jQuery.

Aggiungi un nuovo modulo di codice

Il modo più semplice per aggiungere il codice alla tua pagina è tramite Code Module. Probabilmente utilizzerai questo modulo persona con biografia facendo clic su una sola pagina. Utilizzando un modulo di codice, ti assicurerai che il codice venga caricato solo quando qualcuno è su quella pagina. Copia e incolla i due codici separati di jQuery nello stesso modulo di codice.

Inserisci il codice jQuery del desktop nel tuo modulo di codice

Copia e incolla le seguenti righe di codice CSS nel tuo modulo di codice per far funzionare la biografia del desktop sulla versione clic: 

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Inserisci il codice jQuery per tablet e telefono nel tuo modulo di codice

E le seguenti righe di codice per far funzionare la versione per tablet e telefono: 

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Risultato finale

Diamo un'ultima occhiata al risultato dopo aver seguito tutti i passaggi di questo post. Ecco come apparirà sul desktop:

modulo persona con bio

E su cellulare e tablet:

modulo persona con bio

Avvolgendo

In questo post, ti abbiamo mostrato come creare un modulo persona con biografia che si nasconde e mostra al clic. Applicando questo metodo, sarai in grado di salvare una parte del tuo sito web e mostrarla ai tuoi visitatori solo dopo che hanno mostrato interesse. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!