Élément conteneur

L'élément conteneur peut être aligné pour réaliser de nombreuses choses.

• Disposition des éléments horizontalement
• Ajout d'un fond ou d'une ombre supplémentaire
• Couleur ou image de fond en pleine largeur

Disposition des éléments horizontalement

Ajout de colonnes et définition du ratio de largeur

Après avoir ajouté un conteneur à la toile, vous pouvez voir qu'il n'y a qu'une seule colonne dans l'onglet Données.

Cliquez sur Colonne pour ajouter plus de colonnes. Et ajustez leur Ratio de largeur pour créer la disposition souhaitée. Dans la capture d'écran, j'ai configuré un ratio de 2:1, où la colonne de gauche est deux fois plus large que la colonne de droite.

Toujours horizontal

Notez que même si les colonnes sont disposées horizontalement, sur les écrans mobiles, elles seront disposées verticalement pour s'adapter aux écrans plus étroits.

Dans la plupart des cas, cela convient. Mais si vous souhaitez que vos colonnes soient toujours disposées horizontalement, cliquez sur l'onglet Contenus et vérifiez le champ Type. Sélectionnez Toujours horizontal. Et votre contenu sera disposé horizontalement, quelle que soit la taille de l'écran.

Largeur de colonne automatique

Une courte note sur Ratio de largeur est qu'il peut être réglé sur Ratio de largeur, où la largeur de la colonne se rétrécira pour s'adapter aux éléments à l'intérieur de la colonne. C'est utile, par exemple, lorsque vous souhaitez configurer un avatar et une devise.

Colonne unique

Lorsqu'il n'y a qu'une seule colonne dans un conteneur, c'est toujours utile. Par exemple, vous pouvez y ajouter un Arrière-plan supplémentaire et un Ombre de boîte supplémentaire.

Fond en pleine largeur

Les fonds en pleine largeur peuvent être réalisés en utilisant un conteneur. Il suffit de définir Forme -> Largeur sur Largeur plein écran. Le conteneur s'étendra jusqu'aux bords de l'écran de gauche à droite.

Mais le contenu à l'intérieur du conteneur sera toujours contraint à la largeur de l'élément de la page. Vous pouvez faire en sorte que le contenu s'étende jusqu'au bord du conteneur en définissant Contenus -> Largeur intérieure à 100%.

Image en pleine largeur

Comme le montre la capture d'écran ci-dessus, si vous définissez Forme -> Largeur de l'élément image sur Couvrir. L'élément image s'étendra jusqu'au bord du conteneur, en ignorant le conteneur et le padding et l'écart des colonnes.