Passer au contenu principal

Principes de Design

Mis à jour il y a plus d'un mois

Comprendre les mises en page et les styles dans vsble

Comprendre les mises en page et les styles dans vsble

Il existe deux types de mises en page dans vsble : les Style Layouts (mises en page de style) et les Regular Layouts (mises en page régulières).

  • Les Style Layouts sont des designs uniques intégrés à chaque template. Ils donnent à ton site son aspect et son ambiance distincts. Ces designs sont fixes et ne peuvent pas être modifiés, mais c'est ce qui rend chaque template spécial.

  • Les Regular Layouts sont plus flexibles. Ils fonctionnent sur tous les templates et te permettent de personnaliser l'affichage de ton contenu.
    Par exemple :
    – Sur les pages régulières, tu peux définir le nombre de lignes ou d'éléments apparaissant dans une grille.
    – Sur les pages d'album, tu peux choisir entre un défilement horizontal, vertical ou une mise en page en grille, avec le contrôle du nombre de colonnes que tu souhaites.

Tu peux décider d'utiliser un Style Layout ou un Regular Layout pour chaque page individuellement. Cela signifie qu'une page peut utiliser le design fixe de ton template, tandis qu'une autre page peut utiliser une mise en page régulière entièrement personnalisable.

Mobile vs. Desktop :

Tu peux définir des mises en page différentes pour mobile et desktop, afin que ton site soit toujours sous son meilleur jour, quel que soit l'appareil utilisé.

Note sur les albums :

La mise en page d'album que tu choisis (horizontale, verticale ou grille) s'appliquera à tous les albums d'une même page. Cela permet de garder les choses claires et d'éviter les confusions pour tes visiteurs.

Options Desktop

Sur desktop, les pages peuvent être configurées soit sur un style layout (unique à chaque template), soit sur un regular grid layout de 1 à 6 lignes. Les albums peuvent également être affichés en mode style ou utiliser une mise en page régulière avec un choix entre défilement horizontal, défilement vertical ou mode grille (également de 1 à 6 lignes). Pour des présentations plus dynamiques, un diaporama peut être activé—soit en plein écran (où les images ou vidéos remplissent tout l'écran), soit en mode fit-to-size, qui conserve le ratio d'aspect original.

Tu peux également personnaliser la mise en page de l'en-tête (header) : aligne-le à gauche, au centre ou à droite. Lorsqu'il est centré, tu peux choisir de placer le menu de navigation à gauche ou à droite. Pour un look plus épuré ou pour gagner de l'espace (surtout si tu as beaucoup de pages), tu peux passer à un menu burger au lieu d'afficher les noms des pages. L'icône burger peut être placée à gauche, à droite ou au centre—et si ton logo est centré, tu peux choisir si le burger apparaît à sa gauche ou à sa droite. Le menu burger (le panneau qui s'ouvre en cliquant sur l'icône) peut également être positionné pour glisser depuis la gauche, le centre ou la droite.

Enfin, le pied de page (footer) peut être aligné à gauche, au centre ou à droite, te donnant un contrôle total sur la mise en page globale de ton site desktop.

Options Mobiles

Les mêmes options de mise en page sont disponibles pour le mobile, et elles peuvent être configurées indépendamment de la version desktop. Cependant, les mises en page en grille sur mobile sont limitées à un maximum de 4 lignes, pour garantir que les images restent assez grandes pour être vues et cliquées facilement. De plus, en raison de l'espace limité sur l'écran, les descriptions d'album dans les mises en page à défilement horizontal et vertical ne sont pas affichées sur le côté—comme sur desktop—mais sont à la place affichées au-dessus du défilement d'images pour une meilleure lisibilité et ergonomie.

Avez-vous trouvé la réponse à votre question ?