Cum să creați un modul de persoană cu Bio pe clic

În această postare, vă vom arăta cum să creați un modul persoană cu bio pe clic. De îndată ce faceți clic pe modulul altei persoane din același rând, textul din bio se va schimba. În orice moment, puteți închide biografia făcând clic din nou pe modulul persoană.

Puteți utiliza acest lucru pentru a afișa, de exemplu, câteva informații suplimentare despre angajații dvs. pe site-ul companiei dvs. Conceptul vă ajută să faceți două lucruri: să interacționați cu vizitatorii dvs. și să salvați locul pe site-ul dvs. web. Singura dată când biografia va fi afișată de fapt este odată ce un vizitator arată interes și decide să facă clic pe elementele din modulul persoană.

Modul Persoană Rezultat cu Bio pe Click

Înainte de a ne arunca cu capul în diferiții pași pe care trebuie să-i urmați pentru a obține un modul de persoană cu biografie pe clic, să aruncăm o privire asupra rezultatului final pe desktop:

și rezultatul final pe mobil și tabletă:

Cu dispozitivul mobil, dacă o biografie se deschide, celelalte două biografii vor fi închise automat. Veți avea întotdeauna doar o singură secțiune bio deschisă, deși fiecare biografie are propria secțiune.

Modulul persoană cu biografie pe clic pentru desktop

Abonați-vă la canalul nostru Youtube

Pentru ca totul să funcționeze fără probleme, va trebui să realizăm două versiuni: una pentru desktop și una pentru tablete și telefoane. Fiecare dintre aceste versiuni va avea nevoie de propriul cod jQuery. Vom începe cu versiunea desktop și în următoarea parte a postului vă vom arăta cum să creați versiunea pentru tablete și telefoane.

Adăugați secțiunea standard a persoanei cu un rând cu trei coloane

Primul lucru pe care trebuie să-l facem este să adăugăm o secțiune care conține modulele de persoană.

Deschideți o pagină nouă (sau pagina în care doriți să adăugați modulul persoană cu biografie) și adăugați o nouă secțiune standard. În secțiunea respectivă, plasați un rând de trei coloane. Desigur, ați putea utiliza și un alt număr de coloane, dar codul pe care îl vom folosi ține cont de 3 module de persoană. Dacă doriți să creați același lucru pentru alte tipuri de rânduri, va trebui să faceți câteva modificări la codul jQuery pe care le vom furniza mai târziu în această postare.

Setări rând

Deschideți setările rândului și în fila conținut, adăugați „# e5e5e5” ca culoare de fundal a fiecărei coloane.

Apoi, treceți la fila Advanced și introduceți următoarea umbră a casetei în Elementul principal al fiecăruia dintre cele trei rânduri:

Adăugați un modul persoană

Următorul lucru pe care trebuie să-l faceți este să adăugați un modul de persoană la prima coloană a rândului.

Fila Conținut

În fila Conținut a acelui modul, tastați legăturile de informații și social media și încărcați imaginea.

Filă avansată

Nu vom face modificări la fila Proiectare a acestui modul (nu ezitați să faceți modificări după aspect). În schimb, mergem imediat la fila Advanced, unde vom adăuga aceeași umbră de casetă pe care am adăugat-o în coloanele rândului, în imaginea membru.

Clonați modulul persoană

Următorul lucru pe care va trebui să-l faceți este să clonați modulul persoană de două ori și să-l plasați în celelalte două coloane. Va trebui să revenim la această secțiune pentru a adăuga diferitele clase CSS. Dar, înainte de a face acest lucru, vom adăuga mai întâi secțiunea bio.

Adăugați secțiunea Bio Standard cu un rând de lățime completă

Adăugați o altă secțiune standard chiar sub secțiunea anterioară pe care ați creat-o. În această secțiune, va trebui să adăugăm diferitele module de text care sunt legate de diferitele module de persoană. Deschideți setările secțiunii și utilizați culoarea „# a0a0a0” ca culoare de fundal.

Adăugați două module de text

În funcție de câte module de text doriți să aibă biografia modulului persoană, puteți adăuga module de text. În acest caz, vom adăuga două module de text pentru fiecare persoană.

Primul modul de text

Tastați un text în primul modul de text și accesați fila Proiectare. În fila Proiectare, efectuați următoarele modificări la subcategoria Text:

• Orientare text: centru
• Dimensiunea fontului textului: 31
• Culoarea textului: #FFFFFF
• Înălțimea liniei textului: 1.7em

Al doilea modul de text

Adăugați un alt modul de text și efectuați următoarele modificări la subcategoria Text a filei Design:

• Orientare text: centru
• Dimensiunea fontului textului: 16
• Culoarea textului: #FFFFFF
• Înălțimea liniei textului: 1.7em

Clonați fiecare modul de două ori

Aceste două module de text vor fi aceleași pentru fiecare dintre bios. De aceea ar trebui să clonați fiecare dintre modulele de text de două ori. Așa ar trebui să arate structura finală în partea din spate a paginii:

Diferitele clase CSS

Atribuiți clase CSS modulelor Person

Accesați fila Advanced a fiecăruia dintre modulele de persoană și atribuiți următoarele clase CSS:

• Modul Prima persoană: person1
• Modulul a doua persoană: person2
• Modulul a treia persoană: person3

Atribuiți clasa CSS secțiunii

Deschideți setările secțiunii în care sunt plasate biografiile dvs. Accesați fila Advanced și scrieți „section_1” în clasa CSS.

Atribuiți clase CSS modulelor de text

Acum, adăugați clasele CSS la modulele de text pe care le-ați creat în felul următor:

• Conectat la modulul pentru prima persoană: div_text_1
• Legat de modulul pentru a doua persoană: div_text_2
• Legat de modulul pentru a treia persoană: div_text_3

Adăugați Afișați codul CSS în secțiunea și toate modulele de text

Următorul pas pe care trebuie să-l faceți este să accesați fila Advanced din secțiune și toate modulele de text. Apoi, adăugați următoarea linie de cod CSS la Elementul principal al secțiunii:

display: none;

Dezactivați pe telefon și tabletă

Acum, dezactivați ambele secțiuni pe care le-ați creat pentru mobil și tabletă.

Modul Persoană cu Bio pe Click pentru Tabletă și Telefon

Acum, că v-am arătat cum să creați modulul persoană cu biografie pe clic pentru desktop, vă vom arăta cum să îl creați și pentru tabletă și telefon. Am dezactivat deja secțiunile anterioare pentru telefon și tabletă. Așa arată aspectul desktopului pe backend:

Și aceasta este structura de care avem nevoie pentru versiunea tabletă și telefon.

Adăugați șase secțiuni noi

Deci, mergeți mai departe și adăugați șase secțiuni noi la pagină. Apoi, clonați modulele de persoană și puneți-le pe fiecare într-o secțiune individual. Asigurați-vă că lăsați o secțiune între ele, acolo va veni în cele din urmă biografia.

Apoi, adăugați clonați modulele text și plasați-le în secțiunea de sub fiecare secțiune care conține un modul persoană. Biografia va fi, în mod implicit, afișată sub modulul persoană pe mobil și tabletă.

.

Diferitele clase și ID-uri CSS

Odată ce ați pus toate secțiunile și modulele la locul lor, este timpul să începeți să adăugați clasele CSS.

Atribuiți clase CSS modulelor Person

Începeți prin deschiderea fiecărui modul individual și schimbarea claselor CSS din fila Avansat în:

• Modul pentru prima persoană: mobil_person1
• Modulul a doua persoană: mobile_person2
• Modulul pentru a treia persoană: mobile_person3

Atribuiți clase CSS secțiunilor

Apoi, deschideți toate diferitele secțiuni bio și atribuiți următoarele fiecăreia dintre ele:

• Prima secțiune Bio: section_mobile_1
• A doua secțiune Bio: secton_mobile_2
• A treia secțiune Bio: section_mobile_3

Atribuiți clase CSS modulelor de text

Ultimele clase CSS de care va trebui să acordați un loc sunt cele legate de modulele de text din diferitele secțiuni bio. Conform secțiunii bio, atribuiți următoarele clase CSS modulelor de text din secțiunea respectivă:

• Conectat la modulul pentru prima persoană: div_mobile_text_1
• Legat de modulul pentru a doua persoană: div_mobile_text_2
• Legat de modulul pentru a treia persoană: div_mobile_text_3

Adăugați Afișați codul CSS la secțiuni

Continuând, va trebui să faceți toate secțiunile bio invizibile. Accesați fila Advanced a fiecărei secțiuni și copiați și lipiți următoarea linie de cod CSS în Elementul principal:

display: none;

Asigurați-vă că eliminați această linie de cod CSS din elementul principal al fiecărui modul de text. În versiunea desktop, trebuia să le facem invizibile, dar acest lucru nu este necesar pentru mobil și tabletă.

Dezactivați pe desktop

Acum, după ce ați făcut toate modificările, mai rămâne un lucru înainte de a adăuga codul: dezactivați cele trei secțiuni bio de pe desktop. Continuați și deschideți fiecare dintre secțiuni și accesați fila Advanced. În subcategoria Vizibilitate a filei Advanced, dezactivați secțiunile de pe desktop.

Adăugați codul jQuery

Acum că am făcut toate modificările practice ale constructorului Divi, este timpul să trecem la ultimul pas; adăugarea codului jQuery.

Adăugați un nou modul de cod

Cel mai simplu mod de a adăuga codul la pagina dvs. este prin modulul de cod. Probabil că veți utiliza acest modul de persoană cu biografie la clic pe o singură pagină. Utilizând un modul de cod, vă veți asigura că codul se încarcă numai atunci când cineva se află pe pagina respectivă. Copiați și lipiți cele două coduri separate jQuery în același modul de cod.

Plasați codul jQuery Desktop în modulul dvs. de cod

Copiați și lipiți următoarele linii de cod CSS în modulul de cod pentru a face ca biografia de pe desktop să funcționeze cu versiunea de 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>

Plasați codul jQuery pentru tabletă și telefon în modulul dvs. de cod

Și următoarele linii de cod pentru ca versiunea pentru tabletă și telefon să funcționeze:

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

Rezultat final

Să aruncăm o ultimă privire asupra rezultatului după ce ați urmat toți pașii de-a lungul acestei postări. Iată cum va arăta pe desktop:

Și pe mobil și tabletă:

Înfășurându-se

În această postare, v-am arătat cum să creați un modul de persoană cu bio care ascunde și afișează pe clic. Prin aplicarea acestei metode, veți putea salva un loc pe site-ul dvs. și îl veți putea arăta vizitatorilor numai după ce vor fi interesați. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!