Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

WordPress für Designer: Themes und Layout-Werkzeuge

Responsiver Text

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sehr komfortabel ist responsiver Text, also Text, der sich den Eigenschaften der unterschiedlichen Endgeräte und deren Auflösung anpasst. Auch so etwas wird in Cornerstone unterstützt.

Transkript

Cornerstone bietet uns auch die Möglichkeit, mit responsivem Text zu arbeiten. Das bedeutet, dass der Text sich mit der Größe des Browserfensters anpasst. Das können wir ganz gut sehen, wenn wir das Browserfenster nämlich verkleinern und dabei hier auf die Überschrift achten. Dann werden wir sehen, wie diese jetzt mitskaliert. Es wird immer kleiner, immer kleiner, Irgendwann hier, gibt es eine Medienabfrage, da wird in dem Fall an der Stelle jetzt hier das Tablet dargestellt und dann wird es wieder größer. Und jetzt können wir wieder skalieren und wir sehen auch gleich, wie es hier wieder kleiner wird für das Smartphone. Ja, und wie sich das Ganze hier skaliert, das Verhalten, das können wir ebenfalls steuern. Und zwar ist das in den Settings hier unter Responsiver Text. Und hier haben wir die Headline. Wenn ich hier mal reingehe, sehen wir die Headline. die heißt in dem Fall ".resp-h". Und hier steht jetzt COMPRESSION. COMPRESSION "0,95". Das bedeutet, wenn man verkleinert, wie stark das Ganze komprimiert werden soll. Und dann haben wir hier ein Minimumwert und einen Maximumwert, also die Mindestgröße für den Text ist 32 Pixel, die maximale ist 54. Ja und wir wollen jetzt mal das Gleiche für einen Paragraphen erzeugen. Weil wenn wir mal darauf achten, der Paragraph der ändert seine Größe nicht. die Schriftgröße ist die ganze Zeit die gleiche. Das wollen wir ändern. Wir erzeugen uns also hier über ADD nun einen Paragraphen. Wir haben jetzt erstmal hier so ein Platzhalter. Wir klicken darauf. Und können hier einen Namen vergeben. Erstmal hier oben Das ist jetzt in dem Fall der "Paragraph". Als nächstes können wir hier einen Namen für die Klasse vergeben. Und ich nenne das Ganze jetzt in dem Fall "resp" machen wir mal "res" und dann "-p" zum Beispiel. Für den Paragraphen. Und jetzt können wir die Kompressionsrate eingeben. Ich sage in dem Fall mal zwei. Wir machen mal "2". Und die Mindestgröße da wähle ich jetzt 16 Pixel aus. und die maximale Größe 21 Pixel. Und jetzt müssen wir das Ganze noch zuweisen, wir müssen jetzt das "res-p" hier dem Paragraphen noch zuweisen. Erstmal speichern wir das Ganze natürlich. Nach dem Speichern müssen wir unseren Selektor jetzt einfach nur noch den Textboxen zuweisen. Dazu kopiere ich mir einfach den Selektornamen klicke dann auf eine Textbox scrolle dann nach unten zur Klasse und füge hier den Klassennamen ein. In dem Fall ist es egal, ob wir einen Punkt davor machen oder nicht, Cornerstone ergänzt das Ganze automatisch. Und wenn wir jetzt hingehen und das Fenster verkleinern, dann sehen wir auch, wie hier der Text vergößert und verkleinert wird. Hier sieht man sogar noch deutlicher. An dieser Stelle hier kann man es ganz deutlich sehen, wie der Text mitskaliert. Wir sind also somit in der Lage sehr einfach über Klassenbezeichnungen beziehungsweise hier bei dem Bereich Responsiver Text eigene responsive Textabschnitte hinzuzufügen. Wenn man zum Beispiel eine Liste hat. Wir haben hier jetzt kein Listenelement, aber wenn man eine Liste hat, könnte man hier jetzt an der Stelle ein weiteres Element erstellen für eine Liste, würde das dann zum Beispiel ".res-list" nennen, die Eigenschaften definieren, und müsste dann einfach nur den Klassennamen der Liste zuweisen.

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!