1
00:00:00,000 --> 00:00:01,200
Très bien, commençons donc à

2
00:00:01,200 --> 00:00:03,600
concevoir notre en-tête
 pour être réactif

3
00:00:03,600 --> 00:00:08,330
et Lambda vous montre les
 états tels qu'ils sont en ce moment. 

4
00:00:08,325 --> 00:00:11,795
Le bureau est presque terminé. 

5
00:00:11,790 --> 00:00:15,260
Lorsque nous commençons à minimiser
 l'écran de notre navigateur. 

6
00:00:15,255 --> 00:00:16,865
Vous pouvez voir maintenant
 qu'à
 ce stade

7
00:00:16,860 --> 00:00:18,390
, il s'agirait de la vue tablette. 

8
00:00:18,390 --> 00:00:21,600
Et vous pouvez voir que le
 logo devient beaucoup plus petit. 

9
00:00:21,600 --> 00:00:23,790
Le menu s'est également
 transformé en

10
00:00:23,790 --> 00:00:26,940
menu traditionnel
 de hamburgers. 

11
00:00:26,940 --> 00:00:32,400
Et c'est bon, mais il peut
 certainement être amélioré. 

12
00:00:32,395 --> 00:00:34,975
Mais si nous allons un
 peu plus petits maintenant, vous pouvez

13
00:00:34,970 --> 00:00:37,450
voir que c'est là que les choses
 ont l'air vraiment, vraiment mal. 

14
00:00:37,445 --> 00:00:38,545
Il s'agit de
 la vue mobile,

15
00:00:38,540 --> 00:00:40,070
celle du téléphone portable. 

16
00:00:40,070 --> 00:00:41,330
Nous devions donc apporter

17
00:00:41,330 --> 00:00:43,370
quelques changements ici. 
Je vais y aller. 

18
00:00:43,370 --> 00:00:45,110
Et en fait, avant de faire cela,

19
00:00:45,110 --> 00:00:48,670
laissez-moi vous montrer l'autre
 en-tête, l'en-tête global. 

20
00:00:48,665 --> 00:00:51,565
Allons sur la
 page de contact et vous
 remarquerez

21
00:00:51,560 --> 00:00:54,970
que celle-ci est
 un peu meilleure. 

22
00:00:54,965 --> 00:00:57,835
Nous avons le fond noir
 puis sur mobile,

23
00:00:57,830 --> 00:00:59,900
même si le menu des hamburgers

24
00:00:59,900 --> 00:01:01,580
est mal aligné sur le logo,

25
00:01:01,580 --> 00:01:03,410
c'est encore beaucoup mieux
 car nous
 n'avons pas

26
00:01:03,410 --> 00:01:06,340
d'espace blanc en haut. 

27
00:01:06,335 --> 00:01:08,425
Très bien, je vais
 modifier les en-têtes

28
00:01:08,420 --> 00:01:10,910
de la page d'accueil. 

29
00:01:10,905 --> 00:01:12,645
Passons à Modifier avec Elementor

30
00:01:12,649 --> 00:01:14,639
,
 puis à la page d'accueil vers le haut. 

31
00:01:14,640 --> 00:01:18,720
Maintenant, nous allons passer au mode
 réactif ici. 

32
00:01:18,715 --> 00:01:21,645
Mode réactif,
 passons d'abord à la table. 

33
00:01:21,640 --> 00:01:24,000
Maintenant, je veux vous montrer
 quelque chose de très rapide. 

34
00:01:23,995 --> 00:01:26,695
Très bien, laissez-moi
 revenir à la réactivité. 

35
00:01:26,695 --> 00:01:29,685
Par défaut, votre menu principal ou

36
00:01:29,680 --> 00:01:31,060
un menu vedette
 activé s'est transformé en

37
00:01:31,060 --> 00:01:33,070
menu hamburger
 en mode tablette.
 Toutefois,

38
00:01:33,070 --> 00:01:36,820
notez que vous
 n'avez

39
00:01:36,820 --> 00:01:39,570
pas toujours à suivre
 les paramètres par défaut. 

40
00:01:39,565 --> 00:01:42,195
ce moment, si je passe à la
 table, comme vous pouvez le voir,

41
00:01:42,190 --> 00:01:44,890
il s'est tourné vers
 le menu des hamburgers. 

42
00:01:44,890 --> 00:01:47,580
Et c'est parce que si
 je clique et que je
 modifiais

43
00:01:47,575 --> 00:01:50,575
le menu principal de la mise en page,

44
00:01:50,575 --> 00:01:51,975
vous verrez les tailles d'écran de tablette de
 point d'arrêt positives américaines

45
00:01:51,970 --> 00:01:55,180
tailles d'écran de tablette de
 point d'arrêt

46
00:01:55,180 --> 00:01:57,390
de 1025 pixels et moins. 

47
00:01:57,390 --> 00:02:01,310
Bien sûr, le menu des hamburgers tacheté. 

48
00:02:01,310 --> 00:02:02,690
Si nous ne voulons pas le faire,

49
00:02:02,690 --> 00:02:07,400
je vais plutôt passer à
 la vue mobile. 

50
00:02:07,400 --> 00:02:09,680
Vue sur tablette. 

51
00:02:09,680 --> 00:02:11,620
Le menu principal
 sera toujours affiché et nous
 ne transformerons
 le menu

52
00:02:11,615 --> 00:02:13,165
de hamburgers

53
00:02:13,160 --> 00:02:15,290
une fois que nous aurons atteint la vue mobile. 

54
00:02:15,290 --> 00:02:16,910
Allons-y la mise à jour. 

55
00:02:16,910 --> 00:02:18,280
Et voyons ce que ce petit,

56
00:02:18,275 --> 00:02:20,035
peu de changement a fait pour nous. 

57
00:02:20,030 --> 00:02:28,310
Consultez la page. Retournez
 à la page d'accueil ou au dossier. 

58
00:02:28,310 --> 00:02:29,480
Maintenant maintenant,
 il s'agit

59
00:02:29,480 --> 00:02:30,920
vue sur tablette. 

60
00:02:30,920 --> 00:02:34,240
Et vous pouvez voir que ce n'
est pas si mal. 

61
00:02:34,235 --> 00:02:37,025
Vous n'avez pas besoin de
 passer
 une fois au téléphone portable,

62
00:02:37,025 --> 00:02:39,595
au menu des hamburgers, c'est-à-dire des tablettes. 

63
00:02:39,590 --> 00:02:42,230
Bien sûr, si vous
 aviez beaucoup d'éléments de menu,

64
00:02:42,230 --> 00:02:44,810
disons 678 éléments que les années,

65
00:02:44,810 --> 00:02:47,210
vous n'
aurez
 évidemment pas assez d'espace. 

66
00:02:47,210 --> 00:02:48,860
Mais les établissements
 où vous avez

67
00:02:48,860 --> 00:02:50,870
quatre ou cinq éléments de menu,

68
00:02:50,870 --> 00:02:53,300
c'est parfait
 pour son affichage. 

69
00:02:53,300 --> 00:02:57,250
Ils sont en
 mode tablette. 

70
00:02:57,245 --> 00:02:59,155
Il y a deux changements que je
 vais faire ici. 

71
00:02:59,150 --> 00:03:00,560
Il faudrait augmenter un

72
00:03:00,560 --> 00:03:02,630
peu
 la taille du logo. 

73
00:03:02,630 --> 00:03:04,850
Ensuite, nous pourrions
 essayer de réduire un
 peu
 la taille

74
00:03:04,850 --> 00:03:07,420
des éléments du menu. 

75
00:03:07,415 --> 00:03:08,815
Faisons ça très
 vite. Je vais

76
00:03:08,810 --> 00:03:11,070
revenir à l'en-tête de la page d'accueil. 

77
00:03:12,220 --> 00:03:16,400
Nous allons passer pour
 répondre aux VUS, pourboire une tablette. 

78
00:03:16,400 --> 00:03:18,680
Très bien. Je vais
 cliquer sur le menu. 

79
00:03:18,680 --> 00:03:22,700
Je suis désolé, le logo soit
 ici au logo UT passe à Style. 

80
00:03:22,700 --> 00:03:24,760
Notez maintenant

81
00:03:24,755 --> 00:03:27,475
que la dimension ici
 a été réglée sur tablette. 

82
00:03:27,470 --> 00:03:29,630
Comme vous pouvez le voir, tout est une tablette, une tablette
 SASE. 

83
00:03:29,630 --> 00:03:34,270
Je vais donc
 passer la taille à 100 %. 

84
00:03:34,265 --> 00:03:36,955
Nous allons montrer la taille
 réelle du logo. 

85
00:03:36,950 --> 00:03:38,810
Maintenant, pour le menu principal,

86
00:03:38,810 --> 00:03:40,100
je sais que tout est en blanc. 

87
00:03:40,100 --> 00:03:41,690
Vous ne pouvez pas voir, mais supportez
 juste avec moi. 

88
00:03:41,690 --> 00:03:43,060
Je vais cliquer sur Modifier,

89
00:03:43,055 --> 00:03:45,265
le menu principal, aller au style. 

90
00:03:45,260 --> 00:03:48,380
Ensuite, nous allons passer à la
 typographie ici. 

91
00:03:48,380 --> 00:03:50,300
Maintenant, regardez ceci, assurez-vous que

92
00:03:50,300 --> 00:03:52,450
la taille ici est réglée sur tablette. 

93
00:03:52,445 --> 00:03:54,745
On va rendre ces 114 pixels

94
00:03:54,740 --> 00:03:57,020
un
 peu
 plus petit que d'habitude. 

95
00:03:57,020 --> 00:03:58,880
Nous allons faire des mises à jour. 

96
00:03:58,880 --> 00:04:01,200
Jetons maintenant un coup d'œil. 

97
00:04:01,200 --> 00:04:05,280
Ajoutez le nouvel en-tête de la page d'accueil
 et le mode réactif. 

98
00:04:05,275 --> 00:04:07,975
Et voilà. 

99
00:04:07,975 --> 00:04:09,315
Vous y allez. 

100
00:04:09,310 --> 00:04:13,000
Jusqu'à présent,
 ça a l'air très bien. 

101
00:04:13,000 --> 00:04:14,590
Évidemment, nous allons
 apporter des changements majeurs

102
00:04:14,590 --> 00:04:16,930
au titre de la bannière,

103
00:04:16,930 --> 00:04:18,640
le gagnant que nous
 voyageons, c'est de l'aventure. 

104
00:04:18,640 --> 00:04:19,930
Nous allons réduire la taille,

105
00:04:19,930 --> 00:04:22,810
mais il suffit de faire attention
 à l'en-tête réel. 

106
00:04:22,810 --> 00:04:25,690
Ok, ça a l'air bien
 jusqu'à la vue mobile,

107
00:04:25,690 --> 00:04:27,460
qui va maintenant devoir marcher. 

108
00:04:27,460 --> 00:04:29,160
Mais pour l'instant, sur mesure,

109
00:04:29,155 --> 00:04:31,045
cela a l'air plutôt bien. 

110
00:04:31,045 --> 00:04:32,535
Jetons maintenant un coup d'œil à

111
00:04:32,530 --> 00:04:35,610
l'en-tête de l'
en-tête global global. 

112
00:04:35,605 --> 00:04:38,005
Nous allons choisir une page,
 choisissons la page Articles. 

113
00:04:38,005 --> 00:04:39,435
Et à partir de là, nous
 allons
 modifier

114
00:04:39,430 --> 00:04:41,400
l'en-tête global. 

115
00:04:41,395 --> 00:04:44,845
Nous allons d'abord gérer
 le mode tablette. 

116
00:04:44,840 --> 00:04:48,800
Alors venons ici à
 votre réactif. Allez sur tablette. 

117
00:04:48,800 --> 00:04:51,760
Très bien, nous allons
 gérer les points de pain. 

118
00:04:51,755 --> 00:04:54,465
Nous allons passer
 celui-ci au mobile. 

119
00:04:54,469 --> 00:04:56,299
Et cela fera exactement
 la même chose

120
00:04:56,300 --> 00:04:58,970
pour le style. 

121
00:04:58,970 --> 00:05:01,640
Nous allons
 aligner vers la droite,

122
00:05:01,640 --> 00:05:03,800
pour le menu principal,

123
00:05:03,800 --> 00:05:05,830
aligner sur le blanc,
 puis sur le style. 

124
00:05:05,825 --> 00:05:08,305
Nous allons venir
 ici pour la typographie. 

125
00:05:08,300 --> 00:05:10,080
Assurez-vous que cette option est réglée sur tablette. 

126
00:05:10,075 --> 00:05:13,195
Nous allons donc également
 utiliser 14 pixels. 

127
00:05:13,190 --> 00:05:15,040
Et c'est là. 

128
00:05:15,035 --> 00:05:17,755
Ok, le prochain sera le logo.
 

129
00:05:17,750 --> 00:05:21,380
N'oublions pas, nous devons
 faire le logo ou 100%. 

130
00:05:21,380 --> 00:05:23,360
Assurez-vous que cette
 option est réglée sur des tablettes. 

131
00:05:23,360 --> 00:05:25,830
100 %, fin. 

132
00:05:25,830 --> 00:05:29,820
Nous allons maintenant passer
 à la vue mobile. 

133
00:05:29,815 --> 00:05:32,805
La seule chose que nous devons
 faire ici serait de
 définir

134
00:05:32,800 --> 00:05:37,860
le
 menu de navigation au centre. 

135
00:05:37,855 --> 00:05:39,705
En fait, nous n'
aurions pas dû toucher

136
00:05:39,700 --> 00:05:41,950
les alignements en
 mode tablette,

137
00:05:41,950 --> 00:05:45,180
donc c'est bon, nous allons
 simplement reculer. 

138
00:05:45,175 --> 00:05:47,535
Je vais aller dans
 Content Layout

139
00:05:47,530 --> 00:05:48,870
,
 puis l'alignement ici.