Dans Content Designer, la taille de la section dépend du contenu. Cela signifie que la hauteur d’une section n’est pas fixe et dépend des éléments à l’intérieur.
La taille de section sélectionnée, petite, moyenne ou grande, définit uniquement le remplissage vertical, c’est-à-dire l’espace au-dessus et en dessous du contenu à l’intérieur d’une section. Elle ne définit pas la hauteur finale de la section.
Tailles de section par défaut sans contenu
Les valeurs suivantes indiquent la hauteur minimale de la section lorsqu’aucun contenu n’est ajouté. La taille de la section augmente automatiquement lorsque du contenu est ajouté.
Ordinateur de bureau
Les sections occupent toujours toute la largeur de la fenêtre visible du navigateur sur les appareils de bureau. Par exemple, environ 1440 px.
| Taille | Hauteur totale | Remplissage vertical | Largeur |
| Petite | 160px | 40px + 40px | 1440px : 100 % de la fenêtre |
| Moyenne | 240px | 80px + 80px | 1440px : 100 % de la fenêtre |
| Grande | 400px | 160px + 160px | 1440px : 100 % de la fenêtre |
Mobile
Le remplissage vertical d’une section reste identique sur mobile. Seule la largeur change. Par exemple, en utilisant ~375px comme référence standard pour le mobile :
| Taille | Hauteur totale | Remplissage vertical | Largeur |
| Petite | 160px | 40px + 40px | 375px : 100 % de la fenêtre |
| Moyenne | 240px | 80px + 80px | 375px : 100 % de la fenêtre |
| Grande | 400px | 160px + 160px | 375px : 100 % de la fenêtre |
Après avoir ajouté du contenu à la section, la hauteur dépasse les valeurs indiquées ci-dessus.
Recommandations pour les images dans les sections
Lorsque vous ajoutez des images dans les sections, suivez ces recommandations :
- Résolution de l’image : Utilisez des images haute résolution. Une largeur d’au moins 1440 px est recommandée
- Hauteur de l’image : Évitez les designs à hauteur fixe
- Ratio d’aspect : Utilisez des ratios flexibles, comme 16:9 ou plus large
- Zone sûre : Conservez le contenu important au centre
Placez le contenu clé au centre pour éviter le recadrage sur différents appareils.
Bloc Liens rapides
Le widget Liens rapides utilise un affichage fixe. La hauteur de l’image est fixe, tandis que la taille de l’image dépend de l’affichage par colonnes sélectionné et de la taille de la fenêtre.
- Hauteur de l’image : 140px
- Hauteur de la carte : 214px
- Largeur de l’image : Remplit la colonne à 100 %
Placez le contenu clé au centre pour éviter le recadrage sur différents appareils.
Affichage 1 colonne
| Point de rupture | Taille de l’image |
| Mobile (< 768px) | 335 × 140px |
| Tablette (768px–1439px) | 728 × 140px |
| Ordinateur de bureau (≥ 1440px) | 1300 × 140px |
Affichage 2 colonnes
| Point de rupture | Taille de l’image |
| Mobile (< 768px) | 335 × 140px |
| Tablette (768px–1439px) | 356 × 140px |
| Ordinateur de bureau (≥ 1440px) | 642 × 140px |
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.