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

Inspector

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Inspector ermöglicht es Objekte anzupassen. Ist ein Objekt selektiert, besteht über den Inspektor die Möglichkeit, sämtliche Eigenschaften wie z. B. Abstände, Größen und Farben anzupassen.

Transkript

Um nun einzelnen Elemente und deren Eigenschaften anzupassen, verwendet man in Cornerstone den Inspektor. Wie man den verwendet, möchte ich jetzt demonstrieren. Dazu wähle ich jetzt hier mal die Sektion aus. Und dann habe ich hier diese kleine Lupe. Wenn ich auf diese Lupe klicke, dann wechsle ich zum Inspektor das ist diese Lupe hier und da bin ich jetzt in der “Row”, auf die ich gerade geklickt habe, und kann hier jetzt diverse Einstellungen vornehmen. Wenn ich wieder hier auf “Manage Layout” klicke, dann springe ich zurück, hier in mein Layout. Um jetzt hier z.b noch eine weitere Zeile hinzuzufügen. Wir können also ganz schnell zwischen der Zeile und dem Inspektor hin und her wechseln. Das Gleiche passiert übrigens, ob ich jetzt hier hin klicke oder ob ich hier hin klicke, passiert das Gleiche. Ich kann also hier auf Elemente klicken und dann öffnet der Inspektor die entsprechenden Eigenschaften zu dem dazugehörenden Element, d.h., das Ganze ist Kontext sensitiv. So ich bin also jetzt in der “Row”. Und man sieht, die “Row” befindet sich in der “Section” und das wird auch schön ‘gehighlitghted’, wenn ich über die “Section” fahre, sehn wir, die ist ‘gehighlighted.' Wenn ich die “Section” anpassen möchte, dann klick ich einfach jetzt und bin dann in der “Section”. Und kann jetzt hier für den Hintergrund, der hier riesig gross und rot ist, kann ich jetzt z.b. den Hintergrund entfernen, ich kann eine andere Farbe auswählen, ich kann ein anderes Bild auswählen, ich kann an der Stelle ein Video einbetten. Weiter unten haben wir noch weitere Eigenschaften. Wir können z.b. sagen, dass es ein “Pattern” sein soll, das macht Sinn bei Fotos, dass diese dann einfach wiederholt werden, gekachelt. Wir können z.b. ein Foto in einer “Parallax” Ansicht zeigen, sodass beim Scrollen der Hintergrund stehenbleibt, nur ganz leicht sich mitbewegt, das hat einen netten Effekt. Wir können über “Margin” und “Padding” die Abstände definieren. Aussenabstände über “Margin”, Innenabstände über “Padding”. Wir können dem Ganzen einen Rahmen geben, wir können sagen, wie Texte ausgerichtet sein sollen, usw. Gehen wir nun eins tiefer in die “Row”, indem ich jetzt hier einfach die “Row” überfahre und dann klicke . Dann sehen wir, wir sind jetzt in der “Row, in der “Section”. Wir könnten jetzt hier die “Row” löschen, was ich natürlich nicht vorhabe, wir können hier festlegen, ob diese “Column”, also diese Spalte, in einem Container liegen soll oder nicht. Wenn ich das deaktiviere, dann gehen die Elemente bis zum Rand, sowohl der Text hier bis zum Ende, als auch diese Linie. Wenn ich das deaktiviere, dann haben wir quasi eine Box rund um unsere “Row”. Wir können hier die “Margins” deaktivieren, d.h., die Abstände, die Aussenabstände, wenn wir die deaktivieren, dann kleben die Elemente direkt aufeinander. Das sieht jetzt auch nicht unbedingt schön aus. Wir können die Hintergrundfarbe ändern. Wenn ich jetzt hierhin klicke, so, dann kann ich sagen, ich möchte hier einen anderen Farbton haben. Das ist auch ganz nett, um zu sehen, wie genau die “Row”, diese Zeile hier aussieht, wie gross die ist, welche Elemente sich drin befinden, usw. Im Endeffekt will ich das Ganze natürlich wieder transparent machen. So, “Margin” ist wie gesagt der Aussenabstand. Den können wir halt auch festlegen für oben und für unten. Wenn ich hier z.b. den Wert erhöhe, ich sage jetzt hier mal 20, dann kriegen wir oben einen Abstand von 20 dazu. Dieser Abstand ist jetzt grösser geworden. Ich werde das mal wieder rückgängig machen. Wenn wir das Schloss hier aktivieren, und wir geben jetzt 20 ein für oben oder für unten, dann ergänzen sich 20 Pixel oben und unten. Das Gleiche gilt für's “Padding”, also der Innenabstand. Wenn ich z.b. hier den Abstand innendrinnen vergrössern möchte, dann kann ich einfach sagen, z.b. “left” oder “right”, ich sage jetzt mal “right”, 20…so… und “left” 20. Und dann haben wir hier, da sieht man’s, die 20 Pixel dazu bekommen, als auch hier an den Seiten. Wir können noch eine Rahmen hinzufügen, z.b. “solid”, also einen durchgezogenen Rand. Wir können für den Rand eine Farbe definieren, und auch hier wie stark der Rand sein soll, das ist auch schon standardmässig abgeschlossen, dass alle Ränder gleich sind. Und wenn ich hier die Werte erhöhe, dann sehen wir auch direkt live hier das Ergebnis. Ich möchte aber gar keine Outline haben, deswegen sage ich hier “none”. Ja und dann haben wir hier noch den Text. Vielleicht wollen wir den zentriert haben, dann können wir das dementsprechend ändern. So und hier haben wir “hide based on screen width”’ d.h. davon abhängig wie gross der Monitor ist, wie gross der Bildschirm ist oder das Endgerät, soll das Element gezeigt werden oder nicht. Z.B. könnten wir sagen, dass wir auf dem smartphone diesen Bereich nicht sehen wollen. Dann klicke ich auf smartphone, da hat sich jetzt hier erstmal nichts geändert, hier würde sich was ändern, wenn ich hier desktop auswähle, dann wird der Bereich ausgeblendet, also “hide” = versteckt. So, wenn wir jetzt die Ansicht ändern indem wir hier hinklicken und sagen: ”Zeige es mir auf dem smartphone”, dann ist der rote Bereich leer, da wir den ja in dem Fall versteckt haben. Ich klicke erneut, um es wieder darzustellen. So, das waren jetzt die Eigenschaften von den Containern, also von der “Section”, von der “Row”. Wir können aber natürlich auch die einzelnen Elemente anfassen, wie z.b. hier den “Titel”. Wenn ich auf den “Titel” klicke, dann kann ich den hier editieren. Ich sehe auch noch weitere Eigenschaften, wie z.b. das “Heading Level”, also wie gross soll die Überschrift sein. Das ist für die Suchmaschinen Optimierung interessant. h1 ist die Hauptüberschrift, die sollte es eigentlich nur einmal geben. h2 sind sehr grosse Überschriften, wie aktuell..diese hier und die können ruhig öfter vorkommen, h3 dann ebenfalls ab und zu und je kleiner es wird, desto seltener kommt diese Überschrift überhaupt noch vor, vielleicht noch als Bildunterschrift oder ähnliches. Und dann kann man noch sagen “looks like”, also ich habe zwar ein h2 erstellt, aber ich möchte, dass es wie ein h4 z.b. aussieht. Dann wird es so dargestellt, wie das h4, h3, h2 usw. per css definiert wurde. Jetzt sehen wir hier keinen grossen Unterschied, weil im css die Grösse so vorgegeben ist, dass das h2 dieser Grösse entspricht. Ja, die Schriftfarbe können wir ändern. Auch hier wieder die Ausrichtung und hier unten wurde noch das Ganze mit css ergänzt. In dem Fall mit einem “responsiven h”, das ist in dem Fall für die responsive Headline. Und wir sehen das Ganze wenn ich das Fenster vergrösser oder verkleiner. Wenn ich hingehe und das Fenster verkleinere, dann sehen wir, dass auch die Überschrift kleiner wird, weil diese diese Eigenschaft hat für “h”, “für resp-h” also für einen responsiven Hintergrund. Ja schauen wir uns noch die nächste Textbox an. Ich klicke dafür in die Textbox, dieses jetzt ähnlich wie der Titel. Wir haben nur hier viel mehr Möglichkeiten, mit Text zu arbeiten. Und hier unterteilt sich das nach reinem Text, in dem Fall auch mit hartem L Text oder visuell. In der visuellen Ansicht haben wir hier natürlich das Ganze noch etwas schicker oder wir können den Text markieren und sagen, wir wollen ihn “fett” haben, z.b. dann sehen wir dann hier das Wort “fett” oder wir wollen das “italic” haben oder wir wollen eine Auflistung haben oder die Farbe ändern, oder was auch immer. In der Textansicht wurde jetzt das “strong” tag ergänzt, weil ich das Ganze ja auf “fett” gesetzt hatte. Schauen wir uns noch weitere Eigenschaften an. Ja, hier haben wir eigentlich nur noch das “alignment”, also, linksbündig, rechtsbündig, oder zentriert. Und hier wurde auch noch das Ganze mit einem Stil ergänzt. Einem “margin”, also einem Abstand, von 10 Pixeln und einer Farbe von … da müssten wir mal rüber gucken…weiss. Na, schauen wir uns vielleicht noch zu guter Letzt das letzte Element hier an, den “button”. Hier sehen wir jetzt den Text. So zum Beispiel. Wir können hier den Link festlegen, wohin der Link führen soll, wenn man drauf klickt. Wir können dem Link einen Titel geben. Und wir können hier festlegen, ob der Link vielleicht in einem neuen Tab geöffnet werden soll, in einem neuen Fenster. Wir haben hier die Art, also momentan ist noch “transparent” gesetzt, wir haben aber auch “flat”, d.h. in dem Fall ist das dann durchgezogen. Hier haben wir “real”, d.h. hier sieht das Ganze mehr nach “button” aus. Und wir haben hier die “Global Settings”, das ist dann in dem Fall der Standard. So, das Ganze sieht ein bisschen seltsam aus, weil hier per css das Ganze schon überschrieben wird. Schauen wir uns als nächstes Mal, vielleicht, die Darstellung an, als “rounded” , also mit leicht abgerundeten Kanten, als “square”, dann sind die Kanten wirklich eckig, oder als “Pill”, dann sieht das Ganze aus, ja wie eine Pille. Wir können noch die Grösse definieren. Hier haben wir von “Mini” bis “Jumbo”. Wenn ich jetzt hier mal auf “Mini” gehe, dann haben wir einen ganz kleinen “button” und so kann man hingehen und die Grösse des “buttons” auch noch beeinflussen. Wenn der “button” als Block dargestellt werden soll, dann kann man das aktivieren, und der nimmt die völlige Breite ein. Hier gibt’s noch “Marketing Circle”, den finde ich irgendwie hässlich. Wir können “icons” aktivieren, das ist eine ganz nette Sache, weil dann erhält der “button” ein “icon” und dieses “icon”, das kann man halt auch hier festlegen. Wie wir sehen, haben wir hier eine riesen Auswahl von “icons”, die wir an der Stelle einfügen können. Also vielleicht “chevron-right”. Wir können hier auch sagen, “before”, “after” und “icon only” dann wird halt nur das “icon” angezeigt. Um ein “icon” zu finden, kann man natürlich auch hier eine Textsuche aktivieren. Und wir haben hier weiter unten noch die Möglichkeit, eine Infobox zu aktivieren, d.h. als “Popover” z.b. Und dann kann man sagen, wo die erscheinen soll: drüber, rechts, unten,links. Wir können sagen, wann das erscheinen soll. Beim “Click”, bei “Focus”, also in dem Moment, wo es quasi in den Fokus kommt, oder bei “Hover”, in der Regel macht man es bei “Hover”. Hier kann man einen Infotext eingeben, wie z.b. “Helloooo!!” So, und wenn wir jetzt hingehen, und mit der Maus hier das überfahren, dann sehen wir hier unser “Popover”. Oder wir können es auch ändern, in einen “Tooltip”. Der Text ist gleichgeblieben, genau, wenn ich jetzt mitrüberfahre, dann haben wir hier den “Tooltip”. Wir können auch festlegen, dass dieser vielleicht unten erscheinen soll. Ja, wie wir sehen, haben wir hier sehr sehr viele Optionen, was das Anpassen der Inhalte anbelangt. Wir können also jedes beliebige Element selektieren und dann von den Eigenschaften anpassen, wie wir sehen, haben wir hier sehr sehr viele Optionen zur Auswahl.

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!