Foto Panel – Icon Panel

Hierbei handelt es sich um zwei verschiedene Shortcodes. Dennoch wurden sie wegen ihrer Übereinstimmungen als ein Beitrag zusammengefasst.

Foto Panel und Icon Panel unterscheiden sich nur dadurch, dass in einem Panel ein Foto und im Anderen ein Icon ist. Unter einem großen Bild oder Icon kann ein Text angebracht werden.

Wie schon bei den Members, müssen auch hier ein paar zusätzliche Schritte getätigt werden, damit die drei Bilder nebeneinander und nicht untereinander (riesig) erscheinen.

WICHTIG: In der Tabelle wurden in der linken Spalte nach dem “su” jeweils ein Leerzeichen eingefügt, weil es sonst als Shortcode erkannt wird. Dieses Leerzeichen muss entfernt werden!

Wichtig 2: Es darf keinen Zwischenraum zwischen den einzelnen Zeilen sein!

[su _row]	Beginn des Shortcodes
[su _column size=”1/3″]	Zeigt an ( “1/3”) wieviele nebeneinander sein sollen
Ihr erzeugter Schortcode	Hier geben Sie den geamten Shortcode ein, der nach der Erstellung über das Bearbeitungsfenster erstellt wurde.
[/su _column]	Das Ende eines Shortcodes (hier 1 von 3)
[su _column size=”1/3″]	Zeigt an ( “1/3”) wieviele nebeneinander sein sollen
Ihr erzeugter Shortcode	Hier geben Sie den geamten Shortcode ein, der nach der Erstellung über das Bearbeitungsfenster erstellt wurde.
[/su _column]	Das Ende eines Shortcodes (hier 2 von 3)
[su _column size=”1/3″]	Zeigt an ( “1/3”) wieviele nebeneinander sein sollen
Ihr erzeugter Shortcode	Hier geben Sie den geamten Shortcode ein, der nach der Erstellung über das Bearbeitungsfenster erstellt wurde.
[/su _column]	Das Ende eines Shortcodes (hier 3 von 3)
[/su _row]	Abschlus des gesamten Shortcodes

Bei den Icons müssen diese Schritte ebenfalls gemacht werden.

Das Ergbenis sollte dann in etwa so aussehen.

Das Bild stammt von Pixaby. Hier wurde ein dunkelgrüner Hintergrund mit weißer Schrift gewählt. Der Text ist linksbündig ausgerichtet. Beim Rahmen wurde sich für eine doppelte Linie entschieden.

Das Bild ist von Pixabay. Der Text ist mittig ausgerichtet. Hintergrundfarbe und Schrift wurden vom Original übernommen, Die Rahmenlinie ist gestrichelt.

Das Bild ist von Pixabay. Der Text ist rechtbündig ausgerichtet. Hintergrundfarbe Dinkelblau und Schriftfarbe Gelb. Die Rahmenlinie ist “Erhaben”.

Wenn Sie Icons statt Bilder verwenden möchten, dann sieht das in etwa so aus:

Hier wurden die Voreinstellungen übernommen und eines der zahlreichen Icons ausgewählt. Textausrichtung links.

Hier wurde die Hintergrundfarbe Grau gewählt und ein Drucker als Icon eingesetzt. Textausrichtung mittig.

Hier wurde die Hintergrundfarbe Schwarz und die Schriftfarbe weiß gewählt und das WordPress-Logo als Icon eingesetzt. Textausrichtung rechts.

So ein einzelnes Panel lässt sich aber auch in einem Widget einpflegen. Damit Sie sehen können wie das aussieht, habe ich für Vorführzwecke (anhand des Beispiels oben) eins kurzzeitig in der Sidebar eingefügt.