Un Groupe est une boîte qui contient d'autres blocs et les organise. Utilisez-le pour placer des éléments côte à côte, créer des colonnes ou donner à une partie d'une section son propre fond et sa propre bordure.
Où utiliser des groupes
De nombreuses sections acceptent un bloc Groupe : le pied de page, l'infolettre, le héros, les diapositives du diaporama, la FAQ, avant et après, les avis, le contact, la 404, la confirmation de commande, les lignes dépliables et la zone de texte des listes de produits comme les produits en vedette et les collections. Chaque section décide quels blocs peuvent aller dans ses groupes, et combien de groupes elle accepte.
Pour en ajouter un dans le constructeur, sélectionnez la section, cliquez sur Ajouter un nouveau bloc et choisissez Groupe. Faites ensuite glisser d'autres blocs à l'intérieur. Certaines sections (pied de page, infolettre, avis) permettent aussi de placer un groupe dans un groupe.
Disposition
- Largeur : Remplir prend l'espace libre et le partage à parts égales avec les autres groupes Remplir à côté. Ajuster n'est pas plus large que son contenu. Personnalisé définit une Largeur personnalisée en pourcentage.
- Direction : Vertical empile les blocs, Horizontal les place côte à côte. Les blocs côte à côte passent à la ligne quand il n'y a pas assez de place.
- Empiler verticalement sur mobile (Horizontal uniquement) : sur téléphone, les blocs s'empilent.
- Position : place les blocs de haut en bas (Haut, Centre, Bas).
- Alignement : place les blocs de gauche à droite (Gauche, Centre, Droite).
- Espace entre (l'option qui répartit, « space between ») : écarte les blocs avec le même espace entre eux. Elle est proposée dans le sens où les blocs s'enchaînent : dans Position pour un groupe vertical, dans Alignement pour un groupe horizontal.
Apparence
- Utiliser le schéma de couleurs parent : activé par défaut, le groupe utilise donc les couleurs de la section. Désactivez-le et choisissez un Schéma de couleurs pour donner au groupe ses propres couleurs de fond et de texte.
- Bordure : Aucun ou Solide. Solide ajoute Épaisseur de la bordure (de 1 à 20 pixels) et Opacité de la bordure. La couleur est la couleur de bordure du schéma.
- Rayon d'angle : arrondit les coins, de 0 à 100 pixels.
- Superposition d'arrière-plan : ajoute une couche de couleur au-dessus du fond. Réglez la Couleur de superposition et le Style de superposition : Solide, ou Dégradé qui s'estompe jusqu'à la transparence, avec une Direction du dégradéHaut ou Bas. Pratique pour rendre un texte lisible sur une image de héros.
Espacement
Espacement est l'espace entre les blocs dans le groupe (de 0 à 100 pixels). Marge intérieure est l'espace entre le bord du groupe et ses blocs, de chaque côté.
Recettes
- Deux boutons côte à côte dans un héros : placez-les dans un groupe Horizontal avec un petit espacement.
- Trois colonnes dans le pied de page : un groupe Horizontal avec trois éléments Remplir à l'intérieur, et Empiler verticalement sur mobile activé.
- Une carte : un groupe Vertical avec son propre schéma de couleurs, une bordure Solide, un rayon d'angle et une marge intérieure.
- Texte à gauche, bouton à droite : un groupe Horizontal avec Alignement réglé sur Espacement (space between).
Bon à savoir
- Une colonne est plus large que voulu : deux groupes Remplir partagent l'espace à parts égales. Passez-en un en Personnalisé et donnez-lui un pourcentage.
- Le groupe ne s'affiche pas : un groupe sans bloc, ou avec seulement des blocs masqués, ne s'affiche pas sur votre boutique.
- Groupe n'est pas dans la liste des blocs : cette section n'accepte pas de groupes, ou sa limite de groupes est atteinte.
- Les réglages Texte, Bouton et Séparateur se trouvent dans Blocs Groupe, Texte, Bouton et Séparateur : comment fonctionnent les réglages des composants de mise en page ?.