Dans la vidéo précédente, nous avons créé avec succès
nos deux en-têtes,
un pour la page d'accueil
et l'autre pour le reste du site Web.
Mais maintenant, nous allons créer notre pied de page mondial.
Et la bonne nouvelle ici est que nous n'avons besoin que d'un
pied de page et c'est
exactement ce que nous essayons de créer.
Nous allons avoir cette image ici à gauche
puis quelques coordonnées, des icônes des réseaux sociaux.
Et puis le droit d' auteur latéral
en bas.
Allons de l'avant et faites-le rapidement.
Je vais cliquer sur Ajouter un nouveau.
Et nous allons appeler celui-ci le pied de page mondial.
Sélectionner l'option ici sera Pied de page
et, bien sûr, l'affichage car l'ensemble du site Web.
Et nous allons changer le modèle en pleine largeur.
Et on y va.
Allons de l'avant Publier.
Et maintenant, nous allons éditer avec Elementor.
Maintenant, je veux que vous accordiez une attention particulière
à une énorme différence
entre l'en-tête et
le pied de page et l'en-tête que nous avons ici.
Nous ne disposons essentiellement que de deux colonnes.
Celui de gauche tenant le logo,
celui de droite tenant le code, le menu principal.
Mais pour le pied de page, remarquez
que c'est un peu différent.
Oui, nous avons encore deux colonnes,
une contenant cette image,
l'autre contenant les coordonnées.
Mais ici,
ce texte de copyright est en fait une troisième colonne.
Ce n'est pas sous cette première colonne ici.
Il s'agit en fait d'une colonne distincte à elle seule.
Afin de créer ce type de section multi-colonnes,
nous allons utiliser
un nouvel élément appelé la section E-mail de l'enquête.
C'est en fait le tout premier élément que vous possédez,
celui-ci ici même dans une section.
Je vais cliquer sur glisser, puis le déposer à l'intérieur.
abord , c' est que
je vais modifier la toute première section.
Si vous rencontrez des difficultés à essayer
de cliquer sur la section des parents
, en gros, vous pouvez toujours utiliser votre navigateur ici
et vous pouvez voir ici, nous avons
cette colonne de section puis l'intersection.
Je vais donc cliquer sur la section maintenant.
Nous allons modifier la largeur du contenu
ici en pleine largeur.
Et puis les colonnes s'écartent.
Nous ne choisirons pas de fossé.
La raison en est que si vous faites attention,
vous pouvez voir maintenant la façon dont vous avez l'image,
il n'y a pas d'espace,
il n'y a aucune marge de remplissage.
L'image se trouve directement
à la bordure du bas.
C'est là que nous choisissons notre écart de nœuds ici.
Nous ne voulons pas avoir de lacunes du tout.
va de même pour la section intérieure.
Mais avant de sauter là-dedans,
ajoutons une couleur d'arrière-plan.
Je vais passer au type Arrière-plan.
Et bien sûr, nous allons choisir d'être noirs.
Je vais donc avoir un fond noir pour le pied de page.
La prochaine étape va maintenant être la section ina.
Je vais cliquer sur la section intérieure juste ici à partir de
la navigation vers à nouveau,
nous allons aller en pleine largeur.
Et puis les colonnes, les colonnes s'écartent ici.
Nous allons dire non plus d'écart.
Très bien, génial.
Maintenant, allons de l'avant et
traitons la toute première colonne ici,
qui aura notre image.
Je vais donc déposer l'élément image là-dedans.
Choisissez cette image ici.
Et au cas où vous vous demandiez que c'est vraiment au Pérou.
C'est un endroit appelé Horeca kina ou Cocina.
Je ne sais pas exactement comment c'est basé sur la finance,
essentiellement un peu comme une zone désertique.
Vous pouvez faire une table d'harmonie et ainsi de suite.
un endroit assez génial à découvrir.
Et je vais aller de l'avant et changer celui-ci en idiot.
Mais voici le plus mince, n'est-ce pas ?
Nous allons changer la largeur des colonnes.
Nous allons faire la première colonne ici.
Nous allons vraiment le rendre un peu plus large.
On va donc aller jusqu' à 63 pixels, 63
% en fait, donc 63 % puis 37 % pour la deuxième colonne.
Mais nous allons changer l'image.
L'image est beaucoup trop haute.
Allons donc modifier l'image.
Et puis nous allons aller ici pour
style et nous sommes là,
je vais choisir 450 pixels.
Il est donc assez grand et assez large.
Ok, c'est l' image juste là.
Maintenant, je ne fais que fermer le navigateur.
Pour la deuxième colonne,
nous allons ajouter une série d'éléments différents.
Le tout premier ici serait l'élément de rubrique,
et celui-ci sera nos contacts.
Je vais tout taper en majuscules. Contact.
Ce sera un H2.
Pour le style de la sagesse.
Nous allons passer à la couleur du texte
et choisir simplement primaire.
Nous allons maintenant choisir un autre titre.
Une fois encore.
Je vais le déposer juste en dessous
du contact juste là.
Celui-ci va être un téléphone.
Encore une fois, des majuscules au téléphone.
Cependant, on va le faire à l'âge de trois ans.
En fait, nous allons en faire un H4.
Nous allons en faire un H4
et nous allons ajouter des informations.
Donc ce que je vais faire ici, c'est que je cliquerai
simplement avec le bouton droit de la souris , puis je dupliquerai simplement.
Et maintenant, on va le faire à l'âge de cinq ans.
Le numéro de téléphone réel sera un h5.
Changeons donc le numéro ici à
090 espace 645, espace 3417.
Ce sera le numéro de téléphone.
Et je vais revenir au style et à la topographie.
Nous allons vraiment choisir des textes.
Je préfère ce modèle de texte,
donc nous allons choisir celui-ci.
Ensuite, nous allons également dupliquer le téléphone.
Encore une fois, faites-le glisser ici juste
en dessous du numéro de téléphone.
Nous allons également dupliquer
le numéro de téléphone lui-même.
OK, puis faites glisser le doigt sur le téléphone NIF.
Maintenant, oups, désolé, ça s'est passé jusqu'ici.
Ramenons-le ici.
Bon, maintenant on va modifier le téléphone,
le deuxième téléphone ici.
Nous allons changer celui-ci par e-mail.
C'est essentiellement comment marcher intelligemment.
Il suffit de dupliquer chaque fois que vous
pouvez et d'apporter simplement les modifications nécessaires.
Nous allons maintenant modifier le numéro de téléphone.
On va changer l'e-mail.
Mon e-mail est Alex.
Les ports de passe deviendront incorrects.
Alex sur passeport travel.com.
D'accord. Oui. C'est exact.
Et enfin, mais non des moindres,
nous aurons une adresse.
Nous allons également dupliquer l'e-mail,
en ajoutant une fois de plus.
Glissons-le, déposons-le ici.
Modifiez également les courriels.
Adresse IP.
Maintenant, pour l'adresse réelle,
nous allons utiliser un éditeur de texte plutôt qu'un éditeur de texte masqué,
car plusieurs lignes de texte vont
déposer l' éditeur de texte juste là.
J'ai une adresse très intéressée ici.
Je ne sais pas s'il s'agit d'une vraie
adresse. Je ne m'en souviens pas.
Mais c'est en r2, Emile Zola.
Maintenant, je vais appuyer sur Maj Entrée, pas seulement sur anti,
car si vous appuyez sur Entrée, vous aurez
un double espace,
utilisez la touche Maj, puis entrez.
Vous disposez donc d'un interligne unique.
Et maintenant, je vais taper 609002, Leon,
Shift Enter à nouveau.
Et puis on va taper en France
et on va passer à la typographie de style.
On va y aller avec des textos.
Et bien sûr, la couleur du texte sera principale.
Et voilà.
Enfin,
nous allons avoir nos icônes sur les réseaux sociaux.
Très, très, très important.
Les médias sociaux vont être ici en général.
Ajoutons un média social.
Et bien sûr, pour Facebook,
nous allons changer la couleur du
code efficace au code personnalisé.
La couleur principale ici serait blanche,
la couleur secondaire serait noire.
Fondamentalement, vous aurez le fond blanc et
l'icône elle-même sera noire.
S'il s'agissait d'un véritable site Web que vous construisez,
c'est ici que vous ajouteriez le lien
à votre page Facebook.
C'est pour Facebook.
Faisons exactement la même chose pour Twitter.
Pourquoi ce sera la couleur du paramètre
noir en tant que couleur secondaire.
La dernière banale est le costume de couleur fuchsia ou YouTube.
La couleur primaire est blanche,
le deux-points secondaires est noir.
Et puis la forme ici,
nous allons changer sa forme en cercle, à
droite, puis en alignant,
je vais l' aligner vers la gauche.
Nous y sommes presque.
Mais remarquez ensuite qu' il y a un certain espacement,
les coordonnées réelles et ensuite l'image.
Ce que vous allez faire ici
c'est que nous allons accéder
à la colonne
contenant toutes ces informations de contact,
vous cliquez ici.
Passez d'abord, Alignement vertical,
alignons au milieu.
Ensuite, passez à Avancé,
puis vous aurez éventuellement un rembourrage.
Je vais dissocier ces valeurs ensemble car la chose à
ces valeurs ensemble car
ce sujet est par défaut,
quelle que soit la valeur que vous ajoutez à votre rembourrage,
haut, à droite, en bas ou à gauche.
Il dupliquera un cours des trois côtés restants.
Donc, nous ne voulons pas cela,
nous voulons seulement ajouter du rembourrage d'un côté.
Je vais donc cliquer sur ce bouton ici pour
dissocier les valeurs juste au cas où vous ne le sauriez pas,
Pattern est un moyen de créer de l'espace
entre votre contenu et sa bordure.
Nous allons ajouter du rembourrage à gauche, comme vous pouvez le
voir, déjà beaucoup mieux.
Et je vais aller jusqu' à 40 pixels.
Nous y sommes presque.
L'un d'eux que nous allons ajouter en ce moment sera celui
des textes de copyright.
Je vais donc faire défiler jusqu'ici.
Ainsi, juste ici, sous votre en-tête et votre pied de page élémentaires,
vous voyez des textes de droits d'auteur.
Cliquez sur Glisser.
Et je vais être très, très prudent.
Nous ne le déposons pas sur
cette première colonne qui contient l'image.
Nous le déposons dans une clinique distincte considérée comme
ligne bleue apparaissant, ce qui signifie ça, d'accord.
Ce sera une colonne distincte.
Notez maintenant que la ligne bleue se
trouve uniquement sous l'image,
sous la colonne qui contient l'image.
Mais si je fais glisser ma souris un peu plus
bas maintenant
vous pouvez voir la ligne bleue s'étendre sur les deux colonnes.
Maintenant, je vais déposer le texte des droits d'auteur là-dedans.
Et c'est là.
La couleur du texte ici sera évidemment la typographie principale.
Nous allons utiliser le texte aligné sur le centre.
Et nous allons en fait passer à
la typographie, un gain.
Et rendons celui-ci un peu
plus petit que d'habitude.
Je pense que 16 pixels sont à peu près corrects.
Mais nous voulons également ajouter un peu de rembourrage.
Passons donc à l'avancée.
Encore une fois, nous allons dissocier les valeurs.
Nous allons également ajouter un rembourrage de 20 pixels
pour les dix premiers pixels pour le bas.
Nous avons fait beaucoup de choses.
Allons-y maintenant et mises à jour.
Voyons à quoi ça ressemble.
Je vais donc aller ici, rafraîchir la page.
Et voilà.
C'est notre pied de page juste là.
Maintenant, je sais que vous pouvez voir des espaces blancs ici,
mais c'est simplement parce que nous n'avons pas
encore de contenu sur la page d'accueil.
C'est pourquoi vous avez cet espace blanc.
J'ai déjà ajouté du contenu à la page À propos.
C'est donc plutôt ce à quoi ça ressemblera maintenant.
Vous pouvez voir qu'il n'y a plus d'espace blanc sur
un int car nous avons effectivement
du contenu sur la page, mais c'est le cas.
Nous avons maintenant notre pied
bien construit avec l'image du Pérou, des textes de
droits d'auteur, ainsi que certaines informations de contact.
Merci d'avoir regardé, et bien sûr
, je vous verrai dans la prochaine classe.