WordPress für Designer: Themes und Layout-Werkzeuge

Header

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Natürlich dürfen Sie auch das Layout von Header und Logo der Website beeinflussen. So lässt sich etwa die Größe des Logos anpassen und das Logo ausrichten. Auch die Navigation kann von der Ausrichtung und den Abständen her verändert werden.

Transkript

Im Header Bereich des Customizers lassen sich viele Details für diesen oberen Bereich der Seite hier anpassen. Das wollen wir uns jetzt anschauen. Wir klicken also hier auf Header. Wir haben zum aller ersten Mal die Option, auszuwählen, wie dieser Header, also diese Leiste mit Logo und Navigation hier angebracht sein soll. Momentan steht das Ganze auf Fixed Top. Das heißt, wenn ich jetzt anfange zu scrollen, dann bleibt der Header hier fixiert. Deswegen heißt das Ganze hier Fixed. Wir haben aber auch die Möglichkeit, zu sagen, Static Top. Statisch heißt in dem Fall, wenn ich scrolle, verschwindet die Leiste. Sie scrollt ganz normal mit. Ansonsten haben wir Fixed Left, was auch ganz spannend ist, weil dadurch haben wir die Navigation hier auf der linken Seite. Wenn wir hier scrollen, scrollt einfach nur der rechte Bereich, der Linke bleibt fix stehen. Das sehen wir in letzter Zeit auf immer mehr Webseiten, die so arbeiten mit einem solchen fixen Menü auf der linken Seite. Natürlich geht das Ganze auch für die rechte Seite. Sieht genauso aus, nur halt rechts. Ich setze das Ganze wieder auf Fixed Top und dann geht's als nächstes weiter mit dem Logo und der Navigation. Diese Leiste steht momentan auf Inline, das heißt, die Elemente stehen nebeneinander. Wenn ich das hier auf Stacked setze, dann steht es übereinander, also gestapelt. Wenn wir jetzt hier auf- und zuklappen sehen wir auch, was passiert. Oben haben wir das Logo, die Navigation befindet sich darunter. Ja, ich mag in dem Fall Inline lieber. Dann haben wir hier die Möglichkeit festzulegen, wie groß dieser Balken sein soll. Steht jetzt auf 70 Pixel. Ich setze es mal auf 100, dass wir sehen, was passiert. Wie wir sehen, wird einfach dieser Bereich hier um einiges größer. Das ist natürlich abhängig, wie groß das Logo hier sein soll, was hier eingefügt werden soll, wie viel Navigationspunkte usw. und wie groß natürlich die Schrift sein soll. Ich lass das jetzt hier erst mal auf 70. Viele Einstellungen kann man ja auch noch nachträglich hier abändern, wenn man merkt, das Logo kann ruhig ein bisschen größer sein. Die Schriftgröße von den Navigationspunkten soll größer sein, dann können wir hier natürlich noch ein bisschen nacharbeiten. Als nächstes können wir den Text ändern für das Logo. Momentan handelt es sich ja um ein Text Logo. Wir haben also hier die Schriftart, auch ein Google Font. Naja, an und für sich gefällt mir die Schriftart ganz gut, ist eigentlich ganz nett, aber ich möchte natürlich mein Logo verwenden. So, hier kann ich jetzt die Schriftfarbe, Größe usw. ändern. So wie wir das von den Headlines gewöhnt sind, aber hier an dieser Stelle können wir eine Grafik hochladen. Das heißt, wir klicken einfach hier auf Bild auswählen und dann öffnet sich die Mediathek, die derzeit noch leer ist. Wir haben bisher noch keine Bilder irgendwo verwendet und wir können jetzt zum einen Bilder per Drag and Drop hier rein schmeißen oder wir können hier auf Datei auswählen klicken, um eine Datei hier aus dem Finder auszuwählen. Ja, und ich lande hier in meinem Bilderordner und wähle hier jetzt das Logo aus. Ich klicke auf Öffnen. Daraufhin wird es in die Mediathek hochgeladen. Wir sehen hier eine kleine Vorschau, auf der rechten Seite sehen wir sie ebenfalls und wir sehen hier jetzt die Größenangaben, also 10 kB. Es handelt sich um PMG. Wir haben 714 × 335, das ist natürlich ein bisschen groß oben für den Head Bereich, aber das ist egal. Wir können jetzt hier den Titel festlegen, also ich sage jetzt einfach mal Hardrock Logo. Wir können noch zusätzlich eine Bildunterschrift festlegen und wichtig ist hier der Alternativtext. So, und das ist interessant, dass wir das Ganze hier mit Leben füllen, weil der Alternativtext wird halt auch von Suchmaschinen durchsucht. Das heißt, wenn jetzt jemand nach Hardrock Outdoor Sports sucht, dann ist die Chance, dass man hier gefunden wird, deutlich höher, wenn ein Alternativtext vergeben wurde, der entsprechend auch die Keywords beinhaltet. Ja, und jetzt wähle ich das Bild aus. Daraufhin landet es hier natürlich viel zu groß und der Head Bereich wird dementsprechend auch hier deutlich vergrößert. Und deswegen müssen wir hier eine Logo Width eingeben und ich sage jetzt einfach mal 200 und gucke, was passiert und das ist ein bisschen sehr klein. Dann versuchen wir es mal mit 300. Ja, könnte noch etwas größer sein, vielleicht 400. Ja, damit könnte ich mich jetzt erst mal anfreunden. Vielleicht noch 450. Ja, ok! Der Abstand hier drüber, der ist mir jetzt allerdings noch zu groß. Deswegen haben wir hier Logo-Alignment und wir sehen hier jetzt zum Beispiel, dass wir 11 Pixel oben Abstand haben. Ich werde das einfach mal auf null setzen, und mal gucken, was passiert. So, das Logo springt ein bisschen nach oben. Jetzt ist der Abstand oben und unten fast identisch und so gefällt mir es eigentlich sehr gut. Wie geht's weiter? Als nächstes haben wir hier die Navbar Fonts. Die Fonts sehen wir, wenn wir das Fenster noch mal einklappen. Hier sind die Fonts. Naja, die passen natürlich noch gar nicht zu unserem Design. Deswegen müssen wir hingehen und diese noch anpassen. Das heißt, wir haben hier an der Stelle einfach die Möglichkeit, jetzt wieder Lato auszuwählen. So, jetzt können wir noch mal schauen, wie sich das Ganze hier darstellt. Und das sieht eigentlich ganz gut aus. Vielleicht können wir hier jetzt auch noch hingehen und mal auch hier Book ausprobieren oder Regular. Probieren wir es mal mit Regular. So, und ja, ich finde, das sieht eigentlich ganz gut aus. Mal gucken, was wir noch einstellen können, weil ich finde hier das muss natürlich irgendwo zentriert dargestellt werden, vielleicht ein bisschen mehr Abstand usw. Auch diese Option finden wir jetzt hier ein bisschen weiter unten. Wir können natürlich die Schriftfarbe und Schriftgröße noch definieren. Hier unten haben wir den Abstand zwischen den Buchstaben und wir können hier sagen, Uppercase oder Lowercase. Ich probiere es mal mit Lowercase aus. Mal gucken, ob das dann besser aussieht. Das ist auch sehr gut. Was ändern wir noch? Hier an der Stelle haben wir Navbar Top Link Alignment 26. Mal gucken, was passiert, wenn ich das jetzt mal auf 50 setze und dann mir das Menü noch mal anschaue. Ja, das sieht eigentlich schon gut aus. Ja, das ist eigentlich schon perfekt. Ja, vielleicht ein paar Pixel nach oben, aber an und für sich bin ich damit schon sehr zufrieden, machen wir mal 48. So, das sieht an und für sich gut aus. Als nächstes kann man noch den Abstand zwischen den Navigationspunkten festlegen und das ist nämlich der nächste Eintrag. Hier steht jetzt 23 Pixel. Hier mache ich jetzt einfach mal 40 draus und dann schauen wir uns das Ganze auch noch mal an. So, jetzt ist der Abstand deutlich größer geworden. Das ist mir eigentlich schon zu groß. Das sieht echt ein bisschen fett aus. Machen wir hier einfach mal 30 draus. So, als nächstes haben wir hier noch die Möglichkeit, die Search zu deaktivieren, weil wenn wir mal schauen, hier haben wir noch dieses Such-Icon und das möchte ich vielleicht gar nicht verwenden, deswegen gehe ich einfach hier hin und sage, Navbar Search Off. So, als nächstes haben wir hier noch das Mobile Menü. Dazu können wir das Mobile Menü auffahren und dann sehen wir es hier. Ok, das sieht eigentlich ganz gut aus. Ja, und wir können hier jetzt noch die Größe beeinflussen. Ich mache mal 25. Das ist in dem Fall der Button, der sich hier vergrößert. So, ich mache das mal auf 50, damit man es noch deutlicher sieht So, dann haben wir hier einen riesen Button, der ist viel zu groß. Ich glaube, vorher hatten wir 20. Die Größe ist eigentlich in Ordnung. Als nächstes geht es noch um die Position von oben. Der klebt ja ziemlich weit oben und hier mache ich jetzt auch einfach mal das Doppelte, 30. Mal gucken, wo er dann klebt und das sieht eigentlich gut aus. Vielleicht noch einen kleinen Ticken weiter nach unten, machen wir mal 32. Ja, und das sieht eigentlich in Ordnung aus. Naja, als nächstes haben wir noch eine Widget Bar. Widget Bar, ja das ist ein bisschen was abgefahreneres. Ich zeige das mal gerade, indem ich hier jetzt, egal was wir hier nehmen, ich sage jetzt einfach mal Two. So, und dann erscheint hier oben so ein kleines Dreieck. Und da kann man drauf klicken und dann fährt ein Bereich auf, in dem lassen sich Widgets ablegen. Also irgendwelche zusätzlichen Navigationselemente zum Beispiel. So, und für diesen Widget Button können wir hier auch noch die Farbe auswählen, wenn man bei Mouse Over das Ganze überfährt, welche Farbe dann dargestellt werden soll usw. Ich werde das aber wieder deaktivieren. Dann haben wir noch eine Topbar. Das heißt, ein kleiner Bereich, der sich hier über den eigentlichen Header legt. Ja, und dann tauchen auch hier oben rechts Social Media Icons auf, die man natürlich auch noch auswählen und anpassen kann und wir können jetzt hier zum Beispiel noch einen Text eingeben. So, und das erscheint hier oben links. Ja, und man könnte zum Beispiel die Telefonnummer hier eintippen oder E-Mail-Adresse, dass der User schnell mit uns in Kontakt treten kann. Ich werde aber die Topbar wieder deaktivieren. Hier haben wir Breadcrumbs. Was sind Breadcrcrumbs? Breadcrumbs können wir sehen, wenn wir mal die Seite wechseln zum Beispiel ins Portfolio. Dann sehen wir diesen Bereich. Das ist ein Breadcrumb. Der sagt uns nämlich, wo die Home ist und wie die Elemente in einander verschachtelt sind, also die Seiten in dem Fall. Ja, dann haben wir die Home, dann haben wir vielleicht eine Produktübersichtsseite, eine Produktdetailseite, eine Bestellen-Seite oder sowas und dann, wenn man diesen Prozess hier sieht, kann der über Breadrumbs, also Brotkrumen, abgedeckt werden. Das Ganze kommt aus den Geschichten von Hänsel und Gretel, die sich mit Brotkrumen den Weg durch den Wald gebahnt haben. Ja, und unsere Seite ist eigentlich sehr überschaubar. Ja, wir haben nur ein paar Hauptunterseiten. Deswegen, so verschachtelt wird das nicht. Deswegen werde ich die Breadcrumbs einfach mal deaktivieren. Ja, und wenn ich mit den Einstellungen hier soweit zufrieden bin, dann speichere ich das Ganze einfach mal ab und kann dann wieder zurück gehen, um die nächste Kategorie anzupassen.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!