Dispositions de composant de page flexibles

L'ajout d'une flexibilité à vos dispositions permet aux composants de page de s'adapter aux différentes parties de la disposition. Par exemple, vous pouvez utiliser des largeurs relatives pour que les composants de page s'adaptent aux conteneurs parent, couper des images pour réduire leur taille et utiliser le positionnement relatif des éléments dans le conteneur.

Les composants de page peuvent être rendus encore plus flexibles à l'aide des substitutions basées sur le conteneur de dispositions. L'utilisation des substitutions, le redimensionnement du composant de page à des fins d'adaptation et la modification de sa disposition permettent à un composant d'être utilisé dans différentes parties de la page.

Par exemple, le style contentSlideshow est destiné à une liste de diapositives avec un bloc de légendes. Lorsque ce style est utilisé dans la colonne principale, la légende apparaît à côté du diaporama (la largeur du diaporama est importante). Si vous utilisez ce style dans la colonne latérale, la disposition change et est remplacée par une disposition au format empilé. Le même composant de page peut être déplacé autour de la page et ajusté.

Les exemples suivants illustrent ce concept.

Le premier exemple illustre le diaporama dans la colonne principale.

Le second exemple illustre le diaporama dans la colonne latérale.

Les exemples suivants comparent un diaporama publicitaire pleine largeur à une version qui s'intègre à un conteneur de taille inférieure. Les résultats sont générés par le biais d'une combinaison de rognage et de positionnement relatif des éléments.

Cette image illustre le diaporama publicitaire dans un conteneur pleine largeur.

Le second exemple illustre un diaporama publicitaire dans un conteneur principal avec une largeur limitée.