Cómo Hacer una Barra de Información de la Entrada con Divi

Te voy a mostrar cómo hacer con Divi una mostrador con información de la entrada que permanezca adherida al borde superior de la página y que muestre datos como el título de la entrada, la cantidad de comentarios y algunas llamadas a la actividad enseres.

Normalmente, estos utensilios dinámicos se colocan adentro del diseño de la entrada. Sin confiscación, puede ser útil sostener algunos de estos metadatos siempre a la paisaje de tus lectores.

Acá es donde viene muy proporcionadamente una mostrador de información de la entrada. Esta mostrador permanece fija en la parte superior del navegador (como lo haría un encabezado fijo) e incluye datos enseres y llamadas a la actividad.

Por ejemplo, podemos usar esta mostrador para rememorar a los lectores la publicación que están leyendo, poner un enlace para dejar un comentario o un enlace a una categoría relacionada.

Cómo Hacer una Barra de Información de la Entrada con Divi

Vamos a modificar la preliminar de nuestra plantilla de entradas para añadir la mencionada mostrador informativa y que está aparezca en la parte superior de todas las entradas del blog.

Recursos necesarios

Para crear la mostrador de información de la entrada con Divi vamos a usar las siguientes herramientas:

• Divi. Actualizado a la última traducción. Consíguelo aquí.
• Módulo Texto de Divi. Lo utilizaremos para crear los diferentes utensilios de la mostrador.
• Contenido dinámico de Divi. Aprovechamos la útil de contenido dinámico para mostrar la información correspondiente a la entrada que estamos leyendo.

Paso a paso

En el venidero video te muestro paso a paso cómo crear una mostrador que muestre información de la entrada que estamos leyendo con Divi.

Paso 1 – Sección para la mostrador informativa

Lo primero que tenemos que hacer es añadir una nueva sección a la preliminar de la plantilla de entradas y le asignamos los siguientes formatos:

FONDO:

SEPARACIÓN:

• Relleno: 10px hacia lo alto, 10px debajo

Paso 2 – Fila para la mostrador informativa

Insertamos una fila con estructura de 3 columnas y aplicamos los siguientes estilos.

TAMAÑO:

• Ancho entre columnas: 1
• Relleno: 0px hacia lo alto, 0px debajo

SEPARACIÓN:

• Relleno: 0px hacia lo alto, 0px debajo

CSS PERSONALIZADO:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Esto hará que las columnas permanezcan una al banda de la otra incluso en dispositivos móviles.

Paso 3 – Módulo Texto para el Título

En la Columna 1 insertamos un módulo de texto para mostrar de modo dinámica el título de la entrada.

TEXTO:

• Fuente: Ubuntu
• Espesor de Fuente: Medium
• Color: #121212
• Tamaño del texto: 14px (escritorio), 12px (tableta), 11px (teléfono)

Paso 4 – Módulos Texto para Categorías y Comentarios

Copiamos el módulo precursor y modificamos el estilo de enlace. También cambiamos el contenido dinámico para mostrar en este caso las categorías de la entrada.

TEXTO ENLACE:

Luego copiamos dos veces este posterior módulo y los arrastramos hasta la Columna 2.

El primero lo modificamos para que muestre la cantidad de comentarios de la entrada y el segundo para mostrar un texto que enlace a la zona del formulario para comentar.

• Texto: Deja un comentario
• Enlace: #respond

Paso 5 – Módulo Botón para suscribirse

En la Columna 3 añadimos un pitón y configuramos así:

• Texto del pitón: Suscríbete
• Enlace del pitón: #suscribirse

BOTÓN:
Activamos los Estilos Personalizados para Botón.

• Tamaño del texto: 14px (escritorio), 12px (tableta), 11px (teléfono)
• Color del texto: #ffffff
• Color de Fondo 1: #7e5ce6
• Color de Fondo 2: #25b8ee
• Espacio entre saber : 2px
• Fuente: Ubuntu
• Espesor de Fuente: Bold
• Estilo de Fuente: TT
• Relleno (escritorio): 10px hacia lo alto, 10px debajo, 20px izquierda, 20px derecha
• Relleno (tableta): 6px hacia lo alto, 6px debajo, 14px izquierda, 14px derecha

Paso 6 – Definir índice Z y fijar la mostrador

Para obtener que la mostrador de entradas se oculte detrás del encabezado cuando recién carga la página vamos a explicar un índice Z pequeño que al encabezado.

Por posterior vamos a PUESTO y elegimos:

• Puesto: Fixed, esquinazo superior derecha.

Paso 7 – Asignar IDs al cuerpo de la plantilla

Para finalizar vamos a editar el Cuerpo de la plantilla de entradas y vamos a asignar los siguientes ID.

• Fila de comentarios: comments
• Fila de suscripción: suscribirse

Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan estudiar todo lo que se puede hacer con Divi.