Souhaitez-vous créer une section membre d’équipe avec Elementor ?
Eh bien vous êtes au bon endroit. Nous vous présenterons aujourd’hui comment créer une magnifique section membre d’équipe avec le page Builder Elementor.
Pour réaliser ce tutoriel, vous aurez besoin d’une version pro d’Elementor, car nous utiliserons du code CSS personnalisé qui n’est possible qu’avec la version pro d’Elementor. Si vous ne l’avez pas encore fait alors mettez à jour cette dernière.
Et pour comprendre ce dont nous parlons dans ce tutoriel, nous vous invitons à regarder la vidéo suivante :
Pour commencer, créez une page et modifiez cette dernière avec Elementor.
Ensuite insérer une structure à 3 colonnes dans cette dernière, puis dans le panneau, sous l’onglet Contenu, définissez la Hauteur sur Hauteur Min et sélectionnez VH Hauteur Minimum puis réglez le curseur sur 100.
Sélectionnons la colonne du milieu pour la modifier et allons sur l’onglet Avancé. Définissons à 30 toutes les marges internes.
Insérons un widget Inner Section dans cette colonne, puis supprimons l’une des colonnes contenues dans l’Inner Section, ensuite dans le panneau sous l’onglet Contenu, définissons aussi la hauteur sur Hauteur Min et le curseur sur 450px.
Sur l’Alignement Vertical sélectionnez Bas et sur Débordement sélectionnez Masqué.
Dans l’onglet Style Modifiez l’Arrière-plan sur Classique et sélectionnez une image de votre bibliothèque.
Lire notre guide sur : Comment créer une carte de produit avec Elementor
Sur Position Sélectionnez Supérieur Centré, Fichier Joint sur Défilement, Répété sur Non-Répété et Taille sur Couvrir
Dans bordures définissez les Bordures sur 12.
Ajoutons des effets d’ombres. Dans Ombre de boite modifions Vertical sur 22, Flou sur 40 et Diffuser sur -10.
Ajoutons un widget Titre dans la section Interne et donnons un nom à notre membre et centrons le widget.
Lire aussi : Comment changer l’en-tête au défilement de page avec Elementor
Dans l’onglet Style, Modifions la couleur du texte et sur typographie choisissons 22 pour la taille de police et 500 pour la Graisse, Transformation sur Majuscule et l’espacement des lettres sur 1.2
Ensuite dupliquons le widget titre et modifions le titre du second widget et dans typographie choisissons 15 pour la taille de police et 500 pour la largeur, transformation sur Défaut et l’espacement des lettres sur 1.2
Allons dans l’onglet Avancé et définissons la Marge Haut sur -15. Ajoutons le widget Icônes de réseaux sociaux dans notre Inner section.
Rendons nous dans l’onglet Style, modifiez la couleur sur Personnalisé, rendre la couleur primaire transparente et définissez les marges internes sur 0.30
Dans l’onglet Avancé, Définissez les marges Haut sur -15 et Bas sur 20
Puis sélectionnons la colonne de l’Inner Section pour la modifier et dans l’onglet Style sélectionnez le type Classique et sur couleur saisissons #FFFFFF28.
Lire également : Comment faire défiler une longue image d’un portfolio avec Elementor
Ensuite sélectionnez la colonne de l’Inner Section pour la modifier et dans l’onglet Avancé dans le champ Classes CSS, saisissons member-info
Sélectionnons ensuite l’Inner Section puis dans l’onglet Avancé dans le champ Custom CSS, collez le code suivant :
/* CSS effet de verre*/
selector {
–height: 150px;
–bottom: -150px;
overflow: hidden !important;
}
selector .member-info{
height: var(–height);
position: absolute;
backdrop-filter: blur(15px);
bottom: 0;
transition: .5s ease-in-out;
}
A la suite du premier code CSS, coller le suivant :
/* CSS pour masquer ou afficher au survol*/
selector .member-info{
bottom: var(–bottom);
}
selector:hover .member-info{
bottom: 0px;
}
Désormais lorsque vous survoler l’image, les informations sur le membre apparaissent.
Dupliquez la colonne 2 fois et supprimez les autres colonnes vides
Sélectionnez ensuite l’Inner Section et changez l’image d’arrière-plan par l’image d’un autre membre de l’équipe, modifier son nom ainsi que sa profession, faites de même avec l’autre colonne.
Prévisualisez votre travail sur tablette et mobile tout en améliorant les marges et autres pour un meilleur affichage.
Et c’est comment ca que vous pouvez créer une magnifique section Membres de l’équipe
Obtenez Elementor Pro Maintenant !
Conclusion
Voila ! C’est tout pour ce tutoriel qui vous montre comment créer une section membre d’équipe. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
