1 00:00:00,000 --> 00:00:03,890 Willkommen im zweiten Teil der Neugestaltung des responsiven Headers. 2 00:00:03,885 --> 00:00:06,785 Und ich habe vergessen, in einem früheren Video zu erwähnen 3 00:00:06,780 --> 00:00:10,280 als ich die Zeichen der Menüpunkte hier geändert habe, 4 00:00:10,275 --> 00:00:11,945 aus irgendeinem Grund scheint es die Desktop-Version beeinflusst zu haben 5 00:00:11,940 --> 00:00:13,410 . 6 00:00:13,410 --> 00:00:14,610 Sie können jetzt sehen, dass 7 00:00:14,610 --> 00:00:17,610 die Texte und nicht mehr Großbuchstaben, 8 00:00:17,610 --> 00:00:19,110 wenn so etwas passiert, 9 00:00:19,110 --> 00:00:23,720 einfach zurück zur Bearbeitung der Homepage-Header gehen. 10 00:00:23,715 --> 00:00:26,075 Was Sie tun möchten, ist einfach nur zum Menüelement zu gehen 11 00:00:26,070 --> 00:00:28,020 . 12 00:00:28,020 --> 00:00:30,650 Also klicke ich hier auf viele Elemente. 13 00:00:30,645 --> 00:00:34,225 Gehe zu Style, gehe hier zur Typografie 14 00:00:34,225 --> 00:00:36,235 und klicke einfach darauf. 15 00:00:36,230 --> 00:00:37,520 Das ist alles, was du hier sehen kannst. 16 00:00:37,520 --> 00:00:38,810 Es heißt „In Großbuchstaben transformieren“. 17 00:00:38,810 --> 00:00:42,020 Also bekräftigen wir im Grunde nur, Hey, wir wollen, dass 18 00:00:42,020 --> 00:00:45,260 das Lass uns in Großbuchstaben sein. 19 00:00:45,260 --> 00:00:47,480 Also werde ich wieder Updates machen 20 00:00:47,480 --> 00:00:51,170 und lass uns einfach zurückgehen, die Seite ansehen. 21 00:00:51,170 --> 00:00:54,620 Lasst uns auf die Homepage gehen. 22 00:00:54,620 --> 00:00:56,420 Okay. Und da gehst du. 23 00:00:56,420 --> 00:00:59,870 Ehrlich gesagt bin ich mir nicht ganz sicher, warum das passiert, aber für den Fall, dass 24 00:00:59,870 --> 00:01:02,090 es dir passiert, 25 00:01:02,090 --> 00:01:04,900 tu einfach das, was ich gerade getan habe. Okay. 26 00:01:04,895 --> 00:01:07,795 Vorher konnten wir 27 00:01:07,790 --> 00:01:12,380 die Tablet-Ansicht so aussehen lassen, 28 00:01:12,380 --> 00:01:14,180 was überhaupt nicht schlecht ist. 29 00:01:14,180 --> 00:01:16,090 Aber jetzt ist es an der Zeit , dass wir uns 30 00:01:16,085 --> 00:01:18,145 die mobile Ansicht ansehen. 31 00:01:18,140 --> 00:01:20,120 Und Sie können sehen, dass es wirklich aussieht, 32 00:01:20,120 --> 00:01:22,420 wirklich schlecht ist viel Leerzeichen 33 00:01:22,415 --> 00:01:26,485 und das Logo und das Menü, 34 00:01:26,480 --> 00:01:28,910 das Hamburgermenü online, 35 00:01:28,910 --> 00:01:31,310 aber wir müssen den Leerraum reparieren. 36 00:01:31,309 --> 00:01:33,589 Eigentlich ist dies das zweite Mal, dass ich 37 00:01:33,590 --> 00:01:34,850 dieses Video aufnehme 38 00:01:34,850 --> 00:01:36,650 , weil ich im vorherigen 39 00:01:36,650 --> 00:01:38,470 Video tatsächlich den mobilen Header reparieren konnte 40 00:01:38,465 --> 00:01:41,545 , um dort genau den gleichen Stil zu haben 41 00:01:41,540 --> 00:01:43,400 Sie werden 42 00:01:43,400 --> 00:01:46,280 das Banner in den Hintergrund einfügen lassen. 43 00:01:46,280 --> 00:01:51,770 Ich habe mich jedoch entschieden, eine andere Route zu wählen und 44 00:01:51,770 --> 00:01:56,330 stattdessen die gleiche Art von Header zu verwenden 45 00:01:56,330 --> 00:01:59,630 , die wir für den Rest der Seiten haben, 46 00:01:59,630 --> 00:02:02,580 wie die hier, auf der Sie den schwarzen Hintergrund haben, beschlossen, 47 00:02:02,584 --> 00:02:05,724 diese zu verwenden Header für 48 00:02:05,720 --> 00:02:09,500 die Homepage gehen Sie in der mobilen Ansicht heraus. 49 00:02:09,499 --> 00:02:11,779 Der Grund dafür ist, dass ich diese Gelegenheit tatsächlich nutzen wollte 50 00:02:11,780 --> 00:02:13,430 , um Ihnen einen sehr coolen Trick zu zeigen 51 00:02:13,430 --> 00:02:15,680 , den Sie 52 00:02:15,680 --> 00:02:18,410 verwenden können, wenn Sie mit Responsive Design arbeiten. 53 00:02:18,410 --> 00:02:21,100 Gehen wir zurück zur Homepage. 54 00:02:21,095 --> 00:02:23,395 Und ich möchte dir was zeigen, oder? 55 00:02:23,390 --> 00:02:25,130 Ich gehe zu Edit with 56 00:02:25,130 --> 00:02:28,010 Elementor, indem ich den Header der Homepage editiere. 57 00:02:28,010 --> 00:02:31,660 Hier ist das Ding. Okay, ich werde 58 00:02:31,655 --> 00:02:36,175 diesen Header-Bereich duplizieren. 59 00:02:36,170 --> 00:02:39,520 Ich klicke mit der rechten Maustaste hier rein. Duplikate. 60 00:02:39,515 --> 00:02:42,125 Im Grunde haben wir jetzt zwei Header. 61 00:02:42,125 --> 00:02:45,355 Der Unterschied ist, dass ich hier reinkomme 62 00:02:45,350 --> 00:02:47,680 zu diesem Abschnitt „Bearbeiten“ gehe. 63 00:02:47,675 --> 00:02:49,725 Ich gehe zu Stil, 64 00:02:49,729 --> 00:02:53,959 Hintergrundtyp, gebe ihm eine Farbe Schwarz. 65 00:02:53,960 --> 00:02:57,920 Okay, jetzt schau dir das an. 66 00:02:57,920 --> 00:02:59,740 Ich gehe zu Advanced, 67 00:02:59,735 --> 00:03:02,755 komme hier runter zu Responsive und lade dann ein, 68 00:03:02,750 --> 00:03:06,970 dass du Sichtbarkeitsoptionen hast. 69 00:03:06,965 --> 00:03:09,205 Wann genau möchten Sie diesen Abschnitt basierend auf einer Bildschirmgröße anzeigen 70 00:03:09,200 --> 00:03:11,440 ? 71 00:03:11,435 --> 00:03:13,205 Ich verstecke es auf dem Desktop. 72 00:03:13,205 --> 00:03:14,465 Ja. 73 00:03:14,465 --> 00:03:15,965 Wir möchten es noch nicht auf dem Desktop aufnehmen 74 00:03:15,965 --> 00:03:17,155 da wir immer noch den Homepage-Header auf dem Tablet verwenden 75 00:03:17,150 --> 00:03:19,790 . 76 00:03:19,790 --> 00:03:21,910 Wir wollen es auch bis dahin verstecken. 77 00:03:21,905 --> 00:03:23,825 Aber dann wollen wir es zeigen 78 00:03:23,825 --> 00:03:26,855 , wenn es zur mobilen Ansicht kommt. 79 00:03:26,855 --> 00:03:29,995 Als solches gehe ich jetzt zu 80 00:03:29,990 --> 00:03:32,990 unserem ursprünglichen Header und mache das Gegenteil. 81 00:03:32,990 --> 00:03:36,370 Gehen Sie zu Fortgeschritten, beruhigen Sie sich hetero responsive 82 00:03:36,365 --> 00:03:38,605 und verstecken Sie sich dann auf dem Desktop. 83 00:03:38,600 --> 00:03:39,920 Niemand will zeigen, 84 00:03:39,920 --> 00:03:41,260 wir wollen bis dahin zeigen. 85 00:03:41,255 --> 00:03:44,495 Aber wenn ich zu Hide on Mobile gehe, 86 00:03:44,495 --> 00:03:47,155 lass mich weitermachen und jetzt Updates. 87 00:03:47,150 --> 00:03:48,790 Und sieh dir das mal an. 88 00:03:48,785 --> 00:03:51,155 Lass uns jetzt weitermachen, schau dir die Seite an. 89 00:03:51,155 --> 00:03:53,855 Lass uns auf die Homepage gehen. 90 00:03:53,920 --> 00:03:57,560 Okay, damit du siehst, dass wir immer noch denselben Header haben. 91 00:03:57,560 --> 00:04:00,950 Aber jetzt können Sie für die Tablet-Ansicht sehen, 92 00:04:00,950 --> 00:04:02,720 dass wir immer noch denselben Header haben, 93 00:04:02,720 --> 00:04:04,550 denselben Header im selben Header. 94 00:04:04,550 --> 00:04:08,890 Jetzt, sobald es zur mobilen Ansicht kommt, 95 00:04:08,885 --> 00:04:12,175 haben wir jetzt den schwarzen Hintergrund mit 96 00:04:12,170 --> 00:04:14,120 der Logo-Idee des Zentrums und 97 00:04:14,120 --> 00:04:16,480 dann dem Hamburgermenü da unten. 98 00:04:16,475 --> 00:04:18,415 Und dann haben wir das Homepage-Banner. 99 00:04:18,410 --> 00:04:19,640 Und da gehst du. 100 00:04:19,640 --> 00:04:21,620 Dies ist also ein Trick, den Sie 101 00:04:21,620 --> 00:04:23,900 verwenden können, wenn Sie mit Responsive Design arbeiten. 102 00:04:23,900 --> 00:04:25,340 Sie können wählen, ob Sie einen bestimmten Abschnitt speziell auf dem Desktop anzeigen möchten 103 00:04:25,340 --> 00:04:27,920 . 104 00:04:27,920 --> 00:04:30,320 Und Sie können wählen, ob Sie bestimmte Abschnitte nur auf dem Tablet oder auf Mobilgeräten speziell anzeigen möchten 105 00:04:30,320 --> 00:04:34,070 . 106 00:04:34,070 --> 00:04:36,760 Eine Frage, die ich vielleicht noch habe, ist in Ordnung, 107 00:04:36,755 --> 00:04:39,455 warum habe ich diesen speziellen Header nicht einfach 108 00:04:39,455 --> 00:04:44,695 dupliziert und dann einfach diesen Header auf der Homepage benutzt 109 00:04:44,690 --> 00:04:48,970 diesen Header auf der Homepage 110 00:04:48,965 --> 00:04:51,175 und ihn dann einfach auf dem Desktop ausgeblendet 111 00:04:51,170 --> 00:04:53,950 und Tablet und dann auf Mobilgeräten angezeigt. 112 00:04:53,945 --> 00:04:55,795 Sie können zwei Head 113 00:04:55,790 --> 00:04:59,600 auf jeder Seite mit elemental angezeigt werden, 114 00:04:59,600 --> 00:05:01,840 zumindest funktioniert dieses Plug-In. 115 00:05:01,835 --> 00:05:03,625 Okay, also wenn du nachdenkst, 116 00:05:03,620 --> 00:05:05,060 ich dupliziere einfach diesen Header 117 00:05:05,060 --> 00:05:06,710 und zeige zwei Header auf derselben Seite an, 118 00:05:06,710 --> 00:05:08,620 verstecke einen auf Desktops oder sie wollen kein Handy, 119 00:05:08,615 --> 00:05:10,835 es wird nicht funktionieren, weil habe es tatsächlich versucht. 120 00:05:10,835 --> 00:05:14,585 Deshalb musste ich zur Homepage-Header gehen . 121 00:05:14,585 --> 00:05:16,015 Sie dann in derselben Kopfzeile einen zweiten Abschnitt, 122 00:05:16,010 --> 00:05:18,970 Erstellen Sie dann in derselben Kopfzeile einen zweiten Abschnitt, der jetzt speziell in der mobilen Ansicht angezeigt wird 123 00:05:18,965 --> 00:05:22,915 . 124 00:05:22,910 --> 00:05:24,280 Aber wir sind noch nicht fertig. 125 00:05:24,275 --> 00:05:26,035 Eigentlich möchte ich etwas anderes machen. 126 00:05:26,030 --> 00:05:29,450 Siehst du, du musst nicht immer mit dieser Tomate gehen. 127 00:05:29,450 --> 00:05:32,150 Sie haben das Logo und die Mitte oben 128 00:05:32,150 --> 00:05:34,880 und dann das Hamburgermenü oder darunter. 129 00:05:34,880 --> 00:05:36,770 Wir können hier immer noch zwei Spalten verwenden. 130 00:05:36,770 --> 00:05:39,950 So melden Sie sich auf der linken Seite an und lassen Sie das Menü ans Licht. 131 00:05:39,950 --> 00:05:41,110 Lasst uns das machen. 132 00:05:41,105 --> 00:05:43,075 Ich werde wieder mit Elementor bearbeiten, 133 00:05:43,070 --> 00:05:48,730 der Homepage-Kopfzeile und 134 00:05:48,725 --> 00:05:53,135 Paletten, damit diese Seite geladen werden kann, okay, etwas Bearbeitung. 135 00:05:53,134 --> 00:05:55,054 Der zweite Header gerade. 136 00:05:55,055 --> 00:05:57,625 Aber ich gehe jetzt in den Responsive-Modus um. 137 00:05:57,620 --> 00:06:00,010 Gehen wir zur mobilen Ansicht. 138 00:06:00,005 --> 00:06:04,805 Alles Kn hat genau das, was wir haben. Genau hier. 139 00:06:04,805 --> 00:06:05,635 Ich mach das. 140 00:06:05,630 --> 00:06:07,070 Ich klicke auf die Spalte 141 00:06:07,070 --> 00:06:09,200 mit dem Logo. Genau hier. 142 00:06:09,200 --> 00:06:11,380 Ich sage 50. 143 00:06:11,375 --> 00:06:13,405 Dann komme ich hier zur 144 00:06:13,400 --> 00:06:15,520 Logo-Spalte mit dem Logo, 145 00:06:15,515 --> 00:06:17,215 tut mir leid, auch alles im Menü. 146 00:06:17,210 --> 00:06:19,700 Und dann ändere das auch auf 50 147 00:06:19,700 --> 00:06:22,820 , damit sie Seite an Seite stehen. 148 00:06:22,820 --> 00:06:24,800 Nehmen wir nun ein paar Änderungen vor. 149 00:06:24,800 --> 00:06:27,020 Ich klicke auf das Menü Bearbeiten, Icon, 150 00:06:27,020 --> 00:06:29,750 komm runter, treffe das Layout. 151 00:06:29,750 --> 00:06:31,880 Versuchen wir uns auf das Weiß auszurichten. 152 00:06:31,879 --> 00:06:34,329 Und dann werden wir es groß machen. 153 00:06:34,325 --> 00:06:36,205 Lassen Sie uns zum Stil übergehen. 154 00:06:36,200 --> 00:06:37,720 Hier unten haben Sie 155 00:06:37,715 --> 00:06:40,615 den Menüauslöser und schließen Sie das Symbol hinein. 156 00:06:40,610 --> 00:06:42,140 Und jetzt Icon Size mache ich 157 00:06:42,140 --> 00:06:45,730 das über 40 Pixel. 158 00:06:45,725 --> 00:06:47,395 Keda sollte groß genug sein. 159 00:06:47,390 --> 00:06:48,620 Und dann für das Logo, 160 00:06:48,620 --> 00:06:50,530 Bearbeiten wir auch das Logo. 161 00:06:50,525 --> 00:06:52,465 Bildgröße ist auf voll eingestellt 162 00:06:52,460 --> 00:06:53,750 links ausgerichtet. 163 00:06:53,750 --> 00:06:57,080 Gehen wir zu Style Max mit einem 100%. 164 00:06:57,080 --> 00:06:58,930 Okay, lass uns jetzt weitermachen. 165 00:06:58,925 --> 00:07:01,805 Aktualisierungen. Bevor wir es tun, lasst uns eigentlich halten. 166 00:07:01,805 --> 00:07:03,085 Lasst uns das auch machen. 167 00:07:03,080 --> 00:07:05,980 Wenn Sie auf das Hamburger-Menü klicken. 168 00:07:05,975 --> 00:07:07,645 Das wird der geleistete Job sein. 169 00:07:07,640 --> 00:07:10,460 Aber Sie können jetzt sehen , dass wir den Text sehen können. 170 00:07:10,460 --> 00:07:12,110 Der Text ist ganz weiß, 171 00:07:12,110 --> 00:07:14,270 daher müssen wir hier einige Änderungen vornehmen. 172 00:07:14,270 --> 00:07:15,790 Hier ist genau das , was ich tun werde. 173 00:07:15,785 --> 00:07:17,455 Ich gehe gleich 174 00:07:17,450 --> 00:07:20,030 hier auf das Schild-Drop-down-Menü. 175 00:07:20,030 --> 00:07:21,880 Und dann Hintergrundfarbe. 176 00:07:21,875 --> 00:07:23,615 Wir gehen mit Schwarz, 177 00:07:23,615 --> 00:07:26,485 Textfarbe, wir gehen mit Weiß. 178 00:07:26,480 --> 00:07:30,080 Und das sollte das sein. 179 00:07:30,080 --> 00:07:33,370 Ich weiß nicht warum wir es hier noch nicht sehen, aber es ist okay. 180 00:07:33,365 --> 00:07:35,395 Ich werde mit Updates fortfahren. 181 00:07:35,390 --> 00:07:38,910 Gehen wir zurück und schauen uns die Seite an. 182 00:07:39,760 --> 00:07:44,350 Gehe zurück zur Startseite, minimiere das Fenster. 183 00:07:44,345 --> 00:07:45,685 Alles klar, jetzt kannst du sagen: Okay, 184 00:07:45,685 --> 00:07:47,195 wir haben das Logo auf der linken Seite, 185 00:07:47,195 --> 00:07:48,545 das Menü auf dem Weiß. 186 00:07:48,545 --> 00:07:51,565 Wenn wir jetzt hier auf das Menü klicken, öffnet es sich. 187 00:07:51,560 --> 00:07:56,350 Bobby kann den Text, der interessiert ist, immer noch nicht sehen. 188 00:07:56,345 --> 00:07:59,945 Okay, lass uns zurückgehen und sehen , was passiert sein könnte. 189 00:07:59,945 --> 00:08:03,155 Und das wird sich sehr interessieren. 190 00:08:03,155 --> 00:08:05,525 Ich bin mir nicht ganz sicher, warum wir die Texte nicht sehen. 191 00:08:05,525 --> 00:08:06,805 Alles klar. Keine Sorge. 192 00:08:06,800 --> 00:08:09,500 Ich komme in den Responsive-Modus 193 00:08:09,500 --> 00:08:11,110 wechsle zurück zu Mobile. 194 00:08:11,105 --> 00:08:13,195 Klicken Sie auf das Menü direkt hier 195 00:08:13,190 --> 00:08:14,900 klicken Sie auf das Dropdown-Menü. 196 00:08:14,900 --> 00:08:17,230 Warum sehen wir den Text nicht? 197 00:08:17,225 --> 00:08:18,805 Lass uns zum Stil gehen. 198 00:08:18,800 --> 00:08:23,840 Kommen wir hier zur Typografie und Wow, 199 00:08:23,840 --> 00:08:27,530 ich bin mir nicht ganz sicher, warum die Größe hier 200 00:08:27,530 --> 00:08:30,800 statt eins ist, aber es sollte keine sein. 201 00:08:30,800 --> 00:08:34,010 Es sollte ein bisschen größer als einer sein. 202 00:08:34,010 --> 00:08:36,260 Das ist wahrscheinlich ein Fehler in Pixeln. 203 00:08:36,260 --> 00:08:38,000 Also entschuldige ich, ich werde 204 00:08:38,000 --> 00:08:42,110 das Problem erzählen, warum ich ein Pixel, manchmal habe ich das Gefühl, 205 00:08:42,110 --> 00:08:44,510 dass Element versucht, mich daran zu 206 00:08:44,510 --> 00:08:47,120 hindern, gute Videos zu machen. 207 00:08:47,120 --> 00:08:48,680 Ich weiß ehrlich gesagt nicht warum. 208 00:08:48,680 --> 00:08:49,760 Es hieß, ich werde nicht pixeln. 209 00:08:49,760 --> 00:08:51,740 Das ist nur, das ist einfach bizarr. 210 00:08:51,740 --> 00:08:53,990 immer, Sie können sehen, dass zumindest 211 00:08:53,990 --> 00:08:58,390 die Menüpunkte jetzt angezeigt werden, 212 00:08:58,385 --> 00:09:00,835 Wow, das ist sehr, sehr interessiert, 213 00:09:00,830 --> 00:09:02,270 ich sage Ihnen, Webdesign kann sehr seltsame, sehr 214 00:09:02,270 --> 00:09:05,120 seltsame Berufe sein. 215 00:09:05,120 --> 00:09:06,290 Manchmal fühlt man sich, man 216 00:09:06,290 --> 00:09:07,790 das Gefühl, dass all diese Elemente im Hinterkopf haben 217 00:09:07,790 --> 00:09:11,300 , dass sie nicht zurückkehren werden. 218 00:09:11,300 --> 00:09:13,420 Alles klar, also klicke ich jetzt hier rein. 219 00:09:13,415 --> 00:09:14,215 Da geht es. 220 00:09:14,210 --> 00:09:16,000 Jetzt kannst du sehen, dass ich die Menüpunkte habe 221 00:09:15,995 --> 00:09:18,225 und natürlich kannst du jetzt schließen. 222 00:09:18,229 --> 00:09:20,509 Das ist also im Grunde genommen 223 00:09:20,510 --> 00:09:22,750 um den responsiven Header neu zu gestalten. 224 00:09:22,745 --> 00:09:24,085 Ich werde tatsächlich das Gleiche für den globalen Header für die mobile Ansicht machen 225 00:09:24,080 --> 00:09:25,660 Gleiche für den globalen Header für 226 00:09:25,655 --> 00:09:28,765 , wo ich die 227 00:09:28,760 --> 00:09:32,420 erste Spalte zu 50% mache und dann die zweite Spalte mit dem Menüpunkt mache 228 00:09:32,420 --> 00:09:36,320 sind auch 50%. 229 00:09:36,320 --> 00:09:38,210 Und machen Sie auch das Menü-Hamburger-Symbol 230 00:09:38,210 --> 00:09:39,950 ein bisschen größer. 231 00:09:39,950 --> 00:09:42,980 Sie können also auch weitermachen und das tun. 232 00:09:42,980 --> 00:09:45,230 Aber das ist es zum Erstellen der 233 00:09:45,230 --> 00:09:47,300 Responsive oder Header für die Website. 234 00:09:47,300 --> 00:09:48,920 Vielen Dank, dass Sie sich das nächste Video der deutschen Veranstaltung 235 00:09:48,920 --> 00:09:50,800 angesehen haben, in dem wir uns nun die Neugestaltung der Fußzeile ansehen 236 00:09:50,795 --> 00:09:52,885 , um etwas verantwortungsvoller zu 237 00:09:52,880 --> 00:09:56,460 sein. Also du dann.