Cómo crear una tabla de contenido en la que se puede hacer clic para una publicación de blog con el bloque de diseño Divi
Publicado: 2020-03-14Agregar 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 Contenidos con todas las poderosas herramientas de diseño del constructor Divi a nuestra disposición.
¡Empecemos!
Vistazo
Descargue GRATIS el bloque de diseño de tabla de contenido reutilizable
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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Cómo utilizar la descarga para importar este bloque de diseño en su sitio
Para importar estos bloques de diseño de imágenes 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 con 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?
Qué necesitamos para empezar
Para comenzar, necesitaremos hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- 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 adelante 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 la publicación de su blog.
Luego haga clic en el botón Crear nuevo diseño. Esto desplegará 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 la línea: centrada verticalmente
- Peso del divisor: 3px
- Ancho: 25%
- Relleno: 30 píxeles en la parte superior, 30 píxeles en la parte inferior
Agregar divisor inferior
Para crear el segundo divisor, duplique el divisor anterior.
Cree el encabezado de la tabla de contenido con un módulo Blurb
Una vez que los separadores estén en su lugar, creemos nuestro encabezado para la tabla de contenido.
Agregue un nuevo módulo de propaganda entre los dos divisores.
Contenido publicitario
Abra la configuración de propaganda y actualice el contenido de la siguiente manera:
- Título: "Tabla de contenido"
- Usar icono: SÍ
- Icono: ver captura de pantalla
Configuración de diseño de Blurb
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: #eeeeee
- Ubicación de la imagen / icono: Izquierda
- Usar tamaño de fuente de icono: SÍ
- Tamaño de fuente del icono: 100px
- Nivel de encabezado del título: H2
- Ancho del contenido: 100%
- Alto: 38px
Observe que la altura de la propaganda es menor que la altura del icono. Esto permite que el icono se extienda hacia abajo junto a los elementos de propaganda 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 / anuncios publicitarios en los que se puede hacer clic que componen nuestra tabla de contenido. Para hacer esto, también usaremos módulos de propaganda.
Agregar artículo n. ° 1 Blurb
Agregue un nuevo módulo de propaganda debajo del título de propaganda.
Contenido publicitario
Abra la configuración de propaganda y elimine el contenido del cuerpo predeterminado para que solo el título sea visible. El título es donde agregarás el bloque de texto que corresponde a la sección / encabezado que queremos vincular para más abajo en la publicación.
Luego actualice el contenido con el ícono de flecha hacia la derecha en el escritorio.
Implemente la opción de desplazamiento del icono y cambie el icono a la flecha hacia abajo al desplazar el cursor. Esta será una buena micro-interacción que enfatiza que el enlace se desplazará a una ubicación al final de la publicación.
Diseño Blurb
Ahora podemos diseñar el módulo de propaganda como queramos. Para este ejemplo, actualice la configuración de la propaganda 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
- Ubicación de la imagen / icono: Izquierda
- Usar tamaño de fuente de icono: SÍ
- Tamaño de fuente del icono: 16px
- Tamaño del texto del texto: 16px
- Altura de la línea de título: 2em
- Ancho del contenido: 100%
- Margen: 118px a la izquierda
- Acolchado: 10px superior
- Relleno (flotar): 10 px a la izquierda
Anuncio duplicado para más artículos
Ahora que nuestro primer elemento de propaganda está terminado, podemos duplicarlo tantas veces como sea necesario, dependiendo de la cantidad de enlaces en los que se puede hacer clic que queramos incluir en la publicación. Por ahora, vamos a duplicarlo dos veces para crear un total de tres elementos para nuestra tabla de contenido.
Agregar las URL del enlace de anclaje
En este momento, no se puede hacer clic en nuestros elementos de propaganda, por lo que debemos agregar las URL de enlace de ancla necesarias a cada uno de ellos. La URL del enlace de ancla siempre comienza con un hashtag (#) seguido de cualquier ID que desee incluir.
Enlace de anclaje n. ° uno
Para simplificar, vamos a agregar el enlace de anclaje "#one" a la primera propaganda de la lista. Para hacer esto, abra la configuración para el primer módulo de propaganda en la lista (no la propaganda 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 de propaganda y agregue el siguiente enlace:
- URL del enlace del módulo: #two
Enlace de anclaje # tres
Finalmente, agregue el siguiente enlace al tercer elemento de propaganda:
- URL del enlace del módulo: #three
Apretar el espaciado
Configuración de filas
En este momento, hay demasiado espacio entre los elementos de nuestra fila. Para solucionar este problema, abra la configuración de la fila y actualice el ancho de la canaleta y el relleno de la siguiente manera:
- Ancho de la canaleta: 1
- Ancho: 100%
- Relleno: 0px arriba, 0px abajo
Configuración de la 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 el diseño de nuestra 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 títulos de las publicaciones
Hemos agregado las URL del enlace de anclaje a cada uno de los anuncios que componen los elementos de nuestra tabla de contenido. Ahora necesitamos agregar el 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 enlazar / saltar. Luego abra la configuración de ese bloque. En la opción Opciones avanzadas, agregue "uno" al cuadro de entrada HTML Anchor:
Ancla HTML: uno
Recuerde, nuestro primer elemento de propaganda 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:
- Anclaje HTML: dos
Anclaje HTML tres
Y finalmente, seleccione el tercer bloque de encabezado y agregue el HTML Anchor 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 de anclaje. 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 publicaciones futuras, 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 incorporada.
Para hacer esto, haga clic en Divi Layout Block 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 normal 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 en bloque normal".
Pensamientos finales
Espero que este bloque de diseño Divi de la tabla de contenido resulte útil para aquellas publicaciones que son lo suficientemente largas como para necesitarlas. Si está interesado en que se haga esto de forma dinámica (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 por 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 tener noticias tuyas en los comentarios.
¡Salud!