DudaFlex est un mode de conception de sections réactives au pixel près qui offre aussi des capacités de conception supplémentaires. DudaFlex vous permet de créer et de modifier des sites rapidement, tout en utilisant les fonctionnalités de création de l'éditeur classique que vous connaissez déjà. Comparé à l'éditeur classique, DudaFlex propose la mise en page automatique, l'alignement et la distribution de plusieurs éléments, des unités de taille adaptative et plus de contrôle au niveau des colonnes. C'est ce qui vous permet de créer et de modifier des conceptions réactives plus rapidement que dans l'éditeur classique.
Vous pouvez soit ajouter une section Flex à un site existant, soit créer un nouveau site à l'aide d'un modèle Flex. Si vous utilisez un modèle Flex, toutes les sections seront créées avec Flex. L'en-tête n'est pas conçu avec Flex et si vous ajoutez une nouvelle page, un store, un blog ou une page Membres, ils ne seront pas créés avec Flex par défaut. Vous pourrez toutefois ajouter des sections Flex à ces pages.
Cet article ne concerne que les utilisateurs qui ont commencé à utiliser DudaFlex après le 18 juillet 2022. Si vous utilisez DudaFlex version 1.0, consultez la présentation DudaFlex (1.0).
Pour en savoir plus sur DudaFlex, regardez la vidéo qui suit :
Terminologie de Flex
Cet article regroupe des définitions des termes spécifiques à DudaFlex.
Mode Flex. Où vous créez et modifiez des sections Flex. En mode Flex, vous avez accès à des fonctionnalités de conception qui ne sont pas présentes dans l'éditeur classique, mais vous avez toujours accès aux fonctionnalités de création de ce dernier.
Section Flex. Une ligne avec des colonnes Flex par défaut qui créent une mise en page. Vous pouvez ajouter, supprimer ou modifier l’ordre des colonnes Flex dans une section Flex. Les sections flexibles peuvent être enregistrées en tant que modèles pour une utilisation future.
Colonne Flex. Où vous ajoutez des widgets. Les colonnes Flex ont une mise en page automatique, ce qui signifie que les widgets à l'intérieur sont automatiquement alignés verticalement ou horizontalement. En raison de la mise en page automatique, vous ne pouvez pas déplacer librement des éléments à l'intérieur d'une colonne Flex, mais vous devez plutôt utiliser les paramètres d'alignement, d'espacement et de marge pour déplacer des éléments.
Boîtes verticales et horizontales. Conteneur qui aligne automatiquement les widgets à l'intérieur de celui-ci verticalement ou horizontalement. En raison de la mise en page automatique, vous ne pouvez pas déplacer librement des éléments à l'intérieur d'une colonne Flex verticale et horizontale, mais vous devez plutôt utiliser les paramètres d'alignement, d'espacement et de marge pour déplacer des éléments.
Grille avancée. Sert à créer des compositions de forme libre ou des éléments superposés. La grille avancée ne fournit pas de disposition automatique ou d'alignement vertical comme les colonnes Flex. Pour cette raison, nous vous recommandons de vérifier votre conception au niveau de tous les points d'interruption.
Point d'arrêt. Plages de pixels correspondant à la largeur des différents appareils, tels que les ordinateurs de bureau, les tablettes et les appareils mobiles. Lorsque la largeur d'un dispositif se trouve dans la plage de pixels prédéfinie d'un point d'arrêt, la disposition du site est ajustée de sorte que le contenu et la conception soient optimisés pour cette taille et cette orientation d'appareil.
Éléments Flex. Grille avancée ou flexbox horizontale ou verticale placée à l'intérieur d'une colonne Flex.
Hiérarchie des éléments
En mode Flex, les sections Flex contiennent des colonnes Flex et les colonnes Flex contiennent des widgets. Il s'agit d'une hiérarchie par défaut, ce qui signifie que vous ne pouvez pas ajouter un widget à une section Flex sans avoir de colonne Flex.
Sélectionner des éléments
Il existe plusieurs méthodes pour sélectionner un élément (section Flex, colonne Flex ou widget) :
Survolez l'élément et cliquez. Lorsque vous passez la souris sur un élément, recherchez le contour bleu qui indique l'élément que votre clic sélectionnera.
Sélectionnez des éléments dans le panneau Couche. Dans le volet latéral, cliquez sur Couches. À partir de là, vous pouvez sélectionner n'importe quel élément dans la section sélectionnée.
Sélectionnez des éléments dans le panneau de conception. Cliquez sur le fil d'Ariane dans le panneau de conception pour sélectionner un élément.
Sélectionnez des éléments dans le menu déroulant. Si un élément est déjà sélectionné, passez la souris sur le nom de l'élément au-dessus du menu flottant et un breadcrumb des éléments Flex apparaîtra.
MODE FLEX
Panneau de calques
Le volet des couches s'affiche sur le côté gauche du mode Flex et affiche les éléments Flex dans la section sélectionnée. Les éléments s'affichent en fonction de leur hiérarchie, avec des sections comme niveau supérieur. À partir du panneau des couches, vous pouvez ajouter de nouveaux éléments, sélectionner des éléments, réorganiser des éléments, renommer des éléments et masquer ou afficher des éléments sur certains points d'arrêt.
Panneau Design
Le panneau de conception s'affiche sur le côté droit du mode Flex et contient vos contrôles de conception pour l'élément sélectionné (section Flex, colonne Flex ou widget). Les options de projet comprennent la mise en page, le dimensionnement, l'alignement, et plus encore selon l'élément sélectionné.
Menu flottant
Le menu flottant s’affiche lorsque vous sélectionnez un élément. À partir du menu flottant, vous pouvez basculer entre les éléments, ajouter des éléments, ouvrir les panneaux de contenu ou de conception, dupliquer l'élément, ajuster l'alignement, supprimer l'élément, etc.
FAQ
Quelle est la différence entre DudaFlex et l'éditeur classique ?
Par rapport à l'éditeur classique, DudaFlex offre des fonctionnalités de conception supplémentaires qui vous permettent de créer des sites réactifs plus rapidement et plus facilement. Voici les fonctionnalités de conception offertes par DudaFlex, mais pas par l'éditeur classique :
Gain de temps. Flex est basé sur la mise en forme automatique, ce qui signifie que la conception est optimisée pour correspondre à n'importe quel point d'arrêt.
Alignement du contenu. Permet d'aligner tous les éléments d'une colonne Flex en même temps. Dans l'éditeur classique, vous devez aligner chaque élément individuellement.
Alignement automatique. Les colonnes Flex et les Flexboxes alignent automatiquement les éléments verticalement ou horizontalement.
Nombre de colonnes. En mode Flex, vous pouvez ajouter plus de 4 colonnes à une section avec une largeur d'écran allant jusqu'à 100 %.
Espace entre les éléments. Permet de définir une fois l'espace entre les éléments et s'applique à tous les éléments d'une colonne Flex.
Dimensionnement des éléments. Ajustez la taille des éléments pour optimiser la hauteur de l'écran en pixels et la largeur de l'écran en pourcentage.
Modification plus rapide. Grâce aux fonctionnalités de conception avancées de DudaFlex, vous pouvez modifier une conception existante beaucoup plus rapidement que dans l'éditeur classique.
Quelle est la différence entre la version 1.0 de DudaFlex et la version 2.0 ?
Tout ce qui a été créé avec DudaFlex avant le 18 juillet 2022 l'a été avec sa version 1.0. Les modèles ou les sections d'équipe créés précédemment continueront d'être modifiés à l'aide de la version 1.0 de DudaFlex, mais les nouvelles conceptions utiliseront sa version 2.0. Si vous modifiez un modèle ou une section d'équipe créée dans DudaFlex 1.0, vous verrez un indicateur de la version 1.0 de DudaFlex dans la barre supérieure, sur le nom de la section et dans le volet des calques. Après le 18 juillet 2022, tous les nouveaux sites ou les sites qui n'avaient pas déjà utilisé Flex seront sur DudaFlex version 2.0 et ne pourront pas accéder à la version 1.0 de DudaFlex.
DudaFlex version 2.0 est plus simple et similaire à l'éditeur classique que la version 1.0. La version 2.0 fournit des composants plus prédéfinis afin que les utilisateurs puissent créer et modifier des conceptions plus rapidement. Au lieu d'utiliser une grille sur laquelle placer des objets, les utilisateurs peuvent désormais ajouter des colonnes qui agissent comme une mise en page dans laquelle placer des widgets. Les colonnes fournissent à l'utilisateur une mise en forme automatique, ce qui signifie que les objets seront parfaits sur chaque point d'arrêt sans modification supplémentaire.