El módulo de comentarios le permite colocar un formulario comentarios en cualquier lugar de su página. Si está utilizando una página o publicación estándar sin Divi Builder, los comentarios seguirán apareciendo debajo del contenido de su publicación.

Una vez que Divi Builder está activado, puede colocar el módulo de comentarios en cualquier lugar de su página y formulario los comentarios aparecerán en la ubicación del módulo. ¡Esto te da mucho más control sobre tus comentarios!

Cómo agregar un módulo de comentarios a tu página

Antes de que pueda agregar un módulo de comentarios a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página.

Al hacer clic en este botón, activa Divi Builder, que le da acceso a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando está navegando en su sitio web ascendente si ha iniciado sesión en su panel de WordPress.

Una vez ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.

Busque el módulo de comentarios en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "comentarios" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo de comentarios. Una vez que se agrega el módulo, se le dará la bienvenida con la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Caso de uso de agregar una sección de comentarios a su publicación de blog

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

Tenga en cuenta que la sección de comentarios se agrega 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 agregado en cualquier lugar.

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

Actualice la configuración de comentarios de la siguiente manera:

Opciones de contenido

Color de fondo de los campos: #ffffff

Opciones de diseño

Color del texto: oscuro
Comentario de la policía: PT Sans
Tamaño de fuente del comentario: 20px
Color del comentario:
Campo policial: PT Sans
Tamaño de fuente de campo: 20px
Meta Fuente: PT Sans, cursiva, mayúscula
Tamaño de letra de Meta: 16px
Radio de borde de campo: 0px
Usar borde: SÍ
Color del borde: #aaaaaa
Ancho del borde: 1px
Use estilos personalizados para el botón: SÍ
Botón de tamaño de texto: 20
Color de texto del botón: #ffffff
Color de fondo del botón: # 02b875
Ancho del borde de
botón: 3px

Algunos elementos, como la metainformación de la publicación y las imágenes de avatar, solo aparecen cuando usted u otra persona agrega un comentario a la publicación.

Es todo. La belleza de este módulo es que puede agregar contenido adicional después de la sección de comentarios (como un llamado a la acción o un formulario de contacto), lo cual no es fácil de hacer con un WordPress predeterminado.

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 de autor

Deshabilitar esta opción 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 en la lista de comentarios.

Ver comentarios

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

Color de fondo de los campos

El módulo de comentarios muestra una formulario comentario compuesto por diferentes campos de entrada. De forma predeterminada, estos campos de entrada tienen un color de fondo gris. Puede cambiar este color eligiendo un color personalizado en el selector de color.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el generador para una fácil identificación. Al usar la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulo de la interfaz Divi Builder.

Opciones de diseño de comentarios

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta pestaña le permite modificar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para modificar casi cualquier cosa.

Color del texto

Aquí puede elegir el valor de su texto. Si está trabajando con un fondo oscuro, su texto debe estar resaltado. Si está trabajando con un fondo claro, su texto debe ser oscuro.

Fuente de comentario

Puede cambiar la fuente de su comentario seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando negrita, cursiva, todo en mayúsculas y subrayado.

Tamaño de fuente del comentario

Aquí puede ajustar el tamaño de la fuente de su comentario. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto o puede ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Color del texto de los comentarios

De forma predeterminada, todos los colores del 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 usando esta opción.

Espaciado de cartas de comentarios

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto de su comentario, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Altura de la línea de comentario

La altura de la línea afecta el espacio entre cada línea de texto de comentario. Si desea aumentar el espacio entre cada línea, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Campo policial

Puede cambiar la fuente de su texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando negrita, cursiva, todo en mayúsculas y subrayado.

Tamaño de fuente de campo

Aquí puede ajustar el tamaño del texto de su campo. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto o puede ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Color del texto del campo

De forma predeterminada, todos los colores del 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 usando esta opción.

Espaciado de letras de campo

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto en su campo, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

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, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Meta Font

Puede cambiar la fuente de su metatexto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto con las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra Meta

Aquí puede ajustar el tamaño de su meta texto. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto o puede ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Color del metatexto

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su metatexto, elija el color que desee en el selector de color usando esta opción.

Espaciado de meta letras

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra de su metatexto, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño del espacio que desea en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según su tamaño para cambiar el tipo de unidad.

Altura de la línea meta

La altura de la línea afecta el espacio entre cada línea en su metatexto. Si desea aumentar el espacio entre cada fila, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Radio de la frontera del campo

El radio del borde afecta cómo se redondean las esquinas de cada campo de entrada. Cuanto mayor sea el valor, más redondeadas serán las cuatro esquinas de cada campo de entrada. Puede reducir el valor a 0 para crear campos de entrada rectangulares o aumentar el valor significativamente para crear campos de entrada con bordes circulares.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado del selector de color para aplicarlo a su borde.

Ancho del borde

De forma predeterminada, los bordes tienen 1 píxel de ancho. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Admite unidades de medida personalizadas, lo que significa que puedes cambiar la unidad predeterminada de "px" a algo más como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes, que incluyen: sólido, punteado, punteado, doble, surco, cresta, recuadro e inicio. Seleccione el estilo que desee del menú desplegable para aplicarlo a su borde.

Margen personalizado

El margen es el espacio agregado al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha de él. 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 ingresar unidades de medida personalizadas en los campos de entrada.

Relleno Personalizado

El relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Puede agregar valores de relleno 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 ingresar unidades de medida personalizadas en los campos de entrada.

Use estilos personalizados para botones

Habilitar esta opción revela las distintas configuraciones de personalización de botones que puede usar 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. El botón se escalará a medida que el tamaño del texto aumente y disminuya.

Color del texto del botón

De forma predeterminada, los botones toman el color de acento de su tema, como se define en el Personalizador de temas. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con 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. Esto 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 de 2px por defecto. Este borde se puede aumentar o disminuir con esta configuración. Los bordes se pueden eliminar ingresando un valor de 0.

Color del borde del botón

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

Botón Radius Border

El radio del borde afecta la forma en que se redondean las esquinas de los botones. Por defecto, los botones en Divi tienen un pequeño radio que redondea las esquinas en 3 píxeles. Puede reducirlo a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de letras de los botones

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del botón, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.

Botón de policía

Puede cambiar la fuente de su texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando negrita, cursiva, todo en mayúsculas y subrayado.

Agregar icono de botón

Desactivado, esta configuración eliminará los iconos de su botón. De forma predeterminada, todos los botones Divi muestran un icono de flecha cuando se desplaza.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para seleccionar el ícono que usará en su botón. Divi tiene varios iconos para elegir.

Color del icono del botón

Ajustar esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color del texto del botón, pero esta configuración le permite ajustar el color de forma independiente.

Ubicación del icono del botón

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

Mostrar solo el icono de desplazamiento del botón

De forma predeterminada, los iconos de los botones solo se muestran al pasar el cursor. Si desea que el icono aparezca siempre, desactive esta configuración.

Color del texto del paso elevado del botón

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

Color de fondo del mouse

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

Desplazar el color del borde

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

Botón de radio que se mueve

Cuando el mouse de un visitante pasa el mouse sobre el botón, se usa este valor. El valor cambiará del valor base definido en la configuración anterior.

Letras de cambio de botón de espaciado

Cuando el mouse de un visitante pasa el mouse sobre el botón, se usa este valor. El valor cambiará del valor base definido en la configuración anterior.

Comentarios Opciones avanzadas

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como atributos CSS y HTML personalizados. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su Tema divi Niño o en CSS personalizado que agrega a su página o sitio web usando las Opciones de tema Divi o la Configuración de página de Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar CSS directamente a cada elemento. Las entradas CSS en esta configuración ya están incrustadas con etiquetas de estilo. Así que solo tienes que ingresar reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.

eso es todo por este tutorial.