{"id":73534,"date":"2023-12-04T14:21:43","date_gmt":"2023-12-04T13:21:43","guid":{"rendered":"https:\/\/zfl-lernen.de\/?page_id=73534"},"modified":"2025-06-23T13:42:37","modified_gmt":"2025-06-23T11:42:37","slug":"icons","status":"publish","type":"page","link":"https:\/\/zfl-lernen.de\/en\/lernmaterial_erstellen_wordpress\/inhalte\/icons\/","title":{"rendered":"Icons"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Icons<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

1. Arten von Icons<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Einige Inhalte lassen sich mit Icons versehen, damit auf einen Blick ersichtlich ist, dass es sich z. B. um eine Checkliste oder eine Aufgabe handelt.<\/p>\n

Die Bilder befinden sich in der Medienbibliothek im Ordner „03_icons_Logos“.<\/p>\n

Nachfolgend finden Sie eine \u00dcbersicht der Icons:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Hinweise<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Weiterf\u00fchrende Informationen<\/span><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Smiley-Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Literatur<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Fragen<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Lernziele<\/span><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Lernstart\"<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Lernzielkontrolle<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"\"<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Podcast\/Interview<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Podcast\/Interview\"<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Video<\/span><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Video\"<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Bearbeitungszeit<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Download<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Impulse<\/span><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Aufgaben<\/h4>\n\n\t\t<\/div>\n\t<\/div>\n
<\/span><\/div>\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
<\/span><\/div>\n\t
\n\t\t
\n\t\t\t

2. Formatierung von Icons<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Icon<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
<\/span><\/div>\n\t
\n\t\t
\n\t\t\t

Klicken Sie auf das jeweilige Bild, um es zu vergr\u00f6\u00dfern.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/span><\/div>\n\t
\n\t\t
\n\t\t\t

2.1 Icon ausw\u00e4hlen und einstellen<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t\"Screenshot<\/a>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Icons werden \u00fcber das WordPress-Element „Einzelbild“ in eine Seite eingef\u00fcgt. W\u00e4hlen Sie in den Einstellungen f\u00fcr das Einzelbild aus der Medienbibliothek das passende Icon aus und geben Sie als Bildgr\u00f6\u00dfe „thumbnail“ ein. Behalten Sie bei allen weiteren Einstellm\u00f6glichkeiten die Standardeinstellungen bei.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/span><\/div>\n\t
\n\t\t
\n\t\t\t

2.2 Spaltengr\u00f6\u00dfe festlegen<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t\"Screenshot<\/a>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Die WordPress-Zeile wird zweispaltig strukturiert, wobei in die linke Spalte das Icon eingef\u00fcgt wird und in die rechte Spalte der dazugeh\u00f6rige Text. Die Spaltengr\u00f6\u00dfe wird \u00fcber das Layout-Symbol links \u00fcber der WordPress-Zeile festgelegt (siehe rotumrandetes Symbol im Screenshot links). Bei Mouveover \u00fcber das Symbol erscheinen Optionen zur Festlegung der Spalten f\u00fcr die jeweilige Zeile.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

\n\t
\n\t\t\n\t\t
\n\t\t\t\"Screenshot<\/a>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

W\u00e4hlen Sie im Falle von Icons das Layout „Individuell“ aus und geben Sie danach in das Textfeld „Individuelles Layout f\u00fcr diese Zeile“ den Wert „1\/6 + 5\/6“ an, wobei sich der Wert 1\/6 auf das Icon und 5\/6 auf den Text bezieht. Klicken Sie anschlie\u00dfend auf die Schaltfl\u00e4che „Aktualisieren“. Die Spaltenaufteilung wird so auf die aktuelle WordPress-Zeile angewendet.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/span><\/div>\n\t
\n\t\t
\n\t\t\t

2.3 Text ausrichten<\/h3>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Je nachdem, wie lang der Text neben dem Icon ist, wird er in 1, 2 oder mehr Zeilen umgebrochen. Um den Text mittig zum Icon auszurichten, ist es daher ggf. notwendig, \u00fcber dem Text einen leeren Bereich hinzuzuf\u00fcgen. Folgende Angaben f\u00fcr die H\u00f6he des leeren Bereichs haben sich bew\u00e4hrt:<\/p>\n