Sélectionner une page

Module Se Connecter

1, Mai 2019

Introduction

Le module Se Connecter de Divi est un module un peu particulier. En effet, il remplace la traditionnelle page de connexion WordPress, ce qui permet de personnaliser l’accès au site. Vous me direz mais dans quels cas on utilise ce module. En fait, vous n’utiliserez ce module que dans deux cas : si vous voulez privatiser une partie de votre site ou si vous voulez personnaliser la page de connexion à WordPress.

En effet, si vous voulez privatiser une partie du site en utilisant WordPress, vous pouvez le faire sans utiliser de plugins particuliers et à ce moment là vous pourrez utiliser le module Se Connecter de Divi.

Nous allons d’abord voir comment insérer un module Se Connecter dans une page, puis nous verrons les différents paramètres de personnalisation.  

Insérer le module Se Connecter de Divi

Vous savez déjà comment insérer un module, nous l’avons déjà vu, mais un petit rappel ne fait jamais de mal. 

Pour insérer le module Se Connecter de Divi, vous devez tout d’abord créer une section, si ce n’est déjà fait, puis ensuite créer une ligne ou rangée avec une ou plusieurs colonnes. Ensuite vous pouvez insérer le module en le sélectionnant dans la liste des modules comme vous pouvez le voir dans la vidéo ci-dessous :

Différents paramètres

Contenu > Texte

Vous avez maintenant l’habitude, grâce à ce paramètre vous allez non seulement insérer du texte mais également un titre que vous pouvez donner à votre module, comme par exemple « Bienvenue sur le site monsite.com »

La partie texte sous le titre, je l’utilise pour expliquer que l’on entre dans une partie privée du site et qu’il faut avoir des codes d’accès. Vous pouvez aussi expliquer, si vous utilisez la fonction rediriger, comment naviguer ensuite. 

Contenu > Rediriger

Si vous activez cette option, et je vous le conseille, une fois le login et le mot de passe validé, votre visiteur enregistré restera sur la page. J’utilise cette option quand je veux que le visiteur enregistré n’est pas accès au tableau de bord WordPress.

Si vous choisissez de ne pas le faire, le visiteur enregistré sera redirigé vers le tableau de bord WordPress. Vous utiliserez cette option si vous voulez personnaliser votre page login.

Contenu > Lien

Ce paramètre vous permet d’ajouter un lien au module. J’avoue que je ne l’ai jamais utilisé et que je n’en vois pas tout à fait l’utilité.

Contenu > Fond

Grâce à ce paramètre, vous allez pouvoir changer la couleur du fond du module. A vous d’utiliser votre créativité. Vous pouvez créer un fond d’une couleur, un dégradé de deux couleurs ou encore insérer une image, vidéo.

Je ne vais pas aller plus loin, car vous connaissez déjà ce paramètre si vous avez déjà lu un article consacré aux modules WordPress.

Contenu > Etiquette Admin

Trop souvent, ce paramètre n’est pas utilisé. Or, c’est un paramètre essentiel si vous travaillez en mode ordinateur et que vous passez parfos en mode bloc pour mieux pouvoir agencer vos modules, rangées ou sections.

Il permet de mettre un nom sur chaque section, rangée ou module qui apparait quand vous êtes en mode bloc.

Style > Champs

Avec ce paramètre, vous allez pouvoir personnaliser les champs dans lesquels vos visiteurs vont pouvoir entrer leur login et leur mot de passe.

Vous pouvez changer les paramètres suivants :

  • Couleur du fond du champ : il vous permet de changer la couleur de fonds des champs. Pour notre bonheur, on ne peut pas appliquer une couleur de fond par champs.
  • Couleur du texte du champ : il vous permet de personnaliser la couleur du texte du champs. Idem que pour le fond, une seule couleur pour tous les textes des champs.
  • Couleur du fond du champ en subrillance : vous pourrez modifier le fond uniquement quand le champs est sélectionné.
  • Couleur du texte du champ en subrillance : vous pourrez modifier le texte uniquement quand le champs est sélectionné.
  • Champs Rounded Corners : il vous permet d’arrondir les angles des champs.
  • Champs Border Style : vous permet d’ajouter une bordure aux champs.
  • Champs Largeur de la bordure : en faisant varier la taille, vous allez jouer sur l’épaisseur des bordures.
  • Champs Couleur de la bordure : changez de couleur grâce à ce paramètre.
  • Champs Style de la bordure : cela vous permet d’ajouter différents styles de bordures tels que les pointillés, double traits, etc…
  • Use Focus Borders : si vous voulez changer le style de la bordure quand le champs est sélectionné.
  • Fields Box Shadow : vous pouvez ajouter pour chaque champs une ombre.
  • Champs Text Shadow : vous pouvez ajouter au texte des champs une ombre.

Style > Texte

Ce paramètre peut porter à confusion. En effet, vous n’allez pas pouvoir mettre en forme le texte qui est sous le titre mais l’ensemble des textes du module.

Vous pouvez changer les paramètres suivants :

  • Orientation du texte : vous allez pouvoir centré, aligné à droite, à gauche ou justifié votre texte.
  • Couleur du texte : vous n’aurez le choix qu’entre le foncé ou le clair.
  • Text Shadow : vous pourrez ajouter une ombre à votre texte.

Style > Titre du Texte

Ce paramètre va vous permettre de personnaliser le titre de votre module et surtout d’y insérer le niveau H1, H2, H3, etc…

Vous pouvez changer les paramètres suivants :

  • Titre Heading Level : il vous permet de définir le niveau du Titre. C’est important pour le référencement. Le H1 est en général laissé au titre de la page, vous pourrez donc attribuer H2 au titre de votre module Se Connecter de Divi, par exemple.
  • Police Titre : vous pouvez définir la police que vous souhaitez utiliser.
  • Titre Font Weight : vous allez pouvoir ajouter ou réduire le degré de gras de votre titre.
  • Titre Font Style : il vous sera facile de mettre votre titre en majuscule, ou seulement la première lettre ou de le souligner ou encore de le mettre en italique.
  • Titre Text Alignment : comme pour l’orientation du texte vous allez pouvoir centré, aligné à gauche ou à droite ou justifié votre titre.
  • Couleur du texte Titre : changez de couleur en cliquant sur les couleurs sélectionnées ou en cliquant sur la pipette pour ajouter une autre couleur.
  • Titre Taille du Texte : vous allez pouvoir agrandir ou réduire la taille du titre.
  • Espacement des lettres : pour donner plus d’importance, vous pouvez ajouter un espacement entre les lettres du titre.
  • Hauteur de la ligne Titre : vous pouvez ajuster la hauteur de la ligne du Titre.
  • Titre Text Shadow : pour mieux le mettre en valeur, vous pouvez ajouter une ombre à votre titre.

Style > Corps du Texte

Je ne vais pas vous redétailler tous les réglages possibles car ce sont les mêmes que pour le Titre du texte juste au-dessus. 

Vous ne trouverez simplement pas le Titre Heading Level, sinon pour le reste, c’est pareil.

Style > Bouton

Si vous n’activez pas, Divi utilisera le style de bouton que vous avez défini dans le Personnalisateur de Thème.

Si vous l’activez, vous pouvez changer les paramètres suivants :

  • Bouton Taille du Texte : il vous permet de régler la taille du texte dans le bouton.
  • Couleur du Texte  : vous pouvez changer la couleur en sélectionnant l’une des couleurs prédéfinies ou en cliquant sur la pipette pour choisir une autre couleur.
  • Bouton Couleur d’arrière plan : vous allez pouvoir changer la couleur du fond de votre bouton.
  • Bouton Largeur de la Bordure : il vous sera facile d’ajouter une bordure en jouant sur l’épaisseur de celle-ci.
  • Bouton Couleur de la Bordure : idem que la couleur du texte, vous pouvez changer la couleur de la bordure.
  • Bouton Rayon des Frontières : changez l’arrondi des coins de votre bouton en augmentant ou en baissant le degré d’arrondi.
  • Espacement des Lettres : vous allez pouvoir ajouter de l’espace entre les lettres pour rendre le texte plus lisible.
  • Police Bouton : ajouter une autre police grâce à ce paramètre.
  • Font Weight : modifiez le degré de gras de votre texte.
  • Font Style : mettez le texte en italique, en majuscule, en 1ère lettre en majuscule, en souligné ou en barré.
  • Show Bouton Icon : ajoutez un icône à votre bouton.
  • Bouton Icon : choisissez l’icône qui vous convient parmi le choix proposé.
  • Bouton Couleur de l’Icône : vous pouvez choisir la couleur de l’icône.
  • Bouton le Placement de l’Icône : vous pouvez mettre votre icône à droite ou à gauche du texte de votre bouton.
  • Seulement Afficher l’icône sur le survol… : vous pouvez ne faire apparaître l’icône que si vous passez avec votre souris.
  • Bouton Text Shadow : vous pouvez ajouter une ombre au texte du bouton.
  • Bouton Box Shadow : vous pouvez ajouter une ombre à votre bouton.

Style > Dimensionnement

Ce paramètre vous permet de modifier la largeur et la hauteur

Vous pouvez changer les paramètres suivants :

  • Width : il vous permet de régler la largeur du module.
  • Max Width  : vous pouvez choisir la largeur maximale du module.
  • Min Height : vous allez pouvoir définir une hauteur minimale pour votre module.
  • Hauteur : il vous sera facile de choisir la hauteur du module.
  • Max Height : vous pouvez définir une hauteur maximum pour votre module.

Style > Espacement

Vous pouvez régler les marges ou les marges internes grâce à ce paramètre. Si vous cliquez sur le maillon entre les deux, vous pourrez avoir le même espace en haut ou en bas, à gauche comme à droite.

Si vous l’activez, vous pouvez changer les paramètres suivants :

  • Personnaliser la marge : vous pouvez ajouter ou réduire la marge en haut, en bas, à gauche ou à droite. Plus vous augmentez la marge plus le module se décale. Si vous augmentez la marge en haut, le module se décalera vers le bas et inversemment.
  • Personnaliser la marge interne  : vous ajouter ou réduire la distance entre le contenu et le bord du module. Cela ne se verra que si vous ajoutez une bordure ou un fond de couleur.

Style > Bordure

Ajouter des bordures pour entourer votre module Se Connecter de Divi, c’est grâce à ce paramètre que vous pouvez y arriver.

Vous pouvez changer les paramètres suivants :

  • Rounded Corner : vous permets d’arrondir les angles de votre module. Par défaut, les angles seront tous arrondis de la même façon. Si vous souhaitez les personnaliser, cliquez sur le cadenas pour enlever cette option.
  • Border Style  : vous pouvez soit ajouter une bordure tout autour du module ou juste à droite, à gauche, en haut ou en bas.
  • Largeur de la bordure  : avec ce réglage vous définissez l’épaisseur du trait de bordure.
  • Couleur de la bordure  : vous avez le choix entre les couleurs prédéfinis ou d’autres couleurs en cliquant sur la pipette pour coloriser le trait de votre bordure.
  • Style de la bordure  : vous pouvez opter pour une bordure simple, double ou encore en pointillé…

Style > Box Shadow

Grâce à Box Shadow vous pouvez ajouter une ombre à l’intérieur de votre module Se Connecter de Divi ou à l’extérieur. A vous de choisir et de tester.

Style > Filters

Les filtres vous permettre d’ajouter des effets dans le fond du module. Pour avoir quelques exemples de ce qui est possible de faire rendez vous sur Elegant Themes.

Style > Transform

Les paramètres de Transform vont vous permettre d’agrandir, de réduire, de retourner et de faire tout un tas de transformation du module. Je ne suis pas sûr que renverser le module ait un intérêt quelqueconque, mais bon.

Si vous voulez en savoir plus, je vous conseille de revoir l’article que j’ai écris sur le sujet la semaine dernière : Agrandir grâce à la fonction Transform.

Style > Animation

Les paramètres Animation vous permettent d’ajouter des animations pour faire apparaître le module Se Connecter de Divi.

Vous pouvez changer les paramètres suivants : 

  • Animation Style : vous permet utiliser le style Fondu, Diapo, Bounce, Zoom, Basculer, Fold ou Roll.
  • Animation Repeat : choisissez de faire l’animation une fois ou en boucle (Loop).
  • Animation Direction vous pouvez définir d’où vient le module : droite, gauche, haut ou bas.
  • Animation Duration : vous choisirez combien de temps en millisecondes votre animation durera.
  • Animation Delay : cela vous permet de faire commencer votre animation avec un petit temps de retard.
  • Animation Starting Opacity : definissez le niveau d’opacité qui sera le vôtre au départ de l’animation. 

Avancé > Id et classes CSS

Fonction un peu avancée, d’où le termes Avancé, vous allez pouvoir donner un nom de classes ou un id à votre module. Cela vous sera très utile si vous personnaliser votre style en insérant du code CSS.

Si vous n’êtes pas un grand dévelopeur comme moi, vous utiliserez quand même cette fonction pour créer une ancre. En effet si vous voulez créer un lien à l’intérieur de votre page. Vous donnez un nom à votre module à la rubrique Id, puis il vous suffit de créer un lien en tapant #nomdelid. En cliquant sur le lien, le navigateur se positionnera automatiquement sur votre module.

Avancé > Personnaliser CSS

C’est une fonction qui reste du domaine des développeurs. Si vous ne connaissez pas le langage CSS, vous n’utiliserez jamais cette fonction.

Avancé > Visibilité

Vous allez pouvoir contrôler sur quels appareils votre module Se Connecter de Divi apparaîtra.

En réalité, ce n’est pas le type d’appareils utilisé mais plutôt la taille de l’écran qui compte.

Petite précision

J’avoue que je trouve le module perfectible. En effet, si vous l’utilisez pour créer une partie fermée de votre site, vous devez absolument activer l’option Rediriger qui vous redirigera vers la même page. Sinon vous serez redirigé vers le tableau de bord de WordPress.

Il faut donc que dans le texte vous expliquez à vos utilisateurs la marche à suivre pour aller plus loin. En général, il s’agit d’utiliser le menu.

Conclusion

Ca y est vous voilà au bout de la personnalisation de votre module Se Connecter de Divi. Vous pouvez voir que personnaliser ce module n’est pas compliqué et vous permettra de rendre la connexion à une partie privée de votre site ou à votre tableau de bord beaucoup plus agréable et stylé.

Dans un prochain article, je vous montrerai un exemple de personnalisation du module Se Connecter de Divi.