Bloc disposition

Il s’agit d’une fonctionnalité pratique de Sitely que vous devriez utiliser dès que possible. Les blocs disposition apportent non seulement une structure organisée à vos pages, mais ils rendent également incroyablement facile la réorganisation du contenu. Alors, qu’est-ce qu’un bloc de mise en page ?

Si vous regardez les illustrations d’une maquette filaire typique de site web ci-dessous, vous remarquerez que les éléments de la page sont divisés en sections visuellement distinctes, chacune véhiculant une idée, un concept ou un message particulier.

Au lieu d’avoir une longue page avec un contenu disposé uniformément d’un bord à l’autre, nous obtenons une structure plus attrayante visuellement, où certaines sections s’étendent sur trois colonnes, d’autres sur deux, certaines sur une et d’autres sur quatre. Ce concept rend la page moins monotone à consulter — il offre un répit à l’œil humain lorsqu’il parcourt la page. Il permet également à votre contenu d’être plus facilement assimilé par l’utilisateur, en le segmentant en blocs plus simples à digérer.

Chacun de ces éléments visuels constitue un bloc de mise en page idéal et, une fois créés, ils peuvent être déplacés vers le haut ou le bas de la page pour réorganiser le contenu si nécessaire. De plus, déplacer un bloc de mise en page déplacera tout son contenu sans perturber sa mise en forme.

Créer des blocs disposition

Sitely propose un élément de bloc de mise en page qui ressemble à ceci :

Un clic sur cet élément placera un bloc de mise en page sur la page, prêt à être redimensionné et à recevoir du contenu. Lorsqu’il est d’abord ajouté à la page, il ressemble à un encadré large avec un arrière-plan standard. Sa particularité est une poignée de redimensionnement inférieure en forme de losange.

Cette action regroupera tout et placera le contenu à l’intérieur d’un bloc de mise en page pour vous. Vous pouvez désormais déplacer votre bloc n’importe où sur votre page, en ayant l’assurance que votre section hero, soigneusement conçue, restera intacte et suivra le mouvement. Cela vous permet de commencer à concevoir le contenu de votre prochain bloc. À bien des égards, les blocs disposition partagent toutes les fonctionnalités de style des encadrés larges. Vous pouvez définir une couleur de fond, appliquer au bloc une image ou un dégradé, ajouter des bordures (haut et bas), des ombres et des filtres d’arrière-plan. Vous pouvez également définir votre bloc de mise en page comme emplacement de défilement, ce qui facilite grandement la création de liens de navigation vers des parties spécifiques de votre page.

Autres types de blocs disposition

Sitely dispose de quelques autres blocs disposition dans sa boîte à outils. Il s’agit essentiellement de blocs créés pour des cas d’usage spécifiques. Par exemple, la "Grille d’images/vidéos" et la "disposition de la grille" sont deux blocs conçus à des fins particulières. Ils fonctionnent sensiblement comme le bloc standard, mais le contenu que vous y ajoutez est plus spécifique. Consultez la documentation pour savoir comment utiliser ces grilles.

Lorsque vous utilisez cette fonctionnalité, il est judicieux d’attribuer un ID de groupe à vos blocs disposition — il s’agit simplement d’un nombre indiquant que le bloc appartient à un groupe spécifique de blocs sur la page. La valeur par défaut est zéro, mais vous pouvez utiliser le nombre de votre choix. C’est important car, lorsque vous créez un lien pour révéler le bloc, qu’il s’agisse d’un lien de menu normal ou d’un bouton, vous aurez l’option de fermer les autres blocs disposition de la page lorsque le lien est cliqué. De toute évidence, si j’ai deux méga-menus liés à deux liens de navigation différents, je ne veux en afficher qu’un à la fois. Par conséquent, lors de la création de mes liens de navigation, je ferais fermer les autres blocs avant d’en ouvrir un nouveau. En donnant à mes blocs de méga-menu un ID commun, seuls les blocs partageant cet ID seront fermés. Autrement dit, un seul méga-menu sera affiché à la fois. Si je n’inclus pas cet ID, un clic sur un lien de méga-menu pourrait, par inadvertance, fermer TOUS les blocs disposition de ma page. J’assurerais donc que tous les autres blocs disposent d’un ID de groupe différent.