L’outil de mise en page d’Oxygen est basé sur flexbox ce qui facilite la création de n’importe quelle mise en page.
Vous définissez la structure de votre page en utilisant des Sections, des Colonnes et des Div.
Ensuite vous y mettez votre contenu comme des titres, du texte, des vidéos ou autres puis vous adaptez leur position et leur alignement en utilisant les paramètres de mise en page d’Oxygen.
En général, vos pages seront constituées de multiples Sections. Tous les éléments de vos pages seront placés à l’intérieur de ces sections.
L’élément Section limite son contenu à la largeur de la page. Vous pouvez spécifier une largeur personnalisée pour la section avec Advanced > Size & Spacing > Container Width.
L’élément Columns sert au contenu basé sur des colonnes. Vous pouvez choisir une disposition de colonnes prédéterminée ou spécifier les largeurs de chaque colonne manuellement.
L’élément Columns est responsive, ce qui fait qu’en-dessous d’une largeur d’écran spécifiée, vous pouvez :
L’élément Div est généralement placé à l’intérieur d’une section ou d’une colonne et est utilisé pour regrouper des éléments afin de définir leur disposition, sans impacter la disposition des autres éléments à l’intérieur de la section ou de la colonne.
Par exemple, vous pouvez placer une Div empilée horizontalement à l’intérieur d’une Section empilée verticalement pour créer une disposition horizontale à l’intérieur d’une disposition verticale.
Les paramètres des Sections, Columns et Divs permettent de contrôler la disposition et l’alignement des éléments qu’ils contiennent.
Les éléments enfants d’une section d’une colonne ou d’un div peuvent être empilés horizontalement ou verticalement.
Vous pouvez changer les paramètres du Child Element Layout basés sur la largeur de l’écran pour rendre votre contenu responsive.
Une fois que vous avez déterminé l’empilement des éléments enfants à l’intérieur d’un contenant, vous voyez apparaître des paramètres supplémentaires. Ces paramètres permettent d’aligner vos éléments à gauche ou à droite, de les centrer, de les placer près du bord inférieur ou supérieur de votre contenant.
Passez votre souris au-dessus de la limite de l’élément pour voir apparaître la barre permettant de gérer les marges. Cliquez dessus et déplacez-la pour ajuster les marges de l’élément.
Il y a deux types de marges :
Au lieu d’utiliser cette méthode, vous pouvez aussi spécifier ces valeurs par Advanced > Size & Spacing.
IMA / Ph. Reskator
