[Musik spielt]
Mit dem neuen Shortcode
[inner_alert] können Hinweisboxen ineinander gestapelt werden.
Schauen wir uns also an, wie man diesen Shortcode einsetzen kann.
Erst einmal braucht man natürlich ein Hauptelement, in das
man dann die Unterelemente setzen kann.
Also eine Hinweisbox, einen klassischen Alert.
Das kann jetzt erstmal so ein Alert sein, wo einfach noch gar
nichts dran gemacht wurde.
Ich zeig das einmal in der Vorschau.
Das heißt, dann hat man hier diese blaue Box, aber es steht eben noch nichts drin.
Man kann aber natürlich das Ganze auch gestalten mithilfe von den Attributen,
die einem für diese Alerts auch, sage ich mal, zur Verfügung stehen.
Zum Beispiel kann man hier dann die Rahmenfarbe (border_color) setzen
und sagen, dass das jetzt hier die FAU-Farbe ist,
die #04316A.
Und man kann auch sagen, innen drin
soll das jetzt nicht mehr hellblau sein, sondern eben zum Beispiel weiß.
Und wenn ich das jetzt in der Vorschau mir anschaue,
dann kann ich hier schon sehen, jetzt habe ich hier einen Rahmen
und in dem Rahmen habe ich eine weiße Hintergrundfarbe.
Natürlich kann man das anhand dieser zwei Parameter, also hier
der Farbe und einmal der Randfarbe der Rahmen Farbe
ändern und anpassen.
Jetzt könnte es sein, dass man hier innen eine Kapitelüberschrift hat.
Also ich schreibe hier einfach mal Kapitelüberschrift
und jetzt habe ich aber für dieses Kapitel
vielleicht verschiedene Spalten
einmal und verschiedene
Boxen, die da auch vielleicht wieder mit reinspielen können.
Das heißt erst mal in der Vorschau Wie schaut es aus?
Ich habe jetzt die Überschrift hier festgelegt.
Ich befinde mich übrigens zur Erinnerung im Text Modus,
damit ich hier gut mit diesen Shortcuts arbeiten kann.
Wenn ich jetzt
hier erst mal
einen weiteren
Shortcodet einsetzen möchte, dann kann es natürlich sein, dass ich jetzt sage,
ich möchte hier vielleicht mehrspaltige, neue Inhalte setzen.
Das heißt, ich kann jetzt sagen, ich will jetzt hier eine Grid, also
mehrspaltigen Inhalt kreieren.
Und zwar mache ich das mit diesem Columns-Shortcode [columns].
Und hier sage ich jetzt, ich möchte drei Spalten haben [columns number=”3”].
Das heißt, ich habe jetzt hier mit dem Attribut
number=”3” also drei Spalten nebeneinander.
Jetzt definiere ich darin erst mal die erste Spalte.
Das heißt, ich habe jetzt hier eine Column mit der Spannweite
sage ich immer, da kann man sich das sehr gut merken: Eins span=“1”.
Wenn ich das jetzt erst mal hier fertig
schreibe, das heißt, ich mache die beiden Shortcodes natürlich auch wieder zu
und schreibe es hier vielleicht mal zur Erinnerung Spalte eins hinein,
dann kann ich sehen Gut, jetzt steht hier halt Spalte eins,
aber da ist noch nicht viel Inhalt dahinter.
Jetzt kann es natürlich sein,
dass ich sage, diese erste Spalte, die soll ich, die möchte ich hervorheben.
Und das kann ich natürlich wieder mit einem Shortcode machen.
Das heißt, sobald ich jetzt hier diesen neuen Shortcode
schreibe, also [inner_alert], und dem vielleicht
sogar gleich eine Farbe festlege, wie zum Beispiel die FAU-Farbe,
die wir auch oben für die Randfarbe verwendet haben
und vielleicht auch sage, da das eben eine dunkle Farbe ist,
soll die Schriftfarbe dann eben weiß sein und nicht schwarz.
Dann erhalte ich jetzt hier in meiner ersten Spalte erst mal wieder
eine Box.
Das heißt,
man sieht ja jetzt schon, man hat diese Columns,
man hat in diesen Columns erst mal diesen inneren Alert,
den man hier gesetzt hat.
Jetzt fragen Sie sich vielleicht Ja gut, aber
warum ist die Spalte jetzt nicht eben nur 1/3 breit?
Und das liegt einfach daran, dass wir noch
keine zweite Spalte definiert haben, die die anderen Größen verwendet.
Das mache ich jetzt.
Das heißt, ich kann jetzt hier mal schreiben [column span=”2”]
und macht das hier einmal zu [/column].
Und jetzt sollte idealerweise dann auch die Box
nur noch 1/3 breit sein.
Jetzt sieht man,
man hat jetzt hier quasi eine Spalte mit diesem farbigen Hintergrund
und dann nebendran hat man die andere Spalte, die den Rest der Seite benutzt.
Also ich kann das vielleicht auch hier noch mal schreiben
in diesem [column span=”2”], das ist die Spalte zwei,
vielleicht kann man das auch mal
ein bisschen auftrennen, dann sehen Sie das vielleicht besser.
Das heißt, das ist eine Spalte,
das ist eine Spalte.
Und wenn ich jetzt hier reinschreibe, Spalte eins,
also das ist die erste Spalte hier in diesem Shortcode,
das ist die zweite Spalte.
Wenn ich mir das jetzt mal anschaue, dann kann ich jetzt schon sehen.
Gut, ich habe jetzt hier
die Spalte eins, die in diesem Alert sitzt und die Spalte zwei,
und sobald man das eben
gemacht hat, kann man eine ganze Reihe von interessanten Sachen machen,
sage ich mal,
zum Beispiel kann man jetzt sagen: Gut, ich habe jetzt hier
meine erste Spalte, da will man vielleicht ein Bild reinsetzen.
Das kann man natürlich machen.
Man öffnet die
Mediathek über Dateien hinzufügen und kann sich dann von den vielen Bildern,
die man vielleicht hat, eins heraussuchen.
Das heißt, sobald man hier dann ein Bild gefunden hat
und das in die Seite einfügt, sieht man das dann auch in der Vorschau.
Vielleicht noch mal als Info ich füge das Ganze hier über Dateien hinzufügen
so ein.
Also wenn es ein dekoratives Element ist, das ich hier setze,
Ausrichtung keine oder man kann es auch auf zentriert setzen,
dann Link brauche ich keinen.
Und Größe setze ich auf vollständige Größe.
Und der Grund dafür ist, dass ich das ganze
ja durch die Spaltenbreite schon so ein bisschen begrenze.
Wenn ich setze Ausrichtung keine, dann ist das ganze wie ein Text-Element.
Das heißt, wenn der Text davor kommt oder danach kommt,
dann wird er auf der gleichen Spalte sein wie dieses Bild.
Ich kann natürlich auch sagen, ich zentriert das Ganze.
Das heißt, wenn ich jetzt
hier mal ein Bild gesetzt habe und mir das in der Vorschau anschaue,
dann sehe ich, jetzt habe ich hier das Bild innerhalb von der Box.
Das ist jetzt auch schon ein ganz interessantes Ergebnis.
Beziehungsweise eine schöne Gestaltungsmöglichkeit,
die man jetzt natürlich weiter erweitern kann.
Das heißt, nach diesem Bild
könnte ich jetzt zum Beispiel hergehen und einen Abstand setzen.
Ich kann hier einen Divider-Shortcode benutzen
und danach eine weitere Überschrift, zum Beispiel Forschungsthema eins
Dieses Bild, was hier gesetzt
ist, hat übrigens die gleichen Abmessungen wie das Banner-Bild einer Webseite,
das heißt wie diese Slider-Bilder, die man auf der Startseite sonst setzt.
Man kann natürlich auch den Abstand
entfernen, wenn einem das ein bisschen zu viel Abstand ist.
Mir passt das jetzt gerade noch nicht ganz.
Jetzt schaut es schon ein bisschen besser aus.
So viel also zum Bild,
dass jetzt in einem Alert sitzt, zusammen mit einer Überschrift.
Man kann jetzt natürlich hergehen und sagen Gut, jetzt habe ich hier
schon mal das Bild, aber ich habe natürlich vielleicht auch noch
weitere Texte, die dann daneben dargestellt werden sollen.
Da könnte ich jetzt zum Beispiel hergehen und sagen, in Spalte zwei,
da habe ich jetzt einen Fließtext,
also füge ich erst mal meinen Fließtext ein, der hat vielleicht unterschiedliche
Überschriften, zum Beispiel hier hat er vielleicht eine H3.
Und auch hier
unten hat er vielleicht wieder eine H3, der Text.
Und wenn ich mir
das in der Vorschau anschaue,
dann ist es vielleicht erst mal ein bisschen langweilig.
Oder vielleicht ist mir das Ganze
auch ein bisschen zu breit, aber man sieht schon selbst,
so hat man ein interessantes Layout schon erstellt
und das Tolle daran ist, ich zeige das jetzt erst mal,
man kann das Ganze,
das ist jetzt wie ein Modul, kann man sich beliebig oft wiederholen.
Das heißt,
ich habe jetzt hier natürlich einmal meine Spalten, die ich erstellt habe,
die kopiere ich mir einfach über Steuerung + C oder Rechtsklick kopieren.
Und wenn ich jetzt hier unten drunter erstmal vielleicht einen Abstand setze,
also einen Divider-Shortcode und danach einfach wieder
das Ganze Einfüge mit Rechtsklick einfügen oder Steuerung + V
Dann erhalte ich jetzt hier natürlich
schon ein weiteres Modul, nenne ich das jetzt mal,
und zwar stapelt sich das einfach unten drunter.
Das heißt, jetzt kann ich schon sehen.
Okay, jetzt ist hier wieder mein Text.
Hier die Informationen zur Forschung.
Und so kann man natürlich ganz interessante Ergebnisse erzielen.
Das heißt, ich kann jetzt hier hergehen und mir das anschauen,
wieder schauen, wo fängt meine Spalte an, dann sehe ich hier dieses Columns.
Und dann weiß ich, dass ist die erste Spalte, das ist die zweite Spalte.
Und jetzt kann ich hier hergehen, den Text ändern, sagen
das ist Forschungsthema zwei Ich kann diesen HTML
Bild-Tag hier entfernen und einfach über Dateien hinzufügen
wieder eine neue Datei auswählen, ein neues Bild auswählen,
das einfügen und das kann ich auch theoretisch einfach noch mal wiederholen.
Kopiere hier wieder bis hoch zum Divider und drücke Strg + C,
füge es unten an und kann dann hier wieder wiederholen.
Forschungsthema drei ist es dieses Mal.
Und beim Bild gehe ich vielleicht wieder her,
klicke Dateien hinzufügen und wähle mir wieder ein anderes Bild aus.
Und wenn ich mir das jetzt mal anschaue in der Vorschau, kann ich sehen,
dass man mit so kleinen Tricks schon ein wirklich interessantes
Layout schaffen kann auf einer Seite, die vielleicht jetzt kein
keine Navigation links und rechts hat.
Jetzt kann man
natürlich sagen Gut, das ist vielleicht schon ganz nett,
aber diese Texte hier rechts,
die sind jetzt vielleicht mit dem Layout, also mit der normalen
Inhaltsseite ohne Navigation, links und rechts viel zu breit.
Und das kann man auch anpassen.
Das heißt, man kann natürlich wieder hergehen
und jetzt zum Beispiel sagen, hier ist mein Text.
In der Spalte zwei ist immer der Text
und der soll vielleicht in einem anderen Shortcode verpackt
werden, zum Beispiel im Shortcode [text-columns].
Dieser Shortcode ist auch relativ neu und der sorgt dafür, Fließtext
eben ein bisschen eleganter darzustellen sage ich mal.
Wenn man jetzt diesen Shortcode hier nämlich verbaut, sage ich mal und mal
in der Vorschau schaut, dann sieht man, dass man jetzt einfach noch mal
für den Fließtext zwei Spalten erstellt hat.
Wenn ich diesen Shortcode setze, dann sehe ich jetzt erst mal keine Änderung.
Also ich habe mir ja gerade ein bisschen den Kopf
zerbrochen, warum funktioniert dieser Shortcode nicht?
Aber er funktioniert.
Man muss nur das Browserfenster breiter ziehen.
Das heißt, dieser Shortcode – man sieht schon –
er passt sich sehr gut an die Bildschirmbreite an
und je nachdem, wie breit das Browserfenster
ist, kann man eben sehen,
dass man das entweder zweispaltig, dreispaltig, vierspaltig sehen wird
und das ist ziemlich praktisch für Fließtext.
Das heißt, man hat jetzt gesehen, oder
ich hoffe,
Sie haben jetzt ein bisschen gesehen,
was man so mit diesem [inner_alert] machen kann.
Das einzige, was jetzt eine Alert hier gemacht hat
in dem Beispiel, ist, dass man eben um diese Boxen, um diese
vielleicht Informationstafeln einen weiteren Rahmen setzen konnte.
Und durch diesen Rahmen macht das Ganze einen, sag ich mal,
abgeschlossenen Eindruck.
Das heißt, das ist die Möglichkeit, um einfach
eines der Design-Prinzipien zu nutzen, um seinen Inhalt zusammenzuschließen
und dann vielleicht noch mal mit Farbakzenten hervorzuheben.
Ich finde vor allem die Farbeakzente für Überschriften wie hier.
Die sind vor allem bei so netten Themen wie Forschungsthemen
natürlich eine Möglichkeit, um das Ganze einfach noch mal in Szene zu setzen,
da ein bisschen an die Leser, da ein bisschen Akzente zu schaffen.
Sie können hier bei diesen Bildern Ihre ganz eigenen Bilder verwenden.
Das muss kein Banner Bild sein, das kann genauso gut ein hochkant bild sein etc..
Das heißt
probieren Sie vielleicht einfach mal ein paar Dinge aus.
Ich sage immer eine Seite, die besteht vor allem
aus ihrem Text, aus den Überschriften und dem Bild.
Und alles andere folgt.
Das heißt,
wenn Sie ein gutes Bild haben, sei es jetzt eine mikroskopische Aufnahme
oder ein Bild von einem Projekt, das Sie in Ihrer Forschungsgruppe gemacht haben,
dann verwenden Sie es.
Schneiden Sie es einfach mal in ein paar interessante Formen zu oder
schneiden Sie es etwas zu und dann versuchen Sie es doch einfach
in einer Box zum Beispiel einzufügen.
So kann man wirklich ganz interessante Kapiteltrenner schaffen,
wie man das jetzt hier sieht.
[Musik spielt]