Agregar una tabla de contenido en la que se puede hacer clic a una publicación de blog es una excelente manera de mejorar la experiencia del usuario. En muchos casos, la tabla de contenido de una publicación de blog utiliza enlaces de anclaje para ayudar a los usuarios a navegar por el contenido. Y, una tabla de contenido (con enlaces de anclaje) es realmente simple de construir usando HTML básico. Sin embargo, agregar un diseño personalizado/CSS para personalizarlo puede ser un desafío. Aquí es donde el bloque de diseño Divi resulta útil.
En este tutorial, vamos a diseñar una tabla de contenido en la que se puede hacer clic para una sola publicación de blog (en Gutenburg) que utiliza enlaces de anclaje para llevar a los usuarios a los encabezados designados a lo largo de la publicación. Para hacer esto, usaremos el bloque Divi Layout para crear la Tabla de contenido con todas las poderosas herramientas de diseño del constructor Divi a nuestra disposición.
¡Empecemos!
Descargue el bloque de diseño de tabla de contenido reutilizable GRATIS
Para poner sus manos en el bloque de diseño de la Tabla de contenido de este tutorial, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cómo usar la descarga para importar este bloque de diseño en su sitio
Para importar estos bloques de diseño de imagen Divi reutilizables a su sitio, primero debe descomprimir el archivo de descarga. Allí encontrará los tres archivos JSON que necesitará importar a su sitio.
Vaya a editar una publicación usando el editor predeterminado (Gutenberg). Abra el menú «Más herramientas y opciones» en la parte superior derecha de la página y seleccione «Administrar todos los bloques reutilizables».
Luego haga clic en el botón Importar desde JSON. Elija uno de los archivos JSON de la carpeta de descarga y haga clic en el botón de importación.
Una vez hecho esto, agregue un nuevo bloque dentro de Gutenberg. Podremos encontrar los bloques de diseño reutilizables importados en la opción de alternar reutilizable. Simplemente haga clic en el que se llama «Tabla de contenido» para agregarlo a su publicación.
¡Eso es todo!
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitamos para empezar
Para empezar, tendremos que hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva publicación en WordPress y use el editor predeterminado (Gutenberg) para agregar contenido simulado (título, encabezados, párrafos, imagen destacada, etc.). Asegúrese de crear al menos tres bloques de encabezado con contenido debajo de cada uno. Dado que agregaremos enlaces de anclaje a la tabla de contenido, necesitamos tres encabezados para vincular más abajo en la publicación.
Después de eso, estamos listos para comenzar.
Creación de una tabla de contenido en la que se puede hacer clic para una publicación de blog con el bloque de diseño Divi
Agregar bloque de diseño Divi
Primero, agregue un nuevo bloque de diseño Divi en la parte superior del contenido de su publicación de blog.
Luego haga clic en el botón Crear nuevo diseño. Esto implementará el editor de diseño, que es el constructor Divi para un bloque de diseño.
Añadir fila
En el Editor de diseño, inicie el diseño agregando una fila de una columna.
Agregar divisor superior
Dentro de la columna, agregue un módulo divisor. Este será uno de los dos divisores que usaremos para enmarcar la tabla de contenido.
Configuración del divisor
A continuación, actualice la configuración del divisor de la siguiente manera:
- Color de línea: #eeeeee
- Posición de línea: centrado verticalmente
- Peso del divisor: 3px
- Ancho: 25%
- Relleno: 30px arriba, 30px abajo
Agregar divisor inferior
Para crear el segundo divisor, duplique el divisor anterior.
Cree el encabezado de la tabla de contenido con un módulo de Blurb
Una vez que los divisores estén en su lugar, creemos nuestro encabezado para la tabla de contenido.
Agregue un nuevo módulo publicitario entre los dos divisores.
Contenido de Blurb
Abra la configuración de publicidad y actualice el contenido de la siguiente manera:
- Título: «Tabla de contenido»
- Icono de uso: SÍ
- Icono: ver captura de pantalla
Ajustes de diseño de Blurb
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: #eeeeee
- Colocación de imagen/icono: Izquierda
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 100 px
- Título Nivel de encabezado: H2
- Ancho de contenido: 100%
- Altura: 38px
Observe que la altura de la publicidad es menor que la altura del icono. Esto permite que el icono se extienda hacia abajo junto a los elementos publicitarios que agregaremos a continuación.
Una vez que la propaganda del título esté en su lugar, estamos listos para comenzar a agregar los elementos/anunciados en los que se puede hacer clic que conforman nuestra tabla de contenido. Para hacer esto, también vamos a usar módulos publicitarios.
Añadir artículo n.° 1
Agregue un nuevo módulo de propaganda debajo de la propaganda del título.
Contenido de Blurb
Abra la configuración de la publicidad y elimine el contenido del cuerpo predeterminado para que solo se vea el título. El título es donde agregará el bloque de texto que corresponde a la sección/título que queremos vincular más abajo en la publicación.
Luego actualice el contenido con el icono de flecha derecha en el escritorio.
Implemente la opción de desplazamiento para el ícono y cambie el ícono a la flecha hacia abajo al pasar el mouse. Esta será una buena micro-interacción que enfatiza que el enlace se desplazará a una ubicación en la publicación.
Diseño de publicidad
Ahora podemos diseñar el módulo de propaganda como queramos. Para este ejemplo, actualicemos la configuración de la publicidad de la siguiente manera:
- Color del icono: #b856c7
- Icono de círculo: SÍ
- Color del círculo: #ffffff
- Mostrar borde circular: SÍ
- Color del borde del círculo: #b856c7
- Colocación de imagen/icono: Izquierda
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 16px
- Texto Tamaño del texto: 16px
- Altura de la línea del título: 2em
- Ancho de contenido: 100%
- Margen: 118px a la izquierda
- Relleno: 10px arriba
- Relleno (desplazamiento): 10 px a la izquierda
Blurb duplicado para más artículos
Ahora que nuestro primer elemento publicitario está terminado, podemos duplicarlo tantas veces como sea necesario, según la cantidad de enlaces en los que se puede hacer clic que queremos incluir en la publicación. Por ahora, vamos a duplicarlo dos veces para crear un total de tres elementos para nuestra tabla de contenido.
Adición de URL de enlace de anclaje
En este momento, no se puede hacer clic en nuestros elementos publicitarios, por lo que debemos agregar las URL de enlace de anclaje necesarias a cada uno de ellos. La URL del enlace ancla siempre comienza con un hashtag (#) seguido de cualquier ID que desee incluir.
Enlace de anclaje #uno
Para simplificar, agregaremos el enlace ancla «#one» a la primera nota publicitaria de la lista. Para hacer esto, abra la configuración del primer módulo de publicidad de la lista (no la publicidad del título) y actualice lo siguiente:
- URL del enlace del módulo: #one
Enlace de anclaje #dos
Luego abra la configuración del segundo elemento publicitario y agregue el siguiente enlace:
- URL del enlace del módulo: #dos
Enlace de anclaje #tres
Finalmente, agregue el siguiente enlace al tercer elemento publicitario:
- URL del enlace del módulo: #tres
Reforzando el espacio
Configuración de fila
En este momento, hay demasiado espacio entre los elementos de nuestra fila. Para solucionar esto, abra la configuración de la fila y actualice el ancho de la canaleta y el relleno de la siguiente manera:
- Ancho del canalón: 1
- Ancho: 100%
- Relleno: 0px arriba, 0px abajo
Ajustes de sección
Quitemos también el relleno de la sección. Abra la configuración de la sección y actualice lo siguiente:
- Relleno: 0px arriba, 0px abajo
Guardar el diseño
Hemos terminado con nuestro diseño de tabla de contenido. Asegúrese de guardar y salir del editor de diseño.
Ahora debería ver su nueva tabla de contenido dentro del editor de bloques predeterminado.
Agregar los anclajes HTML a los encabezados de las publicaciones
Hemos agregado las URL de enlace ancla a cada uno de los anuncios publicitarios que componen los elementos de nuestra tabla de contenido. Ahora necesitamos agregar la ID de CSS correspondiente (o HTML Anchor) a los bloques de encabezado más abajo en la publicación.
Anclaje HTML uno
Haga clic en el bloque que contiene el primer encabezado al que desea vincular/saltar. Luego abra la configuración para ese bloque. En la opción Opciones avanzadas, agregue «uno» al cuadro de entrada HTML Anchor:
Anclaje HTML: uno
Recuerde, nuestro primer elemento publicitario tiene la URL «#one» que se vinculará a este. Pero no agregue el hashtag a este HTML Anchor. No es necesario.)
Anclaje HTML dos
A continuación, seleccione el segundo bloque de encabezado y actualice lo siguiente:
- Ancla HTML: dos
Anclaje HTML tres
Y finalmente, seleccione el tercer bloque de encabezado y agregue el ancla HTML de la siguiente manera:
- Ancla HTML: tres
Resultado final
Veamos el resultado final en la publicación en vivo.
Y así es como funcionarán los enlaces ancla. Observe el efecto de desplazamiento sobre los íconos y cómo el enlace se desplaza suavemente hasta el ancla correspondiente debajo de la página.
Agregar la tabla de contenido como un bloque de diseño reutilizable
Si desea seguir usando este bloque de diseño como plantilla para futuras publicaciones, sería una buena idea guardar el bloque de diseño como un bloque de diseño reutilizable. Esto le permitirá agregar un bloque de «tabla de contenido» fácilmente desde la lista de bloques integrada.
Para hacer esto, haga clic en el bloque de diseño Divi que contiene la tabla de contenido y abra el menú de más configuraciones. Luego seleccione «Agregar a bloques de diseño reutilizables».
Ingrese un nombre para el bloque reutilizable («Tabla de contenido») y haga clic en guardar.
Ahora tendrá el bloque disponible en la lista de Bloques reutilizables cuando agregue un nuevo bloque a la publicación.
Ahora el bloque de diseño sirve como una plantilla conveniente para crear una tabla de contenido para su publicación. No olvide convertir el bloque en un bloque de diseño regular antes de personalizarlo para una publicación en particular. No desea cambiar el bloque de diseño reutilizable.
Para hacer esto, abra el menú de más configuraciones del bloque de diseño reutilizable y seleccione «Convertir a bloque regular».
Pensamientos finales
Espero que este bloque de diseño Divi de tabla de contenido resulte útil para aquellas publicaciones que son lo suficientemente largas como para necesitarlas. Si está interesado en que esto se haga dinámicamente (como crear la tabla de contenido automáticamente en función de los encabezados de una publicación), existen complementos como Table of Contents Plus que hacen este tipo de cosas para usted. Esta publicación es para aquellos a quienes les gusta diseñar con Divi y no les importa construir la tabla de contenido publicación por publicación.
Espero escuchar de usted en los comentarios.
¡Salud!