Très bien, commençons donc à
concevoir notre en-tête pour être réactif
et Lambda vous montre les états tels qu'ils sont en ce moment.
Le bureau est presque terminé.
Lorsque nous commençons à minimiser l'écran de notre navigateur.
Vous pouvez voir maintenant qu'à ce stade
, il s'agirait de la vue tablette.
Et vous pouvez voir que le logo devient beaucoup plus petit.
Le menu s'est également transformé en
menu traditionnel de hamburgers.
Et c'est bon, mais il peut certainement être amélioré.
Mais si nous allons un peu plus petits maintenant, vous pouvez
voir que c'est là que les choses ont l'air vraiment, vraiment mal.
Il s'agit de la vue mobile,
celle du téléphone portable.
Nous devions donc apporter
quelques changements ici. Je vais y aller.
Et en fait, avant de faire cela,
laissez-moi vous montrer l'autre en-tête, l'en-tête global.
Allons sur la page de contact et vous remarquerez
que celle-ci est un peu meilleure.
Nous avons le fond noir puis sur mobile,
même si le menu des hamburgers
est mal aligné sur le logo,
c'est encore beaucoup mieux car nous n'avons pas
d'espace blanc en haut.
Très bien, je vais modifier les en-têtes
de la page d'accueil.
Passons à Modifier avec Elementor
, puis à la page d'accueil vers le haut.
Maintenant, nous allons passer au mode réactif ici.
Mode réactif, passons d'abord à la table.
Maintenant, je veux vous montrer quelque chose de très rapide.
Très bien, laissez-moi revenir à la réactivité.
Par défaut, votre menu principal ou
un menu vedette activé s'est transformé en
menu hamburger en mode tablette. Toutefois,
notez que vous n'avez
pas toujours à suivre les paramètres par défaut.
ce moment, si je passe à la table, comme vous pouvez le voir,
il s'est tourné vers le menu des hamburgers.
Et c'est parce que si je clique et que je modifiais
le menu principal de la mise en page,
vous verrez les tailles d'écran de tablette de point d'arrêt positives américaines
tailles d'écran de tablette de point d'arrêt
de 1025 pixels et moins.
Bien sûr, le menu des hamburgers tacheté.
Si nous ne voulons pas le faire,
je vais plutôt passer à la vue mobile.
Vue sur tablette.
Le menu principal sera toujours affiché et nous ne transformerons le menu
de hamburgers
une fois que nous aurons atteint la vue mobile.
Allons-y la mise à jour.
Et voyons ce que ce petit,
peu de changement a fait pour nous.
Consultez la page. Retournez à la page d'accueil ou au dossier.
Maintenant maintenant, il s'agit
vue sur tablette.
Et vous pouvez voir que ce n' est pas si mal.
Vous n'avez pas besoin de passer une fois au téléphone portable,
au menu des hamburgers, c'est-à-dire des tablettes.
Bien sûr, si vous aviez beaucoup d'éléments de menu,
disons 678 éléments que les années,
vous n' aurez évidemment pas assez d'espace.
Mais les établissements où vous avez
quatre ou cinq éléments de menu,
c'est parfait pour son affichage.
Ils sont en mode tablette.
Il y a deux changements que je vais faire ici.
Il faudrait augmenter un
peu la taille du logo.
Ensuite, nous pourrions essayer de réduire un peu la taille
des éléments du menu.
Faisons ça très vite. Je vais
revenir à l'en-tête de la page d'accueil.
Nous allons passer pour répondre aux VUS, pourboire une tablette.
Très bien. Je vais cliquer sur le menu.
Je suis désolé, le logo soit ici au logo UT passe à Style.
Notez maintenant
que la dimension ici a été réglée sur tablette.
Comme vous pouvez le voir, tout est une tablette, une tablette SASE.
Je vais donc passer la taille à 100 %.
Nous allons montrer la taille réelle du logo.
Maintenant, pour le menu principal,
je sais que tout est en blanc.
Vous ne pouvez pas voir, mais supportez juste avec moi.
Je vais cliquer sur Modifier,
le menu principal, aller au style.
Ensuite, nous allons passer à la typographie ici.
Maintenant, regardez ceci, assurez-vous que
la taille ici est réglée sur tablette.
On va rendre ces 114 pixels
un peu plus petit que d'habitude.
Nous allons faire des mises à jour.
Jetons maintenant un coup d'œil.
Ajoutez le nouvel en-tête de la page d'accueil et le mode réactif.
Et voilà.
Vous y allez.
Jusqu'à présent, ça a l'air très bien.
Évidemment, nous allons apporter des changements majeurs
au titre de la bannière,
le gagnant que nous voyageons, c'est de l'aventure.
Nous allons réduire la taille,
mais il suffit de faire attention à l'en-tête réel.
Ok, ça a l'air bien jusqu'à la vue mobile,
qui va maintenant devoir marcher.
Mais pour l'instant, sur mesure,
cela a l'air plutôt bien.
Jetons maintenant un coup d'œil à
l'en-tête de l' en-tête global global.
Nous allons choisir une page, choisissons la page Articles.
Et à partir de là, nous allons modifier
l'en-tête global.
Nous allons d'abord gérer le mode tablette.
Alors venons ici à votre réactif. Allez sur tablette.
Très bien, nous allons gérer les points de pain.
Nous allons passer celui-ci au mobile.
Et cela fera exactement la même chose
pour le style.
Nous allons aligner vers la droite,
pour le menu principal,
aligner sur le blanc, puis sur le style.
Nous allons venir ici pour la typographie.
Assurez-vous que cette option est réglée sur tablette.
Nous allons donc également utiliser 14 pixels.
Et c'est là.
Ok, le prochain sera le logo.
N'oublions pas, nous devons faire le logo ou 100%.
Assurez-vous que cette option est réglée sur des tablettes.
100 %, fin.
Nous allons maintenant passer à la vue mobile.
La seule chose que nous devons faire ici serait de définir
le menu de navigation au centre.
En fait, nous n' aurions pas dû toucher
les alignements en mode tablette,
donc c'est bon, nous allons simplement reculer.
Je vais aller dans Content Layout
, puis l'alignement ici.
Laissons-le juste au centre.
Je pense qu'ils iront mieux.
Très bien. C'est ça.
Je vais aller de l'avant et je vais le mettre à jour.
Jetons un coup d'œil à ce que nous avons.
Voyons la page.
Nous allons choisir la page Articles.
Réduisez la taille. Qu' avons-nous ici ?
Très bien, est-ce que la tablette,
tablette a l'air bien.
Et maintenant, ce sera la vue mobile,
mais il semble y avoir un désalignement
avec le logo et ensuite le menu lui-même.
Résolvons donc rapidement ce problème.
Revenons en arrière.
Nous devons rendre le logo peut-être
un peu plus petit.
Je pense que c'est un peu trop gros.
Apportons donc ces changements.
Retournez à mobile réactif.
Ok, modifions le logo en premier alignement ici,
positionnons-le au centre.
Disons que celui-ci est dissident.
Et puis peut-être que la taille,
peut-être qu'un 100% est un peu trop grande, sans y penser.
Donc, ramenons cela à 75 %.
Allons-y et les dates.
Et voyons à quoi cela ressemblera.
Revenons en arrière sur la page.
article. Je minimise, ok,
beaucoup mieux maintenant et maintenant vous pouvez voir
l'alignement est au centre.
Et c'est là.
Donc, j'ai l'air beaucoup mieux,
beaucoup mieux en ce moment.
Bien sûr, il y aura encore quelques changements supplémentaires aux en-têtes,
mais pour l'instant,
au moins, c'est
bien mieux que ce que nous avions initialement.
en-tête de la page d'accueil et l'en-tête global ont tous
deux une meilleure apparence.
Nous traiterons les espaces blancs dans l'
en-tête de la page d'accueil de la vidéo suivante.