Documentation en français du builder Oxygen

Disposition et espacement

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.

Sections

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.

Colonnes

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 :

  • empiler les colonnes verticalement
  • inverser l’ordre des colonnes
  • forcer la largeur des colonnes à 50 %

Divs

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.

Dispositions et contrôles d’alignement

Les paramètres des Sections, Columns et Divs permettent de contrôler la disposition et l’alignement des éléments qu’ils contiennent.

Disposition des éléments enfants

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.

Alignement d’objet

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.

Marges

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 :

  • padding : la marge interne d’un élément
  • margin : la marge externe d’un élément

Au lieu d’utiliser cette méthode, vous pouvez aussi spécifier ces valeurs par Advanced > Size & Spacing.

IMA / Ph. Reskator

Besoin d’un complément d’information ? Retrouvez-nous sur le groupe de soutien
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram