WordPress für Designer: Themes und Layout-Werkzeuge

Zusätzliche Templates

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Drittanbieter bieten eine große Auswahl zusätzlicher Vorlagen für Cornerstone an. Sehen Sie hier eine Auswahl und wie sich diese Templates anwenden lassen.

Transkript

In Cornerstone gibt es ja die Möglichkeit, mit Vorlagen oder Templates für Blöcke und für Seiten zu arbeiten. Das möchte ich gerade noch mal demonstrieren und es gibt die Möglichkeit, diese noch zu erweitern. Im Netz gibt es diverse Resourcen, die einem die Möglichkeit bieten, zusätzliche Blöcke oder Seiten herunterzuladen und zu verwenden. Dazu erzeuge ich mir jetzt hier erst mal eine Seite, womit wir jetzt ein bisschen spielen können und diese nenne ich jetzt einfach mal Templates. So, und dann wechsle ich hier natürlich zu Cornerstone und ich wähle hier als Template dieses hier aus. Ich möchte keinen Container und einen Header und einen Footer haben. Ich seichere das Ganze hier oben. Dann gehe ich hier hin und sage, EDIT WITH CORNERSTONE. Daraufhin öffnet sich Cornerstone. Die Seite ist natürlich noch leer und wir können jetzt hingehen hier über Templates entweder ein Template zu speichern, gut, wir haben ja hier noch nichts, wir können hier Templates hinzufügen und zwar für Seiten und für Blöcke. Und wir haben auch die Möglichkeit, gespeicherte Seiten und Blöcke hier hochzuladen. Dazu klicken wir hier auf die Schaltfläche, dann öffnet sich dieser Bereich hier und hier kann ich jetzt eine Datei auswählen, die dem Layout hinzugefügt werden soll. In unserm Fall möchte ich hier jetzt mit fertigen Blöcken arbeiten, die uns im Netzt zur Verfügung stehen und zwar habe ich hier eine Seite gefunden, die nennt sich 10xlayouts.com und hier gibt es den Bereich Blocks und hier haben wir Blocks oder Blöcke Templates für Cornerstone. Wenn wir jetzt hier runter scrollen, dann sehen wir hier die verschiedenen Blöcke, die uns hier zur Verfügung stehen, die wir auch hier nach verschiedenen Bereichen kategorisieren können. Zum Beispiel für den Bereich Team gibt es nur drei. Wenn ich hier jetzt auswähle, dann sehe ich hier drei Blöcke für Team. Wir können also hier hingehen und jetzt runter scrollen und uns die Blöcke anschauen. Hier gibt es einen Block für Kontakt zum Beispiel, oben haben wir Google Maps, auf der linken Seite Kontaktinformationen, auf der rechten Seite das Kontaktformular. Wir haben hier ja, das Team, wir haben hier solche Störer für zwischendurch mit Informationen und auch mit Buttons. Wenn man auf das Plus klickt, dann sieht man sie in groß. Wir können auch so uns jetzt hier durch navigieren und uns die einzelnen Bereiche anschauen. Natürlich kann man solche Blöcke auch selber erstellen in Cornerstone, indem man entsprechende Columns und Rows anlegt und die Elemente reinzieht und diese dann speichert. Wenn einem aber vielleicht ein bisschen die Inspiration fehlt oder man es sich leicht machen möchte, dann kann man hier auf solche Blöcke zurückgreifen. Wir sehen, es sind sehr, sehr viele allerdings ist das Ganze nicht kostenlos, sondern es kostet $49,00. $49.00 für 50 und mehr Cornerstone Blöcke, die halt in Zukunft auch aktualisiert werden. Finde ich, ist ein fairer Preis. Ja, und ich möchte jetzt noch zeigen, wie man diese Blöcke verwenden kann. Es gibt übrigens auch hier unter Templates, Templates für ganze Seiten. Hier haben wir also direkt ganze Seiten, die wir hier nehmen können und dann beliebig anpassen können. Allerdings steht hier oben seit Kurzem, dass diese Templates aktuell nicht verfügbar sind. Ich denke mal, dass sie in Zukunft aber wieder hier abrufbar sind. Gut, also wir kümmern uns jetzt um die Blöcke und zwar wollte ich jetzt hier einen Block auswählen. Also gehe ich auf Datei auswählen. So, und ich habe hier einen Ordner Block Templates. Das ist die entzückte Datei, die ich hier bei 10xlayouts gekauft habe. Und hier unterteiltet sich das Ganze jetzt in verschiedene Ordner. Ich nehme jetzt einfach mal, ich gehe mal hier in content-blocks rein und wir sehen hier dann eine Vorschau auf die Blöcke, die wir hier zur Auswahl haben. Und wenn uns hier ein Block gefällt, mal gucken, welchen wir nehmen, den finde ich eigentlich ganz gut. Wenn uns hier ein Block gefällt, dann können wir einfach gucken, wie heißt der? Content-block-10. Das heißt, die CSL-Datei dazu, die müssen wir jetzt auswählen und können hier öffnen. Dann sagen wir hier, Add to Layout. Und dann fragt er, ob wir die Seite verwenden wollen oder das Element als Block. Hier sollte man immer Block auswählen, denn wir haben ja auch Blöcke runtergeladen. Außerdem kann man bei Blöcken noch weitere Blöcke hinzufügen. Bei Pages ist es so, dass vorhandene Elemente in dem Fall überschrieben werden. So, wir kriegen also die Info, dass das wunderbar geklappt hat und wir sehen hier jetzt den Block, den wir hinzugefügt haben. Natürlich lässt sich dieser noch editieren. Wir haben halt die verschiedenen Bereiche, die wir hier auswählen können, wir können weitere Blöcke hinzufügen, wir können die Blöcke umsortieren usw., wie man das von Cornerstone gewohnt ist. Hier können wir die Farben ändern, Abstände, Animation usw. Manche Elemente, die man auswählt, haben übrigens bereits hier unten schon in der Klasse eine komische Buchstabenkombination. Wir sehen hier mtn mbs. Was bedeutet das? MTN zum Beispiel, das M steht in dem Fall für Margin, also der Außenabstand. Wenn hier ein P stünde, dann handelt es sich um Padding, den Innenabstand und dann kommt als nächstes das T, das heißt Top, also wir haben Top, Bottom, Left und Right und dann kommt das N, das steht für None. Wir haben also oben keinen Abstand. Und MBS heißt in dem Fall, dass wir für Bottom einen schmalen Abstand haben. Das heißt, für unten kann ich jetzt den Abstand verändern, indem ich hier zum Beispiel ein N mache für None, sehen wir direkt, wie sich der Abstand hier ändert. Oder wenn ich hier statt dem N ein L mache, dann ist der Abstand riesig groß. Wir haben also L,M, S und N für None. Das heißt, wir haben vorgefertigte Abstände und können diese hier nach Belieben beeinflussen. Wir können natürlich auch Elementen, die noch keinen Abstand haben, welchen geben. Wenn ich also hier auf den Videoplayer gehe, kann ich hier runter scrollen und bei der Klasse könnte ich zum Beispiel sagen, Margin, Top und dann S für Small, um oben einen Abstand hin zu machen oder L für Large und dann sehen wir hier jetzt den Abstand. So, vielleicht fügen wir uns zuletzt jetzt noch einen weiteren Block hinzu. Ich gehe einfach hier wieder auf die Templates und wähle mir hier jetzt wieder eine Datei aus. In dem Fall jetzt zum Beispiel die testimonial-blocks. Und wir können auch hier ganz schön sehen, wie die aussehen. Es gibt noch etwas aufwändigeres. Ja, vielleicht diese, finde ich ganz nett. Das ist in dem Fall Version 4 oder Block 4. So, das wählen wir aus und fügen das hier dem Layout hinzu und zwar als Block. So, das Ganze hat funktioniert, wie uns Cornerstone hier als Feedback gibt und hier sehen wir das Ergebnis. Wir können natürlich jetzt hier mal auf die Section gehen und zum Beispiel mal der Section eine andere Hintergrundfarbe geben, so dass sie sich ein bisschen absetzt von dem Rest. So, vielleicht irgendwie sowas Hellblaues ok. Ja, und diese können jetzt ganz einfach, wie gewohnt, anpassen. Wir können auf die Bilder klicken, um hier die Bilder auszutauschen. Wir können hier in die Texte klicken, um die Texte zu bearbeiten, auszurichten usw. und wir können hier unten mit den Klassen arbeiten, um Elemente, ja, wie in dem Fall, auszurichten zentriert oder um über die Abstände Margin, Padding, oben, unten, links, rechts und über Small, Medium, Large und None die Abstände und Einzüge zueinander 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!