Te voy a mostrar cómo hacer con Divi una barra 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 acción útiles.

Normalmente, estos elementos dinámicos se colocan dentro del diseño de la entrada. Sin embargo, puede ser útil mantener algunos de estos metadatos siempre a la vista de tus lectores.

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

Por ejemplo, podemos usar esta barra para recordar 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 cabecera de nuestra plantilla de entradas para añadir la mencionada barra informativa y que está aparezca en la parte superior de todas las entradas del blog.

Recursos necesarios

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

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

Paso a paso

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

Paso 1 – Sección para la barra informativa

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

FONDO:

• Color de fondo: #eceffe

SEPARACIÓN:

• Relleno: 10px arriba, 10px abajo

Paso 2 – Fila para la barra informativa

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

TAMAÑO:

• Ancho entre columnas: 1

SEPARACIÓN:

• Relleno: 0px arriba, 0px abajo

CSS PERSONALIZADO:

• Elemento principal:

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

Esto hará que las columnas permanezcan una al lado 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 manera 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 anterior 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:

• Link Text Color: #4160fd

Luego copiamos dos veces este último 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 botón y configuramos así:

• Texto del botón: Suscríbete
• Enlace del botó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 letras : 2px
• Fuente: Ubuntu
• Espesor de Fuente: Bold
• Estilo de Fuente: TT
• Relleno (escritorio): 10px arriba, 10px abajo, 20px izquierda, 20px derecha
• Relleno (tableta): 6px arriba, 6px abajo, 14px izquierda, 14px derecha

Paso 6 – Definir índice Z y fijar la barra

Para lograr que la barra de entradas se oculte detrás del encabezado cuando recién carga la página vamos a definir un índice Z menor que al encabezado.

Por último vamos a PUESTO y elegimos:

• Puesto: Fixed, esquina 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 aprender todo lo que se puede hacer con Divi.