Groupes

Sitely permet de créer des groupes d’éléments sur le canevas. Cela facilite non seulement le réagencement des éléments sur la page, mais aide aussi à maintenir une structure de calques bien organisée et documentée..

Les groupes sont essentiellement créés lorsque deux éléments ou plus sont fusionnés en un seul élément. Par exemple, l’élément de navigation ci‑dessous est en réalité un groupe d’éléments composé de deux grands blocs pour l’arrière‑plan, d’un menu pour la navigation proprement dite, d’un numéro de téléphone, d’une icône et d’un logo. Une fois tous les éléments groupés, l’ensemble de la barre de navigation devient un seul élément qui peut être placé n’importe où sur le canevas.

Dans le panneau des calques, vous verrez que le groupe a reçu un nom — « Barre de navigation » dans cet exemple — et que tous les éléments individuels ont été organisés sous l’intitulé du groupe. Si le groupe est réduit, nous ne verrons que le nom du groupe Barre de navigation, ce qui facilite son repérage et sa sélection.

Pour créer le groupe, sélectionnez simplement tous les éléments à inclure. Vous pouvez le faire en cliquant‑glissant sur les éléments jusqu’à ce qu’ils soient tous sélectionnés, ou en maintenant Maj ou Cmd tout en cliquant pour sélectionner chaque élément à tour de rôle. Une fois les éléments sélectionnés, cliquez avec le bouton droit et choisissez Grouper dans le menu contextuel.

Vous pouvez aussi choisir Grouper depuis le menu « Organiser » de Sitely. Vous pouvez dissocier les éléments en sélectionnant le groupe puis en choisissant l’option Dissocier, soit depuis le menu contextuel, soit depuis le menu Organiser. Même une fois les éléments groupés, vous pouvez encore les sélectionner individuellement pour les modifier. Vous pouvez les sélectionner depuis le panneau des calques, ou cliquer une fois sur le groupe pour sélectionner l’ensemble, puis cliquer à nouveau pour sélectionner un élément individuel au sein du groupe.

Une fois un groupe créé, vous pouvez appliquer des effets de défilement personnalisés. Ceux‑ci s’affichent dans le panneau des styles lorsqu’un groupe d’éléments est sélectionné sur le canevas.

L’option ‘Rester en haut de la page’ force le groupe à rester collé en haut de la page, le maintenant visible en permanence. C’est le plus souvent utilisé pour les barres de navigation, comme celle illustrée ci‑dessus. Tout le reste du contenu de la page défilera derrière la barre de navigation. REMARQUE : il est important de veiller à ce que ce groupe de barre de navigation soit l’élément le plus haut dans le panneau des calques pour que cela fonctionne correctement. S’il ne s’agit pas du calque le plus haut, le contenu de la page défilera AU‑DESSUS de la barre.

Si vous avez plusieurs groupes, chacun peut avoir son propre comportement de défilement personnalisé. Par exemple, si le groupe suivant sur votre page est une section « hero », vous pouvez la définir sur ‘Empiler’. Avec cette option, la section hero atteindra la barre de navigation et s’arrêtera, laissant le reste de la page défiler derrière elle. Si elle est définie sur ‘Chevaucher’, la section hero chevauchera la barre de navigation avant de rester en haut de la page. Si l’option est définie sur ‘Le dernier pousse le précédent’, chaque groupe poussera le précédent hors du haut de la page.

Les groupes peuvent également se voir appliquer des actions ‘au clic’ comme s’il s’agissait d’éléments individuels. Des effets de défilement animés peuvent aussi être appliqués à des groupes entiers.

Couleur et dégradés