Vous avez peut-être été confronté à cette situation : vous avez deux boutons créés avec le Bâtisseur Elementor, mais ceux-ci n’ont pas du tout la même largeur. Et pour le moment, il n’existe pas de mécanisme direct permettant de corriger la situation. Nous verrons aujourd’hui comment y remédier.
Le Problème
Le souci provient du fait que la dimension d’un bouton dépend de deux facteurs principaux : le contenant du bouton, ainsi que son contenu. Le bouton sera aussi large que le permet son contenant et l’exige son contenu. Or la plupart du temps, le texte contenu dans les boutons sera de longueur variable. Cela peut donc engendrer des déséquilibres.
La Solution
Pour y remédier, il suffit de :
- disposer de la version gratuite de Elementor. Dans sa version payante, Elementor propose une section au sein de laquelle on peut ajouter du code CSS personnalisé et affecter les dimensions des boutons de la section. Le souci avec cette approche est que si dans d’autres sections il existe un déséquilibre semblable, il faudra alors refaire la même manœuvre.
- se rendre dans le Tableau de Bord > Apparence > Personnaliser > CSS/JS Personnalisés
- saisir dans la zone de personnalisation le code CSS suivant :
.elementor-button
{
min-width:300px !important;
}
- publier et tester
Il est important de remplacer la valeur 300px fournie dans l’exemple précédent par la valeur qui correspond plus ou moins à la largeur de votre bouton le plus large.
Soka!