Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress für Designer: Themes und Layout-Werkzeuge

Typography

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auch die Typographie wie etwa die Verwendung von Web-Fonts, deren Größe und Schriftschnitte, lassen sich über die Theme-Optionen beeinflussen.

Transkript

Als nächstes schauen wir uns im Customizer den Bereich Typography an. Hier haben wir die Möglichkeit Google Fonts zu aktivieren. Über Google Fonts haben wir Zugriff auf über 700 Schriftarten, die wir hier in unserem Design verwenden können. Das ist natürlich sehr praktisch, deshalb klicken wir hier auf On damit wir entsprechend hier eine große Auswahl an Fonts haben. Wir haben zusätzlich noch die Option, Cyrillic, Greekoder Vietnamese zu aktivieren, wenn man also einen entsprechenden Zeichensatz benötigt. In unserem Fall natürlich nicht. Deshalb arbeiten wir hier mit ganz normalen Zeichen, UTF8 heißt es in dem Fall. Dadurch, dass wir Google aktiviert haben, können wir jetzt über dieses Dropdown auf über 700 Fonts zurückgreifen. Das ist eine riesige Auswahl und den Font den ich verwenden möchte, es gibt sehr viele gute Fonts, aber den ich gerne mag ist hier zum Beispiel Lato. Dieser lässt sich sehr gut lesen. Allerdings möchte ich das Ganze direkt mal hier auf Book setzen, Regular ist ein bisschen fett, Book finde ich, ist deutlich besser. Light oder Ultra light ist viel zu dünn. Deswegen wähle ich hier Book aus und kann als Nächstes noch die Größe definieren. Wir haben hier zwei verschiedene Größenangaben. Einmal die Content Front Size, das betrifft in dem Fall in den Bereich hier im Content in Blog Posts, und in der Seite und Body Font Size betrifft in dem Fall außerhalb also die Elemente, die nicht im Blog und in Seite drin sind. Ich reduziere hier einfach mal die Schriftgröße auf 16. und nun sehen wir hier auch schon das Ergebnis. Das andere ist sehr groß gewesen. 16 ist in Ordnung, ich kann später immer noch hingehen und das Ganze weiter anpassen. Die Body Font Size setze ich auch auf 16. Weitere Optionen sind die Headlines. Wir haben hier die Möglichkeit, auch für die Headline eine andere Schriftart auszuwählen. In dem Fall nehme ich ebenfalls die Lato , ich finde es albern hier mit ganz vielen unterschiedlichen Schriften zu arbeiten, also nehmen wir die Lato. Dann können wir für Lato auch eine Farbe festlegen. Ich lasse es aber mal dabei. Wir können auch für diese Schrift auswählen, dass sie etwas dünner sein soll. Hier kann man den Zeilenabstand definieren. Wir haben hier den Zeilenabstand für die unterschiedlichen Überschriften, die wir haben. Wir haben hier h1 zum Beispiel für Heading One, das geht von h1 bis h6, h1 kommt in der Regel nur einmal auf einer Webseite vor und ist riesengroß. h2 Elemente, sind die Hauptüberschriften, die sonst mehrfach auftreten, so wie hier Titel, hier haben wir auch noch einmal Titel und hier auch. Das ist in dem Fall h2. H3 sind wiederum etwas kleiner als h2 und werden auch noch einmal im Content verwendet. H4,h5 und h6 werden sehr selten verwendet. Vielleicht, wenn man eine Unter-Unterüberschrift braucht oder eine Bildunterschrift benötigt, dann kann man hier entsprechend damit noch arbeiten. Was wir jetzt anpassen können, ist das Letter Spacing, also der Abstand zwischen den Buchstaben. Den können wir zum Beispiel etwas erhöhen oder verringern, je nachdem welche Schriftart wir gewählt haben, macht es hier Sinn, den Buchstabenabstand etwas zu beeinflussen. Ich setzte es hier aber wieder auf 0. Dann können wir hier noch festlegen, ob Uppercase oder Lowercase. Momentan Uppercase heißt alles groß geschrieben. Ich setze es mal auf Off und dann sehen wir jetzt unsern Titel in Groß- und Kleinschreibung. Dann haben wir hier noch die Linkfarben. Das heißt, wenn wir einen Link im Text haben, was gerade nicht der Fall ist, dann könnten wir hier die Farben für den Link, den normalen Link und den Mouse Over Zustand, man sagt dazu Hover, beeinflussen. In dem Fall ist es ein helles Rot und dann ein etwas stärkeres Rot bei Mouse Over. Wenn wir mit den Anpassungen fertig sind, klicken wir hier oben auf Speichern. und können dann wieder nach oben scrollen und hier zurück scrollen. um jetzt eine andere Kategorie zu beeinflussen.

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!