Très bien, allons maintenant construire l'
en-tête de notre site Web.
Et c'est exactement ce à quoi ça ressemble en ce moment,
et ça n'a pas l' air beau du tout.
C'est ce que nous essayons d'accomplir.
Vous pouvez voir l' en-tête ici, nous avons
le logo à gauche,
puis nous avons le menu principal à droite.
Cependant,
montrez-vous quelque chose comme si je devais aller à une autre page,
disons la page À propos comme exemple, ici,
vous pouvez voir que l'en-tête est différent.
Celui-ci a un fond noir,
alors que l'en-tête de la page
d'accueil n'a pas du tout d'arrière-plan,
il s'agit simplement de se fondre dans l'image d'arrière-plan ici,
en gros, nous devons créer 82 en-têtes différents.
L'un spécifiquement pour la page d'accueil, puis l'
autre pour le reste de nos pages.
Comment faire cela maintenant ?
Avant de vous montrer cela,
laissez-moi simplement faire glisser le site Web de démonstration.
Avant de vous montrer comment faire cela,
je veux vous montrer autre chose.
Si je devais aller dans Modifier avec Elementor,
je suis allé aux paramètres du site.
En plus de pouvoir définir vos téléphones globaux
et vos couleurs et tout cela,
vous pouvez également modifier
l'identité du site ici, nous avons les paramètres.
Si je clique sur l'intérieur de la densité ici,
nous pouvons également modifier le nom du site.
Je vais appeler mon passeport de voyage.
C'est le nom du site Web.
Et puis le slogan sera quand le voyage rencontre l'aventure.
Pour le logo, je vais choisir le logo ici.
Insérons celui-là.
Et puis pour l'icône Phi de l'icône,
je vais choisir l' image de l'informatique avec celle
avec le fond vert.
Je vais l'insérer.
Et voilà, nous avons l'identité de notre site.
Maintenant, vous pouvez également venir ici pour
en-tête et effectuer différents types
de modifications, vous pouvez choisir de masquer le logo,
afficher le slogan, d'augmenter
la largeur du contenu ou de réduire
la largeur du contenu. C'est à vous de décider.
Mais comme nous allons créer nos propres en-têtes personnalisés,
nous n'avons pas besoin de changer quoi que ce soit ici.
Je vais donc aller de l' avant maintenant et simplement
mettre à jour. Et ensuite, je vais vérifier ça.
Bon, je vais revenir au backend Exit to Dashboard.
Et maintenant, créons notre en-tête.
Je vais venir ici voir nos parents.
Ici, vous verrez des éléments ou des aliments frontaux qui sont des constructeurs.
Ceci provient du plugin. Je vais cliquer là-dedans.
Et maintenant, je vais cliquer sur Ajouter un nouveau.
Et maintenant, appelons celui-ci l'en-tête de la page d'accueil.
Ensuite, là où vous avez le type de modèle.
Nous allons choisir l'en-tête,
puis nous pouvons choisir, d'accord,
où voudrions-nous afficher cet en-tête ?
Puisque ce sera spécifiquement pour la première page,
je vais choisir ici que vous avez des cibles spécifiques.
Je vais choisir des pages spécifiques et
inviter ici sont simplement tapés à la maison.
Et voilà.
Maintenant, cet en-tête ne sera
affiché que sur la page d'accueil.
Et ensuite, pour les rôles d'utilisateur ici, vous pouvez choisir, ok,
peut-être souhaitez-vous afficher ces en-têtes uniquement pour que
les utilisateurs connectés soient déconnectés
ou modifiés ou que vous avez beaucoup de flexibilité.
Je vais juste garder ça vide parce que nous
voulions être pour tout le monde.
Maintenant, vous avez
cette option activée pour le modèle de mise en page pour nous.
Maintenant, le problème avec Elementor est qu'en plus
du modèle par défaut et un modèle fourni par votre thème,
les éléments, vous donne deux modèles personnalisés.
L'une est appelée données de toile élémentaires, pleine largeur et pleine largeur plus simple,
ce qui signifie que
votre contenu peut s'étendre jusqu' aux bords de votre écran.
Donc, en gros, c'est toute la largeur que
je suis comme si aucune marge n'est un motif.
Elemental Canada comme des outils que vous
n'aurez ni en-tête ni pied de page.
Il s'agit essentiellement d'un élément vide ou de nos modèles,
nous n'allons pas marcher avec un modèle de canevas.
Il n'est donc pas nécessaire d' activer cette mise en page,
mais je vais choisir les éléments
du modèle pleine largeur.
Allons-y maintenant et cliquez sur Publier.
Maintenant, je vais cliquer sur Modifier avec Elementor.
Ce que nous essayons de réaliser ici, c'est
je ramène le site de démonstration.
Il s'agira essentiellement d'une section à deux colonnes.
Celui de gauche, de gauche , nous aurons le logo,
tandis que la colonne à droite,
nous aurons le menu principal et nous voulons également que
la colonne de la colonne lumineuse
contenant le menu principal ait plus de largeur. .
Alors, jetez un coup d'œil.
OK, juste ici, je
vais cliquer sur le bouton Plus ici.
Et maintenant, nous pouvons choisir notre structure.
Et je vais choisir cette division ici.
Celui-ci l'aura,
la première colonne comportera un tiers de la section entière,
tandis que la deuxième colonne aura deux tiers.
Donc ici, puisque nous modifions la section, comme vous pouvez le voir,
pour la largeur du contenu,
nous pourrions en fait aller en pleine largeur si vous le vouliez.
Mais je vais choisir Box et je vais
choisir 1240 pixels.
Ce n'est que ma préférence personnelle.
J'ai aimé mes 1240 pixels.
Maintenant, ici pour la première colonne,
je vais cliquer à l'intérieur.
Je vais faire défiler jusqu'ici.
Et nous essayons d'ajouter le logo.
Je vais donc ajouter le logo du site.
Cliquez sur, déposez-le à l'intérieur.
Et maintenant, nous avons notre logo.
Maintenant, vous pouvez voir que le logo a
texte blanc et qu'il s'agit d'un fond blanc.
Mais supportez juste avec moi.
Bon, je vais choisir.
La taille de l'image ici, je vais être pleine pour l'instant.
Continuons ensuite et
cliquons sur le bouton Modifier de cette section.
Très bien, j'ai cliqué là-dedans.
Je vais revenir au style.
Et puis il est allé là où vous avez commencé à taper.
Je vais choisir le classique.
Maintenant, je vais choisir la couleur noire.
Maintenant, vous pouvez voir le logo, n'est-ce pas ? OK.
Passons maintenant à la deuxième colonne.
Nous allons ajouter nos éléments de navigation.
Donc, en écrivant dans le menu de navigation,
cliquez sur glisser, drogue à l'intérieur.
Ensuite, vous pouvez voir que le menu principal est sélectionné par défaut.
Cependant, quand il s'agit d'apporter un certain nombre de changements,
remarquez ici que le menu principal restera.
Le texte est en majuscules, il est en blanc.
Il est également aligné à droite et au centre.
Nous devons donc faire pour les choses.
Revenons ici. La première chose que je vais faire
est que lorsque vous modifiez le menu de navigation ici,
vous avez une mise en page qui clique là.
Et maintenant, nous allons choisir d'aligner sur la droite.
Comme vous pouvez le constater en ce moment, c'est à droite.
Passons maintenant au style.
Et nous allons venir ici pour la typographie.
Cliquez sur le bouton Modifier.
Transformation non poilue, choisissez majuscules.
OK ?
Ensuite, pour la couleur du texte,
cliquons sur l'icône globale juste
là, puis choisissons principalement pour Blanc.
Bien.
Mais maintenant, comment aligner
éléments du menu au milieu verticalement ?
Ce que vous voulez faire ici, c'est que vous allez cliquer sur
la puissance Modifier la colonne ici,
ce bouton particulier ici, vous cliquez ici.
Et maintenant, vous pouvez voir que nous avons l'alignement vertical.
Nous allons choisir le milieu.
Vous y allez.
C'est ça.
Mais nous n'en avons pas encore fini.
Pour le logo.
Cliquez sur le bouton Modifier correspondant au logo du site.
Et puis l'alignement ici,
on va aller à gauche.
Comme si tu ne voyais pas vraiment la différence pour l'instant,
mais supporte-toi juste avec moi.
Nous allons choisir celui qui se trouve à gauche.
Bon, allons-y maintenant et mises à jour.
Voyons maintenant ce que nous avons.
Consultez la page.
Et voilà.
Maintenant, vous pouvez voir
notre page d'accueil a cet en-tête particulier ici,
mais évolue ensuite vers,
disons la page À propos comme exemple,
vous pouvez voir que nous n' avons pas cet en-tête du tout.
S'il souhaite accéder à la page de contact.
Par exemple, vous pouvez voir que nous n'avons pas cet en-tête.
Donc, ici même,
la page d'accueil a maintenant
ce document particulier avec le fond noir,
le logo, puis les éléments de menu.
Maintenant, pour arrondir cela, je vais en fait apporter
quelques changements.
Revenons à la section.
Ok, et je sais que j'ai dit
que la largeur du contenu était de 1240 pixels,
mais j'ai fait d' autres tests,
et je pense qu'il vaut mieux aller avec la pleine largeur.
Allons donc en pleine largeur pour l'instant.
Ensuite, cette colonne, celle qui porte le logo,
nous allons le réduire à 2525 %.
Alors que la colonne contenant les éléments manuels aura 75 %.
Ensuite, modifions également le logo.
Je vais cliquer sur Modifier le logo.
Passons au style.
Et ensuite, pour la largeur maximale,
nous allons définir cette valeur à 75 %.
Et une question que vous pourriez vous poser est
pourquoi évidemment la largeur maximale et non la largeur réelle.
Voici le truc.
Lorsque vous définissez la largeur du logo,
le logo aura toujours cette largeur.
Nous sommes dégoûtés, de la taille de l'écran.
Vous travaillez avec la largeur maximale.
Vous dites essentiellement, Hey,
le logo ne doit jamais dépasser cette largeur.
Ensuite, dans les situations où la taille de l'écran n'est pas
assez grande documentée , la largeur totale du logo
réduit la taille de
la largeur maximale est beaucoup mieux pour une conception réactive.
Et vous voulez toujours être réactif.
Nous allons donc régler cela à 75 pixels.
Et maintenant, si nous mettons à jour,
si nous regardons notre en-tête,
vous pouvez voir maintenant qu'il ressemble
tellement à ce que nous avons
ici sur le site de démonstration.
La dernière chose à faire est que nous allons dupliquer
cet en-tête pour le deuxième en-tête.
Donc, en gros, il a ce qu'on va faire.
Bon, je vais retourner au backend.
Au lieu de créer le deuxième en-tête
pour le reste du site Web,
nous allons simplement venir ici et vous verrez ensuite
doublons EA ou ce
les doublons essentiels des atomes.
Je vais y aller maintenant et simplement
dupliquer l'en-tête de la page d'accueil.
Vous allez maintenant voir les brouillons Elementor.
Allons-y et je cliquerai sur Modifier.
Et ensuite, nous examinerons quelques changements ici.
Nous appellerons celui-ci l'en-tête global.
Vous pouvez lui donner n'importe quel autre nom que vous voulez,
mais je vais appeler cet en-tête global.
Et puis juste ici,
des modèles, oui, c'est l'en-tête.
Ensuite, l'écran est allumé.
Nous allons aller sur l' ensemble du site Web.
Mais pour être sûr, je
vais venir ici et dire ajouter une règle d'exclusion.
Nous disons, Hey, n'affichez pas celui-ci
sur la page d'accueil ici.
Il a une page spécifique.
Je vais venir ici et simplement taper chez moi, en
assurant que cet en-tête ne sera
jamais affiché sur la page d'accueil.
Il ne sera affiché que sur l'ensemble du site Web.
Et voilà.
Donc, gabarit pleine largeur également.
Allons-y maintenant et cliquez sur Publier.
Et voilà.
Donc, pour revenir ici,
rafraîchissons cette page.
C'est donc l'en-tête de la page d'accueil.
Mais maintenant, jetez un coup d'œil à cela.
Ok, si je devais aller sur une autre page,
disons la page À propos à titre d'exemple.
Maintenant, vous verrez que
l'en-tête en double ne s'affiche pas.
Allons également à la page Articles.
Vous pouvez le voir encore, l' en-tête en double ne s'affiche pas,
malgré le fait que nous ayons
dit que l' en-tête en double s'affiche
sur chaque page sauf sur la page d'accueil,
ce qui se passe exactement ici.
Et croyez-moi, il m'a fallu plusieurs heures.
La Chine a juste
pourquoi cela ne fonctionnait pas, mais je l'ai compris.
Ce que vous voulez faire, c'est simplement revenir
à l' en-tête en double ici.
C'est le double coup de chaque création.
Ce que vous voulez faire, c'est ça, OK,
essayez simplement d'initier, en fait,
revenons au
back-end pour ne pas être confus.
D'ici, à partir
ici, il suffit de cliquer sur Modifier avec Elementor.
Modifiez avec Elementor.
Et puis ce que vous allez faire, c'est juste ici,
initier tout type de changement.
Supposons que vous ajoutiez les éléments de titre ici,
par exemple, d'accord, déposez-le là-dedans.
Voyez-vous maintenant que le bouton de mise à jour est disponible ?
Bon, je vais retourner ici, fermer ça.
Le fait ici est que vous voulez apporter
une sorte de modification à l'
en-tête pour que
ce bouton de mise à jour en descente soit déclenché.
Nous pouvons maintenant mettre à jour.
Et maintenant, ça devrait fonctionner.
Donc, si on vous demande de revenir à la page de mes articles
ici et de les actualiser maintenant.
Maintenant, vous pouvez voir que l'en-tête dupliqué
montre maintenant que je retourne à la page d'accueil,
est exactement le même en-tête.
Je vais sur la page À propos.
Et bien sûr, c'est exactement le même en-tête.
C'est exactement ce que vous devez
faire lorsque vous essayez de dupliquer
vos en-têtes et vos pieds de page sur les doublons.
Il suffit d'entrer dans l' édition avec Elementor,
ajouter n'importe quel élément, de supprimer
cet élément juste pour déclencher le bouton de mise à jour.
Mise à jour.
Et maintenant, ce nouvel en-tête ou pied de page en double
sera maintenant en plein effet.
C'est tout pour la vidéo que nous avons créée nos deux en-têtes.
Merci d'avoir regardé et je vous verrai au prochain cours.