Cómo agregar, configurar y personalizar el Módulo de Comentarios de Divi

El Módulo de Comentarios de Divi facilita el diseño de la sección de comentarios en entradas o páginas de blog.

Con este módulo, tienes control total sobre el aspecto de los comentarios y puedes colocarlo en cualquier parte de tu diseño. Una sección de comentarios atractiva es clave para fomentar más interacción en tus publicaciones. Usa este módulo para crear una plantilla personalizada de página en el Theme Builder del tema Divi para las entradas del blog.

Ejemplo del Módulo de Comentarios de Divi

Ver una demostración en vivo de este módulo

Cómo agregar el Módulo de Comentarios de Divi a tus publicaciones usando el Theme Builder

Vamos a usar el Divi Theme Builder para editar una plantilla personalizada de entradas de blog e incorporar el módulo de comentarios en el diseño.

El Theme Builder es donde diseñas encabezados, pies de página y plantillas de página personalizadas para tu sitio.

Si aún no has diseñado una plantilla personalizada para entradas de blog, puedes aprender cómo hacerlo aquí.

Accediendo al Divi Theme Builder

1. Ve al Escritorio de WordPress → Divi → Theme Builder.

2. Esto te llevará al panel del Theme Builder, donde se muestran todas las plantillas personalizadas de tu sitio.

Editar el Cuerpo Personalizado de la Plantilla de Entradas del Blog

1. Localiza la plantilla de entradas de blog (la que dice All Posts).

2. Haz clic en el ícono del lápiz junto a Custom Body para editar el cuerpo de esa plantilla.

3. Esto cargará la plantilla con el Visual Builder de arrastrar y soltar de Divi, donde puedes comenzar a diseñar el módulo de comentarios.

Cargar el Módulo de Comentarios de Divi

1. Haz clic en el ícono gris + para abrir la biblioteca de módulos.

2. Busca y selecciona Comments para cargar el módulo.

3. También puedes escribir su nombre en la barra de búsqueda.

Editar plantillas de página con edición frontal de sitio completo

Con la última actualización de Divi, puedes editar encabezados, pies de página y plantillas desde el frontend usando el Visual Builder, una vez que ya estén en uso. Es ideal crear plantillas con el Theme Builder, pero luego podrás modificarlas en tiempo real desde el frontend. Aprende más sobre la edición frontal de sitio completo aquí.

Todas las opciones del Módulo de Comentarios explicadas

Una vez agregado el módulo, se abrirán sus ajustes organizados en tres pestañas:

• Contenido

• Diseño

• Avanzado

Pestaña Contenido

Aquí se configuran las opciones de contenido del módulo.

Elementos

Define qué elementos se mostrarán u ocultarán:

• Mostrar avatar del autor – activar o desactivar.

• Mostrar botón de responder – activar o desactivar.

• Mostrar recuento de comentarios – activar o desactivar.

Enlace

Haz que todo el módulo sea clicable:

• URL del vínculo del módulo – pega aquí la URL deseada.

• Destino del vínculo – elige “Misma ventana” o “Nueva pestaña”.

Fondo

Opciones para personalizar el fondo:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Imagen

Esquinas redondeadas de la imagen – Si quieres redondear las esquinas de la imagen, escribe un valor numérico. Cuanto mayor sea el número, más redondeadas estarán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en el ícono de cadena azul resaltado en el medio); sin embargo, si deseas tener valores diferentes para cada esquina, haz clic en la cadena azul para desvincular los valores. Si los valores están vinculados automáticamente, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

Estilos de borde de la imagen – Aquí puedes agregar un borde a la imagen. Puedes agregar un borde en todos los lados o en lados individuales (arriba, derecha, abajo e izquierda).

Ancho del borde de la imagen – Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.

Color del borde de la imagen – Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada de tu sitio o hacer clic en el ícono del cuentagotas para elegir un nuevo color.

Estilo del borde de la imagen – Aquí puedes seleccionar el estilo del borde que deseas: sólido, discontinuo, punteado, doble, ranurado (groove), en relieve (ridge), incrustado (inset), sobresaliente (outset) o ninguno.

Sombra de caja de la imagen – Elige el estilo de sombra que quieres aplicar a la imagen. Por defecto, no se aplica sombra.

Posición horizontal de la sombra de caja – Controla la posición horizontal de la sombra de caja de la imagen.

Posición vertical de la sombra de caja – Controla la posición vertical de la sombra de caja de la imagen.

Fuerza del desenfoque de la sombra de caja – Controla la intensidad del desenfoque de la sombra. Cuanto mayor sea el número, más desenfoque.

Fuerza de expansión de la sombra de caja – Controla qué tan extendida está la sombra sobre la imagen.

Color de la sombra – Elige el color de la sombra de la imagen.

Posición de la sombra de caja – Elige la posición de la sombra aplicada a la imagen: sombra interior o sombra exterior.

Tono de la imagen – Ajusta el tono (matiz) de la imagen.

Saturación de la imagen – Ajusta la saturación de la imagen.

Brillo de la imagen – Ajusta el brillo de la imagen.

Contraste de la imagen – Ajusta el contraste de la imagen.

Invertir imagen – Invierte los colores de la imagen.

Sepia de la imagen – Controla el nivel de tono sepia aplicado a la imagen.

Opacidad de la imagen – Controla la opacidad (transparencia) de la imagen.

Desenfoque de la imagen – Controla el nivel de desenfoque de la imagen.

Modo de fusión de la imagen – El modo de fusión se refiere a cómo se mezcla el módulo con las capas que están debajo. Por defecto, estará seleccionado “normal”.

Texto

Alineación del texto – Permite elegir cómo se alinea el texto:

• Izquierda

• Centro

• Derecha

• Justificado

Color del texto – Selecciona la paleta de colores predeterminada para el texto de este módulo: claro u oscuro. Las paletas de color claras y oscuras predeterminadas se pueden configurar en las Opciones del tema Divi.

Sombra del texto – Puedes aplicar una sombra a todo el texto dentro de este módulo. Cuando se selecciona un tipo de sombra, se aplicará a todo el contenido de texto.

Texto de conteo de comentarios

• Nivel de encabezado – Elige el nivel de encabezado asignado al texto de conteo de comentarios: h1, h2, h3, h4, h5 o h6.

• Fuente – Elige la fuente para el texto de conteo de comentarios. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una fuente personalizada.

• Peso de la fuente – Selecciona la negrita del texto.

• Estilo de la fuente – Elige entre: cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto – Solo para el texto de conteo de comentarios: izquierda, centro, derecha o justificado.

• Color del texto – Elige un color específico para este texto.

• Tamaño del texto – Ajusta el tamaño de la fuente.

• Espaciado entre letras – Ajusta el espacio entre cada letra.

• Altura de línea – Ajusta el espacio entre líneas del texto.

• Sombra del texto – Añade una sombra, configurando dirección, intensidad y color.

Texto del título del formulario

• Igual que en texto de conteo, con opciones para nivel de encabezado, fuente, peso, estilo, alineación, color, tamaño, espaciado, altura de línea y sombra.

Texto meta

• Igual que en los anteriores, con opciones de fuente, peso, estilo, alineación, color, tamaño, espaciado, altura de línea y sombra.

Texto del comentario

• Igual que en los anteriores, con opciones de fuente, peso, estilo, alineación, color, tamaño, espaciado, altura de línea y sombra.

Botón

• Usar estilos personalizados para el botón – Activa para mostrar más opciones.

• Tamaño del texto del botón

• Color del texto del botón

• Fondo del botón

• Ancho del borde del botón

• Color del borde del botón

• Radio del borde del botón (qué tan redondeadas son las esquinas)

• Espaciado entre letras del botón

• Fuente del botón

• Peso de la fuente

• Estilo de fuente (cursiva, mayúsculas, versalitas, subrayado, tachado)

• Mostrar icono en el botón (sí/no)

• Icono del botón (selección del icono)

• Color del icono

• Ubicación del icono (izquierda o derecha)

• Mostrar solo icono al pasar el mouse (sí/no)

• Sombra del texto del botón, con opciones para longitud horizontal y vertical, intensidad de desenfoque y color.

Dimensionamiento

• Altura de imagen destacada – Establece una altura específica para la imagen destacada.

• Altura máxima de imagen destacada – Altura máxima que puede tener la imagen destacada.

• Ancho – Define el ancho del módulo.

• Ancho máximo – Define el ancho máximo del módulo.

• Alineación del módulo – Si se establecen valores de ancho o ancho máximo, puedes alinear el módulo a la izquierda, centro o derecha.

• Altura mínima – Valor mínimo para la altura del módulo.

• Altura – Altura del módulo.

• Altura máxima – Altura máxima del módulo.

Espaciado

• El margen añade espacio fuera del módulo.

• El relleno añade espacio dentro del módulo.

• Para mantener proporciones iguales, haz clic en el ícono de cadena para bloquear valores (por ejemplo, arriba y abajo).

• Los valores predeterminados de margen y relleno para el módulo de comentarios son 0.

Borde

• Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas. Valores vinculados por defecto, pero puedes desvincularlos.

• Estilos de borde – Elige en qué lados aplicar el borde.

• Ancho del borde – Define el grosor del borde.

• Color del borde – Selecciona el color del borde.

• Estilo del borde – Elige el estilo del borde: sólido, discontinuo, punteado, doble, ranurado, en relieve, incrustado, sobresaliente o ninguno.