Disposition de la grille

La disposition de la grille de Sitely est un excellent outil pour créer des mises en page de pages ou de sections attrayantes. Bien qu’elle soit plus couramment utilisée pour créer des grilles d’images pour des galeries, elle peut également accueillir d’autres contenus comme du texte, des boutons et des boîtes. En fait, Sitely propose une option de grille distincte spécialement pour les contenus image et vidéo — elle s’appelle Image/Video Grid. Cet élément peut remplir automatiquement une grille via un panneau spécial de sélection de contenu. La grille standard, que nous abordons ici, est une option plus flexible pour ceux qui souhaitent ajouter du contenu personnalisé dans les cellules. Hormis ces différences, les deux types de grilles se configurent sensiblement de la même manière..

Commencez par ajouter l’élément à votre zone de travail. Lors de son ajout, il contient par défaut une structure d’une ligne et trois colonnes — il ressemble à ceci :

Une fois sur la zone de travail, vous pouvez commencer à le styliser et à y ajouter le contenu de votre choix. La configuration de votre grille se fait via le panneau de style à droite de l’écran. Voici les réglages par défaut. La grille comporte trois éléments (appelés cellules). Chaque élément est réglé à 300 × 300 pixels, avec des espacements horizontal et vertical à 20 px. En modifiant le nombre d’éléments, vous ajoutez des cellules à la grille, qui apparaissent sous la première rangée. Ainsi, en passant de trois à, disons, six éléments, deux rangées de cellules apparaîtront à l’écran.

Vous pouvez toutefois aller plus loin dans la personnalisation en sélectionnant chaque cellule de la grille et en demandant à Sitely d’en changer la taille et la forme. Toujours dans le panneau de style, vous verrez une option qui indique à Sitely combien de colonnes et/ou de lignes chaque cellule doit occuper dans la grille. L’option ressemble à ceci.

Si vous ne voyez pas l’option Cellule de grille dans le panneau de style, c’est que vous n’avez pas sélectionné de cellule. Cliquez dans une cellule pour la mettre en évidence ; l’option apparaîtra alors. Vous savez qu’une cellule est sélectionnée sur la zone de travail car elle affiche des poignées autour du périmètre en forme de petits X.

Poursuivez cellule par cellule pour ajuster leurs extensions jusqu’à ce que votre grille ressemble à ce que vous souhaitez. Voici un exemple de grille simple que vous pourriez obtenir. Nous avons ajouté les étendues de colonnes et de lignes pour que vous puissiez voir comment la grille a été créée.

Votre grille peut désormais être stylisée grâce à toutes les options disponibles dans le panneau de style. Vous pouvez appliquer une couleur de fond, des bordures et des arrondis. À noter : la disposition de la grille elle‑même, ainsi que les cellules, sont remplies de couleurs de wireframe standard lors de leur ajout. Ces couleurs peuvent être modifiées à votre convenance dans le panneau de style.

Ensuite, il est temps d’ajouter du contenu. Essentiellement, vous pouvez placer presque n’importe quel élément dans une cellule. Créez et stylisez simplement l’élément sur votre zone de travail, puis faites‑le glisser sur l’une des cellules pour le placer. Lorsque vous faites glisser des éléments sur la grille, les cellules se mettront en évidence pour signaler que vous êtes dans une zone de dépôt. Relâchez simplement le bouton de la souris et l’élément sera déposé dans la cellule. Voici à quoi ressemble la mise en évidence.

Si votre contenu est plus grand que la cellule, lorsqu’il est déposé, il sera rogné pour s’adapter aux limites de la cellule. Vous devrez peut‑être redimensionner le contenu pour mieux correspondre à la taille et à la forme de la cellule une fois placé. Pour ce faire, faites glisser la poignée de redimensionnement de l’élément ou, pour du texte, modifiez sa taille de police dans le panneau de style.

Bien sûr, vous n’êtes pas limité à un seul élément par cellule. Si votre cellule est suffisamment grande, vous pouvez y placer une image, du texte et éventuellement un bouton — à vous de jouer, laissez libre cours à votre créativité.

Notez que les cellules d’une grille sont toutes stylisées de la même manière. Par exemple, si vous sélectionnez une cellule et changez sa couleur d’arrière‑plan, toutes les cellules de la grille prendront cette même couleur. Cela permet d’assurer la cohérence et la symétrie de vos grilles. Cependant, vous pouvez donner à vos cellules des arrière‑plans de couleurs différentes en incluant une boîte dans le contenu. Par exemple, si je voulais que la zone de texte illustrée ci‑dessus ait un fond bleu, je la créerais comme un élément de contenu, puis je la grouperais avec le texte avant de la déposer dans une cellule — comme ceci.

Une fois votre contenu dans la cellule, vous pouvez ajuster indépendamment la taille du fond et du texte afin qu’ils s’adaptent au mieux à l’espace disponible.

Faites preuve de créativité

Vous vous demandez peut‑être comment tirer le meilleur parti de cette fonctionnalité de Sitely dans le monde moderne de la communication visuelle — en particulier pour le web. Pour y répondre, il suffit d’observer certaines tendances récentes du design de pages web — en particulier les designs en grille Bento. Il s’agit de pages web inspirées de la boîte‑repas japonaise Bento. Si vous ne connaissez pas, voici à quoi cela ressemble :

Le concept est assez simple à comprendre. Chaque élément du repas est contenu dans son propre compartiment. En design web, des concepts similaires entrent en jeu. Au lieu d’aliments, une page web de type Bento comporte une série de cellules, chacune contenant une idée ou un message unique. C’est un style principalement plébiscité par les entreprises technologiques, comme Apple. Essentiellement, l’utilisateur peut parcourir rapidement toute la page pour saisir l’essence d’un produit ou d’un service. Chaque idée est soigneusement compartimentée. Survoler ou cliquer sur un compartiment fournit souvent plus d’informations sur cet aspect du produit ou du service. Ce concept de « lecture rapide » est devenu essentiel dans le monde des médias numériques d’aujourd’hui, rapide et souvent impatient. Ainsi est née la tendance du design en Bento Box.

Mais par où commencer pour concevoir une page web dans ce style ? La première chose à garder en tête est qu’il vous faut beaucoup de flexibilité dans la conception de la grille afin d’exploiter pleinement le concept. Ainsi, au lieu d’une grille à 3 colonnes comme ci‑dessus, créez plutôt une grille offrant bien plus d’options de placement. Un bon point de départ consiste à faire correspondre votre disposition de la grille à la grille de colonnes sous‑jacente de votre zone de travail Sitely.

Si l’on prend la structure à 12 colonnes de Sitely pour une page de bureau standard, on peut configurer une disposition de la grille suivant le même format. La grille serait configurée ainsi :

Et sur la zone de travail, cela ressemblerait à ceci.

De toute évidence, une telle grille vous offre de nombreuses possibilités d’extension en lignes et en colonnes pour vos cellules. Ci‑dessous se trouve un exemple en direct montrant comment ce concept peut transmettre efficacement un message visuel aux internautes pressés qui n’aiment pas chercher la navigation ou d’autres pages informatives. À la place, ils perçoivent visuellement le message de la page. En survolant ou en cliquant/appuyant sur les différents éléments, ils accèdent à plus d’informations ou à des images du produit en plus grand. Ils peuvent même être dirigés vers d’autres pages du site pour des explications plus détaillées sur un aspect particulier de l’offre présentée. Explorez la grille ci‑dessous pour vous inspirer.