Willkommen im zweiten Teil der Neugestaltung des responsiven Headers.
Und ich habe vergessen, in einem früheren Video zu erwähnen
als ich die Zeichen der Menüpunkte hier geändert habe,
aus irgendeinem Grund scheint es die Desktop-Version beeinflusst zu haben
.
Sie können jetzt sehen, dass
die Texte und nicht mehr Großbuchstaben,
wenn so etwas passiert,
einfach zurück zur Bearbeitung der Homepage-Header gehen.
Was Sie tun möchten, ist einfach nur zum Menüelement zu gehen
.
Also klicke ich hier auf viele Elemente.
Gehe zu Style, gehe hier zur Typografie
und klicke einfach darauf.
Das ist alles, was du hier sehen kannst.
Es heißt „In Großbuchstaben transformieren“.
Also bekräftigen wir im Grunde nur, Hey, wir wollen, dass
das Lass uns in Großbuchstaben sein.
Also werde ich wieder Updates machen
und lass uns einfach zurückgehen, die Seite ansehen.
Lasst uns auf die Homepage gehen.
Okay. Und da gehst du.
Ehrlich gesagt bin ich mir nicht ganz sicher, warum das passiert, aber für den Fall, dass
es dir passiert,
tu einfach das, was ich gerade getan habe. Okay.
Vorher konnten wir
die Tablet-Ansicht so aussehen lassen,
was überhaupt nicht schlecht ist.
Aber jetzt ist es an der Zeit , dass wir uns
die mobile Ansicht ansehen.
Und Sie können sehen, dass es wirklich aussieht,
wirklich schlecht ist viel Leerzeichen
und das Logo und das Menü,
das Hamburgermenü online,
aber wir müssen den Leerraum reparieren.
Eigentlich ist dies das zweite Mal, dass ich
dieses Video aufnehme
, weil ich im vorherigen
Video tatsächlich den mobilen Header reparieren konnte
, um dort genau den gleichen Stil zu haben
Sie werden
das Banner in den Hintergrund einfügen lassen.
Ich habe mich jedoch entschieden, eine andere Route zu wählen und
stattdessen die gleiche Art von Header zu verwenden
, die wir für den Rest der Seiten haben,
wie die hier, auf der Sie den schwarzen Hintergrund haben, beschlossen,
diese zu verwenden Header für
die Homepage gehen Sie in der mobilen Ansicht heraus.
Der Grund dafür ist, dass ich diese Gelegenheit tatsächlich nutzen wollte
, um Ihnen einen sehr coolen Trick zu zeigen
, den Sie
verwenden können, wenn Sie mit Responsive Design arbeiten.
Gehen wir zurück zur Homepage.
Und ich möchte dir was zeigen, oder?
Ich gehe zu Edit with
Elementor, indem ich den Header der Homepage editiere.
Hier ist das Ding. Okay, ich werde
diesen Header-Bereich duplizieren.
Ich klicke mit der rechten Maustaste hier rein. Duplikate.
Im Grunde haben wir jetzt zwei Header.
Der Unterschied ist, dass ich hier reinkomme
zu diesem Abschnitt „Bearbeiten“ gehe.
Ich gehe zu Stil,
Hintergrundtyp, gebe ihm eine Farbe Schwarz.
Okay, jetzt schau dir das an.
Ich gehe zu Advanced,
komme hier runter zu Responsive und lade dann ein,
dass du Sichtbarkeitsoptionen hast.
Wann genau möchten Sie diesen Abschnitt basierend auf einer Bildschirmgröße anzeigen
?
Ich verstecke es auf dem Desktop.
Ja.
Wir möchten es noch nicht auf dem Desktop aufnehmen
da wir immer noch den Homepage-Header auf dem Tablet verwenden
.
Wir wollen es auch bis dahin verstecken.
Aber dann wollen wir es zeigen
, wenn es zur mobilen Ansicht kommt.
Als solches gehe ich jetzt zu
unserem ursprünglichen Header und mache das Gegenteil.
Gehen Sie zu Fortgeschritten, beruhigen Sie sich hetero responsive
und verstecken Sie sich dann auf dem Desktop.
Niemand will zeigen,
wir wollen bis dahin zeigen.
Aber wenn ich zu Hide on Mobile gehe,
lass mich weitermachen und jetzt Updates.
Und sieh dir das mal an.
Lass uns jetzt weitermachen, schau dir die Seite an.
Lass uns auf die Homepage gehen.
Okay, damit du siehst, dass wir immer noch denselben Header haben.
Aber jetzt können Sie für die Tablet-Ansicht sehen,
dass wir immer noch denselben Header haben,
denselben Header im selben Header.
Jetzt, sobald es zur mobilen Ansicht kommt,
haben wir jetzt den schwarzen Hintergrund mit
der Logo-Idee des Zentrums und
dann dem Hamburgermenü da unten.
Und dann haben wir das Homepage-Banner.
Und da gehst du.
Dies ist also ein Trick, den Sie
verwenden können, wenn Sie mit Responsive Design arbeiten.
Sie können wählen, ob Sie einen bestimmten Abschnitt speziell auf dem Desktop anzeigen möchten
.
Und Sie können wählen, ob Sie bestimmte Abschnitte nur auf dem Tablet oder auf Mobilgeräten speziell anzeigen möchten
.
Eine Frage, die ich vielleicht noch habe, ist in Ordnung,
warum habe ich diesen speziellen Header nicht einfach
dupliziert und dann einfach diesen Header auf der Homepage benutzt
diesen Header auf der Homepage
und ihn dann einfach auf dem Desktop ausgeblendet
und Tablet und dann auf Mobilgeräten angezeigt.
Sie können zwei Head
auf jeder Seite mit elemental angezeigt werden,
zumindest funktioniert dieses Plug-In.
Okay, also wenn du nachdenkst,
ich dupliziere einfach diesen Header
und zeige zwei Header auf derselben Seite an,
verstecke einen auf Desktops oder sie wollen kein Handy,
es wird nicht funktionieren, weil habe es tatsächlich versucht.
Deshalb musste ich zur Homepage-Header gehen .
Sie dann in derselben Kopfzeile einen zweiten Abschnitt,
Erstellen Sie dann in derselben Kopfzeile einen zweiten Abschnitt, der jetzt speziell in der mobilen Ansicht angezeigt wird
.
Aber wir sind noch nicht fertig.
Eigentlich möchte ich etwas anderes machen.
Siehst du, du musst nicht immer mit dieser Tomate gehen.
Sie haben das Logo und die Mitte oben
und dann das Hamburgermenü oder darunter.
Wir können hier immer noch zwei Spalten verwenden.
So melden Sie sich auf der linken Seite an und lassen Sie das Menü ans Licht.
Lasst uns das machen.
Ich werde wieder mit Elementor bearbeiten,
der Homepage-Kopfzeile und
Paletten, damit diese Seite geladen werden kann, okay, etwas Bearbeitung.
Der zweite Header gerade.
Aber ich gehe jetzt in den Responsive-Modus um.
Gehen wir zur mobilen Ansicht.
Alles Kn hat genau das, was wir haben. Genau hier.
Ich mach das.
Ich klicke auf die Spalte
mit dem Logo. Genau hier.
Ich sage 50.
Dann komme ich hier zur
Logo-Spalte mit dem Logo,
tut mir leid, auch alles im Menü.
Und dann ändere das auch auf 50
, damit sie Seite an Seite stehen.
Nehmen wir nun ein paar Änderungen vor.
Ich klicke auf das Menü Bearbeiten, Icon,
komm runter, treffe das Layout.
Versuchen wir uns auf das Weiß auszurichten.
Und dann werden wir es groß machen.
Lassen Sie uns zum Stil übergehen.
Hier unten haben Sie
den Menüauslöser und schließen Sie das Symbol hinein.
Und jetzt Icon Size mache ich
das über 40 Pixel.
Keda sollte groß genug sein.
Und dann für das Logo,
Bearbeiten wir auch das Logo.
Bildgröße ist auf voll eingestellt
links ausgerichtet.
Gehen wir zu Style Max mit einem 100%.
Okay, lass uns jetzt weitermachen.
Aktualisierungen. Bevor wir es tun, lasst uns eigentlich halten.
Lasst uns das auch machen.
Wenn Sie auf das Hamburger-Menü klicken.
Das wird der geleistete Job sein.
Aber Sie können jetzt sehen , dass wir den Text sehen können.
Der Text ist ganz weiß,
daher müssen wir hier einige Änderungen vornehmen.
Hier ist genau das , was ich tun werde.
Ich gehe gleich
hier auf das Schild-Drop-down-Menü.
Und dann Hintergrundfarbe.
Wir gehen mit Schwarz,
Textfarbe, wir gehen mit Weiß.
Und das sollte das sein.
Ich weiß nicht warum wir es hier noch nicht sehen, aber es ist okay.
Ich werde mit Updates fortfahren.
Gehen wir zurück und schauen uns die Seite an.
Gehe zurück zur Startseite, minimiere das Fenster.
Alles klar, jetzt kannst du sagen: Okay,
wir haben das Logo auf der linken Seite,
das Menü auf dem Weiß.
Wenn wir jetzt hier auf das Menü klicken, öffnet es sich.
Bobby kann den Text, der interessiert ist, immer noch nicht sehen.
Okay, lass uns zurückgehen und sehen , was passiert sein könnte.
Und das wird sich sehr interessieren.
Ich bin mir nicht ganz sicher, warum wir die Texte nicht sehen.
Alles klar. Keine Sorge.
Ich komme in den Responsive-Modus
wechsle zurück zu Mobile.
Klicken Sie auf das Menü direkt hier
klicken Sie auf das Dropdown-Menü.
Warum sehen wir den Text nicht?
Lass uns zum Stil gehen.
Kommen wir hier zur Typografie und Wow,
ich bin mir nicht ganz sicher, warum die Größe hier
statt eins ist, aber es sollte keine sein.
Es sollte ein bisschen größer als einer sein.
Das ist wahrscheinlich ein Fehler in Pixeln.
Also entschuldige ich, ich werde
das Problem erzählen, warum ich ein Pixel, manchmal habe ich das Gefühl,
dass Element versucht, mich daran zu
hindern, gute Videos zu machen.
Ich weiß ehrlich gesagt nicht warum.
Es hieß, ich werde nicht pixeln.
Das ist nur, das ist einfach bizarr.
immer, Sie können sehen, dass zumindest
die Menüpunkte jetzt angezeigt werden,
Wow, das ist sehr, sehr interessiert,
ich sage Ihnen, Webdesign kann sehr seltsame, sehr
seltsame Berufe sein.
Manchmal fühlt man sich, man
das Gefühl, dass all diese Elemente im Hinterkopf haben
, dass sie nicht zurückkehren werden.
Alles klar, also klicke ich jetzt hier rein.
Da geht es.
Jetzt kannst du sehen, dass ich die Menüpunkte habe
und natürlich kannst du jetzt schließen.
Das ist also im Grunde genommen
um den responsiven Header neu zu gestalten.
Ich werde tatsächlich das Gleiche für den globalen Header für die mobile Ansicht machen
Gleiche für den globalen Header für
, wo ich die
erste Spalte zu 50% mache und dann die zweite Spalte mit dem Menüpunkt mache
sind auch 50%.
Und machen Sie auch das Menü-Hamburger-Symbol
ein bisschen größer.
Sie können also auch weitermachen und das tun.
Aber das ist es zum Erstellen der
Responsive oder Header für die Website.
Vielen Dank, dass Sie sich das nächste Video der deutschen Veranstaltung
angesehen haben, in dem wir uns nun die Neugestaltung der Fußzeile ansehen
, um etwas verantwortungsvoller zu
sein. Also du dann.