Les éléments de base d’Oxygen peuvent être trouvés dans + Ajouter -> Basiques.
Toutes les conceptions de page Web possibles peuvent être créées en combinant ces éléments ensemble.
CONTENEURS
Les éléments de conteneur vous permettent de créer la structure et la disposition de votre conception. En général, tout le contenu de votre page résidera dans des éléments de conteneur.
La suppression d’un élément de conteneur supprimera également les éléments imbriqués à l’intérieur de celui-ci.
Section
L’ élément Section contraint le contenu à la largeur de la page .
Dans Oxygen 3.4 et plus récent, vous pouvez insérer des diviseurs de forme dans les sections.
Colonnes
L’ élément Columns facilite la création de mises en page réactives basées sur des colonnes.
Div
L’élément Div est un conteneur générique. En général, cela n’a aucun effet sur la mise en page de votre page tant que des options de style spécifiques ne lui sont pas définies.
TEXTE
Oxygen fournit quatre types d’éléments de texte.
Pour modifier le texte dans un élément de texte, double-cliquez sur le texte.
Titre
L’élément Heading est un élément de texte qui utilise les balises d’en-tête HTML ( h1 , h2 , h3 , h4 , h5 et h6 ). Ils sont couramment utilisés pour les titres, les en-têtes et les sous-titres qui aident à organiser le contenu sur une page Web. Non seulement ils permettent aux utilisateurs de parcourir plus facilement la page Web, mais ils peuvent également aider les robots des moteurs de recherche à comprendre la structure du contenu de votre page.
Texte
L’élément Text est un élément Div qui ne contient que du texte.
La mise en forme de base peut être appliquée à ce texte grâce à la barre d’outils de mise en forme qui apparaît en haut de l’écran lorsque le texte est en cours de modification.
Texte riche
L’ élément Rich Text permet d’appliquer un formatage étendu au texte, à l’aide de l’éditeur WordPress TinyMCE.
Span
L’ élément Span permet de créer des styles spéciaux qui ne s’appliquent qu’à la partie de votre texte enveloppée avec Span.
Pour créer un élément Span , double-cliquez sur un élément Heading ou Text pour modifier son texte. Mettez ensuite en évidence la partie du texte que vous souhaitez envelopper la Span et cliquez sur <span> dans la barre d’ outils mise en forme.
LIENS
Oxygen fournit trois types d’éléments de liaison. Ces éléments créent des hyperliens vers d’autres pages Web, fichiers, emplacements dans la même page, adresses e-mail ou toute autre URL.
L’URL du lien peut être définie dans le champ URL en haut de l’ onglet Styles de base pour tous les éléments de lien.
Vous pouvez saisir une URL, ou cliquez sur le jeu bouton pour rechercher et définir l’URL de lien vers le contenu existant sur votre site.
Lien texte
Un élément de lien de texte est comme un élément de texte avec un lien hypertexte vers une autre URL.
Les couleurs des liens par défaut peuvent être modifiées dans Gérer -> Paramètres -> Styles globaux -> Liens.
Lien Wrapper
Un élément Link Wrapper vous permet de créer un lien unique pour un groupe d’éléments.
Tous les éléments placés dans un Link Wrapper seront cliquables dans le cadre du lien.
Bouton
Un élément Button est similaire à un élément Text Link , sauf qu’il est affiché sous forme de bouton plutôt que de texte brut.
Des options de style simples pour le bouton sont disponibles dans l’ onglet Styles de base .
VISUEL
Les éléments visuels sont utilisés pour ajouter des éléments graphiques à votre page.
Image
Spécifiez l’URL de votre image dans le champ URL de l’image de l’onglet Styles de base.
Cliquez sur Parcourir à côté du champ URL de l’image pour télécharger ou choisir des images dans la médiathèque WordPress. Cela entraînera le chargement de l’image en taille réelle dans votre conception, quelle que soit la taille d’affichage de l’image.
Vous pouvez également utiliser l’option Bibliothèque multimédia pour vous assurer que seule la plus grande version nécessaire de votre image est chargée dans votre conception :
- Sélectionnez l’élément Image.
- Dans le volet Propriétés, choisissez Bibliothèque multimédia .
- Dans le champ ID, cliquez sur le bouton Parcourir .
- Téléchargez ou choisissez l’image que vous souhaitez utiliser et cliquez sur Sélectionner une image .
- Ensuite, utilisez la liste déroulante Taille pour choisir la taille de votre image que vous souhaitez utiliser.
En chargeant l’image de cette manière, tant que vous n’avez pas choisi la plus petite taille dans la liste déroulante Taille , l’image utilisera l’attribut srcset pour déterminer la version à charger en fonction de la taille de la fenêtre, améliorant ainsi les temps de chargement des pages.
Lectures complémentaires: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Vidéo
L’élément vidéo est un moyen d’incorporer des vidéos dans vos pages et de vous assurer qu’elles sont réactives et conservent leur rapport hauteur / largeur – c’est-à-dire que lorsque la fenêtre du navigateur se rétrécit, la vidéo se rétrécira é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 URL YouTube / Vimeo de l’onglet Styles de base .
Vous pouvez également contrôler le rapport hauteur / largeur de la vidéo ou coller manuellement le code iframe pour intégrer une vidéo d’un autre fournisseur.
Icône
L’élément Icône affiche une icône SVG et propose diverses options de style.
Pour choisir une icône, saisissez du texte dans le champ Icône de l’ onglet Styles de base pour rechercher les icônes disponibles.
AUTRE
Bloc de code
L’élément Code Block vous permet d’incorporer du code HTML, PHP, CSS et JavaScript personnalisé dans votre page.
