Les éléments de base d’Oxygen se trouvent dans : +Add > Basics.
Toutes les mises en pages imaginables peuvent être réalisées en combinant ces éléments.
Les conteneurs vous permettent de créer votre structure et votre mise en page. En général, tout le contenu de votre page va se trouver à l’intérieur de conteneurs.
Supprimer un conteneur supprime également tout ce qu’il contient !
L’élément Section limite son contenu à la largeur de la page.
L’élément colonnes facilite la création de mises en page ‘responsives’.
L’élément Div est un conteneur générique. En général, il n’a aucune incidence sur le design de la page tant qu’il n’a pas d’options de style définies.
span est un autre conteneur 'neutre', mais de type ‘in-line’.
Lisez Disposition et espacement pour plus de détails sur l’utilisation des conteneurs.
Oxygen comporte quatre types d’éléments texte.
Pour modifier le texte de n’importe quel élément texte, double-cliquez dessus.
L’élément Heading est une élément de texte qui utilise les tags HTML (h1, h2, h3, h4, h5 et h6). On les utilise habituellement pour le titre de page (h1) et les titres et les sous-titres (h2 à h6) afin de hiérarchiser le contenu d’une page web.
Non seulement ils facilitent la lecture des internautes mais ils permettent aussi aux robots des moteurs de recherche de comprendre la structure du contenu de votre page.
L’élément Text, dans Oxygen, est un élément Div qui ne contient que du texte.
Des options de formatage de base peuvent être appliquées à ce texte avec la barre d'outils qui apparaît en haut de l’écran quand vous éditez le texte.
L’élément Rich Text permet d’appliquer des options de formatage plus poussées en utilisant l’éditeur TinyMCE de WordPress.
L’élément Span, accessible depuis la barre d’outils d'édition de texte, permet de créer un style personnalisé qui ne s’appliquera qu’à la portion de texte comprise entre les deux balises Span.
Dans Oxygen il y a trois types de liens. Ces éléments créent des hyperliens vers d’autres pages web, des fichiers, d’autres endroits de la même page (on parle alors d’ancres), des adresses email ou n’importe quelle URL.
Pour tous les éléments liens, le lien peut être défini dans le champ URL en haut de l’onglet Primary.
Vous pouvez entrer n’importe quelle URL ou cliquer sur le bouton set pour rechercher et choisir un contenu existant de votre site.
Un élément Text Link est juste un élément texte comprenant un lien vers une autre URL.
La couleur par défaut des liens peut être définie par Manage > Settings > Global Styles > Links.
Un élément Link Wrapper est un conteneur qui vous permet de regrouper plusieurs éléments et de faire ces éléments un unique lien : cliquer sur n’importe quel élément contenu dans un Link Wrapper ouvrira le même lien.
Un élément Button est comme un élément Text Link sauf que son apparence est celle d’un bouton au lieu d’un texte.
Des options de style simples sont accessibles pour les boutons dans l’onglet Basic Styles.
Ils servent à ajouter des éléments graphiques à votre page.
Indiquez l’URL de votre image dans le champ Image URL de l’onglet Basic Styles.
Cliquez sur Browse à côté du champ Image URL pour téléverser ou choisir des images dans la bibliothèque de médias. Cela chargera l’image en taille réelle dans votre bibliothèque, indépendamment de la taille d'affichage dans votre mise en page.
Sinon vous pouvez utiliser les options de la bibliothèque de médias pour vous assurer que seule la plus grande version nécessaire de votre image est chargée dans votre conception :
En chargeant l’image de cette façon et à condition de ne pas avoir choisi la plus petite taille dans le menu déroulant, l’image va utiliser l’attribut srcset pour déterminer quelle version charger en fonction de la taille de l’affichage, améliorant ainsi le temps de chargement de la page.
En savoir plus : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
L’élément Video permet d’intégrer des vidéos dans vos pages en vous assurant qu’elles sont ‘responsives’ et concervent leur ratio hauteur / largeur. Par exemple, à mesure que la fenêtre du navigateur rétrécit, la vidéo se réduit également, tout en conservant ses proportions.
Pour intégrer une vidéo Youtube ou Vimeo, collez l’URL de la vidéo dans le champ YouTube / Vimeo URL de l’onglet Basic Styles.
Vous pouvez également contrôler le Video Aspect Ratio (4:3, 16:9 ou 21:9).
Ou encore, sous Embed Iframe, cocher Manually Paste Iframe Code afin de coller le code iframe permettant d’intégrer une vidéo d’un autre fournisseur.
L’élément Icon affiche une icône au format SVG et propose différentes options de styles.
Pour choisir une icône, sélectionnez un jeux d'icônes via Icon Set puis commencez à écrire un mot clé dans le champ Icon pour restreindre la sélection aux icônes correspondantes.
Voir aussi : Icônes SVG personnalisées.
L’élément Code Block vous permet d’intégrer du code HTML, PHP, CSS ou Javascript/jQuery dans votre page.
IMA / Ph. Reskator
