1 00:00:00,000 --> 00:00:01,200 Alles klar, also lasst uns anfangen, unseren Header so zu 2 00:00:01,200 --> 00:00:03,600 gestalten, dass er reagiert 3 00:00:03,600 --> 00:00:08,330 und Lambda zeigt Ihnen die Staaten so, wie er gerade ist. 4 00:00:08,325 --> 00:00:11,795 Der Desktop ist ziemlich fertig. 5 00:00:11,790 --> 00:00:15,260 Wenn wir beginnen, den Bildschirm unseres Browsers zu minimieren. 6 00:00:15,255 --> 00:00:16,865 Sie können jetzt sehen , dass dies zu diesem Zeitpunkt 7 00:00:16,860 --> 00:00:18,390 die Tablet-Ansicht sein würde. 8 00:00:18,390 --> 00:00:21,600 Und Sie können sehen, dass das Logo viel kleiner wird. 9 00:00:21,600 --> 00:00:23,790 Die Speisekarte hat sich auch in das traditionelle Hamburgermenü verwandelt 10 00:00:23,790 --> 00:00:26,940 . 11 00:00:26,940 --> 00:00:32,400 Und es ist okay, aber es kann definitiv verbessert werden. 12 00:00:32,395 --> 00:00:34,975 Aber wenn wir jetzt ein bisschen kleiner werden, können Sie 13 00:00:34,970 --> 00:00:37,450 sehen, dass die Dinge hier wirklich, richtig schlecht aussehen. 14 00:00:37,445 --> 00:00:38,545 Dies ist die mobile Ansicht, 15 00:00:38,540 --> 00:00:40,070 die für das Mobiltelefon. 16 00:00:40,070 --> 00:00:41,330 Also mussten wir 17 00:00:41,330 --> 00:00:43,370 hier einige Änderungen vornehmen. Ich mach weiter. 18 00:00:43,370 --> 00:00:45,110 Und bevor ich das mache, 19 00:00:45,110 --> 00:00:48,670 lass mich dir den anderen Header zeigen, den globalen Header. 20 00:00:48,665 --> 00:00:51,565 Gehen wir zur Kontaktseite und Sie werden 21 00:00:51,560 --> 00:00:54,970 feststellen, dass diese ein bisschen besser ist. 22 00:00:54,965 --> 00:00:57,835 Wir haben den schwarzen Hintergrund und dann in der mobilen Ansicht, 23 00:00:57,830 --> 00:00:59,900 obwohl das Hamburgermenü 24 00:00:59,900 --> 00:01:01,580 falsch mit dem Logo abgestimmt ist, 25 00:01:01,580 --> 00:01:03,410 ist es immer noch viel besser, da wir oben keinen Leerraum haben 26 00:01:03,410 --> 00:01:06,340 . 27 00:01:06,335 --> 00:01:08,425 Okay, ich werde 28 00:01:08,420 --> 00:01:10,910 die Homepage-Header bearbeiten. 29 00:01:10,905 --> 00:01:12,645 Gehen wir zu Edit with Elementor 30 00:01:12,649 --> 00:01:14,639 und dann zur Homepage nach oben. 31 00:01:14,640 --> 00:01:18,720 Jetzt wechseln wir hier unten in den Responsive-Modus. 32 00:01:18,715 --> 00:01:21,645 Reaktionsmodus, Wechseln wir zuerst zur Tabelle. 33 00:01:21,640 --> 00:01:24,000 Jetzt möchte ich dir schnell etwas zeigen. 34 00:01:23,995 --> 00:01:26,695 In Ordnung, lass mich zurück zu responsive gehen. 35 00:01:26,695 --> 00:01:29,685 Standardmäßig wurde Ihr Hauptmenü oder 36 00:01:29,680 --> 00:01:31,060 ein aktiviertes Feature-Menü in der Tablet-Ansicht in das Hamburger-Menü umgewandelt 37 00:01:31,060 --> 00:01:33,070 . Beachten Sie jedoch, 38 00:01:33,070 --> 00:01:36,820 dass Sie 39 00:01:36,820 --> 00:01:39,570 nicht immer den Standardeinstellungen folgen müssen. 40 00:01:39,565 --> 00:01:42,195 Wenn ich jetzt zum Tisch wechsle, wie Sie sehen können, 41 00:01:42,190 --> 00:01:44,890 hat es sich an das Hamburgermenü gewandt. 42 00:01:44,890 --> 00:01:47,580 Und das liegt daran, dass Sie, wenn ich auf das Hauptmenü des Layouts klicken und bearbeiten sollte 43 00:01:47,575 --> 00:01:50,575 , 44 00:01:50,575 --> 00:01:51,975 die Bildschirmgrößen des positiven Haltepunkt-Tablets von 1025 Pixeln und darunter sehen 45 00:01:51,970 --> 00:01:55,180 Bildschirmgrößen des positiven Haltepunkt-Tablets 46 00:01:55,180 --> 00:01:57,390 . 47 00:01:57,390 --> 00:02:01,310 Klar, der Hamburger-Menü-Blot. 48 00:02:01,310 --> 00:02:02,690 Wenn wir das nicht wollen, 49 00:02:02,690 --> 00:02:07,400 wechsle ich stattdessen diese in die mobile Ansicht. 50 00:02:07,400 --> 00:02:09,680 Eine Tablet-Ansicht. Wir werden immer noch 51 00:02:09,680 --> 00:02:11,620 das Hauptmenü zeigen und wir wandeln uns 52 00:02:11,615 --> 00:02:13,165 erst in das Hamburgermenü um 53 00:02:13,160 --> 00:02:15,290 wenn wir die mobile Ansicht erreicht haben. 54 00:02:15,290 --> 00:02:16,910 Lasst uns das Update fortsetzen. 55 00:02:16,910 --> 00:02:18,280 Und mal sehen, was diese kleine, 56 00:02:18,275 --> 00:02:20,035 kleine Veränderung für uns bewirkt hat. 57 00:02:20,030 --> 00:02:28,310 Sehen Sie sich die Seite an. Gehe zurück zur Homepage oder zum Fall. 58 00:02:28,310 --> 00:02:29,480 An dieser Stelle ist dies 59 00:02:29,480 --> 00:02:30,920 die Tablet-Ansicht. 60 00:02:30,920 --> 00:02:34,240 Und man sieht, dass es eigentlich nicht so schlimm ist. 61 00:02:34,235 --> 00:02:37,025 Sie müssen nicht einmal auf das Handy wechseln, 62 00:02:37,025 --> 00:02:39,595 zum Hamburgermenü, also Tablets. 63 00:02:39,590 --> 00:02:42,230 Wenn Sie viele Menüpunkte haben, 64 00:02:42,230 --> 00:02:44,810 sagen wir 678 Artikel als Jahre, 65 00:02:44,810 --> 00:02:47,210 haben Sie natürlich nicht genug Platz. 66 00:02:47,210 --> 00:02:48,860 Aber Institutionen , in denen Sie vier oder fünf Menüpunkte haben 67 00:02:48,860 --> 00:02:50,870 , 68 00:02:50,870 --> 00:02:53,300 ist es vollkommen in Ordnung für die Anzeige. 69 00:02:53,300 --> 00:02:57,250 Sie wie sie sich im Tablet-Modus befinden. 70 00:02:57,245 --> 00:02:59,155 Es gibt zwei Änderungen, die ich hier machen werde. 71 00:02:59,150 --> 00:03:00,560 Man wäre, die Größe des Logos nur ein wenig zu vergrößern 72 00:03:00,560 --> 00:03:02,630 . 73 00:03:02,630 --> 00:03:04,850 Und dann könnten wir auch versuchen, die Größe der Menüpunkte nur ein wenig zu reduzieren 74 00:03:04,850 --> 00:03:07,420 . 75 00:03:07,415 --> 00:03:08,815 Lass uns das ganz schnell machen. Ich gehe 76 00:03:08,810 --> 00:03:11,070 zurück zur Homepage-Kopfzeile. 77 00:03:12,220 --> 00:03:16,400 Wir wechseln zu antwortendem SUV, Trink-Tablet. 78 00:03:16,400 --> 00:03:18,680 In Ordnung. Ich klicke auf das Menü. 79 00:03:18,680 --> 00:03:22,700 Es tut mir leid, das Logo entweder hier bei UT-Logo geht zu Style. 80 00:03:22,700 --> 00:03:24,760 Beachten Sie jetzt 81 00:03:24,755 --> 00:03:27,475 , dass die Dimension hier drin auf Tablet eingestellt wurde. 82 00:03:27,470 --> 00:03:29,630 Wie Sie sehen können, ist es alles SASE Tablet, Tablet. 83 00:03:29,630 --> 00:03:34,270 Also hier schalte ich die Größe auf 100% um. 84 00:03:34,265 --> 00:03:36,955 Wir zeigen die volle Größe des Logos an. 85 00:03:36,950 --> 00:03:38,810 Jetzt für das Hauptmenü weiß ich, 86 00:03:38,810 --> 00:03:40,100 dass es alles in Weiß ist. 87 00:03:40,100 --> 00:03:41,690 Du kannst es nicht sehen, aber ertrage es einfach mit mir. 88 00:03:41,690 --> 00:03:43,060 Ich klicke auf Bearbeiten, 89 00:03:43,055 --> 00:03:45,265 das Hauptmenü, gehe zu Style. 90 00:03:45,260 --> 00:03:48,380 Dann gehen wir gleich hier zur Typografie. 91 00:03:48,380 --> 00:03:50,300 Sehen Sie sich das an und stellen Sie sicher, dass 92 00:03:50,300 --> 00:03:52,450 die Größe hier auf Tablet eingestellt ist. 93 00:03:52,445 --> 00:03:54,745 Wir werden diese 114 Pixel nur ein bisschen kleiner als gewöhnlich machen 94 00:03:54,740 --> 00:03:57,020 . 95 00:03:57,020 --> 00:03:58,880 Lasst uns Updates machen. 96 00:03:58,880 --> 00:04:01,200 Jetzt schauen wir uns mal an. 97 00:04:01,200 --> 00:04:05,280 Fügen Sie den neuen Homepage-Header und den Reaktionsmodus hinzu. 98 00:04:05,275 --> 00:04:07,975 Und da gehst du. 99 00:04:07,975 --> 00:04:09,315 Da gehst du. 100 00:04:09,310 --> 00:04:13,000 Bis zu diesem Zeitpunkt sieht es also ziemlich gut aus. 101 00:04:13,000 --> 00:04:14,590 Offensichtlich werden wir einige wichtige Änderungen an der Schlagzeile des Banners vornehmen 102 00:04:14,590 --> 00:04:16,930 , 103 00:04:16,930 --> 00:04:18,640 dem Gewinner, den wir reisen, Es ist Abenteuer. 104 00:04:18,640 --> 00:04:19,930 Wir werden die Größe reduzieren, 105 00:04:19,930 --> 00:04:22,810 aber achten Sie einfach auf den tatsächlichen Header. 106 00:04:22,810 --> 00:04:25,690 Okay, es sieht gut aus bis zur mobilen Ansicht, 107 00:04:25,690 --> 00:04:27,460 die jetzt weiterlaufen muss. 108 00:04:27,460 --> 00:04:29,160 Aber im Moment maßgeschneidert 109 00:04:29,155 --> 00:04:31,045 sieht das ziemlich gut aus. 110 00:04:31,045 --> 00:04:32,535 Werfen wir nun einen Blick auf 111 00:04:32,530 --> 00:04:35,610 den Header für den globalen, globalen Header. 112 00:04:35,605 --> 00:04:38,005 Wählen wir eine Seite aus, wählen wir die Artikelseite aus. 113 00:04:38,005 --> 00:04:39,435 Und von hier aus werden wir 114 00:04:39,430 --> 00:04:41,400 den Global Header bearbeiten. 115 00:04:41,395 --> 00:04:44,845 Wir werden zuerst den Tablet-Modus erledigen. 116 00:04:44,840 --> 00:04:48,800 Kommen wir also zu Ihrem Responsive hierher. Gehe zum Tablet. 117 00:04:48,800 --> 00:04:51,760 Okay, wir kümmern uns um die Brotpunkte. 118 00:04:51,755 --> 00:04:54,465 Wir werden das auf Handy umstellen. 119 00:04:54,469 --> 00:04:56,299 Und es wird auch genau das Gleiche für den Stil tun 120 00:04:56,300 --> 00:04:58,970 . 121 00:04:58,970 --> 00:05:01,640 Wir richten uns nach rechts aus, für das 122 00:05:01,640 --> 00:05:03,800 Hauptmenü, die 123 00:05:03,800 --> 00:05:05,830 Ausrichtung auf das Weiß und dann den Stil. 124 00:05:05,825 --> 00:05:08,305 Wir werden zur Typografie herkommen. 125 00:05:08,300 --> 00:05:10,080 Stellen Sie sicher, dass dies auf Tablet eingestellt ist. 126 00:05:10,075 --> 00:05:13,195 Also gehen wir auch mit 14 Pixeln. 127 00:05:13,190 --> 00:05:15,040 Und da ist es. 128 00:05:15,035 --> 00:05:17,755 Okay, Next wird das Logo sein. 129 00:05:17,750 --> 00:05:21,380 Vergessen wir nicht, wir müssen das Logo oder 100% machen. 130 00:05:21,380 --> 00:05:23,360 Stellen Sie sicher, dass dies auf Tablets eingestellt ist. 131 00:05:23,360 --> 00:05:25,830 100%, in Ordnung. 132 00:05:25,830 --> 00:05:29,820 Jetzt wechseln wir zur mobilen Ansicht. 133 00:05:29,815 --> 00:05:32,805 Das einzige, was wir hier tun müssen, wäre, das Navigationsmenü in die Mitte zu 134 00:05:32,800 --> 00:05:37,860 skizzieren. 135 00:05:37,855 --> 00:05:39,705 Eigentlich hätten wir die Ausrichtungen im Tablet-Modus nicht berühren 136 00:05:39,700 --> 00:05:41,950 sollen, 137 00:05:41,950 --> 00:05:45,180 also ist es okay, wir werden das einfach zurücksetzen. 138 00:05:45,175 --> 00:05:47,535 Ich gehe zum Inhalts-Layout 139 00:05:47,530 --> 00:05:48,870 und dann zur Ausrichtung hier. 140 00:05:48,865 --> 00:05:50,115 Lass es uns einfach in der Mitte behalten. 141 00:05:50,110 --> 00:05:52,080 Ich glaube, es wird ihnen besser gehen. 142 00:05:52,075 --> 00:05:53,295 Alles klar. Das ist es. 143 00:05:53,290 --> 00:05:55,350 Ich mach weiter und ich werde es aktualisieren. 144 00:05:55,345 --> 00:05:57,015 Werfen wir einen Blick darauf, was wir haben. 145 00:05:57,010 --> 00:05:59,140 Sehen wir uns die Seite an. 146 00:05:59,140 --> 00:06:03,080 Wählen wir die Artikelseite aus. 147 00:06:03,420 --> 00:06:07,380 Reduzieren Sie die Größe. Was haben wir hier drin? 148 00:06:07,375 --> 00:06:09,225 Alles klar, ist Tablet, 149 00:06:09,220 --> 00:06:10,820 das Tablet sieht gut aus. 150 00:06:10,824 --> 00:06:16,034 Und jetzt wird dies die mobile Ansicht sein, 151 00:06:16,030 --> 00:06:18,460 aber es scheint eine Fehlausrichtung mit dem Logo und dann dem Menü selbst zu geben 152 00:06:18,460 --> 00:06:20,950 . 153 00:06:20,950 --> 00:06:23,100 Also lasst uns das schnell beheben. 154 00:06:23,095 --> 00:06:24,795 Lass uns zurückgehen. 155 00:06:24,790 --> 00:06:26,440 Wir müssen das Logo vielleicht ein bisschen kleiner machen 156 00:06:26,440 --> 00:06:27,700 . 157 00:06:27,700 --> 00:06:29,650 Ich denke, es ist auch ein bisschen zu groß. 158 00:06:29,650 --> 00:06:31,390 Nehmen wir diese Änderungen also vor. 159 00:06:31,390 --> 00:06:34,020 Gehe zurück zum responsiven Handy. 160 00:06:34,015 --> 00:06:37,455 Okay, lasst uns die erste Ausrichtung des Logos hier bearbeiten, 161 00:06:37,450 --> 00:06:39,150 lassen Sie es uns in die Mitte setzen. 162 00:06:39,145 --> 00:06:41,275 Sagen wir, dieser ist ein Dissenter. 163 00:06:41,275 --> 00:06:42,885 Und dann ist vielleicht die Größe, 164 00:06:42,880 --> 00:06:45,880 vielleicht ein 100%, ein bisschen zu groß und denkt nicht darüber nach. 165 00:06:45,880 --> 00:06:50,510 Lasst uns das auf 75% senken. 166 00:06:50,505 --> 00:06:52,835 Lass uns weitermachen und Verabredungen. 167 00:06:52,835 --> 00:06:54,295 Und mal sehen, wie das aussehen wird. 168 00:06:54,290 --> 00:06:56,820 Gehen wir zurück, schauen wir uns die Seite an. 169 00:06:57,010 --> 00:07:02,170 Artikel. Ich minimiere, okay, 170 00:07:02,165 --> 00:07:03,595 viel besser jetzt und jetzt kannst du sehen, dass 171 00:07:03,590 --> 00:07:05,710 die Ausrichtung in der Mitte steht. 172 00:07:05,705 --> 00:07:07,915 Und da ist es. 173 00:07:07,910 --> 00:07:09,740 Sieht also viel besser aus, 174 00:07:09,740 --> 00:07:11,420 jetzt viel besser. 175 00:07:11,420 --> 00:07:13,970 Natürlich wird es noch ein paar mehr vornehmen, 176 00:07:13,970 --> 00:07:15,920 ein paar weitere Änderungen an den Headern, 177 00:07:15,920 --> 00:07:18,350 aber im Moment sieht es zumindest 178 00:07:18,350 --> 00:07:21,230 viel besser aus als das, was wir ursprünglich hatten. 179 00:07:21,230 --> 00:07:23,590 Sowohl der Homepage-Header 180 00:07:23,585 --> 00:07:26,725 der Global Header sehen besser aus. 181 00:07:26,720 --> 00:07:29,600 Wir werden den Leerraum in der Homepage-Header im nächsten Video behandeln 182 00:07:29,600 --> 00:07:32,760 .