Sélectionner une page

Module Se Connecter en vidéo

3, Mai 2019

Introduction

Voici comment vous allez pouvoir créer une page de connexion design, simple et épuré. Vous pouvez bien entendu la modifier en changeant les couleurs. 

Avant de commencer à modifier les paramètres du module Se Connecter de Divi, je vous propose de modifier le fond de la section en choisissant la couleur noire.

Vous pouvez maintenant modifier les paramètres du module en suivant les indications ci-dessous.Attention si les paramètres ne sont pas mentionnés ci-dessous, c’est qu’aucun changement ne sera intervenu.

 

Différents paramètres

Contenu > Texte

Inscrivez dans le paramètre Titre : le texte Bonjour et bienvenue sur la page privée du site.

J’ai par contre supprimé tout le texte dans la partie Contenu.

Contenu > Rediriger

Si vous activez cette option vous resterez sur cette page. Sinon vous serez redirigé vers le tableau de bord WordPress. A vous de choisir.

Contenu > Fond

Comme pour la section, vous devez ajouter la couleur noire au fond (code : #000000).

Style > Champs

Voici le résumé du paramétrage pour le mettre en forme les champs :

  • Couleur du fond du champ : #000000.
  • Couleur du texte du champ : #ffffff.
  • Couleur du fond du champ en subrillance : #ffffff.
  • Couleur du texte du champ en subrillance : #000000.
  • Champs Rounded Corners : 15px 15px 15px 15px.
  • Champs Border Style : toutes les bordures.
  • Champs Largeur de la bordure : 3px.
  • Champs Couleur de la bordure : #ffffff.
  • Use Focus Borders : oui.
  • Focus Rounded Corners : 5px 5px 5px 5px.
  • Focus Borders Styles : toutes les bordures.
  • Focus Largeur de la bordure : 10px.
  • Focus Couleur de la bordure : #ffffff.

Style > Texte

Rien à modifier.

Style > Titre du Texte

Paramètres à modifier :

  • Titre Heading Level : H2.
  • Police Titre : Lato.
  • Titre Font Weight : Clair.
  • Titre Font Style : TT Majuscule.
  • Titre Text Alignment : Aligné à gauche.
  • Couleur du texte Titre : #ffffff.
  • Titre Taille du Texte : 45px (Bureau), 40px(Tablette & Téléphone).
  • Hauteur de la ligne Titre : 1.2em.

Style > Bouton

Il faut que vous activiez le style personnalisé pour le bouton.

Entrez les paramètres suivants :

  • Couleur du Texte  : #ffffff (Défaut) et #000000 (Hover).
  • Bouton Couleur d’arrière plan : #000000 (Défaut) et #ffffff (Hover).
  • Bouton Rayon des Frontières : 10px.

Style > Dimensionnement

Voici les paramètres à modifier pour réduire la taille du module uniquement sur ordinateur :

  • Width : 85% (Bureau) 100% (Tablette & Téléphone).
  • Max Alignment : centré. 

Style > Filters

Afin de rendre votre module plus lumineux lors du passage de la souris, voici le paramètre à modifier :

  • Opacity : 20% (Défaut) 100% (Hover).

Conclusion

Et voilà, vous avez réussi à créer votre propre page de connexion grâce au module Se Connecter de Divi. Vous pouvez utilisez votre imagination et votre créativité pour créer le vôtre mise en forme en fonction de votre charte graphique. 

Si vous êtes du genre rapide et impatient, vous pouvez obtenir une copie de la page que vous pourrez ensuite facilement installé sur votre site. Pour cela, il vous suffit de laisser votre adresse mail :