Documentation en français du builder Oxygen

Styles globaux

Les styles globaux vous permettent de définir des styles à l’échelle du site pour vos éléments de vos pages. Cela vous donne un moyen simple de changer l’apparence de votre conception pour l’ensemble du site en une seule fois.

Si aucun style n’a été créé spécifiquement pour un élément, les styles globaux seront utilisés.

Les styles globaux peuvent être édités depuis Manage : Settings > Global Styles.

Colors - Couleurs

Définir des palettes de couleurs pour l’ensemble du site. L’édition d’une couleur ici la mettra à jour partout où elle est utilisée.

Voir Couleurs globales pour plus de détails.

Fonts – Polices

Choisir les Polices utilisées sur votre site.

Voir Polices globales pour plus de détails.

Headings – Niveaux de titre

Vous pouvez spécifier des styles globaux pour les niveaux de titre (h1, h2, h3, h4, h5 et h6).

Pour chacune des balises de niveaux de titre, vous pouvez personnaliser les éléments suivants:

  • Font Size – Taille du titre
  • Font Weight – Graisse, épaisseur du titre
  • Color – Couleur du titre

Body Text – Texte de la page

Ce réglage définit l’apparence par défaut de tous les textes du site.

Vous pouvez configurer les éléments suivants :

  • Font Size – Taille du texte
  • Font Weight – Graisse, épaisseur du texte
  • Line Height – Interlignage, hauteur de ligne
  • Color – Couleur du texte

Links – Liens

Dans Oxygen, il existe trois types de lien :

  1. Text Link – Lien de texte,
  2. Link Wrapper – Encapsuleur de lien
  3. Button – Bouton.

Réglages des liens de types Text Link et Link Wrapper

Les réglages s’appliquent à tous les types de lien, ainsi qu’aux liens créés en dehors d’Oxygen – par exemple, les liens présents dans le contenu d’un article de blog.

  • Color – Couleur du lien
  • Font Weight – Graisse, épaisseur du lien
  • Text Decoration – Décoration du lien (soulignage, surlignage, rature)
  • Hover Color – Couleur du lien au survol
  • Hover Text Decoration – Décoration du lien au survol (soulignage, surlignage, rature)

Réglages des liens de type Button

  • Font Weight – Graisse, épaisseur du texte du bouton
  • Border Radius – Rayon des angles

Page Width – Largeur de page

Le paramètre Largeur de page des Styles globaux définit la largeur de page par défaut sur toutes les pages du site Web.

Voir Largeur de page.

Sections

Contrôle des marges des éléments de section. Les valeurs par défaut sont 75 pixels pour les bords supérieur et inférieur et 20 pixels pour les bords gauche et droit.

L’élément Header Builder utilisera les marges gauche et droite, mais ignorera les marges haut et bas.

Animate On Scroll – Animer lors du défilement

Configurez les animations déclenchées lors du défilement à l’aide de la bibliothèque Animate on Scroll. Page de démonstration des différents effets : https://michalsnik.github.io/aos/

Les paramètres choisis ici deviendront les paramètres d’animation par défaut pour tout élément pour lequel des animations sont activées. Ces paramètres d’animation globaux peuvent être remplacés élément par élément.

Animation Type – Type d’animation
Détermine le type d’animation qui sera utilisé, tel que retournement, diapositive ou fondu.

Animation Duration – Durée de l’animation
Détermine le nombre de millisecondes durant lequel l’animation a lieu.

Anchor Animation – Animation d'ancre
Définit quelle position de l’élément, par rapport à la fenêtre d’affichage, doit déclencher l’animation.

Animation Easing - Progression de l’animation
Définit la courbe de vitesse de l’animation. Par exemple, ‘Ease-in-out’ ralenti l’animation au début et à la fin et est plus rapide au milieu ; ‘linear’ est constant ; etc.

Animation Trigger Offset - Décalage du déclencheur d’animation
Définit le décalage du point de déclenchement de l’animation (par rapport à la position de défilement de la fenêtre) en pixels.
Une valeur positive peut être utilisée pour s’assurer que l’élément entier se trouve dans la fenêtre d’affichage avant que l’animation ne soit déclenchée, tandis qu’une valeur négative peut être utilisée pour déclencher l’animation avant que l’élément n’entre dans la fenêtre d’affichage.

Animation Delay – Délai d’animation
Détermine le délai entre le déclenchement de l’animation et son début.

Animate Only Once – Animer une seule fois
Par défaut, un élément quittant la fenêtre de visualisation réinitialise l’animation et le déclenche de nouveau lorsque l’élément entre à nouveau dans la fenêtre de visualisation.
Vous pouvez désactiver ce comportement en choisissant “yes” afin de ne le déclencher qu’une seule fois.

Disable On – Désactiver sur
Cela vous permet de choisir une largeur de fenêtre en dessous de laquelle les animations seront désactivées. C’est par exemple une bonne idée de désactiver les animations pour les appareils mobiles afin d’améliorer les performances.

Scripts

Active des fonctionnalités supplémentaires via des scripts.

Défilement en douceur vers des ancres

Ce script crée un lien de type “ancre”, c’est-à-dire un lien faisant référence à un élément de la page en cours, pour faire défiler la fenêtre en douceur vers cette ancre. Pour l’activer, cochez la case « Smooth Scroll to Hash Links".

Exemple de ce qu’est une ‘ancre’ :
cliquez sur le lien ci-après pour faire remonter la fenêtre vers l’ancre qui a été positionnée afin d’afficher le titre Page Width – Largeur de page (ici, avec défilement en douceur de 700 ms).

  • Scroll Time – Durée de défilement : Nombre de millisecondes du défilement pour accéder à l’élément ciblé.

Greg C. / 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