Alles klar, also lasst uns anfangen, unseren Header so zu
gestalten, dass er reagiert
und Lambda zeigt Ihnen die Staaten so, wie er gerade ist.
Der Desktop ist ziemlich fertig.
Wenn wir beginnen, den Bildschirm unseres Browsers zu minimieren.
Sie können jetzt sehen , dass dies zu diesem Zeitpunkt
die Tablet-Ansicht sein würde.
Und Sie können sehen, dass das Logo viel kleiner wird.
Die Speisekarte hat sich auch in das traditionelle Hamburgermenü verwandelt
.
Und es ist okay, aber es kann definitiv verbessert werden.
Aber wenn wir jetzt ein bisschen kleiner werden, können Sie
sehen, dass die Dinge hier wirklich, richtig schlecht aussehen.
Dies ist die mobile Ansicht,
die für das Mobiltelefon.
Also mussten wir
hier einige Änderungen vornehmen. Ich mach weiter.
Und bevor ich das mache,
lass mich dir den anderen Header zeigen, den globalen Header.
Gehen wir zur Kontaktseite und Sie werden
feststellen, dass diese ein bisschen besser ist.
Wir haben den schwarzen Hintergrund und dann in der mobilen Ansicht,
obwohl das Hamburgermenü
falsch mit dem Logo abgestimmt ist,
ist es immer noch viel besser, da wir oben keinen Leerraum haben
.
Okay, ich werde
die Homepage-Header bearbeiten.
Gehen wir zu Edit with Elementor
und dann zur Homepage nach oben.
Jetzt wechseln wir hier unten in den Responsive-Modus.
Reaktionsmodus, Wechseln wir zuerst zur Tabelle.
Jetzt möchte ich dir schnell etwas zeigen.
In Ordnung, lass mich zurück zu responsive gehen.
Standardmäßig wurde Ihr Hauptmenü oder
ein aktiviertes Feature-Menü in der Tablet-Ansicht in das Hamburger-Menü umgewandelt
. Beachten Sie jedoch,
dass Sie
nicht immer den Standardeinstellungen folgen müssen.
Wenn ich jetzt zum Tisch wechsle, wie Sie sehen können,
hat es sich an das Hamburgermenü gewandt.
Und das liegt daran, dass Sie, wenn ich auf das Hauptmenü des Layouts klicken und bearbeiten sollte
,
die Bildschirmgrößen des positiven Haltepunkt-Tablets von 1025 Pixeln und darunter sehen
Bildschirmgrößen des positiven Haltepunkt-Tablets
.
Klar, der Hamburger-Menü-Blot.
Wenn wir das nicht wollen,
wechsle ich stattdessen diese in die mobile Ansicht.
Eine Tablet-Ansicht. Wir werden immer noch
das Hauptmenü zeigen und wir wandeln uns
erst in das Hamburgermenü um
wenn wir die mobile Ansicht erreicht haben.
Lasst uns das Update fortsetzen.
Und mal sehen, was diese kleine,
kleine Veränderung für uns bewirkt hat.
Sehen Sie sich die Seite an. Gehe zurück zur Homepage oder zum Fall.
An dieser Stelle ist dies
die Tablet-Ansicht.
Und man sieht, dass es eigentlich nicht so schlimm ist.
Sie müssen nicht einmal auf das Handy wechseln,
zum Hamburgermenü, also Tablets.
Wenn Sie viele Menüpunkte haben,
sagen wir 678 Artikel als Jahre,
haben Sie natürlich nicht genug Platz.
Aber Institutionen , in denen Sie vier oder fünf Menüpunkte haben
,
ist es vollkommen in Ordnung für die Anzeige.
Sie wie sie sich im Tablet-Modus befinden.
Es gibt zwei Änderungen, die ich hier machen werde.
Man wäre, die Größe des Logos nur ein wenig zu vergrößern
.
Und dann könnten wir auch versuchen, die Größe der Menüpunkte nur ein wenig zu reduzieren
.
Lass uns das ganz schnell machen. Ich gehe
zurück zur Homepage-Kopfzeile.
Wir wechseln zu antwortendem SUV, Trink-Tablet.
In Ordnung. Ich klicke auf das Menü.
Es tut mir leid, das Logo entweder hier bei UT-Logo geht zu Style.
Beachten Sie jetzt
, dass die Dimension hier drin auf Tablet eingestellt wurde.
Wie Sie sehen können, ist es alles SASE Tablet, Tablet.
Also hier schalte ich die Größe auf 100% um.
Wir zeigen die volle Größe des Logos an.
Jetzt für das Hauptmenü weiß ich,
dass es alles in Weiß ist.
Du kannst es nicht sehen, aber ertrage es einfach mit mir.
Ich klicke auf Bearbeiten,
das Hauptmenü, gehe zu Style.
Dann gehen wir gleich hier zur Typografie.
Sehen Sie sich das an und stellen Sie sicher, dass
die Größe hier auf Tablet eingestellt ist.
Wir werden diese 114 Pixel nur ein bisschen kleiner als gewöhnlich machen
.
Lasst uns Updates machen.
Jetzt schauen wir uns mal an.
Fügen Sie den neuen Homepage-Header und den Reaktionsmodus hinzu.
Und da gehst du.
Da gehst du.
Bis zu diesem Zeitpunkt sieht es also ziemlich gut aus.
Offensichtlich werden wir einige wichtige Änderungen an der Schlagzeile des Banners vornehmen
,
dem Gewinner, den wir reisen, Es ist Abenteuer.
Wir werden die Größe reduzieren,
aber achten Sie einfach auf den tatsächlichen Header.
Okay, es sieht gut aus bis zur mobilen Ansicht,
die jetzt weiterlaufen muss.
Aber im Moment maßgeschneidert
sieht das ziemlich gut aus.
Werfen wir nun einen Blick auf
den Header für den globalen, globalen Header.
Wählen wir eine Seite aus, wählen wir die Artikelseite aus.
Und von hier aus werden wir
den Global Header bearbeiten.
Wir werden zuerst den Tablet-Modus erledigen.
Kommen wir also zu Ihrem Responsive hierher. Gehe zum Tablet.
Okay, wir kümmern uns um die Brotpunkte.
Wir werden das auf Handy umstellen.
Und es wird auch genau das Gleiche für den Stil tun
.
Wir richten uns nach rechts aus, für das
Hauptmenü, die
Ausrichtung auf das Weiß und dann den Stil.
Wir werden zur Typografie herkommen.
Stellen Sie sicher, dass dies auf Tablet eingestellt ist.
Also gehen wir auch mit 14 Pixeln.
Und da ist es.
Okay, Next wird das Logo sein.
Vergessen wir nicht, wir müssen das Logo oder 100% machen.
Stellen Sie sicher, dass dies auf Tablets eingestellt ist.
100%, in Ordnung.
Jetzt wechseln wir zur mobilen Ansicht.
Das einzige, was wir hier tun müssen, wäre, das Navigationsmenü in die Mitte zu
skizzieren.
Eigentlich hätten wir die Ausrichtungen im Tablet-Modus nicht berühren
sollen,
also ist es okay, wir werden das einfach zurücksetzen.
Ich gehe zum Inhalts-Layout
und dann zur Ausrichtung hier.
Lass es uns einfach in der Mitte behalten.
Ich glaube, es wird ihnen besser gehen.
Alles klar. Das ist es.
Ich mach weiter und ich werde es aktualisieren.
Werfen wir einen Blick darauf, was wir haben.
Sehen wir uns die Seite an.
Wählen wir die Artikelseite aus.
Reduzieren Sie die Größe. Was haben wir hier drin?
Alles klar, ist Tablet,
das Tablet sieht gut aus.
Und jetzt wird dies die mobile Ansicht sein,
aber es scheint eine Fehlausrichtung mit dem Logo und dann dem Menü selbst zu geben
.
Also lasst uns das schnell beheben.
Lass uns zurückgehen.
Wir müssen das Logo vielleicht ein bisschen kleiner machen
.
Ich denke, es ist auch ein bisschen zu groß.
Nehmen wir diese Änderungen also vor.
Gehe zurück zum responsiven Handy.
Okay, lasst uns die erste Ausrichtung des Logos hier bearbeiten,
lassen Sie es uns in die Mitte setzen.
Sagen wir, dieser ist ein Dissenter.
Und dann ist vielleicht die Größe,
vielleicht ein 100%, ein bisschen zu groß und denkt nicht darüber nach.
Lasst uns das auf 75% senken.
Lass uns weitermachen und Verabredungen.
Und mal sehen, wie das aussehen wird.
Gehen wir zurück, schauen wir uns die Seite an.
Artikel. Ich minimiere, okay,
viel besser jetzt und jetzt kannst du sehen, dass
die Ausrichtung in der Mitte steht.
Und da ist es.
Sieht also viel besser aus,
jetzt viel besser.
Natürlich wird es noch ein paar mehr vornehmen,
ein paar weitere Änderungen an den Headern,
aber im Moment sieht es zumindest
viel besser aus als das, was wir ursprünglich hatten.
Sowohl der Homepage-Header
der Global Header sehen besser aus.
Wir werden den Leerraum in der Homepage-Header im nächsten Video behandeln
.