Crie Índices com Design Personalizado

Oi pessoal

Hoje trago para vocês um tutorial muito legal, vamos ver como podemos transformar um índice chato do WordPress em um índice muito legal.

Navegando na internet me deparei com o seguinte índice de MyThemeShop:

Comparado com o índice típico que estamos acostumados a ver, não tem nada a ver com isso:

Eu me propus a alcançar esse resultado e, como você pode ver abaixo, conseguimos:

Alterar o design de um índice não é difícil, com um pouco de CSS conseguiremos.

Vídeo passo a passo:

Tudo o que você precisa para seguir o tutorial

A primeira coisa que você precisa é ter o plugin para criar o índice Índice fácil

E então você deve adicionar o seguinte código CSS em Personalizar –> CSS Adicional:

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

E se tudo correr bem você terá um sumário maravilhoso 😉

Espero que tenham gostado do tutorial.