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

Cornerstone: Intro

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erhalten Sie einen umfassenden Überblick über die Benutzeroberfläche von Cornerstone. Sie erfahren, wie Sie dank dieser Erweiterung Ihre WordPress Website visuell editieren können.

Transkript

So, und jetzt kommt der spannende Teil, denn jetzt fangen wir mit dem visuellen Editieren der Seiten, bzw. der Inhalte an. Dazu gehe ich mal hier auf unsere “home” und dann sehen wir hier ganz rechts das “Tab” Cornerstone. Cornerstone ist unser visueller Layout Editor. Wir können jetzt hier ganz einfach hin klicken, um damit zu editieren. Wenn man hier oben auf “Visual” oder “Text” klickt, das ist der Standard im Word Press, dann kriegt man hier den Hinweis, dass man gerne hiermit arbeiten kann, aber dass wenn man nachträglich wieder Cornerstone verwendet, die Inhalte wieder überschrieben werden. Deswegen sage ich hier: “nein danke”, ich möchte alles in Zukunft hier mit Cornerstone machen. Deswegen klicke ich hier “edit with Cornerstone” und dann wird Cornerstone gestartet. Auf der linken Seite sehen wir jetzt hier in dem Fall alle unsere Werkzeuge. Auf der rechten Seite sehen wir unsere Seite. Wir sehen also live, wenn wir auf der linken Seite etwas editieren, rechts direkt das Ergebnis. Das Ganze sieht ähnlich aus wie beim Customizer, auf der linken Seite haben wir die ganzen Einstellungsmöglichkeiten, auf der rechten Seite sehen wir direkt das Ergebnis. Auch ähnlich wie im Bildbearbeitungsprogram, wie in anderen Adobe Tools z.b., wo man Werkzeuge hat, in denen man irgendwelche Änderungen vornimmt und dann das Ganze direkt in der Leinwand oder in der Bühne dargestellt bekommt. Werfen wir erstmal einen Blick hier unten auf diese kleinen “Icons”. Wir haben hier ganz links die Möglichkeit, Cornerstone quasi zuzuklappen, so dass wir jetzt die Seite ja im Vollbild betrachten können, in der kompletten Breite des Browsers, und hier können wir es ganz einfach wieder einblenden. Das nächste “Icon” mit dem “home”. Hier können wir ganz leicht wieder zurück aus Cornerstone rausspringen, zu unserem “Dashboard” vom Word Press, oder wir können uns hier unsere Seite im Browser anschauen, d.h. das was wir sehen, wenn wir hier minimieren, ist im Prinzip das Gleiche, wie das, was wir wenn wir hier die Vorschau generieren. Wobei es gibt Unterschiede. Es kann sein, dass man hier etwas angezeigt bekommt im Cornerstone, was in der live Seite etwas davon abweicht. Wir sehen jetzt hier noch den Hinweis zusätzlich, dass noch nicht gespeichert wurde. Aber in dem Moment, wo ich hier unten rechts auf Speichern klicke, kriegen wir diesen Hinweis hier. Es kommen immer irgendwelche andern lustigen Hinweise und wir sehen hier, das Ganze wurde gespeichert. Wenn ich jetzt eine neue Seite betrachten möchte, dann mache ich in dem Fall immer einen Rechtsklick, und sage hier “in einem neuen Tab”. Denn somit verschwinde ich nicht hier von der Seite, sondern ich öffne ein neues “Tab”, kann hier die Änderung mir betrachten, kann das “Tab” wieder schliessen, um wieder zurück zu Cornerstone zu gelangen. Das nächste “Icon”, damit kann man sich Hilfestellungen ein- und ausblenden lassen. Wenn man also noch Anfänger ist, dann kann man hier das “i” aktivieren und man kriegt an diversen Stellen zusätzliche Hinweise. Die nächste Schaltfläche, die schaltet um in den, ja man kann ihn, Outline Modus nennen. Man sieht also diese gesamte Seite, an der wir arbeiten als Boxen. Ja, im Outline Modus, d.h, wir sehen hier verschiede Sektionen, die wir haben. Und dass diese Sektionen wiederum unterteilt sind, in Zeilen, hier row 1 z.b., und dieses wiederum in Spalten, 1/2 “Column” und hier 1/2 “Column”. Und hier wiederum befindet sich dann hier eine “Headline”, dann der “Text”, ein “Button”, und auf der rechten Seite haben wir lediglich einen Platzhalter, eine Linie, eine “Gap”. Parallel sieht man das auch hier unten angezeigt, wir haben ja hier ganz klein jetzt noch unsere Seite und wenn ich hier jetzt diese “Gap”, diese Linie überfahre, dann wird die auch hier unten eingeblendet. Es ist also sehr komfortabel, um die Seite vom Aufbau her zu inspizieren. Ein erneutes Klicken, und wir sind wieder in der normalen Ansicht. Ja, als nächstes ist es natürlich noch wichtig die Seite zu überprüfen auf verschiedenen Endgeräten. Wir haben also die “Desktop” Ansicht, wir haben hier in dem Fall die grössere Ansicht mit einer Breite von 980px-1199px. wir haben hier dann die “Tablet” Ansicht im Querformat, 768px-979px, und dann hier die “Tablet” Ansicht im Hochformat, also in dem Fall “Portrait”, das hier war “Landscape”, und hier haben wir nochmal “Portrait” auf dem smartphone. Ja man kann dann direkt das Ganze hier sehen und testen. Ich wechsle jetzt mal wieder in die normale Ansicht, wie gesagt hier, der letzte “Button” ist einfach zum speichern, jedes Mal irgendein lustiger Hinweis, ein erneutes Klicken und wir blenden den Bereich wieder aus. Ja, und wenn wir jetzt auf unserer Seite sind dann können wir Bereiche überfahren und dann sehen wir auch hier, wie die Bereiche heissen. Also hier hatten wir z.b. unseren linken “Column”, hier unseren rechten und der rechte war gefüllt mit der “Gap”. Hier haben wir den “Text”, hier haben wir den “Button”. Wir können jetzt hingehen und das Layout anpassen. Und zwar haben wir hier die verschiedenen Bereiche. Das ist jetzt hier, in dem Fall unter dem Bereich Layout, unsere erste Sektion, das ist dieser Bereich hier. Wenn ich jetzt mal weiter runter scrolle, dann sehen wir hier den nächsten Bereich, hier, usw. Wir haben also hier das grobe Layout, , die einzelnen Bereiche die wir dann hier rüber steuern können. Wir können sie duplizieren, wir können sie löschen, oder wir können sie verschieben. Wenn ich also z.b. diesen Bereich über dem haben möchte, dann fasse ich den einfach an und verschiebe den. Dann habe ich jetzt die beiden getauscht. Das eine war nur eine Kopie vom Original, deswegen kann ich die Kopie auch einfach löschen indem ich hier auf den Mülleimer klicke und das Ganze bestätige. Man kann so auch noch ganz einfach weitere solcher Sektionen hier einfach hinzufügen. Der nächste Bereich hier sind die Elemente. Wir haben hier eine riesen Auswahl an Elementen, die wir in die Seite einfügen können. Wenn wir z.b. eine Headline haben möchten, vielleicht hier drunter nochmal, dann können wir auch, es ist viel leichter danach zu suchen, hier nach Headline suchen und dann taucht diese ganz oben auf. Und die Headline können wir jetzt einfach per “drag and drop” an die Stelle schieben, wo wir sie haben wollen. Also hier sehen wir z.b die Bereiche, ich kann aber auch nach rechts schieben und hier jetzt unter den “Gap” legen. Hier haben wir jetzt die Überschrift. Das Editieren der Inhalte machen wir direkt ebenfalls hier auf der linken Seite, alles was editiert wird, findet hier auf der linken Seite statt. d.h. wenn ich das editieren möchte, dann kann ich das ganz einfach tun. Und damit sind wir auch schon hier im “Inspector”. Der “Inspector” erscheint, wenn man ein Element angeklickt hat. Dann haben wir den “Inspector” mit dem dazugehörigen Element. Wenn ich also hier jetzt auf “Title” klicke, dann habe ich hier “Title” und zugehörige Eigenschaften. Wie z.b. hier, was für ein “Title” es sein soll. h1, h2, h3. Oder wie der “Title” dargestellt werden soll, vielleicht moechte ich einen h3 haben, den aber als h2 dargestellen, oder umgekehrt. Die Schriftfarbe können wir ändern, usw. Ja, zu guter Letzt haben wir hier oben rechts noch die Einstellungen, oder die “Settings” und hier kann man hingehen und z.b ein eigenes css definieren. D.h. wenn man sich mit css oder Javascript auskennt, kann man hier über einen, ja einen vollwertigen Editor, and der Stelle hingehen und css hinzufügen. Bei “General” haben wir einfach generelle Einstellungen, dass sind Einstellungen, die man auch in Word Press selber hat, wie z.b der Name der Seite, ob die Seite publiziert sein soll oder nicht, ob wir Kommentare erlauben für die Seite oder nicht, auf welches “Theme” oder bzw. auf welches “Template” sich das Ganze hier bezieht, usw. Unter den “General” Settings haben wir die Settings, die sich auf das “X Theme” beziehen. Wir können dann hier z.b. auf den Body eine Klasse geben. Hier kann man die Titel überarbeiten und anpassen. Wir können sagen, dass es eine “1 page” Navigation sein soll, d.h. wir haben eine einzelne Seite, auf der man navigieren kann. Wir können hier das Hintergrundbild tauschen, wir können mehrere Bilder in den Hintergrund legen und die dann überblenden lassen im Hintergrund, usw. Wir haben hier “Responsive Text” über den man definieren kann, wie sich der Text verhalten soll, wenn man das Browser Fenster vergrössert oder verkleinert. Ja und zu guter Letzt haben wir hier einfach nur eine Verlinkung zum “Customizer”, wo man direkt im “Customizer” landet, um dann noch zusätzliche Änderungen durchzuführen.

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!