Mis à jour le 22 novembre 2023
Les nouveaux templates (comme Alys) utilisent le nouvel éditeur flexbox. Voici rapidement ses nouvelles fonctionnalités :
Une aire de jeu pour tester flexbox
Elementor met à disposition par ici une petite « aire de jeu » pour t’entraîner à comprendre ce nouvel éditeur. Tu peux faire les petits exercices pour explorer les fonctionnalités de mises en page : https://playground.elementor.com/demo/flexbox/
Comprendre le fonctionnement des conteneurs Flexbox
L’idée de base derrière les conteneurs
Un conteneur, c’est une boîte qui contient des éléments. ces éléments peuvent être des widgets ou d’autres conteneurs. Tu peux imbriquer autant de conteneurs, comme des poupées russes., Tu peux créer des conteneurs super rapidement et les sauvegarder comme des modèles pour rendre le processus de création web encore plus simple.
Comment les éléments sont arrangés à l’intérieur d’un conteneur
Les éléments dans un conteneur ont deux modes de fonctionnement : en groupe et en solo. Commençons par voir comment les conteneurs agissent en groupe. Tu peux régler ces paramètres sous l’onglet « Mise en page ».
Direction
Quand tu ajoutes des éléments à un conteneur, tu choisis si tu veux qu’ils soient alignés en ligne ou en colonne grâce au paramètre de direction.
Alignement
Le paramètre d’alignement contrôle comment les objets se placent dans le conteneur et ça dépend si tu as choisi une direction de ligne ou de colonne. Si c’est une ligne, l’alignement dit si les éléments vont en haut, au milieu ou en bas. Si c’est une colonne, ça dit si les éléments vont à gauche, au centre ou à droite.
Justification
La justification, c’est comment les éléments sont espacés entre eux et par rapport aux bords du conteneur.
Espace entre les éléments
C’est pour définir l’espace entre les éléments dans le conteneur. Le « Gap » par défaut est de 20 pixels, mais tu peux le changer dans les paramètres du site.
Envelopper
Le paramètre de retour à la ligne décide si les éléments restent dans une seule ligne ou débordent sur plusieurs lignes ou colonnes. C’est pour s’assurer que tout reste bien dans les limites du conteneur.
Largeur du conteneur
La largeur de ton conteneur offre deux options : Encadré et Pleine largeur.
Encadré
Cette option garde les proportions du contenu dans le conteneur. À mesure que tu redimensionnes le conteneur, la boîte s’ajuste en conservant le ratio.
Pleine largeur
Avec cette option, le rapport hauteur/largeur est préservé, mais la largeur correspond aux bords gauche et droit du conteneur. . Si tu redimensionnes le conteneur de manière à ce que sa hauteur soit inférieure à celle du contenu, le contenu dépassera au niveau des bords supérieur et inférieur, mais pas des bords gauche et droit.
Ajout de propriétés sur des éléments individuels
En plus de contrôler l’ensemble des éléments dans un conteneur, tu peux également définir les propriétés de chaque élément individuellement. Voici comment le faire en utilisant les propriétés suivantes :
Align self
Cela dépend de la direction que tu as choisie, en ligne ou en colonne. Si c’est en ligne, l’alignement détermine si l’élément est en haut, au milieu ou en bas. Si c’est en colonne, ça dit si l’élément est à gauche, à droite ou au centre. Le mode Stretch étend la taille du widget pour occuper toute la ligne ou colonne.
Tri
Permet de définir l’ordre des éléments. Tu peux choisir si un élément est le premier ou le dernier d’une ligne ou colonne, ou attribuer des nombres à chaque élément. C’est super utile pour la conception responsive, car ça te permet de contrôler l’ordre d’apparition des éléments sur différentes tailles d’écran.
Taille
Détermine comment un élément grandira ou diminuera par rapport aux autres éléments du conteneur.
Comment ajuster les propriétés des éléments individuellement ?
Si tu veux modifier les propriétés d’un élément spécifique :
- Va sur l’élément que tu veux modifier.
- Clique sur l’onglet Avancé.
- Modifie les propriétés comme tu le souhaites.