[Musik spielt]
Willkommen zum Tipp der Woche.
Diese Woche geht es um Infokarten und wie man mit Icons
solche Karten erstellen kann, zum Beispiel für die Startseite.
Bevor es aber mit dem eigentlichen Video losgeht,
erzähle ich noch kurz etwas über die neuen individuellen Sprechstunden.
Ab sofort
haben Sie nämlich die Möglichkeit, eine individuelle Sprechstunde zu buchen.
Das heißt,
Sie können einen Termin vereinbaren, bei dem Sie dann über Zoom einfach
Ihre Fragen zur Umsetzung und zur Bedienung auf dem CMS loswerden können.
Sie können aber auch allgemeine Fragen zu unserem CMS,
zu unseren Plugins und zu den Themes stellen.
Ansonsten geht es jetzt mit dem eigentlichen Tipp der Woche los.
Ich beginne auf einer leeren Inhaltsseite und verwende das
Seiten-Template Inhaltseite mit Navigation.
Hierfür kann ich
unter Seiten-Attribute unter Template auf Inhaltsseite
mit Navi wechseln.
Im Anschluss
besitzt meine Inhaltsseite auf der linken Seite eine Navigationsleiste.
Hier habe ich die Möglichkeit, andere Überseiten anzugeben,
die ich über das Eltern-Bedienfeld einstellen kann.
Um jetzt allerdings mit dem Inhalt zu beginnen, fange ich an
zuallererst eine Überschrift in meinem visuellen Editor zu hinterlegen.
Ich möchte gerne über den Infoboxen, also über den Icon-Boxen,
eine Überschrift haben, die das Thema allgemein kurz anreißt.
Das heißt, ich schreibe zum Beispiel: “In drei Schritten
zur eigenen Webseite
an der FAU”.
Wenn ich diesen Absatz jetzt markiere und hier oben
einfach auf Überschrift 2 wechsle, habe ich schon eine Überschrift.
Ich kann das Ganze in der Vorschau betrachten und werde dann sehen.
Gut, ich habe eine Überschrift.
Jetzt fehlen nur noch die Icon-Boxen die ich erstellen möchte.
Ich füge also einen Umbruch
mit der Enter-Taste ein und beginne jetzt einen Shortcode zu schreiben.
Hierfür fange ich mit der allgemeinen Icon-Box erst einmal an.
Das heißt, in einem ersten Schritt überlege ich mir, aus
welchen Elementen besteht diese Icon-Box, die ich anlegen möchte?
Ich hätte gerne eine Zahl oder ein Icon, das zu dieser Box gehört.
Eine Überschrift, eventuell sogar einen Text und ein Button,
der den Nutzer sagt, wo er eben weitere Informationen finden kann.
Das heißt, ich beginne im Allgemeinen erst einmal mit der Box selbst.
Hier behelfe ich mir mit einem sogenannten
Alert-Shortcode, also einer klassischen Infobox.
Wenn ich also einfach einen Alert-Shortcode hier einfüge
und das Ganze im Vorschaumodus mir einmal anschaue, sehe ich schon.
Ich habe eine blaue aber leere Box.
Jetzt möchte ich allerdings keine blaue leere Box, sondern
ich möchte dem Ganzen auch etwas Ausdruck verleihen.
Das heißt,
ich könnte jetzt ein Attribut vergeben, zum Beispiel eine Hintergrundfarbe.
In meinem Fall ist das die Hintergrundfarbe weiß.
Deshalb gebe ich den Hex-Code für weiß ein
und im
Anschluss möchte ich gerne eine Rahmenfarbe wählen.
Das heißt ich vergebe zusätzlich das Attribut border color.
Hier könnte ich zum Beispiel das klassische Blau wählen,
das heißt das wäre der Hex-Code #04316A.
Wenn ich mir das jetzt einmal in der Vorschau anschaue, sehe ich schon,
dass ich jetzt eine Box habe, die einen dünnen blauen Rahmen besitzt.
Da ich allerdings gerade das NatFak-Grün auf dem Theme sehe,
möchte ich auch, dass meine Box die gleiche Farbe besitzt.
Hier sehen Sie die Übersicht über alle verfügbaren Farben.
Sie sehen, dass das Grün hier
mit der Farbe #7BB725 angegeben wurde.
Das heißt, ich kann auch für meinen Shortcode die Farbe #7BB725
vergeben.
Wenn ich das Ganze aktualisiere, sehe ich auch, dass meine Box
jetzt einen hellgrünen Rahmen besitzt, wie auch das Theme.
Um meine Box jetzt auch mit einem Icon zu versehen,
muss ich natürlich erst mal ein Icon auswählen.
Hierfür gehe ich zuerst auf die Seite von Font-Awesome
Sie finden den Link auch unter diesem Video.
Auf der Seite selbst kann ich unter Icons jetzt nach einem Icon suchen.
Zum Beispiel könnte ich jetzt einfach nach der Zahl
eins suchen, da ich eben drei Schritte darstellen möchte.
Ich suche mir also die Zahl eins
und kann hier unter Show
Filters auch auswählen, dass ich nur gratis Icons auswählen
oder angegeben haben möchte.
Für meine erste Box will ich also das Icon eins verwenden.
Wenn ich auf eins klicke,
kann ich hier oben den Icon-Namen kopieren, der auch wirklich nur eins ist.
Das heißt, ich brauche nichts mehr als dieses Wissen, kann zurückgehen
und jetzt anfangen, ein Icon-Shortcode anzufügen.
Hierfür beginne ich mit dem allgemeinen Shortcode Icon
und vergebe zusätzlich das Attribut icon=”...”
und hier schreibe ich jetzt den Icon-Namen hinein.
Ich habe ein Icon aus dem Standardsatz.
Deshalb ist es nicht wichtig,
dass ich davor noch mal angebe, dass es ein solid Icon ist.
Wenn Sie allerdings ein anderes Icon verwenden, zum Beispiel
ein Markenlogo, dann müssten Sie hier entweder Brands oder Regular schreiben.
In meinem Fall benötige ich das allerdings
nicht, da es um ein Standard-Icon geht.
Im nächsten Schritt kann ich mir anschauen, wie das ganze
im Frontend ausschaut.
Ich klicke wieder auf Vorschau und sehe Gut,
ich habe hier schon mal eine eins stehen.
Allerdings ist diese ziemlich klein.
Deshalb kann ich im nächsten Schritt hier
ein Style hinzufügen und im Anschluss die Größe verändern.
Zum Beispiel kann ich angeben, dass ich die fünffache
Icongröße hier einstellen möchte.
Wenn ich mir das jetzt in der Vorschau anschaue,
sehe ich das Icon schon deutlich größer und prominenter.
Ich kann aber noch einen Schritt weitergehen und eine Farbe vergeben.
Auch hier kann ich zum Beispiel den gleichen Hex-Code wie oben angeben.
Wenn ich das gemacht habe und die Seite wieder aktualisiere, bzw.
die Vorschau anschaue, sehe ich, dass das Icon jetzt hellgrün erscheint.
Im nächsten Schritt kann ich für meine Icon-Box eine Überschrift vergeben.
Hierfür klicke ich einmal die Enter-Taste auf der Tastatur
und schreibe jetzt zum Beispiel Schritt eins Webangebot
auswählen.
Wenn ich das mache, dann markiere ich mir das Ganze
und klicke jetzt auf Überschrift drei.
Wichtig, dass ist jetzt eine Überschrift drei, da wir hier oben
ja die Überschrift zwei angelegt haben.
Darunter hätte ich jetzt auch die Möglichkeit,
einen einfachen Text zu hinterlegen.
Zum Beispiel kann ich schreiben: Ein einfacher Text.
Wenn ich mir das wieder in der Vorschau anschaue, sehe ich Die Box
enthält jetzt ein Icon, eine Überschrift
und einen Text.
Das ist also die erste Möglichkeit, eine einfache Box zu erstellen.
Darunter habe ich jetzt die Möglichkeit, noch einen Button zu erstellen.
Zum Beispiel kann ich schreiben Button Link ist gleich.
Und jetzt kommt hier erst einmal der allgemeine Link zwischen die zwei
Anführungszeichen, zum Beispiel einfach ein Slash für die Startseite
oder alternativ können Sie es auch ausschreiben.
Dann schließe ich den Shortcode wieder,
kann hier einen Buttontext hinterlegen
und auch hier den zweiten schließenden Shortcode hinzufügen.
Wenn ich das jetzt wieder in der Vorschau anschaue, sehe
ich, dass ich jetzt einen Button erhalte mit der Fakultätsfarbe Grün.
Da ich gerne eine etwas andere Darstellung haben möchte,
kann ich hier einfach einen style=”ghost” hinzufügen.
Wenn ich das gemacht habe und mir die Vorschau jetzt anschaue, sehe ich:
Ich habe einen Button, der hier eben erst beim hovern grün hinterlegt ist.
Hier haben Sie also die Möglichkeit, den Button entsprechend anzupassen.
Das ist also der erste Schritt eine einfache Icon-Box zu erstellen.
Ich gehe jetzt noch einen Schritt weiter und vergebe
dem Icon noch einen Alternativtext um es barrierefreier zu machen.
Mein alternativ Text ist hier einfach Schritt eins,
um dem Nutzer zu symbolisieren, dass es sich hier
um den ersten Schritt dieser Handlungsreihe geht.
Wenn ich das jetzt wieder entsprechend mir anschaue, sehe ich,
es hat sich nichts geändert.
Das ganze ist nämlich wie gesagt nur für die blinden Nutzer
und für Screenreader im Allgemeinen und Suchmaschinen.
Um das Ganze jetzt weiter zu verbessern,
kann ich mir überlegen, gut, wie soll das denn jetzt sein,
wenn ich noch einen zweiten und dritten Schritt habe?
Das heißt, ich kann hier einfach mal einen zweiten
und auch einen dritten Schritt hinzufügen.
Wenn ich das mache und mir in der Vorschau anschaue,
habe ich hier überall noch den gleichen Text.
Das muss ich natürlich entsprechend anpassen.
Das heißt, ich gehe hier wieder hin,
vergebe jetzt für das zweite Icon den Eigennamen zwei
und beim Alternativtext Schritt zwei.
Bei der Überschrift kann ich zum Beispiel
eine andere Überschrift wählen, zum Beispiel Domain auswählen.
Ich kann auch hier ein zweiter Text schreiben
und auch einen anderen Button links setzen oder gar keinen Button Link.
Und das Ganze kann ich auch bei meinem dritten Icon wiederholen.
Das heißt, hier wäre das dann das Icon mit der Nummer drei
und zum Beispiel der Schritt drei.
Auch hier kann
ich eine andere Überschrift wählen, zum Beispiel Antrag stellen
und ein dritter Text.
Wenn ich mir das jetzt wieder anschaue, habe ich erst mal drei
Boxen, die untereinander gestapelt werden.
Das kann auch natürlich schon ein Design sein.
Das kann man so verwenden, wenn man das möchte.
Man kann es aber auch zum Beispiel nebeneinander darstellen,
wenn man sagt, man möchte es lieber in einer Reihe haben.
Und darum geht es jetzt im nächsten Schritt.
Sie haben jetzt schon gesehen, man kann Icon-Boxen erstellen.
Im nächsten Schritt werden wir diese Icon-Boxen nebeneinander darstellen.
Hierfür wechsle ich immer ganz gerne in den Textmodus,
weil man so schneller sieht, wo welcher Shortcode letztendlich steht.
Das heißt wir haben, um das einmal zusammenzufassen,
unsere erste Icon Box, unsere zweite
Icon Box und unsere dritte Icon Box.
Jede dieser Icon-Boxen braucht jetzt eine eigene Spalte.
Das heißt, wir brauchen erst mal einen Shortcode, der dem Ganzen signalisiert:
Wir haben hier drei Boxen und drei Reihen, die gefüllt werden müssen.
Deshalb beginne ich mit einem Columns-Shortcode.
Das heißt, ich schreibe [columns number=”3”]
und dann kann ich das Ganze hier unten
unter dem letzten wieder beenden.
Das heißt hier hört der mehrspaltige Inhalt auf.
Jetzt habe ich, wenn ich mir das in der Vorschau anschaue,
noch keine drei richtigen Spalten, sondern die sind alle
etwas unterschiedlich breit, wie man sieht und nicht perfekt.
Das liegt daran, dass uns noch weitere Shortcodes fehlen.
Wir müssen nämlich jede Spalte erst einmal definieren.
Das heißt, wir schreiben hier nach unserem [columns]-Shortcode
einfach ein [column] und sagen, das Ganze soll 1/3 breit sein.
Also einfach die Breite ist eins von einer Gesamtbreite von drei.
Den ganzen Shortcode muss ich dann nach der ersten Box
natürlich auch wieder schließen.
Und das Ganze wiederhole ich aber auch bei den anderen zwei Icon-Boxen.
Das heißt,
Sie haben
jetzt gesehen: Wir haben drei Icon-Boxen
und jede dieser Icon-Boxen braucht einen Spalten-Shortcode
Und wenn ich mir
das jetzt einmal anschaue, sehe ich, wenn ich das in der Vorschau betrachte,
ich habe jetzt diese drei Boxen und jede dieser Boxen
nimmt einen bestimmten Bereich in dieser Spalte ein.
Wenn ich das breiter ziehe, sehe ich,
diese drei Spalten werden jetzt nebeneinander dargestellt.
Das heißt noch mal, um es darzustellen.
Wir haben also unsere Columns
den Column Shortcode, der sagt: Hier sind drei Spalten.
Dann haben wir die erste Spalte Column, die eben einen entsprechenden,
eine entsprechende Box enthält, eine Icon-Box enthält.
Und das wiederholt sich.
Auch hier haben wir einmal Column und auch hier haben wir einmal Column
dieses das kommt durch den visuellen Editor zustande.
Das können Sie theoretisch auch raus löschen.
Das macht keinen Unterschied.
Um das Ganze jetzt zu wiederholen,
vielleicht noch der Hinweis: Wie kann man das Ganze aufbauen?
Man hat einmal die Hinweisbox mit dem Alert und darin hat man dieses Icon.
Das kennen Sie schon.
Darin eine Überschrift und einen Text und einen Button.
Das ist eigentlich schon alles, was Sie benötigen.
Sie können natürlich das Ganze noch
weiter verfeinern oder andere Inhalte in die Box stecken.
Ich empfehle immer relativ wenig Text
letztendlich in die Box zu schreiben, damit das Ganze nicht seltsam umbricht.
Deshalb meine Empfehlung: Halten Sie es knapp
und machen Sie es sehr selbstverständlich oder selbstbeschreibend.
Das heißt, wenn Sie drei Schritte haben, machen Sie die Schritte kurz
wie hier Webangebot auswählen, Domain auswählen, Antrag stellen.
Schreiben Sie da keinen Roman hinein,
sondern verlinken Sie dann auf eine ausführlichere Seite.
Jetzt fragen Sie sich vielleicht am Ende noch
Wie bekomme ich das jetzt auf die eigene Startseite?
Sie haben das vielleicht
jetzt schon bei unserem Beispiel gesehen, dass das Ganze auf der Startseite
gelandet ist und man dann diese drei Boxen hier sieht.
Und um diese hier darauf zu bekommen, kann man einfach über den Customizer
einmal auf erweitert > Templates
und bei Startseite den Inhalt anzeigen.
Das heißt, wenn Sie dieses Slider-Design verwenden, müssen Sie das erst freigeben,
dass Sie auf der Startseite überhaupt Inhalte ausgeben können,
um es zu wiederholen.
Customizer > Erweitert > Templates
Startseite Inhalt anzeigen Nachdem Sie das erledigt haben,
können Sie über Seite Bearbeiten Ihren Shortcode entsprechend einfügen.
Das war's mal wieder mit dem Tipp der Woche.
Wenn Sie noch Fragen haben oder Ideen für den nächsten Tipp der Woche,
dann schicken Sie uns eine Mail an webmaster@fau.de
Ich freue mich auch immer über Feedback
zu unseren Anleitungsseiten.
[Musik spielt]