Создавайте оглавления с индивидуальным дизайном

Привет, ребята,

Сегодня я предлагаю вам очень крутой урок, мы увидим, как мы можем превратить скучное оглавление WordPress в очень классное оглавление.

Просматривая Интернет, я наткнулся на следующее оглавление из MyThemeShop:

По сравнению с типичным оглавлением, которое мы привыкли видеть, оно не имеет к этому никакого отношения:

Я намеревался достичь этого результата, и, как вы можете видеть ниже, мы его достигли:

Изменить дизайн оглавления несложно, с небольшим количеством CSS мы этого добьемся.

Видео прохождение:

Все, что вам нужно, чтобы следовать учебнику

Первое, что вам нужно, это иметь плагин для создания оглавления. Легкое содержание

Затем вам нужно добавить следующий код CSS в «Настройка» -> «Дополнительный CSS»:

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;
	
}

И если все пойдет хорошо, вы получите прекрасное оглавление 😉

Надеюсь, вам понравился урок.