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.
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.
Choisir les Polices utilisées sur votre site.
Voir Polices globales pour plus de détails.
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:
Ce réglage définit l’apparence par défaut de tous les textes du site.
Vous pouvez configurer les éléments suivants :
Dans Oxygen, il existe trois types de lien :
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.
Réglages des liens de type Button
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.
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.
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.
Active des fonctionnalités supplémentaires via des scripts.
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).
Greg C. / Ph. Reskator
