Flex est un mode de conception de sections responsives au pixel près, avec des fonctionnalités de design supplémentaires. Flex vous permet de créer et de modifier rapidement des Sites Internet Guesty, tout en conservant les fonctionnalités de création de l'éditeur classique que vous connaissez déjà. Comparé à l'éditeur classique, Flex offre la mise en page automatique, l'alignement et la distribution de plusieurs éléments, des unités de taille responsives et un meilleur contrôle des colonnes. Cela vous permet de créer et de modifier des designs responsives plus rapidement qu'avec l'éditeur classique.
Vous pouvez ajouter une section flexible à un site existant ou créer un nouveau site à l'aide d'un modèle flexible. Si vous utilisez un modèle flexible, toutes les sections sont créées avec Flex. L'en-tête n'est pas créé avec Flex et si vous ajoutez une nouvelle page, une boutique, un blog ou une page d'adhésion, ils ne seront pas créés avec Flex par défaut, mais vous pouvez y ajouter des sections flexibles.
Note :
Cet article concerne uniquement les utilisateurs ayant commencé à utiliser Flex après le 18 juillet 2022. Si vous utilisez la version 1.0 de Flex, consultez la vue d'ensemble de Flex (1.0).
Terminologie Flex
Ce qui suit fournit des définitions pour la terminologie spécifiquement liée à Flex.
Mode Flex. Vous pouvez créer et modifier des sections flexibles. En mode Flex, vous avez accès à des fonctionnalités de conception absentes de l'éditeur classique, mais vous conservez les fonctionnalités de construction de l'éditeur classique.
Section flexible. Une ligne avec des colonnes flexibles par défaut qui créent une mise en page. Vous pouvez ajouter, supprimer ou modifier l'ordre des colonnes flexibles dans une section flexible. Les sections flexibles peuvent être enregistrées comme modèles pour une utilisation ultérieure.
Colonne flexible. Endroit où vous ajoutez des widgets. Les colonnes flexibles ont une disposition automatique, ce qui signifie que les widgets qu'elles contiennent sont automatiquement alignés verticalement ou horizontalement. En raison de cette disposition automatique, vous ne pouvez pas déplacer librement les éléments à l'intérieur d'une colonne flexible ; vous devez utiliser les paramètres d'alignement, d'espacement et de marge pour déplacer les éléments.
Flexboxes verticales et horizontales. Un conteneur qui aligne automatiquement les widgets à l'intérieur, verticalement ou horizontalement. En raison de la mise en page automatique, vous ne pouvez pas déplacer librement les éléments à l'intérieur d'une flexbox verticale ou horizontale ; vous devez utiliser les paramètres d'alignement, d'espacement et de marge pour déplacer les éléments.
Grille avancée. Permet de créer des compositions libres ou des éléments superposés. Contrairement aux colonnes flexibles, la grille avancée ne propose pas de mise en page automatique ni d'alignement vertical. Par conséquent, nous vous recommandons de vérifier votre conception à chaque point d'arrêt.
Point d'arrêt. Plages de pixels correspondant à la largeur de différents appareils, tels qu'un ordinateur, une tablette ou un mobile. Lorsque la largeur d'un appareil se situe dans la plage de pixels prédéfinie d'un point d'arrêt, la mise en page du site est ajustée afin que le contenu et le design soient optimisés pour la taille et l'orientation de l'appareil.
Éléments flexibles. Grille avancée ou boîte flexible horizontale ou verticale placée à l'intérieur d'une colonne flexible.
Hiérarchie des éléments
En mode flexible, les sections flexibles contiennent des colonnes flexibles, et ces colonnes contiennent des widgets. Il s'agit d'une hiérarchie par défaut ; vous ne pouvez donc pas ajouter de widget à une section flexible sans colonne flexible.
Sélectionner les éléments
Il existe plusieurs méthodes pour sélectionner un élément (section flexible, colonne flexible ou widget) :
Sélectionnez des éléments dans le panneau des calques. Dans le panneau latéral, cliquez sur Calques. À partir de là, vous pouvez sélectionner n'importe quel élément de la section sélectionnée.
Sélectionnez des éléments dans le panneau de conception. Cliquez sur le fil d'Ariane du panneau de conception pour sélectionner un élément.
Sélectionnez des éléments dans le menu flottant. Si un élément est déjà sélectionné, survolez son nom au-dessus du menu flottant pour afficher un fil d'Ariane des éléments flexibles.
Mode flexible
Panneau Calques
Le panneau des calques s'affiche à gauche du mode Flex et affiche les éléments Flex de la section sélectionnée. Les éléments sont affichés selon leur hiérarchie, les sections constituant le niveau supérieur. Depuis le panneau des calques, vous pouvez ajouter, sélectionner, réorganiser et renommer des éléments, ainsi que masquer ou afficher des éléments à certains points d'arrêt.
Panneau de conception
Le panneau de conception s'affiche à droite du mode flexible et contient les contrôles de conception pour l'élément sélectionné (section flexible, colonne flexible ou widget). Les options de conception incluent la mise en page, le dimensionnement, l'alignement, etc., selon l'élément sélectionné.
Menu flottant
Le menu flottant apparaît lorsque vous sélectionnez un élément. Il vous permet de naviguer entre les éléments, d'en ajouter, d'ouvrir les panneaux de contenu ou de conception, de dupliquer l'élément, d'ajuster l'alignement, de supprimer l'élément, et bien plus encore.
FAQ
Quelle est la différence entre Flex et l'éditeur classique ?
Par rapport à l'éditeur classique, Flex offre des fonctionnalités de conception supplémentaires qui vous permettent de créer plus rapidement et plus facilement des sites réactifs. Voici quelques fonctionnalités de conception que Flex offre mais que l'éditeur classique ne propose pas :
Alignement du contenu. Permet d'aligner simultanément tous les éléments d'une colonne flexible. Dans l'éditeur classique, vous devez aligner chaque élément individuellement.
Alignement automatique. Les colonnes flexibles et les boîtes flexibles alignent automatiquement les éléments verticalement ou horizontalement.
Nombre de colonnes. En mode flexible, vous pouvez ajouter plus de 4 colonnes à une section, jusqu'à 100 % de la largeur de l'écran.
Espace entre les éléments. Permet de définir l'espace entre les éléments une seule fois et s'applique à tous les éléments d'une colonne flexible.
Dimensionnement des éléments. Ajustez la taille des éléments pour optimiser la hauteur de l'écran en pixels et sa largeur en pourcentage.
Montage plus rapide. Avec Flex, des capacités de conception avancées vous permettent de modifier une conception existante beaucoup plus rapidement que dans l'éditeur classique.
Quelle est la différence entre la version 1.0 et la version 2.0 de Flex ?
Tout ce qui est créé avec Flex avant le 18 juillet 2022, a été créé en utilisant Flex version 1.0. Les modèles ou sections d'équipe créés précédemment continuent d'être modifiés à l'aide de Flex version 1.0, mais à l'avenir, les conceptions nouvellement créées utiliseront Flex version 2.0. Si vous modifiez un modèle ou une section d'équipe créée dans Flex 1.0, il y aura un indicateur qui signale Flex version 1.0 sur la barre supérieure, sur le nom de la section et dans le panneau des calques. Après le 18 juillet 2022, tous les nouveaux sites ou les sites qui n'utilisaient pas auparavant Flex sont activés avec Flex version 2.0 et il est impossible d'y accéder avec Flex version 1.0.
Flex version 2.0 est plus simplifiée et similaire à l'éditeur classique que la version 1.0. Elle propose davantage de composants prédéfinis pour une création et une modification plus rapides. Au lieu d'utiliser une grille pour placer des objets, les utilisateurs peuvent désormais ajouter des colonnes qui servent de mise en page pour y placer des widgets. Les colonnes permettent une mise en page automatique, ce qui signifie que les objets s'affichent parfaitement à chaque point d'arrêt sans modification supplémentaire.
Limites
Actuellement, vous ne pouvez pas ajouter de langue(s) supplémentaire(s) à votre site en mode flexible. Vous devrez d'abord quitter ce mode. Pour en savoir plus sur les sites multilingues, consultez la page Configurer un site multilingue.