Kreative Listen: Miniaturbilder anstelle Aufzählungszeichen

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Verleihe deinem Design mehr Lebendigkeit, indem du der Liste von Standard-Aufzählungspunkte durch Miniaturbilder ersetzt. Diese einfache Methode bringt mehr visuelle Attraktivität, insbesondere bei Menüpunkten mit Bildern. Icons oder Miniaturbilder können nicht nur das Erscheinungsbild der Website aufwerten, sondern auch die Benutzerfreundlichkeit verbessern und wichtige Elemente hervorheben.

Inhaltsverzeichnis

Miniaturbilder statt Aufzählungspunkte

Im Folgenden präsentieren wir drei Methoden, um Miniaturbilder als Aufzählungsbilder zu verwenden.

Die erste und übliche Variante beinhaltet das Miniaturbild als Aufzählungsbild unter Verwendung von list-style-image.
- Die Methode mit list-style-image erfordert das List-Bild mit einer fixen Größe zu erstellen ist.
In der zweiten Version zeigen wir eine alternative Methode, bei der das Miniaturbild als Hintergrundbild mithilfe von background eingefügt wird.
- Die Methode mit background zur Verwendung eines List-Bilds in flexibler Größe, das über CSS angepasst werden kann.
Die dritte Methode zur Einbindung von Miniaturbildern als Aufzählungspunkte, mit content und Pseudo-Elementen (:before oder :after) bietet ebenfalls Flexibilität bei der Größenanpassung. Diese Methode bietet auch eine flexible Möglichkeit, Dashicons ohne den Einsatz separater Bilder oder Hintergrundbilder zu integrieren.

Jede Varianten bringen Vor- und Nachteile mit sich. Die Methode mit list-style-image erfordert die Erstellung des List-Bilds mit einer festen Größe. Im Gegensatz dazu ermöglicht die Methode mit background die Verwendung eines List-Bilds in flexibler Größe, das über CSS angepasst werden kann. Die Methode mit content und Pseudo-Elementen bietet ebenfalls Flexibilität bei der Größenanpassung, jedoch ohne zusätzliche Ressourcen zu laden.

Alle drei Methoden sind gültig, aber die Auswahl hängt von den spezifischen Anforderungen und Präferenzen ab. Probiere alle aus und entscheide, welche für dich besser geeignet ist.

Methode mit 'list-style-image'

Um Aufzählungspunkte durch Miniaturbilder zu ersetzen, folgen wir diesen Schritten:

1. Erstelle ein Miniaturbild

Beginne mit der Erstellung eines kleinen Bildes, idealerweise im PNG- oder SVG-Format, mit einer fixen Größe (also nicht responsive) von etwa 30×25 Pixeln. Für diesen Zweck verwenden wir das Tool Boxy SVG, das eine einfache Handhabung ermöglicht. Beachte dabei, dass die Bildgröße später nicht mehr veränderbar ist.

2. CSS-Klasse definieren

Definiere eine CSS-Klasse für das Miniaturbild. Dies erfolgt in deiner Stylesheet-Datei (CSS) und kann wie folgt aussehen:

/* Class für list-style-image */
.miniatur-bild {
    list-style-image: url("https://..frosch.svg");
    padding-left: 30px;
    margin-left: 30px;
}

3. HTML-Auszeichnung hinzufügen

Die erstellte CSS-Klasse fügen wir in die HTML-Auszeichnung ein. Hier ist ein Beispiel für eine Liste:

<ul class="miniatur-bild">
    <li class="miniatur-bild">Menüpunkt 1</li>
    <li class="miniatur-bild">Menüpunkt 2</li>
    <li class="miniatur-bild">Menüpunkt 3</li>
</ul>

Im Editor/Text ist dies durch die Verwendung des Attributnamens class und des Eigenschaftswerts, also der Classe miniatur-bild.

Die Aufzählungszeichen verschwinden,
stattdessen tanzen nun Miniaturbilder durch den Text.
Im Editor spielen die Miniaturbilder noch Verstecken – sie erscheinen erst auf der großen Bühne der Website!

Die Verwendung von list-style-image in Bezug auf die Zentrierung kann es in einigen Fällen schwierig machen, die gewünschte visuelle Ausrichtung zu erreichen. Daher ist es möglicherweise besser, alternative Ansätze zu verwenden, wie zum Beispiel die Verwendung von Hintergrundbildern für Listenpunkte oder die direkte Integration von Bildern mit CSS-Pseudo-Elementen.

Und Weiteres zu Aufzählungszeichen im Titel Elegante Listen in CSS: Aufzählungszeichen meistern.

Beispiel: Miniaturbild im Menü!

Des Beispiels:

/* Miniaturbild mit 'list-style-image' */
.menuepunkt {
    list-style-image: url(https://..kategorie.svg);
    padding-left: 20px;
    margin-left: 15px !important;
}

Navigiere zu Dashboard > Design > Menüs und klicke möglicherweise zuerst auf 'Ansicht anpassen' rechts oben unter der Admin-Leiste, dann wähle 'CSS-Klassen' aus.

Füge für jeden Menüpunkt die entsprechende CSS-Klasse hinzu.

Beispiel: Die "CSS-Klassen (optional)" funktionieren nicht mit Umlauten, daher wäre "menuepunkt" eine geeignete Klasse.

Also des Beispiels richtig für CSS-Klassen ist "menuepunkt".

Nach dem Speichern des Menüs erscheinen die Menüpunkte mit Bildern.

Um das Menü direkt im Beitrag zu platzieren, ist ein Code in der functions.php erforderlich. Siehe im Titel Inhaltsverzeichnis direkt auf Seite/Beitrag. Bspw dann hier mit Shortcode und dem Namen des Menüs.

Verwende den Shortcode und den Menünamen im Beitrag:

[menu name="Home Footer"] zeigt sich dann als:

Methode mit 'background'

Die aktuelle Methode verwendet background und bietet eine weitere Möglichkeit, das Miniaturbild als Aufzählungssymbol zu integrieren.

1. Erstelle ein Miniaturbild

Beginne mit der Erstellung Bildes, idealerweise im PNG- oder SVG-Format, mit einer flexiblen Größe. Dieser Methode kann über CSS, die Bildgröße angepasst werden. Für diesen Zweck verwenden wir das Tool Boxy SVG, das eine einfache Handhabung ermöglicht.

2. CSS-Klasse definieren

Definiere eine CSS-Klasse für das Miniaturbild. Dies erfolgt in deiner Stylesheet-Datei (CSS) und kann wie folgt aussehen.

/* Miniaturbild mit 'background' */
.miniatur-bild {
    list-style-type: none;
    padding-left: 0px;
}

.miniatur-bild li {
    position: relative; /* Relative Positionierung für das Listenelement */
    padding-left: 50px;
    line-height: 1; /* Zurücksetzen des Zeilenabstands auf den Standardwert */
}

.miniatur-bild li::before {
    content: ""; /* Leeres Inhaltsattribut für das Pseudo-Element */
    position: absolute; /* Absolute Positionierung relativ zum Listenelement */
    left: -1.1%; /* Ausrichtung ganz links */
    top: 50%; /* Ausrichtung in der Mitte vertikal */
    transform: translateY(-50%); /* Vertikale Ausrichtung korrigieren */
    background: url("https://..wordpress-logo.svg")
        no-repeat left center;
    background-size: 40px;
    width: 40px; /* Breite des Hintergrundbildes */
    height: 40px; /* Höhe des Hintergrundbildes */
}

3. HTML-Auszeichnung hinzufügen:

<ul class="miniatur-bild">
    <li class="miniatur-bild">Menüpunkt 1</li>
    <li class="miniatur-bild">Menüpunkt 2</li>
    <li class="miniatur-bild">Menüpunkt 3</li>
</ul>

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3

Methode mit 'content' und Pseudo-Elementen

Der Methode wird ein Dashicons direkt über das content-Attribut und Pseudo-Elemente wie :before in CSS eingebunden. Es handelt sich dabei um eine Technik zur Verwendung von Schriftsymbolen (Icon-Fonts wie Dashicons) als visuelle Elemente, ohne auf separate Bilder oder Hintergrundbilder zurückgreifen zu müssen.

1. Icon-Font definieren

Dazu siehe im Beitrag Icon-Fonts!

2. CSS-Klasse definieren

.icon-list {
    list-style: none; /* Blendet die Standard-Aufzählungspunkte aus */
}

.icon-list li:before {
    content: "\f120"; /* Hier ersetzt du '\f120' durch den Unicode-Wert deines gewünschten Dashicons */
    font-family: dashicons; /* Stelle sicher, dass die Dashicons-Schriftart geladen ist */
    font-size: 20px; /* Optional: Die größe der Icons */
    margin-right: 10px; /* Optional: Füge etwas Abstand zwischen dem Icon und dem Text hinzu */
    margin-left: 3px; /* Optional: Füge etwas Abstand zwischen dem Icon und dem Rand hinzu */
    vertical-align: middle; /* Zentriert das Icon vertikal relativ zum umgebenden Text */
    line-height: 20px; /* Ändere die Zeilenhöhe, um den Abstand zwischen dem Icon und dem Text anzupassen */
}

3. HTML-Auszeichnung hinzufügen

Die erstellte CSS-Klasse fügen wir in die HTML-Auszeichnung ein. Hier ist ein Beispiel für eine Liste:

<ul class="icon-list">
 	<li>Element 1</li>
 	<li>Element 2</li>
 	<li>Element 3</li>
</ul>

Im Editor/Text ist dies durch die Verwendung des Attributnamens class und des Eigenschaftswerts, also der Classe icon-list.

Element 1
Element 2
Element 3

Nachlese

HTML/Tutorials/Listen/Gestaltung mit CSS (selfhtml)

Das Hinzufügen von Miniaturbildern zu den Aufzählungspunkten deiner Website ist ein kreativer Weg, um das Erscheinungsbild zu verbessern und wichtige Inhalte hervorzuheben.

Denke daran, dass es manchmal etwas Übung erfordert, um das gewünschte Ergebnis zu erzielen. Sei mutig, experimentiere mit den verschiedenen Methoden und finde heraus, welche am besten zu deinen Anforderungen passt. Mit ein wenig Geduld und Kreativität kannst du deiner Website eine persönliche Note verleihen und die Benutzererfahrung auf ein neues Level heben. Viel Spaß beim Gestalten!