14 mars 2020

Web Design sous Elementor #5 – Les positionnements personnalisés

TYPE : WordPress

résultat fini

Résumé du Tutoriel

Chaque élément sous Elementor possède son propre conteneur. Une image est insérée dans un conteneur, un texte aussi, … Par défaut lorsque l’on insère un élément dans une colonne, il occupe 100% de la largeur de la colonne. Il est donc impossible par défaut de mettre plusieurs éléments les uns à coté des autres dans une colonne. Les éléments s’empilent les uns sous les autres. Le réflexe du débutant est alors de trouver un autre moyen et il va généralement créer plusieurs colonnes pour résoudre ce problème. Les positionnements personnalisés vont nous permettre de définir la largeur et le positionnement du conteneur de l’élément. Il faut bien comprendre que par exemple la largeur d’une image peut prendre une valeur (par  exemple 200 pixels), mais qu’également on peut définir une largeur pour le conteneur qui contient l’image (par exemple lui donner une largeur de 20%). Cela permet alors de n’occuper que 20% de la largeur de la colonne mère.

La largeur par défaut

Dans l’exemple ci-dessous, nous avons créé un section dans laquelle nous avons inséré une colonne. Les bords noir en pointillés définissent la taille de notre colonne. Dans cette colonne nous avons mis 3 éléments. Un titre, un bloc de texte et enfin un bouton. Comme on peut le voir sur l’illustration, chaque élément rempli la totalité de la largeur de la colonne (les limites des éléments sont dessinées en bleu). Les éléments s’affichent ainsi les uns sous les autres.

Par défaut la largeur des éléments est de 100% de la largeur de la colonne dans laquelle ils se trouvent

Positionnement Personnalisé

Dans Elementor, exception faite de la Section, de la Section Interne et de la Colonne (qui sont des éléments qui reçoivent les Widgets), tous les éléments possèdent dans l’onglet Avancé du Panneau des Attributs un onglet Positionnement. Ce paramètre permet d’agir sur la largeur de l’élément.

On trouve 4 valeurs possibles qui vont nous donner une grande souplesse.

La première valeur est Par défaut. L’élément occupera 100% de la largeur de la colonne.

Pleine largeur (100%) permet de forcer la largeur à la totalité de la largeur de la colonne. Nous reviendrons sur ce réglage lorsque nous étudierons le mode Responsive.

En ligne (auto) est un réglage qui laisse Elementor calculer automatiquement la largeur de l’élément suivant la largeur de son contenu.

Personnalisé va nous permettre de choisir nous-même la largeur de l’élément ainsi que son positionnement au sein de son propre conteneur.


Notez bien que nous avons alors le choix d’utiliser comme unité PX (pixel), % ou VW (Viewport Width). Consultez mon tutoriel précédent sur les unités. Prenez l’habitude de travaille en pourcentage et n’oubliez pas la manipulation suivante pour que cela fonctionne.

CLIQUEZ D’ABORD SUR L’UNITÉ, PUIS ENTREZ LA VALEUR CHOISIE et non l’inverse qui ne fonctionnera pas.

Exemple de positionnement personnalisé

Par défaut chaque élément a une largeur de 100% de la largeur de la colonne

En changeant la largeur de chaque élément à 33%, nous avons maintenant les trois éléments qui occupe toute la largeur de la colonne.

Conclusion

Il est impératif de bien maîtriser ces positionnements personnalisés de manière à pouvoir réaliser n’importe quelle mise en page. Leur principale utilisation est de permettre d’avoir plusieurs éléments alignés horizontalement au sein d’une seul colonne.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Partager sur facebook
Partager sur twitter
Partager sur linkedin