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.

Ajouter un Groupe

Ajoutez un Groupe depuis la fenêtre des Composants

Double-cliquez sur la zone et ajoutez un ou plusieurs objets à l'intérieur du groupe.

Ou sélectionnez vos objets et tapez sur Cmd + G sur Mac (ou Control + G sur Windows) pour grouper automatiquement ces éléments.

grouper_objets.gif

Dégrouper un Groupe

Vous pouvez dégrouper un Groupe 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.

animation_groupe.gif

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

 

animation.gif

Aperçu du résultat

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez des apps et expériences interactives sans ligne de code

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

S'inscrire (gratuit)