Ajouter et modifier des sections de DudaFlex (1.0)

Pour ajouter une section DudaFlex :

1. Survolez l'espace entre les lignes et cliquez sur le bouton Ajouter une section. Les sections s'affichent dans le panneau latéral. Sinon, faites un clic droit pour ouvrir le menu contextuel et cliquez sur Ajouter une section.
2. Dans le panneau latéral, cliquez sur Sections Flex.
3. Cliquez sur la section Flex à ajouter. Ensuite, en haut de la page, cliquez sur Enregistrer.
4. Le mode Flex s'ouvre avec la section à modifier.

Ajouter des conteneurs et des flexboxes

Une fois la section DudaFlex ajoutée à votre site, vous pouvez configurer votre grille et ajouter des conteneurs et des flexboxes pour accueillir des widgets dans la section.

Pour configurer votre grille dans la section, rendez-vous dans le panneau Design et sélectionnez une mise en page prédéfinie dans la section Réorganiser la structure. Vous pouvez également sélectionner le nombre de colonnes, de lignes et l'écart que vous souhaitez entre chacune d'elles depuis la section Personnaliser la structure.

Pour ajouter des conteneurs et des flexboxes à la grille :

1. Pointez sur la grille, puis cliquez sur le bouton + ().
2. Dans la section Éléments Flex, cliquez sur Conteneur, Flexbox verticale ou Flexbox horizontale. Pour en savoir plus sur la façon de choisir un conteneur ou une flexbox, consultez l'article Conteneurs et flexboxes (1.0).
3. Déposez le conteneur ou la flexbox à l'endroit souhaité sur la grille. Lorsque vous déplacez le conteneur ou la flexbox, des points bleus apparaissent pour vous permettre d'épingler le conteneur ou la flexbox à différents endroits de la grille. Vous pouvez voir où l'élément est épinglé depuis le panneau Design, à côté de Épingler dans la section Position.
   
4. Redimensionnez le conteneur ou la flexbox à la taille souhaitée en faisant glisser les bords.

Ajouter et modifier des widgets

Une fois que vous avez ajouté la section DudaFlex à votre site, configuré votre grille et ajouté un conteneur ou une flexbox, vous pouvez ajouter des widgets au conteneur ou à la flexbox.

Depuis l'éditeur classique, vous pouvez faire glisser un widget du panneau de gauche et le déposer sur une grille. Vous entrerez alors automatiquement dans le mode flex.

Pour ajouter des widgets :

1. Pointez sur le conteneur ou la flexbox et cliquez sur le bouton +.
2. Recherchez et sélectionnez le widget que vous souhaitez ajouter.
3. Déposez le widget à l'endroit souhaité dans le conteneur et redimensionnez-le.
4. Lorsque vous déplacez le widget, des points bleus apparaissent pour vous permettre d'épingler le widget à différents endroits du conteneur. Vous pouvez voir où l'élément est épinglé depuis le panneau Design, à côté de Épingler dans la section Position.
   
5. Remarque

   Les éléments compris dans une flexbox sont automatiquement placés dans une liste verticale ou horizontale.

6. Une fois le widget ajouté, l'éditeur de contenu apparaît. Vous pouvez alors configurer le widget.
7. Modifiez le design du widget dans le panneau Design.

Sélectionner des éléments

Vous pouvez sélectionner un élément de plusieurs manières :

• Survolez l'élément et cliquez. Cliquez une fois pour sélectionner le calque parent de l'élément, cliquez deux fois pour sélectionner le calque imbriqué et cliquez trois fois pour sélectionner le prochain calque imbriqué et ainsi de suite.

• Survolez l'élément et double-cliquez. L'élément survolé sera sélectionné peu importe son niveau d'imbrication.

• Survolez l'élément et cliquez sur commande/contrôle + sélectionner. L'élément survolé sera sélectionné peu importe son niveau d'imbrication.

Copier-coller les éléments Flex et les widgets

Vous pouvez copier-coller des éléments flex (grilles, conteneurs, flexbox) et des widgets lorsque vous êtes en mode flex. Par exemple, vous pouvez copier la grille d'une page et la coller dans la section flex d'une autre page. Vous pouvez aussi copier des widgets depuis l'éditeur normal et les coller dans des sections flex. Cette fonctionnalité de copier-coller fait gagner du temps car elle permet de recréer rapidement des designs complexes et de mettre au point des sites web plus vite.

Pour copier-coller des éléments flex ou des widgets en mode flex, faites un clic droit sur l'élément ou le widget en question et sélectionnez Copier ou Coller dans le menu. Pour les widgets, vous pouvez aussi accéder à la fonctionnalité Copier-coller en sélectionnant le widget concerné et en cliquant sur Plus ().

Pour copier un widget depuis l'éditeur normal et le coller dans une section Flex, cliquez sur le widget en question dans l'éditeur normal afin d'ouvrir le menu Contenu et design. Cliquez sur l'icône Paramètres () et sélectionnez Copier dans le menu. Accédez à la section flex souhaitée, faites un clic droit et sélectionnez Coller dans le menu.

Réorganiser des éléments

Vous pouvez utiliser les flèches pour déplacer les éléments imbriqués dans des Flexbox, sections et grilles. Les flèches sont accessibles depuis la barre flottante ou en faisant un clic droit pour ouvrir le menu contextuel. L'utilisation des flèches pour réorganiser les éléments permet d'effectuer des modifications plus fluides et d'empêcher l'imbrication inattendue des éléments.

Les éléments peuvent être déplacés dans les directions suivantes :

• Les éléments imbriqués dans les Flexbox horizontales peuvent être déplacés de gauche à droite. Dans les Flexbox verticales, les éléments peuvent être déplacés de haut en bas.

• Les grilles imbriquées dans une section peuvent être déplacées de haut en bas.

• Les éléments imbriqués dans des grilles ou des conteneurs peuvent être déplacés dans n'importe quelle direction, à condition qu'il y ait deux éléments à côté l'un de l'autre et qu'ils soient étendues sous toute la cellule.