Par défaut, l'ombre est à voir comme un bloc derrière l'élément qui s'y superpose parfaitement. En agissant sur ses paramètres, l'objectif est de modifier la position de ce bloc pour qu'il dépasse afin de donner l'impression d'une ombre.
La Box-shadow nécessite un peu de prise en main pour être bien comprise. Testez plusieurs configurations jusqu'à en trouver une qui vous convienne.
Cet onglet sert à personnaliser le fond d'un élément. C'est le premier onglet de la barre d'édition sur Oxygen (à droite).
Toutes les options de réglages liées aux image sont abordées plus en détail dans le guide dédié aux images.
Ajouter un dégradé de couleur est une option assez complexe. Voici donc une section dédiée spécifiquement à ce champ
Le champ situé sous la couleur permet de définir le comportement des couleurs. Il est plus facile de le travailler en pourcentage.
IMPORTANT : Avant de commencer cet article, il est conseillé d'avoir consulté au préalable le cours dédié à l'alignement des éléments et à la div.
Cet onglet a pour but de vous permettre de changer les options d'affichage de vos éléments. Lorsque vous avez besoin de réaliser des mise en page complexes, cet onglet peut s'avérer très puissant.
Nous allons cependant aborder ici des termes plus techniques. Il sera donc supposé ici que vous maîtrisez déjà la plupart des concepts de base, notamment la prise en main d'Oxygen, mais également quelques concepts plus avancés comme l'alignement des éléments, les unités de mesure, les marges et l'espacement ...
L'onglet Layout est le troisième onglet de votre barre d'édition sur Oxygen. Dans ce guide, nous aborderons uniquement les champs les plus intéressants pour vous, car aborder tous les concept rendrait ce guide 20 fois plus long et peu pertinent pour vous. Si vous commencez à vous sentir à l'aise en création web, ou que vous avez besoin d'avoir plus d'informations à propos d'un champ en particulier, vous pouvez consultez les sites de Mozilla developper et W3School. Une fois que vous comprenez le concept, utiliser les champs sur Oxygen s'avère très simple.
Ce champ sert à définir de quelle manière vous souhaitez afficher vos éléments. Il y a beaucoup de d'options, mais généralement, seules trois vont vous servir :
Si vous souhaitez en apprendre plus sur le concept de display, vous pouvez consulter l'article dédié sur Mozilla development et vous entraîner sur W3School.
Ce champ est uniquement visible lorsque display: flex est sélectionné. Il détermine si les éléments doivent s'aligner en colonne, ou en ligne. C'est exactement la même option que la champ layout child element dans l'onglet primary de l'élément (voir le guide dédié)
Sur la droite, le bouton reverse permet d'inverser l'ordre d'apparition des éléments.
Ce champ vous permet de contrôler le comportement des éléments qui dépassent de leur conteneur parent.
Lorsque vous avez désigné une certaine largeur ou hauteur pour un conteneur, si l'un des éléments enfant a une taille plus importante que la limite que vous avez fixé, il dépassera du cadre, ce qui peut être embétant pour votre mise en page.
Overflow vous permet de déterminer comment doivent se comporter les éléments qui dépassent du conteneur :
Attention cependant, Overflow ne fonctionne qui si vous l'appliquez au conteneur parent. En effet, overflow hidden demande au conteneur : "les éléments que tu contient doivent rester à l'intérieur de toi".
Fonctionnant sur le même principe que display : none, le champ visibility se différencie dans le sens où il ne fait que rendre transparent l'élément. C'est-à-dire que l'élément devient invisible et l'utilisateur ne peut plus interagir avec, mais il est toujours présent sur la page.
Le z-index est à utiliser lorsque des éléments se chevauchent entre eux. Ce champ sert à définir quel élément doit s'afficher en avant-plan, et lesquels doivent arriver ensuite.
Pour définir un z-index pour votre élément, entrez un nombre dans le champ. Plus ce nombre est élevé, plus il arrivera en avant-plan.
Le champ position est utilisé pour modifier le positionnement des éléments. Il est très utile si vous avez besoin de mettre un élément à un endroit précis. Attention cependant, ce champ fait partie des plus complexes à utiliser.
C'est la position par défaut. L'élément est positionné à la suite des autres.
L'élément est déplacé de sa position initiale. En fonction de ce qui est précisé, il se déplacera de X unités en fonction de l'endroit où il est censé être en position static.
L'élément "sort" de sa position initiale et n'est plus positionné à la suite des autres. Au lieu de ça, il se positionne tout en haut à droite du premier conteneur parent qui a une position relative.
Il faut ensuite éditer les champs pour positionner l'élément dans le conteneur parent. Contrairement à la position relative, le nombre entré définira à quelle distance du bord doit être l'élément
A noter : Si aucun z-index n'est précisé, un élément en position absolute passera systématiquement devant un élément en position statique ou relative.
C'est le même principe que position absolute, à deux différences près :
C'est exactement la technique qui est employé pour faire en sorte que la navbar (logo, onglets de navigation ...) reste en haut de page même lorsque l'utilisateur se met à scroller.
Cet onglet vous permet de gérer un des paramètres les plus important, à savoir la taille des éléments qui apparaîtront à l'écran. Nous sommes ici sur des options intermédiaires, donc assurez-vous d'avoir lu au préalable l'article concernant la prise en main d'Oxygen. Si vous êtes arrivés ici depuis ce guide, vous êtes au bon endroit.
Ces deux sections vont vous permettre de gérer l'espace avec les autres éléments. Ils sont cependant sensiblement différents :
Imaginons une boîte. Le padding serait l'espace entre le contenu de cette boîte et ses parois, tandis que la margin serait l'espace autour de la boîte elle-même.
On peut aussi imaginer une page web comme un camion contenant plusieurs cartons qui contiennent chacun un objet. La margin serait dans ce cas l'espace entre chaque carton, et le padding l'espace entre le carton et le contenu.
SI vous n'êtes pas encore à l'aise avec ces deux concepts, sachez que la margin est utilisée dans plus de 90% des cas, notamment lorsqu'on veut mettre un peu d'espace avec d'autres éléments. Le padding est surtout utilisé l'on a besoin d'avoir d'avoir de l'espace entre le conteneur et les éléments intérieurs, par exemple si l'on met une couleur de fond.
Ouvrons une page sur Oxygen builder. Pour commencer, nous insérons une div directement à l'intérieur du Inner content, et nous la renommons contact
A présent, en laissant le conteneur sélectionné, sur cliquons sur l'onglet Background, situé tout en haut de la barre d'édition. Nous lui ajoutons ensuite une couleur d'arrière-plan. La couleur n'a pas d'importance, veillez simplement à ce qu'elle soit différente de la couleur de vos textes.
A présent, nous allons ajouter un peu de Margin pour éviter que le conteneur soit collé au reste. Nous ouvrons donc l'onglet Size & Spacing, puis nous entrons une margin de 200px en haut (ou plus si vous estimez que c'est nécessaires).
Nous ne voulons pas que notre conteneur fasse la totalité de l'écran. Nous allons donc ajouter des margin de 8% à droite et à gauche.
Sur notre exemple, le pied de page est trop collé à l'élément. Nous ajoutons donc une margin en bas pour aérer la page.
Nous ajoutons maintenant un titre et des textes au conteneur. Vous pouvez en modifier le contenu directement dans la barre d'édition lorsque vous cliquez dessus. Pour pour d'informations, consultez le guide dédié à la typographie
L'état actuel de votre page devrait ressembler à quelque chose comme ça. Si vous n'avez pas les mêmes couleurs ou textes, ce n'est pas grave.
Nous allons maintenant augmenter l'espace entre l'élément de titre et les texte, en rajoutant 30px de margin vers le bas (margin-bottom)
Enfin, nous avons besoin de mettre un peu d'espace entre les textes et le bord du conteneur. Nous allons donc sélectionner le conteneur parent(dans notre exemple, la div contact) et mettre 4% de padding de chaque côté.
Vous savez maintenant comment fonctionnent les concepts de Margin et de Padding. N'hésitez pas à vous entraîner de votre côté !
Ce sont les onglets qui vous permettent de gérer la taille de votre conteneur ou de l'élément. Si vous ne précisez rien, la taille du conteneur ou de l'élément s'adaptera automatiquement à son contenu.
Il n'est pas toujours nécessaire d'utiliser ces options. de manière générale, voici les situations qui pourraient vous amener à les utiliser
Lorsque vous éditez une page, il est préférable d'éviter que vos éléments restent collés aux bord de la page : ce n'est déjà pas très esthétique (sauf si c'est voulu dans un cas précis) et peut amener quelques problèmes. Il est en effet bon de prévoir de l'espace entre les bord de la page et les éléments (un peu comme les marge d'impression).
Mais mettre une marge au niveau de la page n'est pas toujours facile, surtout quand elle doit fonctionner sur tablette et mobile. Voici une technique très simple et efficace :
Spécifier une margin auto va aligner votre conteneur au milieu de la page, ce qui laissera une marge égale à droite et à gauche. Dans notre exemple, 15/2 = 7,5% de marge de chaque côté. Bien sûr, vous pouvez spécifier une width différente si vous souhaitez avoir des marges plus grandes ou petites.
Vous pouvez également mettre une width plus grande en fonction du format pour diminuer la marge à mesure que la fenêtre se rétrécit : 90% en format tablette, 95% en format mobile par exemple. Attention, lorsque vous changez un champ en % sur un autre format, l'unité a tendance à se remettre en px, prenez alors soin de spécifiez à nouveau une taille en %. Si votre page casse subitement quand vous changez la marge sur d'autres formats, c'est sûrement la cause du souci.
pour en savoir plus sur les unités de mesure, consultez le guide dédié.
Vous pouvez également en profiter pour spécifier une classe qui vous permettra de réutiliser vos réglages rapidement si vous avez besoin de créer plusieurs pages ou d'alterner plusieurs types de marge dans la même page. Lorsque nous réalisons un site, nous créons généralement une classe normal que nous assignons à toutes les div qui gèrent les marges principales.
Ces champs sont utiles uniquement dans le cas où vous spécifiez des unités en %, vw ou vh (voir le guide dédié aux unités de mesure pour plus d'infos), et servent à interdire à l'élément de dépasser ou d'être plus petit qu'une certaine taille.
Pour une meilleure compréhension de ce guide, il est conseillé de lire l'article dédié aux conteneurs et aux div.
Les bordures sont un des aspects les plus simples à gérer sur votre site. Le tout est de bien savoir sur quel conteneur vous appliquez vos modifications.
Comme son nom l'indique, une bordure est une ligne, plus ou moins grosse, qui prend place sur les bord d'un élément ou d'un conteneur. Elle permet de délimiter un élément ou d'ajouter un effet de style.
Sur votre page Oxygen, cliquez sur le conteneur ou l'élément auquel vous souhaitez ajouter une bordure, et cliquez sur l'onglet borders dans la barre d'édition (à gauche).
Attention, la bordure apparaîtra uniquement lorsque vous aurez configuré les champs color, width et style
Permet d'éditer individuellement chaque border si besoin. Par défaut, l'option est réglée sur all, c'est-à-dire toutes les bordures d'un coup.
Permet de choisir la couleur de la bordure. Vous pouvez mettre une couleur prédéfinie si vous en avez configuré avec les paramètres de style.
Définit la largeur de la bordure.
Définit le style de la bordure :
Ci-dessous, le bouton unset all borders supprime toutes les bordures de l'élément. Utile si vous avez besoin de tout supprimer.
Arrondit les angles du conteneur ou des l'élément. Plus le chiffre est grand, plus les coins seront arrondis.
Si vous avez besoin de faire une bordure complètement ronde, mettez 100% de border-radius. Attention, votre conteneur devra être parfaitement carré, ou vous obtiendrez un ovale.
Ci-dessous, le bouton edit individual radius vous permet d'éditer individuellement chaque côté de la bordure.
Notez que vous pouvez tout à fait éditer un border-radius sans forcément mettre de bordure. Pour cela, mettez la width de la bordure à 0px, ou définissez le style sur none.
Les bordures étant sur le bord de votre conteneur ou élément, le choix du champ a ici une importance :
Vous pouvez éditer la margin de le padding de votre élément avec l'onglet Size & spacing.
Via Oxygen Builder, vous pouvez facilement modifier l'apparence de vos textes et de vos titre grâce à de nombreuses options très précises.
Ce guide vous montre comment gérer modifier la typographie d'un seul élément. Si vous souhaitez appliquer vos réglages à plusieurs ou à l'ensemble de vos textes et titres, vous pouvez utiliser une classe ou configurer vos paramètres de style dans l'onglet Settings.
Pour commencer, ouvrez une page avec Oxygen et sélectionnez l'élément que vous souhaitez modifier. Si vous ne savez pas comment faire, consultez notre guide de prise en main.
Une fois l'élément voulu sélectionné, cliquez sur l'onglet typographie dans la barre d'édition de gauche (4e onglet), qui vous permettra d'accéder aux options.
Les graisses sont variables en fonction des polices. Certaines ne sont pas disponible dans toutes les graisses. Si vous passez par exemple d'une graisse de 400 à 500 et que rien ne change, c'est qu'il n'y a tout simplement pas de graisse en 500.
Il existe plusieurs tailles de titres qui plus ou moins grands . Ils sont associé à une balise h(x) en fonction de leur importance :
C'est un peu comme si vous faisiez une dissertation. Plus votre page est bien organisée, plus elle est facile à lire pour vos utilisateurs et les moteurs de recherche, ce qui améliore la qualité globale de votre site.
Lorsque vous cliquez sur un titre dans la barre de structure (à droite), la barre d'édition (à gauche) vous affichera directement cette option. Localisez le champ tag et choisissez votre taille de titre.
Vous pouvez aussi modifier les tailles de titres par défaut en utilisant les paramètres globaux de style.
Assurez-vous d'avoir bien sélectionné un élément de texte (élément avec un H ou un t), et pas une div (élément avec une icône de rectangle). Vos modifications risqueraient de ne pas bien s'appliquer.
Si vous avez une div qui contient plusieurs textes, vous pourriez être tenté de configurer les options au niveau de la div pour qu'elles s'appliquent à tous les éléments enfants. C'est possible, mais c'est une mauvaise pratique, car vous risquez de vous empêtrer rapidement dans de multiple règles contradictoires. Préférez plutôt l'emploi de classes dans ce type de cas.
Les ID priment sur les classes. Si vos modifications ne s'appliquent pas, c'est peut-être parce que vous faites vos modification au niveau de la classe, alors que votre élément a subi des modifications au niveau de l'ID.
Pour en savoir plus, consultez notre guide dédié.
