Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Listen, Aufzählungszeichen, Miniaturbild
smilies.4-user.de

Kreative Listen: Miniaturbilder anstelle Aufzählungszeichen, sogar im Menü! – Dein Design

Illustration, kirillslov
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

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.

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, mitcontent 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.

Listen, Aufzählungszeichen, Miniaturbild

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:


In der Praxis: Das Inhaltsverzeichnis in Form einer Sitemap. Hier sind die Kategorien mit Bildern zu sehen.

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. 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

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!

zeitmaschine, gifzentrale.com

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-März