Comment concevoir une section de conférencier invité avec un CTA efficace dans Divi

Que vous ayez un podcast ou que vous organisiez un WordCamp (ou tout autre événement de conférencier), c'est toujours une bonne idée d'avoir une section de conférencier invité pour votre site Web. Comme les témoignages, présenter des conférenciers invités est un moyen efficace de promouvoir la valeur et d'établir une crédibilité auprès de votre public. Une section de conférenciers invités est également un endroit clé pour attirer de nouveaux candidats pour votre prochain événement ou épisode. Ce didacticiel vous montre comment concevoir une section de conférencier invité qui non seulement présente les conférenciers de manière élégante, mais encourage également les nouveaux conférenciers à postuler avec un appel à l'action efficace.

Mais avant de nous lancer, voici un aperçu du design final.

Aperçu

Et voici un effet de survol bonus que je vais également vous montrer.

Commençons!

Abonnez-vous à notre chaîne Youtube

Construire la structure de base et le contenu

Si vous ne l'avez pas déjà fait, créez une nouvelle page et déployez le Divi Builder pour construire sur le front-end.

Ensuite, ajoutez une nouvelle section avec une ligne à une colonne.

Ajoutez un module de texte à la ligne avec le contenu suivant :

<h2>Guest Speaker</h2>

Ensuite, ajoutez un module de séparation directement sous le module de texte.

Nous allons maintenant ajouter une nouvelle rangée avec une structure à quatre colonnes pour accueillir nos conférenciers invités.

Dans la première colonne de la ligne, ajoutez un module personne.

Mettez à jour le contenu du module Personne comme suit :

Nom : [vide]
URL du profil Facebook : [ajouter « # » pour l'instant]
URL du profil Twitter : [ajouter « # » pour l'instant]
URL du profil LinkedIn : [ajouter « # » pour l'instant]

Pour la description, ajoutez ce qui suit :

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Remarque : la balise hr génère une ligne de séparation qui a un style en ligne à faire est de 90px de large et flotte vers la gauche. L'étiquette solide qui entoure le nom de famille le rend audacieux pour un élément de design unique.

Maintenant que vous avez le contenu en place, enregistrez les paramètres du module de personne.

Copiez le module de personne que vous venez de créer et collez-le dans chacune des colonnes restantes afin d'avoir le même module de personne dans chacune des quatre colonnes. Pour copier et coller, vous pouvez utiliser les options du menu contextuel ou les touches de raccourci cmd+c cmd+v (mac) ou ctrl+c ctrl+v (win).

Ouvrez le paramètre du module personne dans la colonne 4 et mettez à jour le contenu afin qu'il ne contienne que les éléments suivants :

Nom : "Cela pourrait être vous !"
Description : « Utilisez le bouton ci-dessous pour demander à prendre la parole lors de notre événement. »

Enregistrez vos paramètres.

Ensuite, ajoutez un module de bouton directement sous le module de personne dans la colonne 4 et mettez à jour le contenu du texte du bouton sur « Appliquer maintenant ». Et enregistrez vos paramètres.

Revenez aux trois premiers modules de personnes dans les colonnes 1 à 3 et ajoutez les images pour chacun des portraits des conférenciers invités. Assurez-vous qu'ils sont de la même taille avec des dimensions de hauteur et de largeur égales et qu'ils sont suffisamment grands pour tenir compte des largeurs de colonne sur toutes les tailles de navigateur (idéalement 600px par 600px).

Voici à quoi devrait ressembler votre mise en page Guest Speak à ce stade.

Styliser la disposition des conférenciers invités

Styliser la section

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Image d'arrière-plan : [J'en utilise une de notre agencement d'agence]

Dégradé de fond à gauche : #293039
Dégradé de fond à droite : rgba (41,48,57,0.89)
Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : #293039
Hauteur du diviseur supérieur : 30 vw

Modification de la largeur des lignes

Puisque nous voulons que nos deux lignes aient la même largeur, utilisez la multisélection pour sélectionner les deux lignes et cliquez sur l'une des icônes de paramètres pour ouvrir les paramètres de l'élément.

Ensuite, mettez à jour les éléments suivants :

Largeur personnalisée : 80 %

Désormais, vos deux lignes auront la même largeur personnalisée.

Styliser le titre

Ouvrez les paramètres du module de texte contenant le titre de votre section « Intervenants invités » et mettez à jour les éléments suivants :

Police de la rubrique 2 : Montserrat
Poids de la police de l'en-tête 2 : gras
Titre 2 Style de police : TT
titre 2 Alignement du texte : à droite
Titre 2 Couleur du texte : #74bf46
Titre 2 Taille du texte : 70 px (ordinateur de bureau), 50 px (smartphone)

Enregistrer les paramètres.

Ouvrez maintenant les paramètres de Divider et mettez à jour les éléments suivants :

Couleur : #ffffff
Hauteur : 0px
Largeur : 90px
Alignement du module : à droite

Styliser les modules Personne

Puisque nous voulons donner le même style initial à tous nos modules de personne, utilisez la multisélection pour sélectionner chacun, puis cliquez sur l'icône des paramètres de l'un des modules pour déployer le modal des paramètres de l'élément.

Mettez à jour les paramètres de l'élément suivant :

Couleur de l'icône : #74bf46
Police du titre : Montserrat
Poids de la police du titre : léger
Couleur du texte du titre : #ffffff
Taille du texte du titre : 20 px
Police de caractère : Montserrat
Couleur du corps du texte : #ffffff
Espacement des lettres du corps : 2px
Hauteur de la ligne du corps : 1,8 em

Styliser le module Personne CTA

Nous utilisons ce module de personne comme un appel à l'action qui attire de nouveaux conférenciers invités à postuler pour un engagement de parole. Ainsi, nous pouvons laisser l'image par défaut (silhouette) active comme moyen créatif d'afficher un emplacement vide. Mais il y a quelques ajustements de style que nous devons ajouter pour compléter la conception. Ouvrez les paramètres du module de personne dans la colonne 4 et mettez à jour ce qui suit.

Largeur de la bordure de l'image : 18 px
Couleur de la bordure de l'image : #d2d2d2
Opacité de l'image : 50 %

Poids de la police du titre : gras
Hauteur de la ligne de titre : 1,5 em

Il ne reste plus qu'à styliser notre bouton. Ouvrez les paramètres du module de boutons et mettez à jour les éléments suivants :

Couleur du texte du bouton : #293039
Couleur d'arrière-plan du bouton : #74bf46
Rayon de bordure de bouton : 50px
Police des boutons : Montserrat
Poids de la police : gras

Voyons maintenant le résultat final.

Astuce bonus : effet de survol du zoom de l'image

N'oubliez pas toutes les options de survol intégrées disponibles dans Divi. En fait, vous pouvez consulter des tutoriels inspirants sur ces effets de survol sur notre blog. Mais pour cette conception, j'ai pensé sortir des sentiers battus et vous donner quelques extraits de CSS qui feront que votre image personnelle zoomera (ou redimensionnera) légèrement au survol.

Si vous recherchez un effet de survol subtil pour différencier vos modules de personne, voici comment procéder.

Utilisez la multisélection pour sélectionner les modules de personne dans les colonnes 1, 2 et 3. Ouvrez les paramètres de l'élément. Sous l'onglet avancé, entrez le CSS suivant sous l' élément principal :

overflow: hidden;

Ce code empêchera l'image en expansion de s'étendre à l'extérieur du conteneur du module.

Ajoutez ensuite le CSS suivant sous Member Image :

transition: all 0.3s; 

Cela ajoute une transition en douceur lorsque la taille de l'image s'agrandit.

Pour ajouter le CSS au survol, cliquez sur l'icône de survol et sélectionnez l'onglet survol et entrez le CSS suivant :

transform: scale(1.1) translateY(-4.5%);

Cela redimensionne (ou agrandit) l'image à une taille légèrement plus grande et la déplace un peu vers le haut.

Désormais, les images auront un effet de zoom subtil au survol.

Dernières pensées

Eh bien, j'espère que vous avez apprécié ce tutoriel ou au moins laissé quelques conseils de conception utiles. Cette disposition de la section des conférenciers invités peut être utilisée de diverses manières. Une autre application parfaite serait qu'une page d'employé répertorie simultanément les employés actuels et encourage les autres à postuler pour un poste. N'hésitez pas à partager quelques idées avec nous.

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!