Le nouveau conteneur Elementor Flexbox est sorti, et dans la version dev. Je l’ai testé, et vous pouvez le faire aussi en installant ce plugin : https://wordpress.org/plugins/elementor-beta/ (NE l’installez PAS sur un site Web de production, juste sur un environnement de test)
Voici mes réflexions et observations à ce sujet.
Conteneurs Elementor : Ce que vous obtenez
Au cas où vous ne voudriez pas vous embêter à installer la version dev pour la tester, voici un aperçu rapide de tous les paramètres dont elle dispose (du moins pour l’instant).
Il est intéressant de noter qu’il n’y a plus de séparateurs de forme sous Style. Je ne sais pas si c’est temporaire ou non, je dirais qu’ils reviendront probablement…
DIV enregistré à l’aide du nouveau conteneur Elementor Flexbox
Par rapport à l’ancien DOM (avant Elementor v3), nous économiserons 4 ou 5 DIVs pour une section à une colonne, et 5 ou 6 DIVs pour une section à deux colonnes.
Par rapport au nouveau DOM (post-v3 avec l’expérience ‘Improved DOM’ active), nous économiserons ~2 ou 3 DIVs pour une section à une colonne, et 2 à 4 pour une section à deux colonnes.
Les économies sont encore plus importantes si une section intérieure (ou à Dieu ne plaise, une section intérieure dans une section intérieure ! Dans ce cas, on économise deux fois plus de divs, soit 4 à 8 pour le nouveau DOM.
C’est considérable !
Facilité d’utilisation
C’est le plus grand changement qu’apporte ce conteneur flexible. Avec lui, Elementor passe d’un constructeur de pages super facile, “fait pour vous”, à un constructeur de pages “qui doit savoir ce qu’il fait.
Ce n’est pas un changement que j’attendais d’Elementor pour être franc. Il semble qu’il y aura toujours l’option d’avoir l’ancienne ‘Section et colonnes’ disponible, donc ils ne jettent pas le bébé. Je pense que c’est intelligent.
Regardons les choses en face, une bonne partie des utilisateurs d’Elementor l’utilisent exactement parce que c’est si simple et facile. Garder les deux options est probablement la meilleure façon de procéder : les utilisateurs occasionnels ont le ” mode facile “, et les freelances et les agences le ” mode avancé “.
Cela dit, cela va “forcer” certains freelances à se surpasser et à apprendre les bases de flexbox. C’est très bien, car Elementor est basé sur flexbox, et idéalement, chaque utilisateur avancé devrait le connaître.
Des améliorations sont encore nécessaires
Les options de largeur des éléments font maintenant partie intégrante de la manière dont nous utiliserons ce conteneur flexible. Nous avons besoin d’un contrôle total, et pas seulement de PX, % et VW. Nous avons besoin d’une option ‘custom’ où nous pouvons entrer les valeurs calc(), min(), max(), clamp().
Nous avons également besoin d’options pour la largeur automatique, la croissance flexible, le rétrécissement flexible et la base flexible pour les éléments enfants flex.
Les options de débordement doivent également être améliorées. L’option “Auto” devrait être ajoutée aux options “Default” et “Hidden”, afin de permettre un défilement horizontal très facile. Idéalement, les options overflow-x et overflow-y devraient être contrôlées séparément. Je montre comment ajouter une section de défilement horizontal dans ma vidéo youtube, et cela nécessite un peu de CSS personnalisé, pour une bonne raison.
Et comme il s’agit d’une pré-version, il y a eu quelques bugs, je ne les ajouterai pas ici car ils seront probablement corrigés avant la sortie officielle de la 3.6.
Une question qui mérite réflexion
Cela vaut-il la peine de revenir en arrière et de mettre à jour tous nos sites web avec ce nouveau conteneur Flex, au lieu de sections, de colonnes et de sections intérieures ?
Non, je ne pense pas que ce soit le cas. À moins que le site web ne soit dans un marché très, très compétitif, ou qu’il soit très lent, cela n’en vaut probablement pas la peine. A raison de 3~4 DIVs économisés par section remplacée, la différence n’en vaut probablement pas la peine. Cependant, c’est vraiment génial d’avoir ce DOM plus léger à l’avenir.
Une exception à cette règle serait pour ceux qui utilisent des boucles personnalisées. Celles-ci ont tendance à être très profondes dans le DOM, et ont plusieurs DIVs inutiles… et ensuite elles sont répétées pour chaque élément lié, le plus souvent un Post dans une Post Grid. Remplacer les sections de boucles personnalisées par des conteneurs flexibles permettra d’alléger considérablement ces pages.
Code de défilement horizontal du conteneur Flexible d’Elementor
Voici le code que j’ai utilisé pour faire de la flexbox un conteneur à défilement horizontal.
selector{
overflow: auto;
}
selector > div{
flex-shrink: 0;
flex-basis: 300px; /* Width of Flex Child elements, adjust or remove completely if not needed , for different width flex child elements, use the Width settings under advanced (if it's an element) or the Width setting for the container, if it's a container */
}
/* scroll bar styling for Firefox */
selector{
scrollbar-color: #444 #999;
scroll-bar-width: thin;
}
/* scroll bar styling for webkit browsers */
selector::-webkit-scrollbar-track{
background-color: #b6b6b6;
}
selector::-webkit-scrollbar{
height: 14px;
background-color: #F4f4f4;
}
selector::-webkit-scrollbar-thumb{
background-color: #0000008f;
}
Aller plus loin
En tant que concepteur de sites web, la connaissance du langage CSS peut changer la donne pour votre carrière. Voici quelques raisons :
- Des capacités de conception améliorées : Une bonne connaissance des CSS vous permet de créer des conceptions visuellement étonnantes et attrayantes qui se démarquent de la concurrence. Vous pouvez utiliser CSS pour créer des mises en page uniques, ajouter des animations et personnaliser l’apparence de vos sites web pour qu’ils correspondent à l’identité de marque de vos clients.
- Efficacité accrue : Avec CSS, vous pouvez rationaliser votre processus de conception et réduire le temps et les efforts nécessaires à la création d’un site web. Vous pouvez utiliser CSS pour créer des styles et des mises en page réutilisables, qui peuvent être appliqués à plusieurs pages et éléments, ce qui vous permet d’économiser du temps et des efforts.
- Augmentation de la demande : Dans le monde numérique d’aujourd’hui, la demande de concepteurs de sites web ayant des compétences en CSS est élevée. Les employeurs recherchent des concepteurs capables de créer des designs attrayants et réactifs qui répondent aux besoins de leurs utilisateurs. En maîtrisant les CSS, vous augmentez vos chances de décrocher l’emploi de vos rêves et de vous démarquer de la concurrence.
Conclusion
Je suis vraiment content qu’Elementor fasse un pas en avant et ajoute ce conteneur. Il résout tellement de problèmes qu’Elementor avait, la Divception étant le plus important d’entre eux.
Nous pouvons enfin créer des mises en page plus complexes sans avoir besoin de beaucoup de CSS, et sans JavaScript pour créer des éléments DOM. Plus de pouvoir pour les utilisateurs !
J’espère que vous avez apprécié cette vue d’ensemble et ces observations.
Que pensez-vous du nouveau conteneur Elementor ? Avez-vous déjà eu l’occasion de les manipuler ?
