Introduction
Utilisation de Sitely
Éléments
Comment faire
Quand on pense aux boîtes, on imagine généralement ces formes carrées ou rectangulaires qui servent à séparer le contenu sur la page web. Mais les boîtes ne se résument pas à cela. Elles constituent l’un des éléments essentiels du web design et, utilisées avec créativité, elles offrent une grande flexibilité pour mettre en scène le message de votre page. Regardez l’en‑tête d’exemple ci‑dessous : il est composé presque entièrement de boîtes. Certaines avec des angles arrondis, certaines remplies d’images, d’autres d’une couleur unie et superposées à du texte, et quelques‑unes uniquement avec des icônes.
Dans Sitely, vous disposez de tous les outils de style souhaitables pour vos boîtes, tous réunis dans le panneau Style à droite de l’interface de Sitely.
Thai Delights
Expérience culinaire asiatique authentique
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices
Bouton
Bouton
Découvrez notre menu
Le premier type de boîte est la boîte standard, toute simple — elle ressemble à ceci :
Le second type de boîte est la boîte large, qui ressemble à ceci :
Si vous choisissez l’option Dégradé, une barre de dégradé de couleurs s’affiche pour sélectionner deux couleurs ainsi qu’un angle pour le dégradé. Cliquez simplement sur chaque extrémité de la barre pour choisir vos couleurs, puis appliquez un angle
La boîte standard est conçue pour créer des boîtes qui restent à l’intérieur des marges gauche et droite de votre page web, tandis que la boîte large est prévue pour s’étendre au‑delà des bords gauche et droit et occuper toute la largeur du navigateur.
Lorsqu’une boîte standard est ajoutée au canevas, vous pouvez définir sa taille et sa position comme vous le souhaitez. De plus, la boîte peut être stylisée pour obtenir exactement l’effet désiré. Voici les options disponibles dans le panneau Style.
La première option est le Remplissage. Ici, vous pouvez choisir une couleur pour remplir votre boîte. Vous pouvez également créer d’autres types de remplissage depuis le menu déroulant Contenu.
Si vous choisissez l’option Image, vous pouvez sélectionner une image sur votre disque pour remplir votre boîte. Vous aurez alors d’autres options pour ajuster l’image afin de la remplir ou de l’adapter à la boîte. Cochez simplement la case Étirement et faites votre choix. Remplir la boîte agrandira l’image afin qu’elle occupe toute la boîte — cela peut entraîner un recadrage de l’image. Si vous choisissez d’Adapter l’image, elle ne sera pas rognée : sa taille sera augmentée/réduite pour que l’image entière tienne à l’intérieur de la boîte. Selon le format de l’image, cette option peut créer un effet « letterbox » — en laissant de l’espace de part et d’autre, ou au‑dessus et en dessous de l’image. Lorsque vous choisissez l’option Remplir, vous pouvez également aligner l’image dans la boîte — à gauche, à droite ou au centre, ainsi qu’en haut, en bas ou au milieu.
L’option SVG est idéale pour les web designers. Il s’agit de graphiques vectoriels redimensionnables que l’on peut placer à n’importe quelle taille sur le canevas tout en conservant une netteté parfaite, quel que soit l’agrandissement. Nous avons utilisé des graphiques SVG dans l’en‑tête d’exemple ci‑dessus. Les trois icônes en forme d’étoile sont en fait la même icône, dupliquée et placée sur la page à des tailles différentes.L’icône réelle ressemble à ceci.
Remarquez qu’elle est noire. C’est un autre avantage des graphiques SVG : vous pouvez modifier la couleur/teinte du graphique grâce à l’option de superposition de couleur dans le panneau Style. En cochant cette option, vous pourrez choisir une couleur et l’appliquer au SVG. Remarque : le SVG n’a pas besoin d’être contenu dans une boîte pour que cette option fonctionne — vous pouvez simplement faire glisser le SVG sur le canevas, où il sera placé comme une image plutôt que comme une boîte.
L’option Image de stock fonctionne exactement comme l’option Image normale. La seule différence est que vous sélectionnez une image depuis l’une des bibliothèques d’images de stock prises en charge par Sitely. Une fois votre boîte remplie avec une image, toutes les mêmes options de style sont disponibles.
Les options Motifs intégrés et Motifs personnalisés remplissent votre boîte avec l’un des nombreux motifs proposés par Sitely. Ces motifs fonctionnent exactement comme lorsqu’ils sont utilisés en tant que remplissage d’arrière‑plan de page. Vous pouvez ajuster l’échelle du motif pour l’adapter au mieux à votre design.
Quelle que soit la manière dont vous remplissez vos boîtes, vous pouvez leur ajouter d’autres options de style.
Bordure : en sélectionnant cette option, vous appliquez une bordure à votre boîte. Vous pouvez définir une bordure identique sur tous les côtés, ou un style/une épaisseur/une couleur différente pour chaque côté.
Ombre : cette option ajoute une ombre à votre boîte. Vous pouvez ajuster l’effet en déplaçant le petit point dans le cercle, ou plus précisément en saisissant des valeurs. La couleur de l’ombre peut être modifiée en cliquant sur le puits de couleur.
Arrondi des angles : cette option ajoute des coins arrondis à votre boîte. Vous pouvez arrondir uniformément les quatre coins, ou choisir précisément quels coins arrondir et dans quelle mesure. Si la boîte est un parfait carré, arrondir les quatre coins peut transformer votre boîte en cercle.
Opacité : c’est ici que vous pouvez réduire l’opacité de votre boîte. Bien que vous puissiez simplement changer la couleur de votre boîte pour obtenir une teinte plus claire, l’option d’opacité peut être préférable pour certains effets où les éléments sous‑jacents de la page doivent transparaître au travers de la boîte.
Filtres d’arrière‑plan : ces filtres déterminent ce qui se passe lorsque d’autres éléments de la page se trouvent DERRIÈRE votre boîte. Alors que l’option d’opacité permet aux éléments sous‑jacents de transparaître au travers de votre boîte, les filtres d’arrière‑plan ajoutent un certain degré de distorsion aux éléments d’arrière‑plan. Par exemple, en plaçant une boîte totalement ou partiellement transparente au‑dessus d’un élément d’arrière‑plan, puis en appliquant un filtre de flou d’arrière‑plan, l’effet s’apparente à celui d’un verre dépoli flottant au‑dessus du fond. Ce type d’effet est particulièrement efficace si votre boîte possède une animation de défilement. À mesure que la page défile, votre boîte peut flotter au‑dessus des autres éléments, donnant un effet plus tridimensionnel à la page.
Comme les boîtes sont très simples à créer, elles constituent l’élément idéal pour amorcer la mise en page de votre page web (wireframing). Elles peuvent imiter des images, des zones d’arrière‑plan, des boutons et des champs de formulaire pour vous donner rapidement un aperçu du rendu de votre page. Une fois votre maquette filaire posée et que vous commencez à travailler réellement sur le contenu, il est pratique de pouvoir convertir vos boîtes en certains éléments courants sans repartir de zéro. Pas d’inquiétude, Sitely a tout prévu. Vous pouvez effectuer un clic droit sur une boîte et choisir l’une des options de conversion dans le menu contextuel.
Le menu contextuel propose également une autre fonctionnalité utile : copier le style appliqué à un élément, puis coller ce style sur un autre élément. Par exemple, vous pouvez styliser un bouton sur votre page, avec ses états de survol et de clic. Lorsque vous souhaitez ajouter un autre bouton plus bas sur la page, copiez le style du bouton d’origine, puis collez ce style sur le nouveau bouton. Cela garantit la cohérence de vos designs sur toute la page.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
