Saltar al contenido

Cómo añadir una sección de comentarios en Divi

El módulo de comentarios le permite colocar un formulario de comentarios en cualquier parte de su página, si utiliza una página estándar o una publicación sin Divi Builder, los comentarios siempre aparecerán bajo el contenido de su publicación.

Una vez activado el Divi Builder, puede colocar el módulo de comentarios en cualquier lugar de su página y el formulario de comentarios aparecerá en la ubicación del módulo
;

Cómo añadir un módulo de comentarios a su página

Una vez que haya instalado el tema Divi en su sitio web, notará un botón Usar Divi Builder encima del editor de publicaciones cada vez que cree una nueva página.

Al hacer clic en este botón, activas Divi Builder, que te permite acceder a todos los módulos de Divi Builder, luego haces clic en el botón Usar Visual Builder para iniciar el generador en modo visual, o haces clic en el botón Usar Visual Builder mientras navegas por tu sitio web ascendente si estás conectado al panel de control de WordPress.U
na vez que haya
entrado en Visual Builder, puede hacer clic en el botón gris más para añadir un nuevo módulo a su página. los nuevos módulos sólo pueden añadirse dentro de las líneas. si empieza una nueva página, no olvide añadir primero una línea a su página

. localice el módulo de comentarios en la lista de módulos y haga clic en él para añadirlo a su página

.

La lista de módulos es buscable, lo que significa que también puede introducir la palabra»comentarios», luego haga clic en enter para buscar automáticamente y añadir el módulo de comentarios Una vez añadido el módulo, será bienvenido con la lista de opciones del módulo.

Estas opciones se dividen en tres grupos principales: Contenido, Diseño y Avanzado.

Usar el caso añadiendo una sección de comentarios a la entrada de tu blog

Para este ejemplo, le mostraré lo fácil que es insertar y formatear un módulo de comentarios en su artículo usando Visual Builder.

Tenga en cuenta que la sección de comentarios se añade debajo del contenido de la publicación y encima de una sección de pie de página de tres columnas; sin embargo, el módulo de comentarios podría haberse añadido en cualquier lugar.

Usando Visual Builder, agregue una sección estándar con una línea de ancho completo (1 columna) debajo de los módulos que contienen el contenido de su publicación, luego agregue el módulo de Comentarios a la línea.

Actualice la configuración de los comentarios como se indica a continuación:

Opciones de contenido

Color de fondo de campo: #ffffff

Opciones de diseño

Color del texto: DarkComment
Font: PT
NoFont Size: 20pxFont
Color
:
Text
Field: PT SansField F

ont

Size: 20pxMeta

Font

: PT None, Italic, UppercaseMeta
Font Size: 16pxChamps
Rayon Border: 0pxUse
Border: OUICouleur
de la bordure:
#aaaaaaaAncho
de
borde: 1pxUse
estilos personalizados para el botón: OUIBouton
Tamaño del texto:
20Color del texto:
#ffffffColor del fondo del botón: # 02b875Ancho

del

borde del
botón

: 3px

Algunos elementos, como la meta información del artículo y las imágenes de avatares, sólo aparecen cuando usted u otra persona agrega un comentario a la publicación.

Lo bueno de este módulo es que puedes añadir contenido adicional después de la sección de comentarios (como una llamada a la acción o un formulario de contacto), lo que no es fácil de hacer con un WordPress por defecto.

Opciones de contenido del módulo de comentarios

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos, todo lo que controla lo que aparece en su módulo siempre estará en esta pestaña.

Mostrar Avatar del autor

Al desactivar esta opción se eliminará el avatar del autor del comentario de la lista de comentarios.

Mostrar botón de respuesta

Cuando el botón Mostrar respuesta está desactivado, los usuarios no podrán responder a los comentarios de la lista de comentarios.

Ver comentarios

Cuando se desactiva, el número total de comentarios ya no se mostrará encima de la lista de comentarios.

Color de fondo de campo

El módulo de comentarios muestra un formulario de comentarios compuesto de diferentes campos de entrada, por defecto estos campos de entrada tienen un color de fondo gris, que puede cambiar eligiendo un color personalizado en el selector de color.

Etiqueta Admin

Cuando se utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulos de la interfaz de Divi Builder.

Opciones de diseño de comentarios

En la ficha Diseño, encontrará todas las opciones de estilo de módulo, como fuentes, colores, tamaño y espaciado, que le permiten cambiar el aspecto del módulo.

Color del texto

Si trabaja con un fondo oscuro, su texto debería estar resaltado, si trabaja con un fondo claro, su texto debería estar oscuro.

Fuente de comentarios

Puedes cambiar la fuente de tu comentario seleccionando la fuente deseada en el menú desplegable, Divi viene con docenas de fuentes fantásticas potenciadas por Google Fonts, Divi utiliza la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de la fuente de los comentarios

Aquí puede ajustar el tamaño de su fuente de comentarios, arrastrar el deslizador de intervalos para aumentar o disminuir el tamaño de su texto, o puede introducir directamente el valor del tamaño de texto deseado en el campo de entrada a la derecha del deslizador, que soporta diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.

Color del texto de los comentarios

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro, si desea cambiar el color del texto de su campo, elija el color deseado en el selector de color utilizando esta opción.

Espaciado de las cartas de comentarios

Si desea aumentar el espacio entre cada letra del texto del comentario, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.

Altura de la línea de comentario

La altura de la línea afecta el espacio entre cada línea del texto del comentario. Si desea aumentar el espacio entre cada línea, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.

Ámbito Policial

Puedes cambiar la fuente de tu texto seleccionando la fuente de tu elección en el menú desplegable, Divi viene con docenas de fuentes fantásticas potenciadas por Google Fonts, Divi utiliza la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente de campo

Aquí puede ajustar el tamaño del texto de su campo, arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto, o puede introducir directamente el valor del tamaño de texto deseado en el campo de entrada a la derecha del control deslizante, que soporta diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.

Color de texto del campo

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro, si desea cambiar el color del texto de su campo, elija el color deseado en el selector de color utilizando esta opción.

Espaciado de las letras en el campo

Si desea aumentar el espacio entre cada letra del campo de texto, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.

Altura de la línea de campo

La altura de la línea afecta el espacio entre cada línea de texto en su campo. Si desea aumentar el espacio entre cada línea, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.

Fuente Meta

Puedes cambiar la fuente de tu meta-texto seleccionando la fuente de tu elección en el menú desplegable, Divi viene con docenas de fuentes fantásticas potenciadas por Google Fonts, Divi usa la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.

Meta tamaño de fuente

Aquí puede ajustar el tamaño de su meta-texto, arrastrar el deslizador de intervalo para aumentar o disminuir el tamaño de su texto, o puede introducir directamente el valor del tamaño de texto deseado en el campo de entrada a la derecha del deslizador, que soporta diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.

Color del metatexto

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro, si desea cambiar el color de su meta-texto, elija el color de su elección en el selector de color utilizando esta opción.

Espaciado de las meta-cartas

Si desea aumentar el espacio entre cada letra del metatexto, utilice el control deslizante de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada a la derecha del control deslizante, que admite diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.

Altura de la meta-línea

La altura de la línea afecta el espacio entre cada línea del meta-texto. Si desea aumentar el espacio entre cada línea, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.

Campos del borde del radio

El radio del borde afecta cómo se redondean las esquinas de cada campo de entrada, cuanto más alto es el valor, más se redondean las cuatro esquinas de cada campo de entrada, puede reducir el valor a 0 para crear campos de entrada rectangulares o aumentar significativamente el valor para crear campos de entrada con bordes circulares.

Usar el borde

Habilitando esta opción se colocará un borde alrededor de su módulo que puede ser personalizado usando los siguientes parámetros condicionales.

Color del borde

Seleccione un color personalizado en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de 1 píxel, puede aumentar este valor arrastrando el deslizador de rango o introduciendo un valor personalizado en el campo de entrada a la derecha del deslizador.

Estilo de borde

Los bordes soportan ocho estilos diferentes que incluyen: sólido, punteado, punteado, doble, ranura, cresta, inserción y comienzo.

Margen personalizado

El margen es el espacio que se agrega fuera del módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha del mismo; puede agregar valores de margen personalizados a cualquiera de los cuatro lados del módulo; para eliminar un margen personalizado, elimine el valor agregado del campo de entrada; de forma predeterminada, estos valores se miden en píxeles, pero puede introducir unidades de medida personalizadas en los campos de entrada.

Acolchado personalizado

Para eliminar un margen personalizado, elimine el valor añadido del campo de entrada, que se mide en píxeles de forma predeterminada, pero puede introducir unidades de medida personalizadas en los campos de entrada.

Usar estilos personalizados para los botones

Al activar esta opción se muestran los diferentes ajustes de personalización de botones que puede utilizar para cambiar la apariencia del botón de su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón, que aumentará o disminuirá a medida que aumente o disminuya el tamaño del texto.

Color del texto del botón

De forma predeterminada, los botones toman el color de acento del tema, tal y como se define en el Personalizador del tema. esta opción le permite asignar un color de texto personalizado al botón de este módulo. seleccione su color personalizado mediante el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente, que se puede cambiar seleccionando el color de fondo deseado en el selector de color.

Ancho del borde del botón

Todos los botones Divi tienen un borde predeterminado de 2 píxeles, que puede aumentarse o reducirse utilizando esta configuración, y los bordes pueden eliminarse introduciendo un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones toman el color de acento del tema, tal como se define en el Personalizador del tema. esta opción le permite asignar un color de borde personalizado al botón de este módulo. seleccione el color personalizado con el selector de color para cambiar el color del borde del botón.

Botón de borde de radio

De forma predeterminada, los botones en Divi tienen un radio pequeño que redondea las esquinas por 3 píxeles, que puede reducir a 0 para crear un botón cuadrado o aumentar significativamente para crear botones con bordes circulares.

Espaciado entre letras de los botones

Si desea aumentar el espacio entre cada letra del texto del botón, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.

Botón de fuente

Puedes cambiar la fuente de tu texto seleccionando la fuente de tu elección en el menú desplegable, Divi viene con docenas de fuentes fantásticas potenciadas por Google Fonts, Divi utiliza la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Icono Añadir botón

De forma predeterminada, todos los botones Divi muestran un icono de flecha al desplazar el cursor.

Icono del botón

Si los iconos están habilitados, puede utilizar esta configuración para seleccionar el icono que desea utilizar en el botón. divi tiene varios iconos entre los que elegir.

Color del icono del botón

De forma predeterminada, el color del icono es el mismo que el color del texto de los botones, pero esta configuración le permite ajustar el color de forma independiente.

Ubicación del icono del botón

Puede elegir mostrar el icono del botón a la izquierda o a la derecha del botón.

Mostrar sólo el ícono que se desplaza por encima de la imagen para el

De forma predeterminada, los iconos de los botones sólo se muestran cuando se desplaza el ratón sobre ellos; si desea que el icono aparezca siempre, desactive esta opción.

El botón desplaza el cursor sobre el color del texto

Cuando el ratón del visitante pasa por encima del botón, se usará este color y el color cambiará del color base definido en la configuración anterior.

Color de fondo del ratón

Cuando el ratón del visitante pasa por encima del botón, se usará este color y el color cambiará del color base definido en la configuración anterior.

Desplazar el cursor sobre el color del borde

Cuando el ratón del visitante pasa por encima del botón, se usará este color y el color cambiará del color base definido en la configuración anterior.

Botón de radio flotante

Cuando el botón se pasa por encima del ratón de un visitante, este valor se utiliza y el valor cambiará del valor base definido en los parámetros anteriores.

El botón desplaza el cursor sobre el espaciado de las letras

Cuando el botón se pasa por encima del ratón de un visitante, este valor se utiliza y el valor cambiará del valor base definido en los parámetros anteriores.

Comentarios Opciones avanzadas

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como CSS personalizados y atributos HTML, aquí puede aplicar un CSS personalizado a uno de los muchos elementos del módulo, o puede aplicar clases CSS personalizadas e IDs al módulo, que se pueden utilizar para personalizar el módulo en el archivo de estilo.css del tema hijo.

ID DE CSS

Un identificador se puede utilizar para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase CSS

Una clase CSS se puede utilizar para crear un estilo CSS personalizado, puede añadir varias clases, separadas por un espacio, que se pueden utilizar en el tema Divi Child o en el CSS personalizado que añada a su página o sitio web mediante las opciones de tema Divi o la configuración de página de Divi Builder.

CSS personalizado

En la sección de CSS personalizado, encontrará un campo de texto donde podrá añadir CSS directamente a cada elemento. Sólo tienes que introducir las reglas CSS separadas por punto y coma.

Visibilidad

Puede elegir deshabilitar su módulo en tabletas individuales, teléfonos inteligentes u ordenadores de sobremesa si desea utilizar módulos diferentes en dispositivos diferentes o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.

Cómo añadir una sección de comentarios en Divi, 2 / 5 (2 votos)