Bloc Séparateur

Liens en vedette

1. Documentation de Company XYZ sur le bloc Separator
2. Documentation Shopify sur les sections et les blocs
3. Documentation de Company XYZ sur les paramètres de visibilité

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez le bloc Separator pour ajouter un espace supplémentaire entre des contenus proches ou pour placer un simple séparateur entre deux parties d’une page. Il fonctionne bien lorsqu’une mise en page a besoin d’un rythme plus net, d’une séparation plus claire ou d’un espacement différent sur ordinateur et sur mobile. Consultez le Bloc Séparateur pour obtenir des détails sur les paramètres.

Pour un aperçu plus large du fonctionnement des blocs dans l’éditeur, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Les principaux paramètres contrôlent deux choses : l’espace ajouté par le bloc et le fait que cet espace inclue ou non une ligne visible.

Définissez séparément la hauteur pour ordinateur et pour mobile afin de conserver un espacement confortable sur les grands écrans sans donner une impression d’espace excessif sur les petits écrans. Dans la plupart des mises en page, l’espacement sur mobile gagne à être inférieur à celui sur ordinateur.

Le style de ligne vous permet de choisir entre un espace vide et un séparateur visible. Utilisez une ligne lorsque vous souhaitez séparer différents types de contenu ou marquer une transition plus forte, et utilisez None lorsque le seul espacement suffit.

La couleur du séparateur modifie la couleur de la ligne lorsqu’un style de ligne est activé. Si vous laissez la couleur transparente, le bloc utilise la couleur de bordure du thème, ce qui est généralement le moyen le plus simple de conserver une cohérence visuelle du séparateur.

Note

Même avec une hauteur de 0, ce bloc peut encore afficher un petit espace, car la mise en page environnante conserve un espace standard entre les blocs.

Paramètres standard de bloc

Paramètres de visibilité

Utilisez les contrôles de visibilité pour afficher ce bloc sur tous les appareils ou le masquer sur ordinateur ou sur mobile. C’est particulièrement utile lorsque vous souhaitez des schémas d’espacement différents pour les petits écrans ou lorsqu’un séparateur n’améliore qu’une seule mise en page. Consultez les paramètres de visibilité.

Notes d’utilisation

1. Ajustez chaque viewport. Vérifiez le séparateur sur ordinateur et sur mobile, car l’espacement, l’alignement, la visibilité et le comportement lié aux médias peuvent varier selon la taille de l’écran.
2. Utilisez l’espacement mobile avec précaution. Réduisez d’abord la hauteur sur mobile si la page paraît trop aérée sur les petits écrans.
3. Conservez le style de repli lorsque possible. Laissez la couleur transparente ou utilisez des valeurs de style par défaut lorsque vous souhaitez que le séparateur se fonde dans le style standard du thème.
4. Faites compter les remplacements. Utilisez des couleurs explicites, des dégradés ou des remplacements basés sur les médias uniquement lorsque vous voulez que la zone du séparateur ressorte davantage par rapport au contenu environnant.
5. Utilisez les lignes avec discernement. Ajoutez une ligne de séparation seulement lorsque vous avez besoin d’une rupture visuelle plus marquée que ne peut l’offrir le seul espacement.
6. Attendez-vous à un espace minimal. Ne comptez pas sur un réglage de hauteur à 0 pour obtenir un espacement totalement jointif entre les blocs.