Passer la souris sur la page à modifier et cliquer sur Edit With Oxygen
Vous arrivez ensuite sur l'interface d'Oxygen
Edition
Sélectionner une image
Cliquez sur le bouton Structure (en haut à droite) pour faire apparaître la barre de structure
Voici à quoi ressemble le panneau de structure
Cliquez sur une image à l'écran pour la sélectionner directement dans le panneau de structure.
Dans certains cas spécifiques, l'image n'est pas sélectionnable directement, il faudra la sélectionner à la main dans le panneau de structure. Les éléments avec une image portent la mention image
Ici , l'élément hero est celui qu'il faut sélectionner pour modifier l'image en arrière plan.
Types d'images
Il existe deux manière d'intégrer une image :
Tel quel, via l'élément image : L'image est inséré dans ses propres proportions. Par exemple, une image en 1920x1080 aura une largeur de 1920 sur 1080, donc rectangulaire.
Un élément image est intégré dans la barre de structure avec une icône spécifique.
En arrière-plan : L'image est intégré à l'intérieur d'un conteneur, ce qui permet de la redimensionner sans la déformer. Si elle ne rentre pas dans le cadre, elle sera rognée.
Une image en arrière-plan est intégré dans la barre de structure avec une icône de conteneur classique
Pour en savoir plus sur les types d'images et comment en insérer de nouvelles, consultez le guide dédié.
Editer une image
Une fois l'image sélectionnée dans la barre de structure :
Si c'est un élément image : Le champ pour modifier l'image est directement accessible à gauche. Dirigez-vous vers le champ image url et cliquez sur le bouton browse
Si c'est une image en arrière-plan : Cliquez sur l'onglet background (à gauche) pour accéder au champ de modification. Dirigez-vous vers le champ image url et cliquez sur le bouton browse
Dans les deux cas, vous ouvrez alors une nouvelle fenêtre. Sélectionnez l'image que vous souhaitez insérer à la place, ou glissez-déposez l'image à insérer.
Cliquez sur le bouton select image (en bas à droite) pour remplacer l'image.
Enfin, cliquez sur le bouton enregistrer (en haut à droite) pour valider les modifications.
Le off-canva est un élément permet d'afficher une nouvelle fenêtre lors du clic sur un élément, permettant d'afficher de nouvelles choses.
Il est par exemple possible d'intégrer un menu, mais aussi une grande variétés d'éléments, comme des images, une vidéo, un formulaire de contact ... Le off-canvas est donc particulièrement intéressant pour ajouter de l'interactivité à votre site web, pas seulement en version mobile.
Insérer un off-canvas
Sélectionnez le conteneur parent qui contiendra l'élément (par défaut le inner content) et insérez l'élément off-canvas
Onglet Extras quand vous cliquez sur le + violet
Si l'élément Off Canvas n'est pas visible, Activez l'option dans l'extension OxyExtras
Insérer un off-canvas dans une navbar
Le off-canvas est un outil particulièrement indiqué pour créer un menu de navigation mobile, en permettant de créer une version plus stylisée et plus modifiablee. La procédure pour l'intégrer est détaillée dans le guide sur les templates et le main.
Ce sont les options disponible directement en cliquant sur l'élément
Couleur d'arrière-plan : La couleur du conteneur
Click selector : sélecteur qui va activer ou désactiver le off-canvas. Il peut être défini sur n'importe quel élément qui porte la classe que vous assignez
Par défaut, le sélecteur est .oxy-burger-trigger, qui est une classe associée à l'élément burger trigger
Exemple concret : Ici, nous donnons au logo la classe ouvrir_off-canvas
De retour sur l'élément off-canvas, nous assigons le sélecteur .ouvrir_off-canvas (sans oublier le point)
Slide in from : Définit par où le Off-canvas va s'ouvrir.
Le changement ne se voit pas immédiatement sur la page d'édition. Vous devrez recharger la page après avoir sauvegardé.
Offcanvas Type : Si Slide est sélectionné, le off-canvas va se positionner par dessus le contenu de la page. Si Push est sélectionné, il poussera le conteneur qui a été choisi.
Exemple concret : En Slide, le Off-canvas apparaît par dessus le contenu
En push, après avoir défini le sélecteur sur .oxy-burger-trigger, le Off-canvas pousse le burger à l'extérieur.
Offcanvas Width : définit la largeur du Off-canvas.
Si vous souhaitez que le Off-canvas prenne toute la page, mettez une width à 100%.
Offcanvas Transition Duration : Définit la durée d'ouverture du Off-canvas en secondes.. Plus le chiffre est grand, plus il mettra du temps à s'ouvrir
Tag : Définit la balise du Off-canvas, par défaut Div. Inutile dans une utilisation normale.
Config
Définit les options de configuration du Off-canvas (NB : Enabled = Activé - Disabled = Désactivé) :
State on page load : Définit si le Off-canvas est déjà déployé lorsque l'utilisateur arrive sur la page.
Site scrolling when open : Définit si l'utilisateur peut faire défiler la page lorsque le Off-canvas est ouvert.
Clicking outside offcanvas closes it : Autorise ou non le Off-canvas a être fermé si l'utilisateur en dehors de l'élément.
Browser performance : A utiliser si le Off-canvas perturbe le temps de chargement. Améliore la performance de l'élément.
Force second offcanvas to close : si un autre Off-canvas était ouvert, il sera fermé lors de l'ouverture de celui-ci.
Clicking hashlinks will close offcanvas : Cliquer sur un Hashlink (un lien amenant à une autre section de la page) fermera le Off-canvas.
Sync burger triggers : A utiliser si vous souhaitez que deux burgers triggers soient activés pour que le Off-canvas s'ouvre. Dans ce cas, il vérifiera que les deux sont bien activés avant de s'ouvrir.
Layout / Spacing
Fonctionne comme les onglets classiques d'Oxygen. Vous permet de gérer l'alignement et les marges.
Gap permet d'ajouter un espace général entre tous les élément. Un peu comme le Margin.
Attention, dans le cas d'un menu intégré seul au Off-canvas, les onglets child element layout et gap ne fonctionneront pas, car le menu wordpress est constitué d'un seul bloc.
Box Shadow
Ajoute une ombre au Off-canvas. Pour en savoir plus, consultez le guide dédié à la Box-shadow.
Backdrop
Le Backdrop est une div supplémentaire qui vient se mettre entre la page et le Off-canvas lorsqu'il est ouvert pour empêcher l'utilisateur de cliquer par accident sur un autre élément
Backdrop display : Active ou désactive le backdrop
Avec Backdrop
Sans Backdrop
Couleur d'arrière-plan : Change la couleur du Backdrop
Z-index : Modifie la position du backdrop dans la hiérarchie d'affichage. A ne modifier que si vous avez certains éléments qui ont un Z-index supérieur à 10, et qui passent au-dessus du Backdrop
Le Z-index est abordé plus en détail dans le guide sur l'onglet layout
Fade-Duration : Définit la durée d'apparition du Backdrop en secondes.. Plus le chiffre est grand, plus il mettra du temps à apparaître
Généralement, la durée est la même que pour Offcanvas transition duration (Options principales)
Inner animations
A utiliser si vous souhaitez intégrer des animations à l'intérieur du Off-canvas avec l'onglet Animate on scroll
Set inert when offcanvas hidden : Empèche un lecteur d'écran de lire le offcanvas s'il est fermé pour ne pas perturber l'utilisateur.
Auto add aria-controls : Ajoute des outils permettant de contrôler le off-canvas plus facilement avec un lecteur d'écran.
Aria label : nom du offcanvas pour le lecteur d'écran. En français, mettez quelque chose qui définit le but de votre off-canvas, comme "Contenu du menu mobile"
ESC key when focus in offcanvas closes it : permet de fermer le Off-canva avec la touche échap pour tous les utilisateurs.
Move focus when opened : Options avancée, inutile dans une utilisation normale.
Le burger est l'élément composé de trois barres horizontales qui permet d'ouvrir le menu lorsqu'il est en version mobile. Le burger est appelé ainsi car sa disposition fait penser à un sandwich.
Dans ce cours, nous n'allons pas parler du burger créé avec le menu WordPress, car il est abordé dans le guide dédié aux templates et au main, section Navbar. Nous allons ici nous concentrer sur l'élément Burger Trigger, qui provient d'OxyExtras.
Comme vous le savez déjà, Oxygen remplace le thème de votre site. Cette particularité implique néanmoins un aspect à prendre en compte : lorsque que vous écrivez des informations directement via WordPress, que ce soit via une page ou une article, les données ne s'afficheront pas sur la page.
En effet, quand vous créez une page, Oxygen se charge de créer dans le même temps une page blanche qui attends d'être remplie par vos soins. C'est cette page qui s'affichera par défaut, et pas ce que vous écrivez directement sur WordPress.
Cependant, cela ne veut pas dire qu'il est inutile de se servir de WordPress. En effet, il est bien plus simple d'écrire vos articles ou de remplir les produits de votre boutique sans devoir sortir l'artillerie lourde à chaque fois. C'est dans ce but qu'on été créées les données dynamique, afin de vous permettre d'utiliser des données de WordPress directement sur Oxygen.
NB : Ce n'est pas recommandé, mais si vous avez pour une raison ou une autre besoin de désactiver Oxygen sur certaines page, vous pouvez consulter cet article
Exercice pour apprendre à insérer des données dynamiques
Pour commencer, assurez-vous d'avoir sous la main un article ou une page remplie directement avec WordPress. Si ce n'est pas le cas, voici comment faire :
Les marges s'éditent à l'aide de l'onglet size & spacing
Insérons maintenant notre 1ère donnée dynamique. Insérez à nouveau un élément, mais sélectionnez cette fois-ci l'onglet WordPress, puis Dynamic Data
Cliquez sur Title pour ajouter votre 1er champ dynamique
Comme vous pouvez le voir, le champ a automatiquement intégré le contenu du titre de l'article. Si vous modifiez par le suite le titre directement sur Oxygen modifiera également le contenu du titre. Veillez cependant à ne pas modifier le champ text content, car il contient les informations qui lui permettent de récupérer les données sur WordPress.
Vous remarquerez également que le champ titre est devenu un conteneur avec un élément span a l'intérieur, utilisé en temps normal pour insérer de très court blocs de textes. C'est l'unique cas où un élément de texte ou d'image peut contenir lui-même un élément. De même, ne modifiez pas le contenu du span. Vous pouvez en revanche renommer les champs si vous le souhaitez
Sélectionnez le conteneur parent (dans notre exemple, la Div(#3) et insérez les éléments dynamiques featured image et content
Insérer des données dynamique multiples
Les données dynamiques peuvent également être utilisée pour des champs multiples. Imaginons par exemple que vous souhaitiez faire un blog sur votre site. Une fois votre template créé, il vous suffit d'ajouter ces même champs pour que tous vos articles les intégrent sans que vous ayez besoin de configurer chacun d'entre eux.
Si vous avez besoin d'un exemple concret, consultez le cours expliquant comment créer un blog
Vous pouvez également insérer des données dynamique dans un répéteur
Insérer des données plus complexes
Vous l'aurez remarqué, nous n'avons pas intégré l'extrait de la page, car ce champ n'est pas dans l'onglet dynamic data. Pour intégrer des champs moins souvent utilisés, la méthode est un peu différente :
Insérez un élément de texte et remplissez-le avec du texte au hasard
Cliquez sur l'élément à l'écran et sélectionnez tout le texte à l'aide de la souris ou en faisant CTRL+A
On vous l'accorde, c'est un peu compliqué à sélectionner correctement
De nouvelles options apparaissent sur la barre supérieures. Cliquez sur l'icône Insert data
Cliquez sur Exerpt
Si ça n'a pas fonctionné, c'est probablement que le texte que vous avez écrit n'étais pas entièrement sélectionné.
Liste des principaux éléments dans l'onglet insert data
Post
Title : Titre de la page, produit ou article
Content : Contenu de la page, produit ou article
Exerpt : Extrait de page ou article ou description courte de produit
Date : Date
Categories, Tags, Taxonomies : catégories et autres tags associés à la page, produit ou article
Meta / Custom Field : Si vous avez rempli un champ personnalisé
Featured image
Title : titre de l'image
Caption : description de l'image
Alt : Alt image
Author
Display name : nom de l'auteur de la page, produit ou article
Sélectionnez l'élément que vous voulez transformer en lien avec le panneau de structure (à droite)
Dans notre exemple, nous utiliserons un texte
Cliquez sur l'icône en forme de Maillon en haut à gauche de la page sous les formats d'écrans
Une fenêtre va s'ouvrir. Vous avez deux choix :
Saisir l'URL dans le champ URL
L'adresse de la page
OU
Saisir la référence de la page dans le champ Rechercher et cliquez sur le champ
Exemple : pour mettre la page d'accueil, tapez "accueil"
Cochez ensuite la case ouvrir le lien dans un nouvel onglet si vous souhaitez que cliquer sur le lien ouvre une page en plus pour l'utilisateur.
Cliquez enfin sur le bouton ajouter un lien
SI vous utilisez le champ URL
Si vous utilisez le champ Rechercher
Vous remarquerez que le nom de votre élément a changé et comporte désormais la mention "Text Link" (vous pouvez toujours changer le nom si vous le souhaitez).
Modifier un lien
Changer la couleur
Si vous avez inséré un texte, votre lien est de couleur bleu par défaut. C'est un effet automatique appliqué par Oxygen pour différencier votre lien des autre éléments. Voici comment le modifier
Sélectionnez l'élément en question dans la barre de structure (à droite)
Dans le panneau d'édition (à gauche), cliquez sur le champ text color et choisissez votre couleur.
Si vous avez une nuance spécifique à intégrer, collez-la sous format HEX. Vous pouvez utiliser un convertisseur de code couleur sur internet. Vous pouvez également lui assigner une couleur globale
Si vous avez plusieurs lien à intégrer, vous pouvez également créer une classe que vous appliquerez à tous vos liens.
Modifier le lien
Dans le panneau d'édition (à gauche), cliquer sur le champ URL et modifier l'URL
Supprimer le lien
Cliquez à nouveau sur le maillon en haut de page
cf créer un lien
Supprimez l'url et cliquez sur ajouter un lien
L'icône de lien devrait avoir disparu sur la barre de structure (à droite). Si cela ne marche pas, il faudra supprimer l'élément.
Insérer un lien sur une section spécifique d'une page
La procédure est la même que pour insérer un lien classique. Cependant, à la suite de l'URL, vous devrez indiquer l'id de l'élément ou du conteneur précédé d'un #
L'adresse initiale
L'adresse renvoyant à l'ID de l'élément
Vous pouvez trouver l'ID d'un élément soit :
En passant par Oxygen, en copiant l'id en haut à droite (étiquette bleue)
Ce guide vous explique pas à pas comment créer un bouton à partir de zéro. Si vous souhaitez à l'inverse réutiliser un bouton déjà présent sur votre site, dupliquez un composant en utilisant l'onglet reusable.
Pour créer un bouton, vous avez deux solutions :
Utiliser l'élément bouton : plus simple, mais design moins facilement modifiable
Utiliser un lien URL : plus complexe, mais plus de liberté
Basique : Avec l'élément bouton
Insérez un élement button
Si vous ne savez pas comment faire, consultez le guide dédié.
Onglet basics - links
Renommez votre bouton
Sélectionnez l'élément, puis consultez le panneau d'édition à gauche
N'hésitez pas à employer une classe si vous avez plusieurs boutons à insérer, afin de pouvoir modifier vos paramètres plus rapidement en cas de besoin.
Si vous ne savez pas comment faire, consultez le guide dédié.
Insérez un élément de texte
Sélectionnez à nouveau la div et transformez-là en URL
Si vous ne savez pas comment faire, consultez le guide dédié.
Renommez votre lien avec le champ text content
Sélectionnez l'élément, puis consultez le panneau d'édition à gauche
Vous avez maintenant un lien cliquable.
Ici, la div sera le conteneur de votre bouton, et le texte le contenu. Avant de continuer, n'hésitez pas à ajouter une classe à la div ET une classe au texte, afin de pouvoir effectuer des modificatiosn plus rapidement.
Modifier la largeur / hauteur du bouton : Utilisez l'onglet Size & spacing de la div.
Modifier le texte : utiliser l'onglet Typography de l'élément texte
Modifier la couleur du bouton : Utiliser l'onglet Background de la div
Modifier la couleur lors du survol du bouton : Toujours en gardant la div sélectionnée, cliquez sur le bouton state à gauche de l'id (étiquette bleue), puis cliquez sur hover. Faites ensuite la même chose qu'à l'étape précédente.
Hover signifie "quand l'élément est survolé par la souris"
Important : N'oubliez pas de revenir sur state une fois la modification effectuée en cliquant à nouveau sur le même bouton et en sélectionnant original.
(facultatif) Ajoutez une bordure : Toujours avec la div sélectionnée, cliquez sur l'onglet Borders et éditez les bordures
Vous pouvez mixer cet élément avec un Hover si vous souhaitez que des bordures apparaissent, disparaissent ou s'agrandissent quand l'utilisateur passe dessus.
(facultatif) Ajoutez une transition : Ajoutons un peu de vie au bouton. Toujours avec la div sélectionnée, cliquez sur l'onglet Effects (celui avec une baguette magique). cliquez ensuite sur l'onglet transition
Transition duration : mettez une durée comprise entre 0.2 et 0.5 seconde
Timing function : ease-in-out
Css property : all
Ici, nous faisons en sorte que lorsque que l'utilisateur passe la souris sur le bouton, la couleur change progressivement du bleu au rouge. Plus la transition duration est courte, plus la couleur changera rapidement.
Vous avez maintenant un bouton opérationnel !
Définition
Pour vos utilisateurs comme pour les moteurs de recherche, il est important de bien hiérarchiser vos titres et sous-titre. Voici comment cela se présente sur le web :
H1 : Titre principal : Sur un site web, c'est le titre de la page. Il en faut un, et uniquement un par page.
H2 : sous-titre de catégorie 2 : C'est le sous-titre du H1.
H3 : sous-titre de catégorie 3 : C'est le sous-titre du H2
H4 ...
Vous pouvez voir ça comme si vous rédigiez une dissertation. Vous allez séparer votre texte en plusieurs parties, eux-même séparés en plusieurs sous-parties, etc ...
De manière générale, les gros titres sont plus grands et / ou gras que les titres inférieurs, afin de mieux communiquer la hiérarchie des titres à l'utilisateur.
Comment hiérarchiser les titres avec Oxygen
Une fois que vous avez intégré un titre sur l'interface Oxygen, sélectionnez-le
Pour plus d'infos sur l'interface d'Oxygen, consultez le guide dédié
Par défaut, Oxygen met la mention H1 à tous les titres que vous ajoutez. Prenez donc soin d'ajuster chaque titre que vous ajoutez. Dans notre exemple, l'élément titre principal est le H1, nous ne modifions pas sa hiérarchie et nous modifions plutôt le sous-titre.
Dans la barre d'édition (à gauche), cliquez sur l'onglet tag et sélectionnez celui qui correspond à votre titre. Dans notre exemple, nous attribuons le tag H2.
Vous remarquerezque la taille du titre va s'adapter automatiquement, car il y a des règles de styles définie pour toutes les tailles de titres, afin d'harmoniser votre site plus facilement.Consultez le guide dédié pour les modifier
Qu'est-ce qu'une page 404 ?
A partir du moment ou votre site devient opérationnel, votre souhait lorsque vous le mettez en ligne est généralement que vos visiteurs naviguent sur les pages que vous avez prévu pour eux. Vous allez donc orienter leur navigation à l'aide de votre navbar, mais aussi de boutons placés à cet effet, tout ça dans le but de rendre l'expérience de vos utilisateurs la plus agréable possible.
Seulement voilà, vous remarquerez rapidement que vos visiteurs sont particulièrement inventifs pour s'écarter des sentiers battus. Une faute d'orthographe dans un lien tapé, un lien mort sur votre site, une page supprimée, ou tout simplement une simple envie de tester votre site ... Les occasions sont nombreuses pour aller se perdre sur une URL que vous n'aviez pas envisagée. Et lorsque cela arrive, l'utilisateur va tomber sur un écran tout blanc, avec juste votre navbar et votre footer si vous en avez mis.
Vous vous en doutez, ce n'est pas une expérience très sympa pour vos visiteurs, qui ne savent pas trop ce qui se passe. Et un visiteur décontenancé, c'est un utilisateur qui risque de partir à tout moment. Il faut donc prévoir une page spécifique qui explique que l'utilisateur s'est perdu, et qui le redirige vers la page d'accueil. C'est le rôle de la page 404.
Pourquoi ce code, "404" ?
Dans le langage web, une erreur 404 signifie que l'url entrée ne renvoie vers rien. Ce code permet d'identifier plus facilement à quel type d'erreur on a affaire. Pour en savoir plus sur les codes d'erreur, consultez le guide dédié.
Comment créer une page 404 avec Oxygen ?
Encore une fois, Oxygen nous facilite la vie sur ce coup-là, car il prévoie une section spécifique pour toutes les erreurs 404. Pour cela, nous allons créer un template. Si vous ne savez pas ce qu'est un template, n'hésitez pas à consulter le guide dédié :
Vous arrivez ensuite sur la page de configuration de votre template :
Commencez par donner un titre à votre template (exemple : 404)
Dans INHERIT DESIGN FORM OTHER TEMPLATE, sélectionnez main
Ou le template que vous avez sélectionné comme principal
Dans WHERE DOES THIS TEMPLATE APPLY, Cliquez sur Other, puis sur 404
Cliquez enfin sur le bouton publier sur la droite de la page.
Vous avez maintenant créé un modèle de page qui s'appliquera sur toutes les pages 404. Il nous faut maintenant l'éditer :
Cliquez sur le bouton Edit with Oxygen pour ouvrir l'interface du template
Cliquez sur le conteneurInner content dans le panneau de structure (à droite) et ajoutez une div
Bouton + en haut à gauche
Dans l'onglet Basics, cliquer sur div
Renommez la div si vous le souhaitez
Cliquez sur l'icône de crayon au survol de la div
Cliquez sur Rename
En gardant la div sélectionnée, dirigez-vous sur la barre d'édition (à gauche) et cliquez sur l'onglet Size et spacing (le 2e).
Entrez une Width, accomapgné d'une Margin ou d'un Padding pour donner de la marge à votre section
Consultez le guide dédié pour plus d'info à ce sujet
Ici, la width est de 85%, et les margin droite et gauche sont en auto. Ainsi, le conteneur restera toujours centré au milieu tout en conservant une marge de 7.5% des deux côtés. N'hésitez pas à augmenter la width pour diminuer les marges sur les formats d'écran plus petits
En gardant le conteneur sélectionné (ici, section principale), Ajoutez un titre, par exemple "erreur 404"
Appuyez sur la touche h ou utilisez le + et cliquez sur l'onglet Heading
Entrez un Titre
Barre d'édition (à gauche), onglet Primary, à l'emplacement Text content
Ajoutez un sous-titre, par exemple "Page non trouvée"
Même chose que pour le titre, Mais en changeant le Tag h1 en h2, vu qu'on est sur un sous-titre. Consultezle guide dédié pour plus d'infos.
Eventuellement, ajoutez une image pour ajouter un peu de vie à la page
Touche ien sélectionnant le conteneur, ou cliquez sur le + en haut à droite
Dans la barre d'édition, onglet Primary, cliquez sur Browse et ajouter l'image que vous souhaitez
Dimensionnez l'image en utilisant l'onglet Size & spacing
Repositionnez l'image entre le titre et le sous-titre
Saisissez l'élément avec la souris et positionnez entre les deux titres dans le panneau de structure
A présent, mettons les éléments en forme en les centrant et en ajoutant de la marge entre chaque
Pour centrer tout les éléments, cliquez sur le conteneur dans le panneau de structure (ici, section principale) et dans Horizontal Alignement, cliquez sur center
Pour ajouter de la marge, cliquez sur un élément dans le panneau de structure, puis cliquez sur l'onglet Size & spacing dans la barre d'éditionpour ajouter des marge top et bottom
Centrage des éléments
Rajout des marges en fonction de ce que vous souhaitez comme espace(à faire pour tous les éléments)
Pour terminer, ajoutons un bouton, soit en l'ajoutant via le Reusable, soit en le créant de 0
N'oubliez pas de sélectionner d'abord le conteneur parent (ici, section principale) pour ajouter le bouton
Si vous ajoutez le bouton via le reusable, n'oubliez pas de changer le lien du bouton en cliquant sur l'icône de maillon en haut à droite (généralement vers la page d'accueil)
Votre page 404 est maintenant prête ! Comme pour toutes les autres pages, profitez-en pour la tester sous toute les coutures, et adaptez si besoin les tailles et marges d'éléments en fonction des formats d'écran.
Introduction
Lorsque vous souhaitez mettre des visuels sur votre page, il est important que vous sachiez au préalable dans quel but. En effet, la méthode que vous devrez adopter changera en fonction de ce que vous souhaitez faire.
L'image : pour illustrer
L'image est le moyen classique pour intégrer un visuel. Sur Oxygen, l'image est un élément à part entière, au même titre qu'un texte ou qu'un titre. Cela signifie que dans la structure, l'image est séparée des autres éléments en temps normal (voir le guide dédié au positionnement pour plus d'information)
Avantages
Plus facile à intégrer pour des mises en pages simples : Vous intégrez votre image, vous définissez sa taille, et c'est tout.
Avantage légèrement le SEO : Si vous cherchez à apparaître en haut des résultats de recherche, l'emploi d'images est intéressant, car cela plaît aux moteurs de recherches :
Les moteurs de recherche favorisent les pages lorsqu'ils repèrent des images
Il est possible d'ajouter un texte alternatif qui décrit l'image au moteur de recherche, ce qui ajoute encore un bonus.
Inconvénients :
Difficile à éditer : Il est beaucoup plus difficile de modifier la forme d'une image, car elle se retrouvera très vite déformée. C'est un problème qui peut se révéler très handicapant si vous cherchez à faire une mise en page original.
L'image en arrière-plan : pour décorer
En développement, on qualifie l'image en arrière-plan de background image. Le concept est ici l'inverse : l'image n'est plus un élément à part entière, mais vient simplement remplir le fond d'une div. Ici, l'objectif n'est pas d'afficher une image telle quelle, mais de rendre la mise en page plus agréable à l'oeil.
Avantages
Plus adapté aux mise en pages complexes : Les images en arrière-plan sont beaucoup plus faciles à travailler. Elle peuvent être étirées ou intégrer des effets sans altérer l'image.
Image classique redimensionnée
Image d'arrière-plan redimensionnée
Inconvénient
Non adapté au SEO : les images d'arrière-plan ne sont pas repérées par les moteurs de recherche. Pour eux, c'est comme si elles n'existaient pas. Si le moteur de recherche estime qu'une page n'a pas d'image, cela peut handicaper le SEO (bien que ce soit pas déterminant).
Intégrer des images avec Oxygen Builder
Image classique
Pour commencer, cliquez sur le conteneur parent qui contiendra l'image. Deux méthodes s'offrent à vous :
Méthode Classique
Cliquez ensuite sur le + bleu en haut à gauche et insérez une image. Elle est située dans la section basics, mais vous pouvez également la rechercher en utilisant l'onglet de recherche.
Une fois l'image ajoutée, insérez l'image dont vous avez besoin :
Cliquez sur l'élément image (barre de droite)
Cliquez sur l'onglet primary (à gauche)
Cliquez sur le bouton browse
La médiathèque va s'ouvrir. Choisissez l'image à insérer ou déposez l'image à insérer en glisser-déposer
Ajoutez un texte alternatif (décrivez l'image en quelques mots de manière à ce qu'une personne non-voyante puisse la comprendre)
Cliquez sur le bouton select image (en bas à gauche)
Une fois l'image insérée, redimensionnez-la en utilisant l'onglet Size & Spacing, puis en utilisant le champ width (largeur) ou heigth (hauteur)
Attention à ne pas utiliser width et heigth en même temps dans le cas d'une image, ou elle sera déformée
Image d'arrière-plan
Pour commencer, sélectionnez le conteneur dans lequel vous souhaitez insérer une image.
Ouvrez l'onglet background
Dirigez-vous sur le champ background image et cliquez sur Browse
Comme pour l'image classique, insérer votre image et entrez un texte alternatif
L'image apparaîtra de manière à prendre tout le conteneur. Redimensionnez votre conteneur pour modifier la pace que prend l'image. Pour en savoir plus sur comment dimensionner un conteneur, consultez notre guide dédié.
Quelques réglages supplémentaires
Une fois l'image intégré, vous aurez certainement de modifier son rendu pour qu'elle apparaisse comme vous l'imaginez. Voici quelques options à votre disposition que vous pouvez utiliser dans l'onglet background. N'hésitez pas à tester plusieurs options pour voir celle qui a votre préférence.
Background Size
Oblige la taille de l'image à se conformer à une règle.
Auto : L'image a sa taille habituelle. Si elle est plus grande que le conteneur, elle sera rognée.
Cover : Force l'image à rentrer dans le cadre en largeur ou en hauteur. En fonction de la largeur du conteneur, l'image sera rognée, mais uniquement d'un seul côté.
C'est de loin le réglage le plus utilisé
Ici, le conteneur est très large, mais avec une très petite hauteur. Comme l'image initiale était plus haute, elle est rognée en hauteur.
Contain : Force l'image à rentrer en entier dans le cadre. Si l'image est plus large que haute ou inversement, une partie du conteneur sera plus remplie
NB : par défaut, l'option contain est configurée en repeat (voir ci-dessous)
Manuel : Option avancée. A n'utiliser que si vous savez ce que vous faite.
Background Repeat
Repeat : Si l'image ne remplit pas tout le conteneur elle est dupliquée
Exemple avec Background Size : Contain
No-repeat : Si l'image ne remplit pas tout le conteneur, elle n'est pas dupliquée
Exemple avec background size : contain
Left et Top
Ces deux champs permettent de définir comment l'image va se comporter si elle rognée car elle devient trop grande. Le réglage le plus facile est d'utiliser un pourcentage. Prenons un exemple avec le champ left :
0% : Lorsque le navigateur se réduit, l'image sera rognée en largeur uniquement par la gauche
100 % : Lorsque le navigateur se réduit, l'image sera rognée en largeur uniquement par la droite
80% : Lorsque la fenêtre se réduit, l'image sera rognée en largeur quatre fois plus rapidement à droite qu'à gauche (20% fois 4 = 80)
Left 0% : l'image est rognée par la gauche
Left 100% : L'image est rognée par la droite
La même logique s'applique au champ Top. Si vous ne savez pas pour quel réglage opter, le réglage recommandé est 50% aux deux champs. Il garantit que l'image sera rognée de manière homogène.
L'image est rognée de manière équivalente sur tous les côtés.
Il existe beaucoup d'autres options de personnalisation, mais celles-ci devraient être suffisante dans une utilisation normale. Si vous souhaitez en apprendre plus, vous pouvez consulter les sites de W3S et Mozilla Developper, deux sites bourrés de documentation et de tutoriels.
Intro
Si vous avez acquis cette formation ou que nous avons réalisé votre site, vous avez accès à une licence à vie du logiciel Fluent Forms., une extension WordPress particulièrement puissante. Nous avons donc construit ce guide en nous basant sur ce logiciel.
Vous êtes néanmoins bien entendu libre de choisir un autre logiciel si vous le souhaitez. La plupart des logiciels de formulaire fonctionnent plus ou moins sur le même principe, et le méthode d'intégration à Oxygen est toujours la même.
Exceptionnellement, nous laissons sur cette partie de la formation la main à l'éditeur de l'extension, qui vous explique tout aussi bien, sinon mieux comment fonctionne l'extension. Vous pouvez également consulter la documentation officielle. Les tutoriels sont en anglais, mais vous pouvez traduire une page directement sur votre navigateur.
Ouvrez la page ou souhaitez intégrer le formulaire avec Oxygen, et sélectionner le conteneur dans lequel vous souhaitez le mettre.
A défaut, sélectionnez le conteneur inner content.
Cliquez sur le + dans la barre d'édition (à gauche)
Cliquez sur l'onglet Fluent Forms, puis à nouveau sur le champ fluent forms
ou tapez fluent forms dans la barre de recherche
Sélectionnez l'élément de formulaire dans la barre de structure (à droite)
Dans la barre d'édition (à gauche), sélectionnez votre formulaire.
Patientez le temps que votre formulaire se charge
Les champs de la barre d'édition vous permettent de personnaliser certains aspect de votre formulaire. Ils fonctionnent globalement selon le même principe que ce que vous avez vu jusque là. Attention, vous pouvez juste personnaliser l'apparence des champs, pas la structure du formulaire.
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.
