Bienvenue dans la deuxième partie de la refonte de l'en-tête réactif.
Et j'ai oublié de mentionner dans une vidéo précédente
lorsque j'ai changé les signes des éléments de menu ici,
pour une raison quelconque, cela semble avoir
affecté la version de bureau.
Vous pouvez voir maintenant que
les textes et ne sont plus majuscules, si quelque chose comme ça se produit,
il suffit de revenir à la modification de l'en-tête de la page d'accueil.
Ce que vous voulez faire, c'est simplement accéder à
l'élément de menu.
Je vais donc cliquer sur de nombreux éléments ici.
Allez dans Style, accédez à la typographie ici,
puis cliquez dessus.
C'est tout ce que vous pouvez voir ici.
Il est écrit Transformer en majuscules.
Donc, nous ne faisons que réaffirmer que,
Hé, nous voulons que les Let's soient majuscules.
Je vais donc recommencer les mises à jour
et revenons en arrière, voir la page.
Allons sur la page d'accueil.
OK. Et voilà.
Donc honnêtement, je ne sais pas très bien pourquoi cela arrive,
mais juste au cas où cela vous arriverait,
faites simplement ce que je viens de faire. OK.
Maintenant, auparavant, nous étions en mesure de faire
ressembler à ceci la vue de la tablette, ce
qui n'est pas mal du tout.
Mais il est maintenant temps pour nous de jeter un coup d' œil
à la vue mobile.
Et vous pouvez voir en ce moment que ça a l'air vraiment,
vraiment mauvais est beaucoup d'espaces blancs
et le logo et le menu,
le menu des hamburgers en ligne,
mais nous devons réparer les espaces blancs.
En fait, c'est la deuxième fois que j'
enregistre cette vidéo en particulier
, car dans la précédente,
j'ai pu réparer
l'en-tête mobile pour avoir exactement le même
style. vous aurez
la bannière en arrière-plan.
Cependant, j'ai décidé de suivre un itinéraire différent et
utiliser plutôt le même type
d'en-tête que pour le reste des pages,
comme celui ici où vous avez le fond noir,
j'ai décidé d'utiliser ces en-tête de
la page d'accueil en mode mobile.
La raison en est que je voulais profiter de cette opportunité pour
vous montrer
un truc très cool que vous
pouvez utiliser chaque fois que vous travaillez avec un design réactif.
Revenons à la page d'accueil.
Et je veux vous montrer quelque chose, non ?
Je vais passer à Edit with
Elementor en modifiant l'en-tête de la page d'accueil.
Voici le truc. Bon, je vais
reproduire cette section d'en-tête.
Je vais cliquer ici avec le bouton droit de la souris. Doublons.
En gros, nous avons maintenant deux en-têtes.
La différence, c'est que je vais venir ici, aller dans
cette section Modifier.
Je vais aller au style,
type d' arrière-plan, lui donner une couleur noire.
Bon, maintenant, vérifiez ça.
Je vais aller à Advanced,
venir ici à Responsive,
puis inviter ici vous avez des options de visibilité.
Quand souhaitez-vous afficher
cette section en fonction d'une taille d'écran ?
Je vais le cacher sur le bureau.
Oui.
Nous ne voulons pas encore le filmer sur le bureau
car nous utilisons toujours l'
en-tête de la page d'accueil sur tablette.
Nous voulons également le cacher jusqu'à cela.
Mais ensuite, nous voulons le montrer quand il
arrive à la vue mobile.
En tant que tel, je vais maintenant passer à
notre en-tête d'origine et faire le contraire.
Allez à Avancé, Calmez l'hétéro responsive,
puis masquez sur le bureau.
Personne ne veut montrer,
nous voulons montrer jusqu'à cela.
Mais quand je vais sur Hide on Mobile,
laissez-moi aller de l'avant et maintenant les mises à jour.
Et jetez un coup d'œil à ça.
Allons-y maintenant, consultez la page.
Allons sur la page d'accueil.
Ok, vous pouvez voir que nous avons toujours le même en-tête.
Mais maintenant, pour la vue tablette,
vous pouvez voir que nous avons toujours le même en-tête,
le même en-tête au même en-tête.
Maintenant, une fois qu'il est arrivé à la vue mobile,
nous avons maintenant le fond noir avec
l'idée du logo du centre , puis
le menu des hamburgers en bas.
Ensuite, nous avons la bannière de la page d'accueil.
Et voilà.
C'est donc une astuce que vous
pouvez utiliser chaque fois que vous travaillez avec un design réactif.
Vous pouvez choisir d'afficher
une section particulière sur un ordinateur de bureau.
Et vous pouvez choisir d' afficher une section spécifique
spécifiquement uniquement sur tablette ou sur mobile.
Une question que je pourrais avoir encore est correcte,
pourquoi n'ai-je pas simplement
dupliqué cet en-tête particulier, puis simplement utiliser cet en-tête
sur la page d'accueil
, puis simplement le masquer sur le
bureau. et tablette , puis affichées sur mobile.
Vous pouvez avoir deux têtes
affichées sur n'importe quelle page avec élémental,
moins c'est comme ça que fonctionne ce plug-in.
Ok, donc si vous pensez,
je vais simplement dupliquer cet en-tête
et afficher deux en-têtes sur la même page,
cacher un sur des ordinateurs de bureau ou ils ne veulent pas d'un mobile,
ça ne fonctionnera pas parce que J'ai vraiment essayé.
C'est pourquoi j'ai dû accéder à l'en-tête de la page d'accueil.
Ensuite, sur ce même en-tête,
créez une deuxième section qui s' affichera désormais
spécifiquement sur la vue mobile.
Mais ce n'est pas fini.
Je veux vraiment faire autre chose.
voyez, vous n'avez pas toujours à aller avec cette tomate.
Vous avez le logo et le centre sur le dessus,
puis le menu des hamburgers ou en dessous.
Nous pouvons toujours utiliser deux colonnes ici.
Comment se connecter à gauche et avoir le menu sur la lumière.
Faisons cela.
Je vais revenir à l' édition avec Elementor,
l'en-tête de la page d'accueil et
palettes avec pour cette page pour charger, d'accord, quelques modifications.
Le deuxième en-tête en ce moment.
Mais je vais maintenant passer en mode réactif.
Passons à la vue mobile.
All Kn a exactement ce que nous avons. Juste ici.
Je vais le faire.
Je vais cliquer sur la colonne
contenant le logo. Juste ici.
Je vais dire 50.
Ensuite, je reviendrai ici dans la
colonne du logo qui contient le logo,
je suis désolé, tout cela dans le menu non plus.
Ensuite, changez celui par 50 pour qu'
ils soient côte à côte.
Maintenant, apportons quelques changements.
Je vais cliquer sur le menu Edition, l' icône,
descendre, frapper la mise en page.
Essayons de nous aligner sur le blanc.
Et ensuite, on va le faire gros.
Passons au style.
Ici, vous aurez
le déclencheur de menu et l'icône de fermeture cliquez à l'intérieur.
Et maintenant Icone Size, je vais le faire
au-dessus de 40 pixels.
Keda devrait être assez grand.
Et puis pour le logo,
modifions également le logo.
La taille de l'image est définie sur pleine,
alignée vers la gauche.
Passons au style max avec un 100%.
Bon, allons-y maintenant.
mises à jour. En fait, avant de le faire, tenons.
Faisons également cela.
Lorsque vous cliquez sur le menu des hamburgers.
Ce sera le travail accompli.
Mais vous pouvez voir maintenant que nous pouvons voir le texte.
Le texte est entièrement blanc,
nous devons donc apporter quelques modifications ici.
Voici exactement ce que je vais faire.
Je vais aller voir le menu
déroulant de l'enseigne ici.
Et puis la couleur de fond.
On va aller avec le noir,
couleur du texte, on va aller avec le blanc.
Et ça devrait être ça.
Je ne sais pas pourquoi nous ne le voyons pas encore ici, mais c'est bon.
Je vais faire des mises à jour.
Revenons en arrière, voir la page.
Retournez à la page d'accueil, réduisez la fenêtre.
Bon, donc maintenant vous pouvez dire, OK,
nous avons le logo à gauche,
le menu blanc.
Maintenant, si nous cliquons sur le menu ici, il s'ouvre.
Bobby ne peut toujours pas voir le texte qui s'intéresse.
Bon, revenons en arrière et voyons ce qui a pu se passer.
Et cela va être très intéressé.
Je ne sais pas très bien pourquoi nous ne voyons pas les textes.
Très bien. Ne vous inquiétez pas.
Je vais venir ici en mode réactif,
revenir à Mobile.
Cliquez sur le menu juste ici,
cliquez sur le menu déroulant.
Pourquoi ne voyons-nous pas le texte ?
Passons au style.
Revenons ici à la typographie et wow,
je ne suis pas tout à fait sûr pourquoi la taille ici
plutôt qu'une seule, mais ça ne devrait pas en être une.
Il devrait être un peu plus grand qu'un.
C'est probablement un défaut en pixels.
Donc mes excuses, je vais dire
pourquoi moi un pixel,
parfois j'ai l'impression que l'élément essaie
de m' empêcher de faire de bonnes vidéos.
Je ne sais vraiment pas pourquoi.
Il a dit ne pas pixeler.
C'est juste, c'est juste bizarre.
Quoi qu'il en soit, vous pouvez voir qu'au
moins les éléments du menu s'affichent maintenant,
Wow, c'est très, très intéressé,
je vous dis que le design web peut être une profession très
étrange, très étrange.
Parfois, vous avez
impression que tous ces éléments ont à l'esprit
qu'ils ne reviendront pas en arrière.
Très bien, maintenant je clique ici.
C'est là.
Maintenant, vous pouvez voir que j' ai les éléments du menu
et bien sûr, vous pouvez maintenant fermer.
C'est donc essentiellement
pour redessiner l'en-tête réactif.
En fait, je vais aller de l'avant et faire
exactement la même chose pour
l'en-tête global pour la vue mobile,
où je ferai la première colonne 50%, puis je ferai
la deuxième colonne contenant l'élément de menu sont également de 50 %.
Et agrandissez également l'icône du menu
hamburger un peu plus grande.
Vous pouvez donc y aller de l'avant et le faire également.
Mais c'est tout pour créer le
réactif ou les en-têtes du site Web.
Merci d'avoir regardé la prochaine vidéo de l'événement allemand
où nous allons maintenant jeter un coup d'œil à
la refonte du pied de page pour
être un peu plus responsable. Alors, vous.