Groupe

Regroupez vos objets à l'aide du Groupe pour associer une même interactivité, créez une animation ou gérer le responsive.

Au lieu d'avoir une multitude d'objets indépendants (images, zone de texte...), créez des groupes et structurez la gestion des vos objets en termes d'interactivité, d'animation et de responsive.

Un Groupe est un conteneur qui inclut un ou plusieurs objets. Les objets "enfants" se trouvent à l'intérieur du groupe (il y a une notion de profondeur) et leurs comportements dépendent aussi de ses paramètres Taille & Position Dynamiques.

Grouper plusieurs objets

💡 Astuce : Pour grouper plusieurs objets ensemble, sélectionnez ces objets et tapez sur Cmd + G sur Mac (ou Control + G sur Windows) .

Vous pouvez également ajouter un groupe depuis la fenêtre des Composants.  

Pour éditer le contenu d'un groupe, double-cliquez sur la zone ou cliquez sur la flèche dans la liste des Objets. 

Dégrouper des objets

Vous pouvez dégrouper des objets en tapant Shift + Cmd + G sur Mac ou Shift + Control + G sur Windows.

Redimensionner un Groupe

Par défaut, le groupe ne redimensionne pas son contenu. Si vous agrandissez le Groupe, il vous faut agrandir manuellement les éléments à l'intérieur.

Vous pouvez activer l'option pour redimensionner son contenu, l'icône se trouve dans la barre d'outils, à coté des paramètres Taille & Position Dynamiques. Ce redimensionnement s'appuie sur les Taille & Position Dynamiques des objets à l'intérieur du Groupe.

Taille_et_position_automatique.png

Animer & Masquer le contenu d'un Groupe

Un des avantages du Groupe est de masquer (cropper) son contenu. Vous pouvez ainsi créer des effets d'apparition à l'aide d'un composant Multi-état.

Pour masquer un groupe, insérez le contenu, ressortez du groupe et utilisez les poignées pour réduire la taille du Groupe.

Pour réaliser un drop-down menu, créez un premier état avec la taille du groupe à 0 et dans le deuxième état agrandissez le Groupe. Réalisez le changement d'état au clic sur le bouton.

Réalisation du drop down à l'aide d'un composant multi-état

Aperçu du résultat

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous