Erstellen Sie Inhaltsverzeichnisse mit benutzerdefiniertem Design

Hallo Leute,

Heute bringe ich Ihnen ein sehr cooles Tutorial, wir werden sehen, wie wir ein langweiliges WordPress-Inhaltsverzeichnis in ein sehr cooles Inhaltsverzeichnis verwandeln können.

Beim Stöbern im Internet bin ich auf folgendes Inhaltsverzeichnis gestoßen MyThemeShop:

Verglichen mit dem typischen Inhaltsverzeichnis, das wir gewohnt sind, hat es damit nichts zu tun:

Ich habe mir vorgenommen, dieses Ergebnis zu erreichen, und wie Sie unten sehen können, haben wir es erreicht:

Das Design eines Inhaltsverzeichnisses zu ändern ist nicht schwierig, mit ein bisschen CSS werden wir es erreichen.

Videoanleitung:

Alles, was Sie brauchen, um dem Tutorial zu folgen

Das erste, was Sie brauchen, ist das Plugin, um das Inhaltsverzeichnis zu erstellen Einfaches Inhaltsverzeichnis

Und dann müssen Sie den folgenden CSS-Code in Anpassen –> Zusätzliches CSS hinzufügen:

p.ez-toc-title {
    color: black;
    font-weight: 700 !important;
}

div#ez-toc-container {
    background: linear-gradient(to right, #B06AB3, #4568DC);
    padding: 48px;
}

.ez-toc-title-container {
    background: #f7f7f7;
    padding: 20px;
}

#ez-toc-container nav li a{
	padding: 8px 0 8px 25px;
	border-bottom: 1px solid #ddd;
	display:block;
	color: #000;
	font-size:18px;
}



.ez-toc-list li:nth-child(odd){
	background:#fff !important;
}

.ez-toc-list li {

		background: #f7f7f7 !important;
}

#ez-toc-container nav li:hover >a{
	text-decoration: none;
	background: #FFFCCD;
	
}

Und wenn alles gut geht, bekommst du ein wunderbares Inhaltsverzeichnis 😉

Ich hoffe, Ihnen hat das Tutorial gefallen.