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.
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.
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.
