Il est également recommandé d'avoir créé au préalable un template principal pour votre site (le main) pour faciliter la création du blog
L'objectif est ici de créer un template qui vous permettra d'écrire directement vos articles sur WordPress. Lorsque vous publierez votre article, son contenu sera affiché en fonction de la structure de page que vous avez créé sur Oxygen
Les éléments affichés à l'écran peuvent varier en fonction de comment vous avez configuré votre main. L'essentiel est que vous puissiez sélectionner le inner content
Insérez une div
Si vous ne savez pas comment faire, consultez le guide dédié à l'insertion d'élément
N'hésitez pas à renommer la div si vous le souhaitez
Réglez les marges de la div à votre convenance
En sélectionnant la div et en utilisant l'onglet size & spacing
Insérez d'autres données dynamiques en fonction de vos besoins
Retrouvez la liste de toutes les données dynamiques sur le guide dédié
Si vous n'avez pas encore écris d'article, les éléments dynamiques marqueront no data for field. C'est normal, les champs se rempliront par eux-même quand vous remplirez un article
Anoter : Lorsque vous insérez l'élément dynamique contenu, vous insérez en un bloc tout le contenu de l'article, ce qui signifie que si vous aviez rfait une disposition particulière, elle sera intégrée de la même manière.
Une fois votre page terminée, enregistrez vos modifications et quittez la page.
Créer la page de blog
Lorsque vous mettez votre site web en ligne, il est obligatoire qu'il comporte certaines mentions pour être en accord avec la réglementation européenne, qu'on appelle les mentions légales :
Les informations sur votre entreprise
Les informations sur comment vous traitez les données que votre site récupère
Un bandeau qui explique à l'utilisateur que ces données sont récupérées (les fameux cookies)
Pourquoi les mentions légales sont obligatoires ?
Jusqu'à il y a quelques années, il n'y avait pas vraiment de règlementation précise concernant la récupération des données des utilisateurs, ce qui fait que tout le monde se permettait un peu n'importe quoi.
Les cookies, le fond du problème
Pour faire simple, les cookies sont de petits fichiers dont se sert le site web pour avoir des informations pour vous. Lorsque vous allez sur un site web, vous dispatchez ainsi plein de petites informations sans forcément le savoir. Vos préférences d'achat, la ville où vous habitez ... C'est notamment cette mécanique qui va faire que quand vous consultez un site vendant des tondeuse à gazon, vous allez voir apparaître sur d'autres sites plein de pubs vous proposant des tondeuses à gazon.
Et ça, beaucoup en ont allégrement profité en cherchant à aspirer le plus d'informations possible de chaque utilisateur cliquant sur leur site. Alors, en 2018, la CNIL a dit stop, et a durci sa réglementation du RGPD (Réglementation Générale sur le Protection des données). Désormais, si vous cherchez à récupérer des informations de vos visiteurs, vous devez les en informez.
Les problème, c'est que les cookies ne servent pas qu'à renseigner vos préférences. Ce sont notamment eux qui vont par exemple permettre de garder en mémoire votre panier d'achat si vous quittez le site où vous avez commandé. Certains cookies sont même essentiels au bon fonctionnement de votre site. Ainsi, que vous le vouliez ou non, vous êtes obligé de récupérer des informations provenant de vos visiteurs, et donc vous êtes obligé d'afficher ce fameux bandeau de cookies.
Modifier les pages légales et le bandeau de cookies
Bandeau de cookies
Par défaut, nous avons installé un bandeau de cookie simple, qui a l'avantage d'être gratuit à l'utilisation. Il existe d'autres extensions de cookies plus optimisées, mais qui peuvent rapidement être onéreuses. Si vous souhaitez changer de gestionnaire de cookies, vous pouvez le faire en désinstallant l'extension EU Cookies bar. Pour en savoir plus sur l'installation et a désinstallation d'extensions, consultez le guide dédié.
Voici comment accéder à votre bandeau de cookies :
Dans le panneau de contrôle de WordPress, dirigez-vous vers la barre supérieur et passez la souris sur VillaTheme, puis cliquez sur l'onglet EU Cookies Bar
Une étoile verte accompagne l'onglet
IMPORTANT : pour sauvegarder vos modifications, cliquez sur le bouton Save en bas de page juste avant l'onglet "maybe you like"
Onglet général
Enable : Active ou désactive le bandeau
Block cookies until accepting empèche les cookies de fonctionner tant qu'ils n'ont pas été acceptés.
Agreement expires after(days) : nombre de jours pendant lequel le consentement est maintenu automatiquement en jours. Par défaut 6 mois.
Strictly necessary cookies / prefix : Code permettant d'afficher les cookies, à ne pas modifier.
Privacy page url : Page vers la déclaration de confidentialité
Your privacy policy : A laisser vide
Cookies bar
Message : Message qui s'affiche sur le bandeau de cookies.
Boutons shows : Affiche les boutons accepter, refuse et fermer les cookies
Légalement, vous ne pouvez pas empêcher l'utilisateur de refuser les cookies, ou alors vous devez bloquer l'accès au site
Cookies bar position : modifie l'emplacement du bandeau sur la page. Par défaut, il est en bas à droite (le plus discret)
L'emplacement est prévisualisé en bas de page (certains styles ne sont pas encore appliqués)
Implicit behaviors : indique ce que doit faire la barre de cookies quand on clique sur le bouton
Attention, les options d'acceptation automatique ne sont pas conformes au RGPD
Cookies bar design : Amène quelques options de design
Border radius : Coins arrondis ou non
La Margin n'a pas d'effet
Padding :augmente l'espace entre le texte et le bord du bandeau
Font-size : taille du texte
Text-color: couleur du texte
Background color : couleur du bandeau
Opacity : opacité du bandeau (0 = invisible)
Accept button design : Design du bouton accepter
Decline button design : Design du bouton refuser
Users cookies settings
Enable : Active la possibilité de voir les cookies actuellement utilisés et de désactiver ceux qui ne sont pas obligatoires au fonctionnement du site.
Heading : titre de la fenètre
Heading color : Couleur du titre
Heading background color : Couleur du fond du titre
Save setting button color : Couleur du bouton enregistrer
Save settings button background color : Couleur de fond du bouton enregistrer
Cookies settings nav bar position : emplacement des cookies dans la fenêtre
Styles avancés
Certains styles du bandeau ont été directement conçus à l'aide de CSS personnalisé. Si vous en avez les capacités, vous pouvez modifier ce fichier avec Advanced script (dans l'onglet outils), Dossier CSS, fichier CSS - Barre de Cookies
Modifier certains textes
Certains textes ne sont pas modifiables directement sur l'extension. Pour les modifier, il est nécessaire d'éditer directement les fichiers de l'extension. Nous n'aborderons pas plus en détails cet aspect, car éditer ce genre de fichiers peut rapidement conduire à des bugs. Ne vous aventurez sur ce terrain-là que si vous êtes certains d'en avoir les compétences.
Si vous avez absolument besoin de modifier un texte, vous pouvez nous demander d'effectuer le changement en nous contactant à l'adresse bonjour@tricorn.fr
Pages légales
Par défaut, nous avons créé trois pages différentes :
Mentions légales : Indique les informations générales. Cette page est à modifier.
Déclaration de confidentialité : Indique comment sont traitées les données récupérées. Vous n'êtes pas forcé de modifier cette page, sauf si vous avez besoin d'indiquer des conditions spécifiques.
Politique de cookies : indique ce que sont les cookies et comment ils fonctionnent sur votre site. Vous n'êtes pas forcé de modifier cette page, sauf si vous avez besoin de rajouter des cookies spécifiques.
Voici comment accéder aux pages légales :
Dans le panneau de contrôle de WordPress, cliquez sur l'onglet pages et cherchez les pages à modifier
Pour afficher uniquement les pages correspondantes, vous pouvez utiliser le filtrer juridique
Ajouter une page supplémentaire
Si vous avez besoin d'ajouter une page légale supplémentaire, créez simplement une nouvelle page, puis sélectionnez la catégoriejuridique
Assurez-vous que l'onglet pages est bien sélectionné
Si vous avez besoin que les utilisateurs pour accéder à cette page depuis votre site, par exemple en la mettent dans le footer (pied de page), vous devrez en faire un lien cliquable .
Modifier l'apparence des pages
Les trois pages légales fonctionnent avec le template juridique, qui spécifie leur apparence. Pour la modifier, vous devrez donc éditer ce template et passer par Oxygen Builder. Pour en savoir sur comment éditer un template sur Oxygen, consultez le guide dédié aux templates
Créer les pages légales et le bandeau de cookies
Cette partie n'est à consulter que si vous souhaitez recréer vos pages légales ou votre bandeau de cookies depuis 0, ou si vous partez d'une installation complètement vierge. On supposera ici que vous êtes déjà à l'aise avec :
Si vous avez déjà des pages légales d'installées sur votre site,n'oubliez pas de les supprimer. Pour savoir quels documents sont obligatoire pour respecter le RGP, vous pouvez consulter cet article
Pour commencer, installez et activez l'extension create and assign categories for pages si ce n'est pas déjà. Si vous ne savez pas comment faire, consultez le guide dédié à l'installation d'extensions
Créez ensuite une catégorie de page. Nous l'intitulerons juridique mais vous pouvez utiliser n'importe quel autre nom
Créez ensuite un nouveau template identique à la catégorie (pour pouvoir vous y retrouver plus facilement) et publiez-le
Inherit design : main
Where does the template apply : singular / pages / Juridique
Cliquer sur le + violet puis onglet WordPress / Dynamic Data / Title
Insérez une données dynamique de contenu
Idem, mais content au lieu de title
Votre page est maintenant prête. Désormais, il vous suffira de donner la catégorie juridique à une page pour que la template s'applique à la page. Le titre et le contenu de la page seront automatique ajouté.
Rajoutez quelques marges ou décorations à votre envie, puis sauvegardez et quittez.
Bandeau de cookies
Si vous êtes parti d'un site pré-configuré, il faudra désinstaller l'extension EU Cookies bar au préalable. Vous pouvez également supprimer le bloc de code CSS - Barres de cookies dans le dossier CSS d'Advanced Scripts
Si vous partez de zéro, il vous faudra installer une extension de cookies. Ici, nous sortons du cadre de cette formation, car tout dépendra de l'extension que vous choisirez. Prenez néanmoins en compte quelques informations importantes :
La plupart des extensions de cookies sont généralement soumises à un abonnement payant
Votre extension doit respecter la réglementation européenne, s'il est consulté en Europe.
Il est interdit de rendre le bandeau de cookies trop peu visible ou de forcer l'acceptation des cookies par défaut.
Pour en savoir plus, vous pouvez consulter cet article dédié au RGPD
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.
Ce cours introduit des notions avancées et nécessite d'avoir consulter les cours suivants :
Les templates sont des pages spéciales créées à l'aide d'Oxygen Builder. Elle se différencient des autres pages, car leur rôle est de servir de modèle. Ce sont en quelque sort des super-pages.
Prenons un exemple concret en imaginant que vous deviez construire une maison. Vous savez que les murs de toutes les pièces seront conçu de la même manière. On va donc se servir d'un plan pour d'abord construire tous les murs avec la composition prévue : c'est le template. Ensuite, on ajoutera du papier peint, des meuble, etc ... c'est l'agencement de la page.
Les templates ne sont pas à confondre avec les éléments reusables qui fonctionnent sur le même principe, mais qui sont conçus pour être simplement réutilisés. Un template est conçu pour poser les bases de plusieurs pages.
Qu'est-ce que le main ?
Le main est également un template, donc une super page, dont l'objectif est de poser les bases de toutes les pages principales de votre site : page d'accueil, qui sommes-nous, contact ... C'est un peu le template central de votre site.
Si vous créez votre site par vous-même, ce template n'est pas encore créé. Il est dans ce cas conseillé de créer le main en suivant ce tutoriel. C'est une étape qui va grandement simplifier votre travail par la suite.
Créer et gérer vos templates
Accéder aux templates
Rendez-vous sur votre panneau de contrôle et cliquez sur l'onglet Oxygen, puis sur le sous-onglet Templates
Vous arrivez ensuite sur la page des templates. Si votre site possède déjà plusieurs pages, il est probable que vous ayez en face de vous de nombreux éléments. car cet onglet affiche les templates et les éléments reusables, intitulés reusable part.
Cliquez sur le champ all templates types et sélectionnez templates. Ensuite, cliquez sur le bouton filter
Vous verrez ensuite uniquement les templates apparaître.
Dans notre exemple, nous avons 4 templates. main, qui gère les pages principales, Juridique, qui gère uniquement les pages de mentions légales, Template Articles pour les articles, et 404 pour les pages non trouvées.
Créer un template
Cliquez sur le bouton add New Template en haut de page.
Commencez par donner un nom à votre template, puis personnalisez-le template en fonction de votre objectif :
Inherit design from other template
A utiliser si vous souhaitez que votre template hérite des réglages d'un autre template.
Sur notre exemple, le template Juridique, qui s'applique aux pages évoquant les mentions légales, hérite des réglages du template main, qui contient notamment la navbar et le footer.
Where does this template apply ?
Permet d'indiquer sur quelles pages de votre site doit s'appliquer votre template. Voici les champs les plus utilisés
Singular :
All Post Type : Toutes les pages et tous les articles
Articles : tous les articles
Pages : toutes les pages
Only apply if taxonomized as all of the following : Tous les éléments qui ont la catégorie assignée.
Si plusieurs catégories sont assignées, il faudra que l'élément soit associé à toutes pour que le template s'active.
Peut être combiné à d'autres élément. Par exemple, si Article est coché, le template s'appliquera uniquement aux articles qui ont la catégorie indiqué.
Other :
404 : S'applique uniquement lorsqu'une recherche ne renvoie à rien sur le site. Très pratique pour éviter que l'utilisateur ait un écran blanc si une recherche n'aboutit à rien. Pour en savoir plus, consultez le guide dédié.
Inner content : S'applique à tous le contenu à l'intérieur d'un conteneur inner content. Ce sujet est abordé plus en profondeur dans la partie suivante.
Catch All : s'applique partout. Si vous êtes en train de créer le main, choisissez cette option.
Template Priority
Définit si le template doit s'appliquer à la place d'un autre s'ils sont en concurrence. Dans ce cas, le template avec le chiffre le plus élevé s'appliquera en premier.
Publier
Enfin, cliquez sur le bouton publier à droite de votre site
Editer le main sur votre site
Cette partie vous montre comment créer et / ou gérer le template main. Si vous vous lancez dans la création de votre site, vous n'êtes bien entendu pas obligé de passer par sa création, mais elle est néanmoins fortement recommandée. En effet, le main est le template qui s'appliquera à toutes vos pages, et vous permettra d'appliquer des changements rapidement si besoin.
Si votre main n'est pas encore créé, suivez la procédure vue à la partie d'avant, en cochant ces options :
Nom à entrer : main
Ihnerit design : none
Where does the template apply : Other, puis catch all
template priority : 100
N'oubliez pas de publier
Cliquez ensuite sur le bouton edit with Oxygen pour éditer le template.
Composition du main : principal
Un bon main a toujours au moins 3 éléments principaux :
Il contient généralement les liens vers les mentions légales, des informations diverses ... Un footer est éditable comme un bloc normal.
Si vous souhaitez aborder la création du footer, consultez le guide dédié.
Inner content
L'élément inner content est un type de conteneur très particulier. Il indique à Oxygen que cet élément contiendra le contenu de chaque page. C'est notamment pour cette raison que sur les pages classique, le conteneur le plus important de la page est systématiquement le inner content, c'est de cet élément qu'il s'agit.
Le inner content n'est utilisable que sur un template, car il détermine la "zone d'édition" des futures pages.
Voici la procédure pour l'intégrer :
Cliquez sur le bouton + en haut à gauche de votre page
Dans la section basics, cliquez sur inner content
Modifier les éléments du main
Si vous partez d'un modèle déjà conçu, les éléments du main sont déjà créés. Voici comment modifier les éléments principaux :
Lien du logo : Dans la barre de structure (à droite), sélectionnez l'élément lien Bouton accueil. Modifiez ensuite le lien du conteneur
Pour en savoir plus sur la création et la modification de lien URL, consultez le guide dédié
Logo : Dans la barre de structure (à droite), sélectionnez l'élément logo. Modifiez ensuite l'image en utilisant la barre d'édition (à gauche (à l'intérieur de lien bouton accueil)
Cet élément est contenu dans le conteneur lien bouton accueil
Liens du menu : Ils ne sont pas modifiables directement sur Oxygen. Il faut éditer directement votre menu WordPress. Pour en savoir plus, consultez le guide dédié.
Police d'écriture des liens du menu : Ils sont à modifier dans les paramètres de style
Icône pour ouvrir le menu mobile : Dans la barre de structure (à droite), sélectionnez l'élément Burger Trigger et modifier les caractéristique dans la barre d'édition.
Un guide consacré au burger est disponible via ce lien
Certains éléments de votre navbar, comme la taille du texte, ne sont pas modifiable directement, car ils ont été directement modifiés via du code CSS personnalisé. Si vous souhaitez le modifier, rendez-vous sur Advanced Script
Version mobile
Sur certains modèles, un deuxième menu est présent pour permettre d'afficher une navbar spécialement prévue pour le format mobile, qui ne s'active que quand la fenètre du navigateur est suffisamment petite. Si vous effectuez des modifications, vous devrez également modifier cet élement. Sélectionnezl'élément Navbar menu petit écran et localisez le menu à l'intérieur.
Construire le template main
Cette section nécessite de maîtriser les notions suivantes :
Dans cette section, nous partageons la méthode par défaut pour réaliser les différents éléments du main. Néanmoins, si vous sentez à l'aise, n'hésitez pas à configurer vos propres réglages.
Navbar
C'est l'élément qui permettra aux utilisateurs de naviguer sur les différentes pages de votre site. Pour en savoir plus sur la navbar, consultez le guide dédié.
Toujours en sélectionnant la div, Dans l'onglet Layout, Au niveau du champs Position, cliquez sur fixed, et entrez 0 dans le champ top
3e onglet de la barre d'édition, tout en bas
Ici, nous fixons la div tout en haut de la page afin qu'elle reste à cet endroit, même quand l'utilisateur fera défiler la page.
Insérez une nouvelle div à l'intérieur de la première, et renommez-la Navbar
En utilisant la barre d'édition (à gauche), Définissez le champ Layout child Elements sur horizontal, le champ Vertical Item ALignment sur middle, et le champ Horizontal Item Alignment sur space between
Horizontal va aligner les éléments de la navbar horizontalement
Center va aligner les éléments du conteneur vers le centre
Space between va mettre le plus d'espace possible entre les éléments (utile quand nous ajouterons le logo)
Donnez-lui une width de 85%, et une margin auto pour left et right, ainsi qu'une height de 100%
Sélectionnez la div Navbar (la div enfant), et insérez une image, puis sélectionnez l'élément
Dans la barre d'édition (à gauche), sélectionnez le logo que vous souhaitez mettre dans le champ ID
Donnez à l'image une height de 75%
Insérez un lien pour l'image vers la page d'accueil
Pour savoir comment insérer un lien, consultez le guide dédié
L'image va se retrouver intégré dans un link Wrapper. Sélectionnez cet élément et assignez-lui une height de 80px (ou la même hauteur que celle du conteneur Header)
Votre logo est désormais prêt
Sélectionnez la div Navbar, et insérez un menu WordPress
Champ menu dans l'onglet WordPress en cliquant sur le plus violet
Vous pouvez aussi simplement taper menu dans la barre de recherche, mais faites bien attention à insérer l'onglet menu, et pas pro menu, sauf si vous savez ce que vous faites.
Si vous n'avez pas encore créé de menu WordPress, Oxygen affichera une liste de liens aléatoire. C'est le bon moment pour basculer sur le guide dédié à la création de menu WordPress.
Une fois votre menu wordpress créé, sélectionnez-le et dirigez-vous vers le champ menus de la barre d'édition pour sélectionner le vôtre.
Cliquez sur le format d'écran grande tablette (Le format du milieu) et cliquez sur le bouton horizontal
Modifier les styles de la navbar
Gardez sélectionné l'élément menu et dirigez-vous sur la barre d'édition. 5 onglets sont à votre disposition :
Text : Pour modifier les caractéristiques des textes
Spacing : modifie l'espace entre les onglets du menu
Pour différencier margin et padding, consultez le guide sur l'onglet Size & Spacing
Hover & Active : Modifie le comportement de chaque onglet lorsque que vous interagissez avec. Hover signifie lorsque que vous passez la souris sur l'élément, et Active signifie que l'élément est actuellement sélectionné
Hover Text color :Modifie la couleur du texte lorsque qu'on passe la souris
Hover background color : Modifie la couleur de fond lorsqu'on passe la souris
Hover border top : Ajoute une bordure en haut de l'onglet lorsqu'on passe la souris
Hover border bottom : Ajoute une bordure en bas
Active Text Color : Modifie la couleur du texte de l'onglet actuellement actif
Active Background Color / Border TOP / Border Bottom : Idem ci-dessus
Transition : Fait en sorte que l'élément change progressivement de style lorsqu'on passe la souris dessus, et donne un côté plus pro. Par défaut, mettez 0.35s
Dropdowns : Modifie les styles des onglets qui apparaissent lors du survol d'un liste déroulante dans le menu.
Enable Dropdowns : Autorise la possibilité d'avoir une liste déroulante dans le menu
Show dropdowns arrow : fait apparaître une flèche indiquant à l'utilisateur qu'il y a une liste déroulante. Il est conseillé de l'activer
Background color : Modifie la couleur de fond des onglets de la liste déroulante. Attention, si vous avez déjà configuré un Hover background color dans l'onglet Hover & Active , il annulera ce style
Background Hover Color : Modifie le couleur de fond des onglets de la liste déroulante lorsqu'on passe la souris dessus
Link Color : Modifie la couleur du texte des onglets de la liste déroulante
Link Hover Color : Modifie la couleur du texte des onglets de la liste déroulante lorsqu'on passe la souris dessus.
Padding : Augmente l'espace entre les onglets de la liste déroulante
Mobile responsive : Utilisé pour gérer la version mobile du menu. Cet onglet étant plus complexe, nous y consacrons une section spécifique ci-dessous.
L'onglet Mobile Responsive
Lorsque le navigateur se réduit, votre navbar devient trop large pour rentrer sans casser le site. Pour résoudre ce problème, Oxygen va automatiquement transformer la navbar en un élément appelé Burger qui, lorsque l'on clique dessus, fait apparaître le menu par dessus la page. Voici de quoi l'option se compose :
Mobile Menu / Toggle Below : Etablit à quel moment la navbar se transforme en version mobile
Always : la navbar est tout le temps en version mobile
Page container (1120px) and below : A partir de 1120px (petit écran d'ordinateur)
Less than 992 px : A partir de 992 px (Grande tablette)
Less than 768px : A partir de 768px (Petite tablette - Téléphone en mode paysage)
Margin above / below : Ajoute de l'espace en haut et en bas du burger.
Icon Color : Change la couleur du burger
Icon Hover Color : Change la couleur du burger lorsqu'on passe la souris dessus
Padding size : Ajoute de l'espace à l'intérieur du burger. Pour connaître la différence entre le padding et le margin, consultez le guide dédié au Size & Spacing
Padding Color : Change la couleur autour du burger
Padding Hover Color : Change la couleur autour du burger lorsqu'on passe la souris dessus
Menu Styles : Change les styles du menu déployés par le burger.
Background Color : Change la couleur de fond du menu
Link Text Color : Change la couleur des liens des onglets du menu
Link Hover Color : Change la couleur des liens des onglets du menu lorsqu'on passe la souris dessus
Link Padding : Ajoute de l'espace à l'intérieur des liens des onglets du menu.
Dropdowns : Ne contient qu'un seul bouton, Include dropdowns links in the responsive menu qui autorise ou non les listes déroulantes dans le menu lorsqu'il est en version mobile.
Navbar - Version mobile avancée
Si la version de base de la navbar en format mobile est simple à configurer, elle reste néanmoins assez limitée et est à voir comme une version de base. Dans cette section, nous allons voir comment intégrer une navbar plus stylisée et plus modifiable.
Note : nous n'utilisons dans cette forcément pas l'élément pro menu, que nous jugeons à la fois trop complexe à prendre en main et pas assez éditable. Néanmoins, si vous souhaitez créer une navbar avec plus d'options sans avoir à réaliser toute la procédure qui va suivre, vous êtes libre de vous y essayer. Voici un lien vers la documentation Oxygen concernant le pro menu
Vous devrez construire 2 navbars au cours de ce guide. Si vous comptez faire des modifications de styles, pensez à intégrer une classe à votre élément de menu pour vous faciliter la vie par la suite en cas de changement.
Une fois la première navbar mise au point, nous allons créer une seconde navbar, qui s'activera uniquement lorsque le navigateur sera passé sous une certaine taille.
Dans l'onglet layout, dans le champs display, cochez le bouton none
3e onglet de la barre d'édition (à gauche)
Cette procédure va nous permettre de supprimer le menu à partir du moment où le navigateur passe au format tablette (992px) jusqu'au format mobile. En parallèle, nous allons ajouter des éléments qui vont quand à eux devenir visibles uniquement à partir de ce moment.
Attention : quand vous changez de format d'écran, les modifications que vous faites ne s'appliquent plus pour les formats d'écran supérieurs. Faites donc bien attention que le bon format d'écran soit sélectionné quand vous effectuez des changements !
Toujours en gardant le format d'écran grande tablette sélectionné, sélectionnez l'élément Navbar et insérez l'élément Burger Trigger
Onglet Extras quand vous cliquez sur le + violet
Si l'élément Burger Trigger n'est pas visible, Activez l'option dans l'extension OxyExtras
(Facultatif) Changez les styles de l'élément Burger. Un cours détaillé sur cet élément est disponible en cliquant sur ce lien.
En gardant l'élément Burger Trigger sélectionné, dans l'onglet layout, dans le champs display, cochez le bouton none
3e onglet de la barre d'édition (à gauche)
Assurez-vous que le format d'écran Grande tablette est toujours sélectionné.
Fermez les éléments Navbar et Header dans la barre de structure pour gagner de la place. Nous n'en aurons plus besoin pour le moment
Insérer la navbar pour les petits écrans
Cliquez sur l'élément Body 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
(Facultatif) Modifiez les styles du off-canvas. Consultez le guide dédié pour avoir toutes les infos au sujet de cet élément.
En gardant l'élément Off canvas sélectionné, dans l'onglet layout, dans le champs display, cochez le bouton block
Assurez-vous que le format d'écran Grante tablette est toujours sélectionné
Changez à présent de format d'écran pour revenir sur le plus grand (tout à gauche). Sélectionnez cette fois-ci le bouton none.
Cette procédure nous permet de faire en sorte que le off-canvas n'apparaisse sur le site qu'à partir du moment où le format d'écran passera en format tablette.
En gardant l'élément off-canvas sélectionné, insérez une div que vous renommerez Navbar mobile
En gardant la div Navbar mobile sélectionnée, insérez une image, et donnez-lui la largeur que vous souhaitez. Mettez-lui ensuite une margin-bottom de 50px.
La margin sert à séparer l'image du menu que vous allez insérer ensuite. Vous pouvez mettre une autre valeur si vous le souhaitez.
En gardant la div Navbar mobile sélectionnée, insérez un nouvel élément de menu
Vous pouvez également dupliquer le menu précédent et le déplacer dans la div Navbar Mobile. Les styles seront copiés.
En gardant l'élément de menu sélectionné, cliquez sur le champ menu et sélectionnez votre menu.
Cliquez maintenant sur l'onglet mobile responsive puis, dans le champ mobile Menu / Toggle Below, sélectionnez l'option Never
Empêche le menu de produire une navbar en plus du off-canvas
Dans la barre de structure, sélectionnez à nouveau l'élément burger Trigger
Dans la div Header
Sélectionnez le format d'écran Grande tablette puis, dans l'ongletlayout, champ display, cliquez sur le bouton block
Sélectionnez le format d'écran Grand écran puis, dans l'ongletlayout, champ display, cliquez sur le bouton none
Vous avez maintenant une navbar mobile fonctionnelle.
Pour modifier les styles des onglets, Modifiez les onglets de l'élément menu (voir section modifier les styles de la navbar
Pour modifier le style du off-canvas, consultez le guide dédié.
Inner content
L'élément Inner content est un conteneur un peu spécial : c'est l'élément qui va contenir tout le contenu des pages qui seront créées sous le template main.
Lorsque vous créerez une nouvelle page, le Header et le Footer se mettront automatiquement en haut et en pied de page, et le inner content sera l'emplacement où vous mettrez tout le contenu de la page. C'est pour cette raison que le conteneur parent d'une page classique est toujours le inner content.
Sélectionnez l'élément Body et insérez l'élément Inner content
1er onglet en utiliant le + violet, section Others
Assurez-vous que le Inner content est bien situé sous la div Header
Le footer
Le footer est l'élément qui concluera chacune de votre page. Il sert essentiellement à montrer que l'utilisateur a atteint la fin de la page, ainsi qu'à afficher les informations qui peuvent être intéressantes pour l'utilisateur. Vous avez donc une plus grande latitude pour la création de cet élément. Cette section vous montrera comment créer une version de base, que vous pourrez éditer par la suite.
Si vous souhaitez avoir plus d'informations sur le Footer et son utilité, consultez le guide dédié.
Sélectionnez l'élément Body et insérez une div que vous renommerez Footer
Assurez-vous que la div est située en dessous du Inner content
En gardant l'élément footer sélectionné, dans la barre d'édition, cliquez sur l'onglet background est assignez une background color compatible avec votre site.
Donnez une Width de 100% à votre footer ainsi qu'une Height de 250px
Voir le guide sur l'onglet size & spacing pour en savoir plus sur la width et la height
Créez une autre div dans le footer et renommez-la contenu Footer
En gardant l'élément contenu footer sélectionné, dans la barre d'édition, cliquez sur Horizontal. et sur space between.
Donnez à l'élément une width de 85%, et une margin auto partout
Votre structure de footer est opérationnelle. A présent, insérez les élément de votre choix :
Pour vous faciliter la vie, vous pouvez également insérer les éléments Social Icons et Icon list
Vous pouvez tout à fait intégrer plusieurs catégories d'éléments. N'oubliez pas de les intégrer à une div dès que vous en avez l'occasion !
Version mobile
Par défaut, le contenu de votre footer est aligné horizontalement. Pour éviter que les éléments ne s'acrasent en version mobile, vous pouvez modifier l'alignement du contenu :
Sélectionnez l'élément Contenu footer puis, dans la barre d'édition, cliquez sur Vertical et center
Les éléments à l'intérieur des div inférieures ne seront probablement pas centrés. Vous devrez les aligner de la même manière, et / ou utiliser l'onglet Typography pour aligner les textes
Si vous commencez à être à l'aise, vous pouvez tout-à-fait partir sur un autre type d'alignement.
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.
