Comment créer un module de personne avec Bio on Click

Publié: 2017-08-16

Dans cet article, nous allons vous montrer comment créer un module de personne avec une bio au clic. Dès que vous cliquez sur un autre module de personne dans cette même ligne, le texte dans la bio changera. A tout moment, vous pouvez fermer la bio en cliquant à nouveau sur le module personne.

Vous pouvez l'utiliser, par exemple, pour afficher des informations supplémentaires sur vos employés sur le site Web de votre entreprise. Le concept vous aide à faire deux choses : interagir avec vos visiteurs et gagner de la place sur votre site Web. La seule fois où la biographie sera réellement affichée, c'est lorsqu'un visiteur manifeste son intérêt et décide de cliquer sur les éléments du module Personne.

Module de personne de résultat avec bio au clic

Avant de plonger dans les différentes étapes que vous devez suivre pour réaliser un module Personne avec bio au clic, examinons le résultat final sur le bureau :

module personne avec bio

et le résultat final sur mobile et tablette :

module personne avec bio

Avec le mobile, si un bio est ouvert, les deux autres bios seront automatiquement fermés. Vous n'aurez toujours qu'une seule section bio ouverte, bien que chaque bio ait sa propre section.

Module Personne avec Bio sur Click for Desktop

Abonnez-vous à notre chaîne Youtube

Pour que tout fonctionne correctement, nous devrons créer deux versions : une pour le bureau et une pour les tablettes et les téléphones. Chacune de ces versions aura besoin de son propre code jQuery. Nous allons commencer avec la version de bureau et dans la prochaine partie de l'article, nous vous montrerons comment créer la version pour tablettes et téléphones.

Ajouter la section standard de personne avec une ligne à trois colonnes

La première chose que nous devrons faire est d'ajouter une section qui contient les modules Person.

Ouvrez une nouvelle page (ou la page où vous souhaitez ajouter le module Personne avec bio) et ajoutez une nouvelle section standard. Dans cette section, placez une rangée de trois colonnes. Bien sûr, vous pouvez également utiliser un autre nombre de colonnes, mais le code que nous utiliserons prend en compte les modules 3 personnes. Si vous souhaitez créer la même chose pour d'autres types de lignes, vous devrez apporter quelques modifications au code jQuery que nous fournirons plus tard dans cet article.

Paramètres de ligne

Ouvrez les paramètres de ligne et dans l'onglet Contenu, ajoutez « #e5e5e5 » comme couleur d'arrière-plan de chaque colonne.

person module with bio

Ensuite, passez à l'onglet Avancé et insérez l'ombre de la boîte suivante dans l'élément principal de chacune des trois lignes :

Ajouter un module Personne

La prochaine chose que vous devrez faire est d'ajouter un module Person à la première colonne de la ligne.

Onglet Contenu

Dans l'onglet Contenu de ce module, saisissez les informations et les liens vers les réseaux sociaux et téléchargez l'image.

Onglet Avancé

Nous n'allons pas apporter de modifications à l'onglet Conception de ce module (n'hésitez pas à apporter des modifications à l'apparence par la suite). Au lieu de cela, nous allons tout de suite dans l'onglet Avancé où nous ajouterons la même ombre de boîte que nous avons ajoutée aux colonnes de ligne, à l'image du membre.

Cloner le module Personne

La prochaine chose que vous devrez faire est de cloner le module Person deux fois et de le placer dans les deux autres colonnes. Il faudra revenir sur cette section pour ajouter les différentes classes CSS. Mais avant de faire cela, nous allons d'abord ajouter la section bio.

Ajouter la section Bio Standard avec une ligne pleine largeur

Ajoutez une autre section standard juste en dessous de la section précédente que vous avez créée. Dans cette section, nous devrons ajouter les différents modules de texte liés aux différents modules de personne. Ouvrez les paramètres de la section et utilisez la couleur '#a0a0a0' comme couleur d'arrière-plan.

Ajouter deux modules de texte

Selon le nombre de modules de texte que vous souhaitez que la biographie du module de personne ait, vous pouvez ajouter des modules de texte. Dans ce cas, nous ajouterons deux modules de texte par module de personne.

Premier module de texte

Tapez du texte dans le premier module de texte et accédez à l'onglet Conception. Dans l'onglet Conception, apportez les modifications suivantes à la sous-catégorie Texte :

  • Orientation du texte : Centre
  • Taille de la police de texte : 31
  • Couleur du texte : #FFFFFF
  • Hauteur de la ligne de texte : 1,7 em

Deuxième module de texte

Ajoutez un autre module de texte et apportez les modifications suivantes à la sous-catégorie Texte de l'onglet Conception :

  • Orientation du texte : Centre
  • Taille de la police de texte : 16
  • Couleur du texte : #FFFFFF
  • Hauteur de la ligne de texte : 1,7 em

Cloner chaque module deux fois

Ces deux modules de texte seront les mêmes pour chacun des bios. C'est pourquoi vous devez cloner chacun des modules de texte deux fois. Voici à quoi devrait ressembler la structure finale sur le back-end de la page :

Les différentes classes CSS

Attribuer des classes CSS aux modules Person

Accédez à l'onglet Avancé de chacun des modules Personne et attribuez les classes CSS suivantes :

  • First Person Module: person1
  • Module deuxième personne : personne2
  • Module à la troisième personne : personne3

Attribuer une classe CSS à la section

Ouvrez les paramètres de la section où sont placés vos bios. Allez dans l'onglet Avancé et notez "section_1" dans la classe CSS.

Attribuer des classes CSS aux modules de texte

Maintenant, ajoutez les classes CSS aux modules de texte que vous avez créés de la manière suivante :

  • Lié au premier module Personne : div_text_1
  • Lié au deuxième module Personne : div_text_2
  • Lié au troisième module Personne : div_text_3

Ajouter le code CSS d'affichage à la section et à tous les modules de texte

La prochaine étape que vous devrez faire est d'accéder à l'onglet Avancé de la section et à tous les modules de texte. Ensuite, ajoutez la ligne de code CSS suivante à l'élément principal de la section : 

display: none;

Désactiver sur téléphone et tablette

Maintenant, désactivez les deux sections que vous avez créées pour mobile et tablette.

Module Personne avec Bio en un clic pour tablette et téléphone

Maintenant que nous vous avons montré comment créer le module de personne avec bio sur clic pour le bureau, nous allons également vous montrer comment le créer pour tablette et téléphone. Nous avons déjà désactivé les sections précédentes pour téléphone et tablette. Voici à quoi ressemble la disposition du bureau sur le backend :

Et c'est la structure dont nous avons besoin pour la version tablette et téléphone.

Ajouter six nouvelles sections

Alors, allez-y et ajoutez six nouvelles sections à la page. Ensuite, clonez les modules de personne et placez chacun dans une section individuellement. Assurez-vous de laisser une section entre les deux, c'est là que la biographie viendra éventuellement.

Ensuite, ajoutez cloner les modules de texte et placez-les dans la section sous chaque section qui contient un module Personne. La biographie sera, par défaut, affichée sous le module Personne sur mobile et tablette.

.

Les différentes classes et identifiants CSS

Une fois que vous avez mis toutes les sections et modules en place, il est temps de commencer à ajouter les classes CSS.

Attribuer des classes CSS aux modules Person

Commencez par ouvrir chaque module de personne individuellement et modifiez les classes CSS dans l'onglet Avancé pour :

  • Module à la première personne : mobile_person1
  • Module deuxième personne : mobile_person2
  • Module à la troisième personne : mobile_person3

Attribuer des classes CSS aux sections

Ensuite, ouvrez toutes les différentes sections bio et attribuez les éléments suivants à chacune d'entre elles :

  • Première section bio : section_mobile_1
  • Deuxième section bio : secton_mobile_2
  • Troisième section bio : section_mobile_3

Attribuer des classes CSS aux modules de texte

Les dernières classes CSS que vous devrez donner une place sont celles liées aux modules de texte dans les différentes sections bio. Selon la section bio, attribuez les classes CSS suivantes aux modules de texte de cette section :

  • Lié au premier module Personne : div_mobile_text_1
  • Lié au deuxième module Personne : div_mobile_text_2
  • Lié au troisième module Personne : div_mobile_text_3

Ajouter le code CSS d'affichage aux sections

Pour continuer, vous devrez rendre toutes les sections bio invisibles. Accédez à l'onglet Avancé de chacune des sections et copiez et collez la ligne de code CSS suivante dans l'élément principal : 

display: none;

Assurez-vous de supprimer cette ligne de code CSS dans l'élément principal de chaque module de texte. Dans la version Desktop, nous devions les rendre invisibles, mais ce n'est pas nécessaire pour les mobiles et les tablettes.

Désactiver sur le bureau

Maintenant, après avoir fait toutes les modifications, il reste une chose à faire avant d'ajouter le code : désactiver les trois sections bio sur le bureau. Allez-y et ouvrez chacune des sections et accédez à l'onglet Avancé. Dans la sous-catégorie Visibilité de l'onglet Avancé, désactivez les sections sur le bureau.

Ajouter le code jQuery

Maintenant que nous avons apporté toutes les modifications pratiques au constructeur Divi, il est temps de passer à la dernière étape ; en ajoutant le code jQuery.

Ajouter un nouveau module de code

Le moyen le plus simple d'ajouter le code à votre page consiste à utiliser le module de code. Vous utiliserez probablement ce module de personne avec bio en cliquant sur une seule page. En utilisant un module de code, vous vous assurerez que le code n'est chargé que lorsque quelqu'un est sur cette page. Copiez et collez les deux codes séparés jQuery dans le même module de code.

Placez le code jQuery du bureau dans votre module de code

Copiez et collez les lignes de code CSS suivantes dans votre module de code pour faire fonctionner la bio du bureau sur la version 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>

Placez le code jQuery de la tablette et du téléphone dans votre module de code

Et les lignes de code suivantes pour faire fonctionner la version pour tablette et téléphone : 

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

Résultat final

Jetons un dernier coup d'œil au résultat une fois que vous avez suivi toutes les étapes tout au long de cet article. Voici à quoi cela ressemblera sur le bureau :

module personne avec bio

Et sur mobile et tablette :

module personne avec bio

Emballer

Dans cet article, nous vous avons montré comment créer un module de personne avec une bio qui se cache et s'affiche au clic. En appliquant cette méthode, vous pourrez enregistrer une place sur votre site Web et ne la montrer à vos visiteurs qu'une fois qu'ils auront manifesté leur intérêt. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !