Formation Wordpress - Oxygen

Insérer un élément sur Oxygen

Dans notre exemple, nous travaillons avec une nouvelle page, mais vous pouvez tout à fait partir d'une page comprenant déjà des éléments.

Important : Lorsque vous souhaitez insérer un élément, vous devez prendre soin de sélectionner le conteneur parent. Evitez dans la mesure du possible d'insérer des éléments au hasard sur votre page, au risque de vous retrouver avec une structure difficile à lire et à modifier. Pour en savoir plus sur les conteneur et la hiérarchie de page, consultez le guide dédié.

  • A l'aide du panneau de structure, à droite cliquez sur le conteneur dans lequel vous allez insérer votre élément.
    • Dans notre exemple, nous sélectionnons le seul sur la page, à savoir inner content
  • Cliquez sur le bouton + en haut à droite de la page. Une liste des composants va s'ouvrir.

Les éléments les plus courants que vous serez amené à ajouter sur votre site.

  • Containers : Les conteneurs qui englobent vos éléments.
    • N'utilisez que l'élément Div
  • Text : Les titres et textes de votre site
    • Utilisez uniquement les éléments Heading et Text
  • Links : Les liens qui emmènent vers d'autres pages ou d'autres sites.
    • Utilisez l'élément link Wrapper pour ajouter un lien ou un bouton. Pour en savoir plus sur les liens et les boutons, consultez le guide dédié.
  • Visual : Les éléments plus visuel de votre site.
    • Utilisez les éléments Image et vidéos pour ajouter des médias. Pour en savoir plus, consultez le guide dédié.
  • Other : Contient l'élément Code Block, utile pour intégrer du code directement à la page. Pour en savoir plus, consultez le guide dédié.

Pour vous aider, certains raccourcis ont déjà été configuré sur votre site Appuyez sur la touche :

  • D pour faire apparaître une div.
  • P pour faire apparaître un paragraphe
  • H pour faire apparaître un titre (heading)
  • C pour faire apparaître un code block.

Cet onglet sert à faire apparaître des éléments interactifs ou dynamiques. Slider, lecteur vidéo, bouton retourner en haut de page ...

L'intérêt de cette section est qu'elle permet de mettre en place rapidement des éléments élaborés, qui nécessiteraient normalement d'écrire du Javascript. Nous attirons cependant votre attention sur le fait que ces éléments restent plus ou moins complexes à mettre en place. Il est recommandé de bien prendre en main l'interface d'Oxygen au préalable.

Parmi ces éléments, un en particulier va nous intéresser :

  • Repeater : Situé dans le sous-onglet Dynamic. Il permet de créer un ensemble d'éléments qui s'actualise de manière dynamique. Pour en savoir plus, consultez le guide dédié.

Cet onglet est plus ou moins identique à l'onglet Helpers, à la différence près qu'il permet d'intégrer des éléments dynamiques directement liés à WordPress.

Pour donner un exemple, le sous-onglet dynamic data permet d'intégrer des éléments provenant d'autres articles ou de pages. Pour en savoir plus, consultez le guide dédié.

Cet onglet fonctionne de la même manière que l'onglet Helpers, en permettant d'intégrer directement des éléments complexes. La différences est que ces éléments sont issus d'un logiciel tiers, Oxyextras, qui permet d'intégrer des éléments encore plus aboutis, mais aussi plus lourd. Pour cette raison, la plupart des éléments ne sont généralement pas activés. Pour en savoir plus, consultez le guide dédié.

Cet onglet vous permet de styliser directement sur Oxygen votre formulaire de contact. Pour en savoir plus, consultez le guide dédié.

Cet onglet n'est utile que dans le cas où vous souhaitez rajouter des pages pré-définies, avec un design différent.

Cliquer sur le sous-onglet design set vous fait apparaître un menu qui vous demandera de sélectionner un style de page. Sélectionner un style pour prévisualiser les différentes options. Assurez-vous au préalable d'avoir lu le guide relatif à la logique du développeur concernant la construction de pages.

Cet onglet est particulièrement important, car il vous permet de réutiliser à l'identique des parties de votre site. Consultez le guide dédié pour en savoir plus.

Nous n'avons abordé ici que les éléments les plus utilisés. Pour pour d'informations sur l'ensemble des éléments, vous pouvez consulter la documentation officielle d'Oxygen. Attention, le site est en Anglais. Si vous n'êtes pas à l'aise, il existe une version française de la documentation.

Une fois votre choix fait, cliquez sur l'élément pour qu'il s'intègre à votre page. Vous le verrez apparaître directement dans le panneau de structure (à droite)

Si vous avez plusieurs éléments à intégrer, prenez soin de la placer dans une div pour organiser votre structure de page.

Pour en savoir plus sur le fonctionnement d'Oxygen, consultez le guide dédié.

Besoin de quelque chose ?

Nous sommes toujours prêts à améliorer notre formation. N'hésitez pas à nous signaler un problème ou un cours manquant.
Demande de cours
bonjour@tricorn.fr
Gérer le consentement aux cookies

Afin d'offrir la meilleure expérience possible, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.

View more
Cookies settings
Accepter
Refuser
Confidentialités et Cookies
Privacy & Cookies policy
Cookie name Active
Save settings
Cookies settings