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 :

  1. Sélectionnez l’élément Image.
  2. Dans le volet Propriétés, choisissez Bibliothèque multimédia .
  3. Dans le champ ID, cliquez sur le  bouton Parcourir .
  4. Téléchargez ou choisissez l’image que vous souhaitez utiliser et cliquez sur Sélectionner une image .
  5. 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.