1 00:00:00,000 --> 00:00:03,890 Bienvenue dans la deuxième partie de la refonte de l'en-tête réactif. 2 00:00:03,885 --> 00:00:06,785 Et j'ai oublié de mentionner dans une vidéo précédente 3 00:00:06,780 --> 00:00:10,280 lorsque j'ai changé les signes des éléments de menu ici, 4 00:00:10,275 --> 00:00:11,945 pour une raison quelconque, cela semble avoir 5 00:00:11,940 --> 00:00:13,410 affecté la version de bureau. 6 00:00:13,410 --> 00:00:14,610 Vous pouvez voir maintenant que 7 00:00:14,610 --> 00:00:17,610 les textes et ne sont plus majuscules, si quelque chose comme ça se produit, 8 00:00:17,610 --> 00:00:19,110 si quelque chose comme ça se produit, 9 00:00:19,110 --> 00:00:23,720 il suffit de revenir à la modification de l'en-tête de la page d'accueil. 10 00:00:23,715 --> 00:00:26,075 Ce que vous voulez faire, c'est simplement accéder à 11 00:00:26,070 --> 00:00:28,020 l'élément de menu. 12 00:00:28,020 --> 00:00:30,650 Je vais donc cliquer sur de nombreux éléments ici. 13 00:00:30,645 --> 00:00:34,225 Allez dans Style, accédez à la typographie ici, 14 00:00:34,225 --> 00:00:36,235 puis cliquez dessus. 15 00:00:36,230 --> 00:00:37,520 C'est tout ce que vous pouvez voir ici. 16 00:00:37,520 --> 00:00:38,810 Il est écrit Transformer en majuscules. 17 00:00:38,810 --> 00:00:42,020 Donc, nous ne faisons que réaffirmer que, 18 00:00:42,020 --> 00:00:45,260 Hé, nous voulons que les Let's soient majuscules. 19 00:00:45,260 --> 00:00:47,480 Je vais donc recommencer les mises à jour 20 00:00:47,480 --> 00:00:51,170 et revenons en arrière, voir la page. 21 00:00:51,170 --> 00:00:54,620 Allons sur la page d'accueil. 22 00:00:54,620 --> 00:00:56,420 OK. Et voilà. 23 00:00:56,420 --> 00:00:59,870 Donc honnêtement, je ne sais pas très bien pourquoi cela arrive, 24 00:00:59,870 --> 00:01:02,090 mais juste au cas où cela vous arriverait, 25 00:01:02,090 --> 00:01:04,900 faites simplement ce que je viens de faire. OK. 26 00:01:04,895 --> 00:01:07,795 Maintenant, auparavant, nous étions en mesure de faire 27 00:01:07,790 --> 00:01:12,380 ressembler à ceci la vue de la tablette, ce 28 00:01:12,380 --> 00:01:14,180 qui n'est pas mal du tout. 29 00:01:14,180 --> 00:01:16,090 Mais il est maintenant temps pour nous de jeter un coup d' œil 30 00:01:16,085 --> 00:01:18,145 à la vue mobile. 31 00:01:18,140 --> 00:01:20,120 Et vous pouvez voir en ce moment que ça a l'air vraiment, 32 00:01:20,120 --> 00:01:22,420 vraiment mauvais est beaucoup d'espaces blancs 33 00:01:22,415 --> 00:01:26,485 et le logo et le menu, 34 00:01:26,480 --> 00:01:28,910 le menu des hamburgers en ligne, 35 00:01:28,910 --> 00:01:31,310 mais nous devons réparer les espaces blancs. 36 00:01:31,309 --> 00:01:33,589 En fait, c'est la deuxième fois que j' 37 00:01:33,590 --> 00:01:34,850 enregistre cette vidéo en particulier 38 00:01:34,850 --> 00:01:36,650 , car dans la précédente, 39 00:01:36,650 --> 00:01:38,470 j'ai pu réparer 40 00:01:38,465 --> 00:01:41,545 l'en-tête mobile pour avoir exactement le même 41 00:01:41,540 --> 00:01:43,400 style. vous aurez 42 00:01:43,400 --> 00:01:46,280 la bannière en arrière-plan. 43 00:01:46,280 --> 00:01:51,770 Cependant, j'ai décidé de suivre un itinéraire différent et 44 00:01:51,770 --> 00:01:56,330 utiliser plutôt le même type 45 00:01:56,330 --> 00:01:59,630 d'en-tête que pour le reste des pages, 46 00:01:59,630 --> 00:02:02,580 comme celui ici où vous avez le fond noir, 47 00:02:02,584 --> 00:02:05,724 j'ai décidé d'utiliser ces en-tête de 48 00:02:05,720 --> 00:02:09,500 la page d'accueil en mode mobile. 49 00:02:09,499 --> 00:02:11,779 La raison en est que je voulais profiter de cette opportunité pour 50 00:02:11,780 --> 00:02:13,430 vous montrer 51 00:02:13,430 --> 00:02:15,680 un truc très cool que vous 52 00:02:15,680 --> 00:02:18,410 pouvez utiliser chaque fois que vous travaillez avec un design réactif. 53 00:02:18,410 --> 00:02:21,100 Revenons à la page d'accueil. 54 00:02:21,095 --> 00:02:23,395 Et je veux vous montrer quelque chose, non ? 55 00:02:23,390 --> 00:02:25,130 Je vais passer à Edit with 56 00:02:25,130 --> 00:02:28,010 Elementor en modifiant l'en-tête de la page d'accueil. 57 00:02:28,010 --> 00:02:31,660 Voici le truc. Bon, je vais 58 00:02:31,655 --> 00:02:36,175 reproduire cette section d'en-tête. 59 00:02:36,170 --> 00:02:39,520 Je vais cliquer ici avec le bouton droit de la souris. Doublons. 60 00:02:39,515 --> 00:02:42,125 En gros, nous avons maintenant deux en-têtes. 61 00:02:42,125 --> 00:02:45,355 La différence, c'est que je vais venir ici, aller dans 62 00:02:45,350 --> 00:02:47,680 cette section Modifier. 63 00:02:47,675 --> 00:02:49,725 Je vais aller au style, 64 00:02:49,729 --> 00:02:53,959 type d' arrière-plan, lui donner une couleur noire. 65 00:02:53,960 --> 00:02:57,920 Bon, maintenant, vérifiez ça. 66 00:02:57,920 --> 00:02:59,740 Je vais aller à Advanced, 67 00:02:59,735 --> 00:03:02,755 venir ici à Responsive, 68 00:03:02,750 --> 00:03:06,970 puis inviter ici vous avez des options de visibilité. 69 00:03:06,965 --> 00:03:09,205 Quand souhaitez-vous afficher 70 00:03:09,200 --> 00:03:11,440 cette section en fonction d'une taille d'écran ? 71 00:03:11,435 --> 00:03:13,205 Je vais le cacher sur le bureau. 72 00:03:13,205 --> 00:03:14,465 Oui. 73 00:03:14,465 --> 00:03:15,965 Nous ne voulons pas encore le filmer sur le bureau 74 00:03:15,965 --> 00:03:17,155 car nous utilisons toujours l' 75 00:03:17,150 --> 00:03:19,790 en-tête de la page d'accueil sur tablette. 76 00:03:19,790 --> 00:03:21,910 Nous voulons également le cacher jusqu'à cela. 77 00:03:21,905 --> 00:03:23,825 Mais ensuite, nous voulons le montrer quand il 78 00:03:23,825 --> 00:03:26,855 arrive à la vue mobile. 79 00:03:26,855 --> 00:03:29,995 En tant que tel, je vais maintenant passer à 80 00:03:29,990 --> 00:03:32,990 notre en-tête d'origine et faire le contraire. 81 00:03:32,990 --> 00:03:36,370 Allez à Avancé, Calmez l'hétéro responsive, 82 00:03:36,365 --> 00:03:38,605 puis masquez sur le bureau. 83 00:03:38,600 --> 00:03:39,920 Personne ne veut montrer, 84 00:03:39,920 --> 00:03:41,260 nous voulons montrer jusqu'à cela. 85 00:03:41,255 --> 00:03:44,495 Mais quand je vais sur Hide on Mobile, 86 00:03:44,495 --> 00:03:47,155 laissez-moi aller de l'avant et maintenant les mises à jour. 87 00:03:47,150 --> 00:03:48,790 Et jetez un coup d'œil à ça. 88 00:03:48,785 --> 00:03:51,155 Allons-y maintenant, consultez la page. 89 00:03:51,155 --> 00:03:53,855 Allons sur la page d'accueil. 90 00:03:53,920 --> 00:03:57,560 Ok, vous pouvez voir que nous avons toujours le même en-tête. 91 00:03:57,560 --> 00:04:00,950 Mais maintenant, pour la vue tablette, 92 00:04:00,950 --> 00:04:02,720 vous pouvez voir que nous avons toujours le même en-tête, 93 00:04:02,720 --> 00:04:04,550 le même en-tête au même en-tête. 94 00:04:04,550 --> 00:04:08,890 Maintenant, une fois qu'il est arrivé à la vue mobile, 95 00:04:08,885 --> 00:04:12,175 nous avons maintenant le fond noir avec 96 00:04:12,170 --> 00:04:14,120 l'idée du logo du centre , puis 97 00:04:14,120 --> 00:04:16,480 le menu des hamburgers en bas. 98 00:04:16,475 --> 00:04:18,415 Ensuite, nous avons la bannière de la page d'accueil. 99 00:04:18,410 --> 00:04:19,640 Et voilà. 100 00:04:19,640 --> 00:04:21,620 C'est donc une astuce que vous 101 00:04:21,620 --> 00:04:23,900 pouvez utiliser chaque fois que vous travaillez avec un design réactif. 102 00:04:23,900 --> 00:04:25,340 Vous pouvez choisir d'afficher 103 00:04:25,340 --> 00:04:27,920 une section particulière sur un ordinateur de bureau. 104 00:04:27,920 --> 00:04:30,320 Et vous pouvez choisir d' afficher une section spécifique 105 00:04:30,320 --> 00:04:34,070 spécifiquement uniquement sur tablette ou sur mobile. 106 00:04:34,070 --> 00:04:36,760 Une question que je pourrais avoir encore est correcte, 107 00:04:36,755 --> 00:04:39,455 pourquoi n'ai-je pas simplement 108 00:04:39,455 --> 00:04:44,695 dupliqué cet en-tête particulier, puis simplement utiliser cet en-tête 109 00:04:44,690 --> 00:04:48,970 sur la page d'accueil 110 00:04:48,965 --> 00:04:51,175 , puis simplement le masquer sur le 111 00:04:51,170 --> 00:04:53,950 bureau. et tablette , puis affichées sur mobile. 112 00:04:53,945 --> 00:04:55,795 Vous pouvez avoir deux têtes 113 00:04:55,790 --> 00:04:59,600 affichées sur n'importe quelle page avec élémental, 114 00:04:59,600 --> 00:05:01,840 moins c'est comme ça que fonctionne ce plug-in. 115 00:05:01,835 --> 00:05:03,625 Ok, donc si vous pensez, 116 00:05:03,620 --> 00:05:05,060 je vais simplement dupliquer cet en-tête 117 00:05:05,060 --> 00:05:06,710 et afficher deux en-têtes sur la même page, 118 00:05:06,710 --> 00:05:08,620 cacher un sur des ordinateurs de bureau ou ils ne veulent pas d'un mobile, 119 00:05:08,615 --> 00:05:10,835 ça ne fonctionnera pas parce que J'ai vraiment essayé. 120 00:05:10,835 --> 00:05:14,585 C'est pourquoi j'ai dû accéder à l'en-tête de la page d'accueil. 121 00:05:14,585 --> 00:05:16,015 Ensuite, sur ce même en-tête, 122 00:05:16,010 --> 00:05:18,970 créez une deuxième section qui s' affichera désormais 123 00:05:18,965 --> 00:05:22,915 spécifiquement sur la vue mobile. 124 00:05:22,910 --> 00:05:24,280 Mais ce n'est pas fini. 125 00:05:24,275 --> 00:05:26,035 Je veux vraiment faire autre chose. 126 00:05:26,030 --> 00:05:29,450 voyez, vous n'avez pas toujours à aller avec cette tomate. 127 00:05:29,450 --> 00:05:32,150 Vous avez le logo et le centre sur le dessus, 128 00:05:32,150 --> 00:05:34,880 puis le menu des hamburgers ou en dessous. 129 00:05:34,880 --> 00:05:36,770 Nous pouvons toujours utiliser deux colonnes ici. 130 00:05:36,770 --> 00:05:39,950 Comment se connecter à gauche et avoir le menu sur la lumière. 131 00:05:39,950 --> 00:05:41,110 Faisons cela. 132 00:05:41,105 --> 00:05:43,075 Je vais revenir à l' édition avec Elementor, 133 00:05:43,070 --> 00:05:48,730 l'en-tête de la page d'accueil et 134 00:05:48,725 --> 00:05:53,135 palettes avec pour cette page pour charger, d'accord, quelques modifications. 135 00:05:53,134 --> 00:05:55,054 Le deuxième en-tête en ce moment. 136 00:05:55,055 --> 00:05:57,625 Mais je vais maintenant passer en mode réactif. 137 00:05:57,620 --> 00:06:00,010 Passons à la vue mobile. 138 00:06:00,005 --> 00:06:04,805 All Kn a exactement ce que nous avons. Juste ici. 139 00:06:04,805 --> 00:06:05,635 Je vais le faire. 140 00:06:05,630 --> 00:06:07,070 Je vais cliquer sur la colonne 141 00:06:07,070 --> 00:06:09,200 contenant le logo. Juste ici. 142 00:06:09,200 --> 00:06:11,380 Je vais dire 50. 143 00:06:11,375 --> 00:06:13,405 Ensuite, je reviendrai ici dans la 144 00:06:13,400 --> 00:06:15,520 colonne du logo qui contient le logo, 145 00:06:15,515 --> 00:06:17,215 je suis désolé, tout cela dans le menu non plus. 146 00:06:17,210 --> 00:06:19,700 Ensuite, changez celui par 50 pour qu' 147 00:06:19,700 --> 00:06:22,820 ils soient côte à côte. 148 00:06:22,820 --> 00:06:24,800 Maintenant, apportons quelques changements. 149 00:06:24,800 --> 00:06:27,020 Je vais cliquer sur le menu Edition, l' icône, 150 00:06:27,020 --> 00:06:29,750 descendre, frapper la mise en page. 151 00:06:29,750 --> 00:06:31,880 Essayons de nous aligner sur le blanc. 152 00:06:31,879 --> 00:06:34,329 Et ensuite, on va le faire gros. 153 00:06:34,325 --> 00:06:36,205 Passons au style. 154 00:06:36,200 --> 00:06:37,720 Ici, vous aurez 155 00:06:37,715 --> 00:06:40,615 le déclencheur de menu et l'icône de fermeture cliquez à l'intérieur. 156 00:06:40,610 --> 00:06:42,140 Et maintenant Icone Size, je vais le faire 157 00:06:42,140 --> 00:06:45,730 au-dessus de 40 pixels. 158 00:06:45,725 --> 00:06:47,395 Keda devrait être assez grand. 159 00:06:47,390 --> 00:06:48,620 Et puis pour le logo, 160 00:06:48,620 --> 00:06:50,530 modifions également le logo. 161 00:06:50,525 --> 00:06:52,465 La taille de l'image est définie sur pleine, 162 00:06:52,460 --> 00:06:53,750 alignée vers la gauche. 163 00:06:53,750 --> 00:06:57,080 Passons au style max avec un 100%. 164 00:06:57,080 --> 00:06:58,930 Bon, allons-y maintenant. 165 00:06:58,925 --> 00:07:01,805 mises à jour. En fait, avant de le faire, tenons. 166 00:07:01,805 --> 00:07:03,085 Faisons également cela. 167 00:07:03,080 --> 00:07:05,980 Lorsque vous cliquez sur le menu des hamburgers. 168 00:07:05,975 --> 00:07:07,645 Ce sera le travail accompli. 169 00:07:07,640 --> 00:07:10,460 Mais vous pouvez voir maintenant que nous pouvons voir le texte. 170 00:07:10,460 --> 00:07:12,110 Le texte est entièrement blanc, 171 00:07:12,110 --> 00:07:14,270 nous devons donc apporter quelques modifications ici. 172 00:07:14,270 --> 00:07:15,790 Voici exactement ce que je vais faire. 173 00:07:15,785 --> 00:07:17,455 Je vais aller voir le menu 174 00:07:17,450 --> 00:07:20,030 déroulant de l'enseigne ici. 175 00:07:20,030 --> 00:07:21,880 Et puis la couleur de fond. 176 00:07:21,875 --> 00:07:23,615 On va aller avec le noir, 177 00:07:23,615 --> 00:07:26,485 couleur du texte, on va aller avec le blanc. 178 00:07:26,480 --> 00:07:30,080 Et ça devrait être ça. 179 00:07:30,080 --> 00:07:33,370 Je ne sais pas pourquoi nous ne le voyons pas encore ici, mais c'est bon. 180 00:07:33,365 --> 00:07:35,395 Je vais faire des mises à jour. 181 00:07:35,390 --> 00:07:38,910 Revenons en arrière, voir la page. 182 00:07:39,760 --> 00:07:44,350 Retournez à la page d'accueil, réduisez la fenêtre. 183 00:07:44,345 --> 00:07:45,685 Bon, donc maintenant vous pouvez dire, OK, 184 00:07:45,685 --> 00:07:47,195 nous avons le logo à gauche, 185 00:07:47,195 --> 00:07:48,545 le menu blanc. 186 00:07:48,545 --> 00:07:51,565 Maintenant, si nous cliquons sur le menu ici, il s'ouvre. 187 00:07:51,560 --> 00:07:56,350 Bobby ne peut toujours pas voir le texte qui s'intéresse. 188 00:07:56,345 --> 00:07:59,945 Bon, revenons en arrière et voyons ce qui a pu se passer. 189 00:07:59,945 --> 00:08:03,155 Et cela va être très intéressé. 190 00:08:03,155 --> 00:08:05,525 Je ne sais pas très bien pourquoi nous ne voyons pas les textes. 191 00:08:05,525 --> 00:08:06,805 Très bien. Ne vous inquiétez pas. 192 00:08:06,800 --> 00:08:09,500 Je vais venir ici en mode réactif, 193 00:08:09,500 --> 00:08:11,110 revenir à Mobile. 194 00:08:11,105 --> 00:08:13,195 Cliquez sur le menu juste ici, 195 00:08:13,190 --> 00:08:14,900 cliquez sur le menu déroulant. 196 00:08:14,900 --> 00:08:17,230 Pourquoi ne voyons-nous pas le texte ? 197 00:08:17,225 --> 00:08:18,805 Passons au style. 198 00:08:18,800 --> 00:08:23,840 Revenons ici à la typographie et wow, 199 00:08:23,840 --> 00:08:27,530 je ne suis pas tout à fait sûr pourquoi la taille ici 200 00:08:27,530 --> 00:08:30,800 plutôt qu'une seule, mais ça ne devrait pas en être une. 201 00:08:30,800 --> 00:08:34,010 Il devrait être un peu plus grand qu'un. 202 00:08:34,010 --> 00:08:36,260 C'est probablement un défaut en pixels. 203 00:08:36,260 --> 00:08:38,000 Donc mes excuses, je vais dire 204 00:08:38,000 --> 00:08:42,110 pourquoi moi un pixel, 205 00:08:42,110 --> 00:08:44,510 parfois j'ai l'impression que l'élément essaie 206 00:08:44,510 --> 00:08:47,120 de m' empêcher de faire de bonnes vidéos. 207 00:08:47,120 --> 00:08:48,680 Je ne sais vraiment pas pourquoi. 208 00:08:48,680 --> 00:08:49,760 Il a dit ne pas pixeler. 209 00:08:49,760 --> 00:08:51,740 C'est juste, c'est juste bizarre. 210 00:08:51,740 --> 00:08:53,990 Quoi qu'il en soit, vous pouvez voir qu'au 211 00:08:53,990 --> 00:08:58,390 moins les éléments du menu s'affichent maintenant, 212 00:08:58,385 --> 00:09:00,835 Wow, c'est très, très intéressé, 213 00:09:00,830 --> 00:09:02,270 je vous dis que le design web peut être une profession très 214 00:09:02,270 --> 00:09:05,120 étrange, très étrange. 215 00:09:05,120 --> 00:09:06,290 Parfois, vous avez 216 00:09:06,290 --> 00:09:07,790 impression que tous ces éléments ont à l'esprit 217 00:09:07,790 --> 00:09:11,300 qu'ils ne reviendront pas en arrière. 218 00:09:11,300 --> 00:09:13,420 Très bien, maintenant je clique ici. 219 00:09:13,415 --> 00:09:14,215 C'est là. 220 00:09:14,210 --> 00:09:16,000 Maintenant, vous pouvez voir que j' ai les éléments du menu 221 00:09:15,995 --> 00:09:18,225 et bien sûr, vous pouvez maintenant fermer. 222 00:09:18,229 --> 00:09:20,509 C'est donc essentiellement 223 00:09:20,510 --> 00:09:22,750 pour redessiner l'en-tête réactif. 224 00:09:22,745 --> 00:09:24,085 En fait, je vais aller de l'avant et faire 225 00:09:24,080 --> 00:09:25,660 exactement la même chose pour 226 00:09:25,655 --> 00:09:28,765 l'en-tête global pour la vue mobile, 227 00:09:28,760 --> 00:09:32,420 où je ferai la première colonne 50%, puis je ferai 228 00:09:32,420 --> 00:09:36,320 la deuxième colonne contenant l'élément de menu sont également de 50 %. 229 00:09:36,320 --> 00:09:38,210 Et agrandissez également l'icône du menu 230 00:09:38,210 --> 00:09:39,950 hamburger un peu plus grande. 231 00:09:39,950 --> 00:09:42,980 Vous pouvez donc y aller de l'avant et le faire également. 232 00:09:42,980 --> 00:09:45,230 Mais c'est tout pour créer le 233 00:09:45,230 --> 00:09:47,300 réactif ou les en-têtes du site Web. 234 00:09:47,300 --> 00:09:48,920 Merci d'avoir regardé la prochaine vidéo de l'événement allemand 235 00:09:48,920 --> 00:09:50,800 où nous allons maintenant jeter un coup d'œil à 236 00:09:50,795 --> 00:09:52,885 la refonte du pied de page pour 237 00:09:52,880 --> 00:09:56,460 être un peu plus responsable. Alors, vous.