WordPress für Designer: Themes und Layout-Werkzeuge

Layout und Design mit Cornerstone

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In Cornerstone gibt es einen gesonderten Bereich eigens für das Layout. Hierüber lassen sich Bereiche in Sektionen unterteilen und die Sektionen wiederum ein einzelne Zeilen und Spalten. Somit ist man in der Lage, ein individuelles Layout zu erstellen.

Transkript

Als nächstes schauen wir uns den Bereich Layout in Cornerstone an. Wir haben hier auf der linken Seite, die verschiedenen Sektionen die hier rechts in der Seite zu sehen sind. Wenn ich also hier mal überfahre, dann steht hier “Section - Feature: Text Left”. Und das ist das Gleiche, was hier steht. Und wenn ich hier überfahre, wird auch hier rechts der Bereich hier ‘gehighlighted’. Wenn ich hier überfahre, wird der nächste Bereich ‘gehighlighted’, der heisst nämlich “Feature: Text Right”. Und wenn ich hier jetzt mal ein bisschen hoch fahre, dann sehen wir das auch besser, so. Hier wird der Bereich überfahren, hier wird der in dem Fall ‘gehighlighted’ und so haben wir also hier auf der linken Seite unsere einzelnen Sektionen, repräsentiert durch diese kleinen Kästchen hier. Wir können jetzt hingehen und solch eine Sektion z.b. duplizieren. Wenn ich jetzt z.b. diese “Section” hier, das ist also diese Rote hier, nochmal zurück, das ist also diese Rote hier, wenn ich diese z.b. duplizieren möchte, dann klicke ich einfach hier auf das entsprechende “icon” und habe ein Duplikat gemacht, das heisst dann auch “Copy of Feature: Text Right”. So, wenn ich das wo anders haben möchte, an einer anderen Position, dann kann ich jetzt ganz einfach hingehen und das verschieben. Wenn ich es z.b. ganz oben haben möchte, dann fasse ich es an und ziehe das einfach hier nach oben. So, und jetzt haben wir oben als erstes den roten Bereich mit dem Text rechts, dann den weissen Bereich und dann wieder den roten Bereich. Zum Löschen können wir ganz einfach hier auf den Mülleimer klicken, dann werden wir gefragt, ob wir es wirklich löschen wollen, weil auch der gesamte “content” verloren geht, ich sage jetzt “ja” und dann haben wir jetzt hier wieder unseren weissen Bereich, gefolgt von dem roten. Das ist also eine sehr einfache Möglichkeit, um hier Einfluss zu nehmen, auch auf die einzelnen Sektoren von der Reihenfolge her, wir können sie duplizieren, löschen, verändern, usw. Wenn ich jetzt einen einfachen Klick mache, bleiben wir mal bei dem Roten, einfachen 'Klick' hier auf den Bereich mache, dann komme ich wiederum in einen extra Bereich, der jetzt nur diese eine Sektion betrifft. Ich kann hier jederzeit oben hinklicken “Back to Layout”, dann bin ich wieder in der “Layout” Ansicht. So wir haben also hier jetzt, als oberstes mal einen Namen. Und ich sage jetzt einfach mal “Feature: Red Text Right”. Ok? Somit kann ich jetzt eher nachvollziehen, dass es sich dabei um die rote Box handelt. Ja und diese rote Box, die hat in dem Fall, eine “Row”, also eine Zeile. Das ist diese hier. Wenn ich eine weitere Zeile haben möchte, dann kann ich einfach hier auf dieses “icon” klicken, um auch diese Zeile zu duplizieren. Das ist im Prinzip das Gleiche, was wir eben mit den Sektionen gemacht haben, machen wir jetzt hier in dem Fall mit den Zeilen. Über den Mülleimer kann ich diese auch wieder löschen. Wir können also beliebig viele von diesen Zeilen innerhalb dieser “section” hinzufügen. Über diese Lupe gelangen wir in den Bereich “inspect”, wo wir noch detaillierter Details, Eigenschaften anpassen können. Bleiben wir aber erstmal hier im Bereich “Layout”. Hier haben wir jetzt nämlich als nächstes die Spalten, “columns”. Und hier in dem Fall ist es jetzt 50/50 unterteilt, 1/2 und 1/2. Auch hier wenn ich überfahre, wird der entsprechende Bereich ‘gehighlighted’. Wenn ich jetzt das Layout ändern möchte, ich möchte z.b. gar kein 2 -zeiliges haben, sondern einfach volle Breite, dann klicke ich hierhin und dann habe ich jetzt die volle Breite. Wenn ich jetzt hier als nächstes hinklicke, dann erstelle ich wieder den Urzustand, und ich kann jetzt hier z.b. sagen, ich möchte den linken Bereich kleiner haben, den rechten grösser, oder umgekehrt oder ich möchte drei Spalten haben, dann wird einfach noch eine hinzugegeben. Hier in der Mitte sehen wir schon diese Box, in der wir jetzt ganz einfach durch Klicken ein Element hinzufügen könnten. Wie z.b. einen weiteren Text, oder ein “accordion”, oder eine “headline”, oder oder oder. Ausserdem können wir hier an dieser Stelle sagen, dass wir ein “custom” Layout haben möchten. Ich mache es erstmal wieder hier auf zweifach, gehe auf “custom” und dann habe ich hier nämlich 1/2 + 1/2. Das ist ja das aktuell Gewählte. Wenn ich jetzt z.b. 1/4 haben möchte, und 3/4, dann kann ich das hier ganz einfach anpassen, bestätigen mit “return” und dann haben wir jetzt hier ein Layout zweispaltig mit 1/4 und 3/4. Wir haben also gesehen, wie einfach sich das Basislayout hier beeinflussen lässt. Zum einen hier über weitere Sektionen, und zum anderen wenn man auf eine Sektion hier draufklickt, die Möglichkeit hier dann mit weiteren Zeilen zu arbeiten, die Zeilen in Spalten zu unterteilen, usw. Ich mache es grad eben nochmal schnell indem ich hier auf “add” klicke. Jetzt habe ich eine leere Spalte hinzugefügt, eben habe ich ja dupliziert. Und wenn die selektiert ist, Moment ich gehe zurück, wenn wir diese jetzt hier an der Stelle selektieren, dann können wir jetzt ganz einfach hingehen und diese ebenfalls unterteilen, in zweifach, in vierfach, in fünffach , usw. Zum Löschen ganz einfach hier auf den Mülleimer, jawohl, und dann sind wir wieder da, wo wir vorher waren.

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!