Ajoutez des séparateurs SVG entre vos sections avec 14 formes, des tailles ajustables et des options de retournement.
Séparateurs SVG
Les séparateurs SVG sont des formes décoratives placées entre les sections pour créer des transitions visuelles fluides. Chaque section peut avoir un séparateur en haut et un en bas, configurés indépendamment.
Comment les configurer
Les séparateurs sont configurés dans les settings globaux de chaque section, dans les groupes "Séparateur haut" et "Séparateur bas" :
- Ouvrez l'éditeur de thème Shopify
- Sélectionnez une section
- Deroulez jusqu'àux settings Séparateur haut et/ou Séparateur bas
- Choisissez une forme, une taille et les options souhaitees
{{GLOBAL_SETTINGS}}. Ils sont rendus via le snippet separator.liquid.14 formes disponibles
Les formes sont organisées en 4 groupes :
Organiques
| Forme | Description | Rendu |
|---|---|---|
| Wave | Vague douce et fluide | Transition naturelle, universelle |
| Curve | Courbe simple et élégante | Transition douce, minimaliste |
| Blob | Forme organique irreguliere | Style créatif, moderne |
| Scallop | Festons arrondis repetitifs | Style décoratif, retro |
Geometriques
| Forme | Description | Rendu |
|---|---|---|
| Arrow | Flèche pointant vers le bas | Directif, guide le regard |
| Tilt | Ligne inclinee simple | Dynamique, angulaire |
| Slant | Diagonale prononcee | Energique, bold |
| Zigzag | Ligne en zigzag | Graphique, géométrique |
Creatives
| Forme | Description | Rendu |
|---|---|---|
| Brush | Coup de pinceau irregulier | Artistique, fait main |
| Torn | Effet de papier dechire | Texturise, organique |
| Drip | Effet de gouttes | Ludique, créatif |
Effets
| Forme | Description | Rendu |
|---|---|---|
| Fade | Degrade transparent | Transition subtile, presque invisible |
| Line | Simple ligne horizontale | Minimaliste, séparation nette |
Settings par séparateur
Chaque séparateur (haut et bas) a ses propres réglages indépendants :
| Setting | Type | Options | Défaut | Condition |
|---|---|---|---|---|
| Forme | Select | 14 formes + None | None | - |
| Taille | Select | Small / Medium / Large / Extra Large | Medium | Forme != None et != Line |
| Retourner | Checkbox | On/Off | Off | Forme != None, Fade, Line |
| Chevauchement | Range | 0-100% | 0 | Forme != None et != Line |
| Couleur | Texte (CSS) | - | - | Forme != None |
Taille
La taille contrôle la hauteur du séparateur SVG :
| Taille | Code | Description |
|---|---|---|
| Small | sm | Séparateur discret, hauteur réduite |
| Medium | medium | Taille standard |
| Large | lg | Séparateur prononce |
| Extra Large | xl | Séparateur dramatique, maximum de hauteur |
Retourner (Flip)
L'option Flip inverse horizontalement la forme du séparateur. Cela permet de :
- Varier les transitions entre sections
- Créer des symetries (séparateur haut flip + bas normal)
- Inverser la direction d'une forme directionnelle (arrow, tilt)
Chevauchement (Overlap)
Le chevauchement fait deborder le séparateur par-dessus la section adjacente, créant un effet de superposition. Une valeur de 0 place le séparateur juste à la limité de la section.
Couleur
Par défaut, le séparateur prend la couleur de fond de la section. L'option couleur permet de définir une couleur CSS personnalisée via la variable --shape-target.
color-{{ palette }}). Cela garantit une transition fluide entre deux sections de palettes différentes.Bonnes pratiques
Coherence
Utilisez une famille de formes pour votre boutique plutôt que de mélanger toutes les formes :
| Style de boutique | Formes recommandées |
|---|---|
| Luxe / Minimaliste | Curve, Fade, Line |
| Organique / Nature | Wave, Blob, Curve |
| Geometrique / Tech | Arrow, Tilt, Slant, Zigzag |
| Creatif / Artisanal | Brush, Torn, Drip |
| E-commerce standard | Wave, Arrow, Fade |
Alternance haut / bas
Quand vous utilisez des séparateurs, pensez à la transition dans les deux sens :
Section 1 (Claire)
└── Separateur bas : Wave, taille Medium
Section 2 (Sombre)
├── Separateur haut : (none - le wave du bas suffit)
└── Separateur bas : Wave flip, taille Medium
Section 3 (Claire)
└── Separateur haut : (none)Avec les palettes de couleurs
Les séparateurs sont particulièrement efficaces entre des sections de palettes différentes. Ils adoucissent la transition entre deux fonds de couleur contrastee :
Section Claire (fond blanc)
└── Separateur Wave (couleur sombre)
Section Sombre (fond sombre)Prochaines étapes
- Palettes de couleurs — Les couleurs utilisées par les séparateurs
- Animations — Combinez séparateurs et animations
- Configuration initiale — Paramètres globaux du thème
- Layout — Espacements et marges entre sections