Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / CSS / Crear Tablas de contenido con Diseño Personalizado

Crear Tablas de contenido con Diseño Personalizado

julio 15, 2019 Por Oscar martin Deja un comentario

Hola Chicos,

Hoy os traigo un tutorial muy chulo, vamos a ver como podemos convertir una tabla de contenidos de WordPress aburrida en una tabla de contenidos bien chula.

Navegando por internet me encontré con la siguiente tabla de contenidos de MyThemeShop:

Tabla de contenidos de MyThemeShop

Comparada con la típica tabla de contenidos que estamos acostumbrados a ver no tiene nada que ver:

Tabla de contenidos por defecto

Me propuse llegar a ese resultado y como puedes ver a continuación lo conseguimos:

Tabla de contenidos Modificada

Cambiar el diseño de una tabla de contenidos no es difícil, con un poco de CSS lo vamos a conseguir.

Tutorial en Video:

Suscríbete a mi canal:  

Todo lo que necesitas para seguir el tutorial

Lo primero que necesitas es tener el plugin para crear la tabla de contenidos Easy Table of Contents

Y luego tienes que añadir el siguiente código css en 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;
	
}

Y si todo va bien conseguirás una maravillosa tabla de contenido 😉

Espero que te haya gustado el tutorial.

Publicado en: CSS Etiquetado como: TOC;

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR