Les containers remplacent les sections et les colonnes qui fonctionnaient sous forme de tableau (choix du nombre de lignes et choix du nombre de colonnes).
Les containers Flexbox sont accessibles à partir de la version gratuite du constructeur Elementor.
Le module des boîtes flexibles (aussi appelé « FlexBox ») et permet de distribuer l’affichage entre des objets d’une interface et les aligner.
Le principe de Flexbox produit moins de code de structure pour la conception (donc plus facile à interpréter par un navigateur web pour un chargement plus rapide) et permet de dépasser la limitation d’imbrication classique (une seule section interne).
Activer l’utilisation des conteneurs Flexbox
Pour passer à Flexbox, il est nécessaire d’activer une expérience depuis Elementor > Réglages (onglet Fonctionnalités).
Activer l’option Conteneur Flexbox.
L’utilisation de Flexbox n’est pas une obligation.
Utilisation des conteneurs Flexbox
Dans la liste des widgets, un nouveau widget fait son apparition : Conteneur.
Le widget Section interne disparaît.
Un conteneur de base peut contenir autant de conteneurs supplémentaires que souhaité.
Conseil : afin de mieux organiser votre espace de travail, pensez à renommer vos conteneurs via un double clic depuis le Navigateur.
Un appui sur le bouton Ajouter un nouveau conteneur donne accès à de nouvelles structures de mise en page, notamment des structures plus complexes qui ne nécessitent plus l’usage combiné de sections internes et code personnalisé.
Les modèles proposés par Elementor ne sont pour le moment pas tous encore convertis en mode Flexbox.
Exemple :
La configuration des conteneurs s’effectue depuis l’onglet Mise en page > Éléments (ce qui concerne les enfants du conteneur principal) et depuis l’onglet Avancé (ce qui concerne le conteneur sélectionné).
- Direction :
- Ligne — horizontale : une rangée (tous les conteneurs sont disposés à l’horizontal)
- Colonne — vertical
- Ligne — inversé
- Colonne — inversé
- Aligner les éléments :
- Début
- Centrer
- Fin
- Étirer
- Écart entre les éléments : par défaut 20 pixels
- Envelopper :
- Aucune enveloppe (valeur par défaut, les éléments présents dans le conteneur restent sur une seule ligne)
- Envelopper : sépare les éléments sur plusieurs lignes
Ces options peuvent être modifiées de façon flexible après création de la structure.
Exemple d’options de direction :
Exemple d’options d’alignement :
Convertir des structures classiques
En sélectionnant une section classique, un bouton CONVERTIR apparaît.
Une copie va être réalisée, après vérification du rendu, vous pourrez supprimer la section d’origine.
Astuce : vous pouvez également passer par la roue crantée en bas à gauche (Réglages) pour cliquer sur CONVERTIR afin de convertir instantanément toutes les sections en conteneurs.
