Il est temps de vous plonger dans la FlexBox avec Elementor, le nouveau Conteneur introduit depuis la version vous ouvre les portes de du denier système de construction CSS flexible et puissant..
Si vous utilisez Elementor depuis longtemps vous avez pris vos marques pour construire vos pages à base de sections/colonnes. Si c’était une solution pertinente il y a 5 ans cela ne l’est plus à l’heure de la généralisation de la FlexBox au sein de tous les CMS du marché.
La FlexBox utilise 2 dimensions de l’espace HTML : l’axe principal et l’axe transversal
Le module des boîtes flexibles, aussi appelé « FlexBox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l’espace entre des objets d’une interface ainsi que de les aligner.
Vincent MARY de WPmarket vous en présente les principes dans cette vidéo :
Pourquoi passer des sections/colonnes à la FlexBox dans Elementor ?
Vous avez déjà réalisé des sites WordPress avec Elementor et l’ancien système de sections/colonnes, tout se passe bien alors pourquoi passer à la FlexBox ? De manière générale le principe de la FlexBox produit moins de code de structure pour la conception des sections, cela permet aussi de s’affranchir de l’imbrication limité des sections avec l’ancien système (1 seule section interne), enfin cela apporte de nombreux réglages de distribution du contenu dans les Conteneurs (et ça c’est vraiment la grosse différence).
Pour passer à la FlexBox avec Elementor il faut activer une expérience dans les réglages d’Elementor (onglet Fonctionnalités), par défaut elle ne l’est pas encore (stade Release Candidate).
Une fois la fonction activée vous ne trouverez plus le widget Section interne mais une section dédiée (Mise en page). Lorsque vous allez sélectionner une section, dans la colonne d’édition, un bouton vous invite à « Convertir » la section en conteneur. Une fois convertie vous retrouvez en double votre section en conteneur, supprimez la version ancienne.
La FlexBox impose de revoir certains réglages pour parfaire la conversion
Si tout se passe bien, et si votre mise en forme est simple, vous n’aurez à retoucher. D’expérience je sais qu’il faut souvent revoir le comportement des widgets inclus dans les nouveaux conteneurs.
C’est d’autant plus nécessaire si vous aviez des colonnes auparavant. Un exemple ci-dessous.
Les widgets en colonne se retrouvent dans des conteneurs qui sont, en réalité, non utiles. Vous pouvez les mettre dans le conteneur de base (section) et supprimer les sous-conteneurs inutiles.
Nouvelles fonctions de distribution et de comportement des sous-éléments à un conteneur FlexBox
Avec la FlexBox vous découvrirez les fonctionnalités liées au principe CSS FlexBox : répartition sur l’axe principal (horizontal ou vertical) et ensuite comportement sur l’axe transversal à l’axe principal des éléments présent dans le conteneur. Viennent ensuite les réglages de justification et d’alignement dédits éléments. On fini avec l’écart entre les éléments et le comportement de l’enveloppe globale avec ou sans retour à la ligne (warp).
De nouveaux conteneurs de base et modèles de la bibliothèque Elementor
Autres changements liés au passage à la FlexBox : les conteneurs de base et les modèles proposé par la bibliothèque Elementor.
En conclusion
Je n’ai pas parcouru l’ensemble des fonctions apportés par la FlexBox, cet article présente l’essentiel sur cette nouvelle façon de concevoir les mises en pages avec Elementor, il est grand temps de découvrir tout ça et de l’adopter !
Passer à la FlexBox sera, à très court terme, obligatoire, Elementor va s’appuyer sur les possibilités offertes pour proposer à l’avenir de nouvelles fonctions et réglages, sans passer est, au minimum, une erreur si ce n’est « suicidaire ».
Sources : les concepts de base pour flexbox, la Flexbox Css,
