Saltar al contenido principal

Cómo agregar una sección de comentarios en Divi

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

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

Una vez que el Divi Builder está activado, 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. ¡Esto te da mucho más control sobre tus comentarios!

módulo de comentarios divi.png

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 al Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas una página nueva.

Al hacer clic en este botón se activa Divi Builder, que le da acceso a todos los módulos de Divi Builder. Luego haz 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á explorando su sitio web ascendente si ha iniciado sesión en su tablero de WordPress.

botón divi builder módulo blog divi

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 comienza una página nueva, no olvide agregar una línea a su página primero.

agregar comentarios divi.png

Ubique 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 ingresar la palabra "comentarios", luego hacer clic en ingresar para buscar y agregar automáticamente el módulo de comentarios. Una vez que se haya agregado el módulo, será bienvenido con la lista de opciones del módulo. Estas opciones están separadas en tres grupos principales: Contenido , diseño et avanzado .

Caso de uso agregar una sección de comentario a tu publicación de blog

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

Tenga en cuenta que la sección de comentarios se agrega debajo del contenido de la publicación y sobre 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.

agregar una sección de comentarios divi.jpg

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

módulo de comentarios divi.png

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 del elemento y las imágenes de avatar, solo aparecen cuando usted o alguien más agrega un comentario a la publicación.

publicar un comentario en un artículo.jpg

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), que 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 íconos. Todo eso controla lo que aparece en tu módulo siempre estará en esta pestaña.

módulo comentario divi opción content.png

Ver el autor Avatar

Al deshabilitar 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 en la lista de comentarios.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Ver comentarios

Cuando se desactiva, la cantidad 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 un formulario de comentarios compuesto por diferentes campos de entrada. Por defecto, 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 utilizar 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 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 cambiar el aspecto de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para modificar casi cualquier cosa.

opción comentario divi builder.png

Color del texto

Aquí puedes elegir el valor de tu texto. Si trabaja con un fondo oscuro, su texto debe estar resaltado. Si trabajas con un fondo claro, tu texto debe estar oscuro.

Fuente de comentario

Puede cambiar la fuente de su comentario seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de excelentes fuentes basadas en Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando negrita, cursiva, mayúsculas y opciones de subrayado.

Tamaño de fuente del comentario

Aquí puedes ajustar el tamaño de tu fuente de comentario. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño del texto, o puede ingresar el valor de tamaño de texto deseado directamente 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" de acuerdo con 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 usando esta opción.

Espaciado de cartas de comentarios

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto de comentario, use el control deslizante de intervalo para ajustar el espacio o introduzca 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

Altura de la línea de comentario

La altura de la línea afecta el espacio entre cada línea del texto de comentario. Si desea aumentar el espacio entre cada línea, use el control deslizante de intervalo para ajustar el espacio o introduzca 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

Campo policial

Puede cambiar la fuente de su texto seleccionando la fuente de su elección en el menú desplegable. Divi viene con docenas de excelentes fuentes basadas en Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando negrita, cursiva, mayúsculas y opciones de 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 del texto, o puede ingresar el valor de tamaño de texto deseado directamente 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" de acuerdo con su tamaño para cambiar su tipo de unidad.

Color del 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 usando esta opción.

Espaciado de letras de campo

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del campo, use el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño del 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

text camp module comment divi.png

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 introduzca 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

Meta Font

Puede cambiar la fuente de su meta texto seleccionando la fuente de su elección del menú desplegable. Divi viene con docenas de excelentes fuentes basadas en Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando negrita, cursiva, mayúsculas y opciones de 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 del texto, o puede ingresar el valor de tamaño de texto deseado directamente 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" de acuerdo con su tamaño para cambiar su tipo de unidad.

Color del meta texto

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 usando esta opción.

Espaciado de meta letras

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra de su meta texto, use el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño del 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

Altura de la línea meta

La altura de la línea afecta el espacio entre cada línea de su meta-texto. Si desea aumentar el espacio entre cada línea, use el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño del 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

Radio de la frontera del campo

El radio del borde afecta la forma en que se redondean las esquinas de cada campo de entrada. Cuanto mayor es el valor, más redondean 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.

border divi builder.png

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.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Color del borde

Esta opción afecta el color de su 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íxeles. Puede aumentar este valor arrastrando el control deslizante en el rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Unidades personalizadas de medidas de soporte, lo que significa que puede cambiar la unidad predeterminada de "px" a otra cosa, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes, incluidos: sólido, punteado, punteado, doble, ranura, cresta, inserción y comienzo. Seleccione el estilo de su elección del menú desplegable para aplicarlo a su frontera.

Margen personalizado

Margen es el espacio agregado al exterior de su módulo, entre el módulo y el siguiente elemento arriba, debajo oa la izquierda y derecha del mismo. Puede agregar valores de margen personalizados a uno de los cuatro lados del módulo. Para eliminar un margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Acolchado 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 uno de los cuatro lados del módulo. Para eliminar un margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Use estilos personalizados para botones

Al habilitar esta opción, se muestran las diferentes configuraciones de personalización para los botones que puede usar para cambiar la apariencia del botón en su módulo.

Tamaño del texto del botón

Esta configuración se puede usar 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 aumenta y disminuye.

Color del texto del botón

Por defecto, los botones toman el color de acento de su tema, como se define en el Customizer del tema. Esta opción le permite asignar un color de texto personalizado al botón en 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 predeterminado 2px. Este límite se puede aumentar o disminuir usando este parámetro. Los bordes se pueden eliminar al ingresar un valor de 0.

box shadow divi builder module comment.png

Color del borde del botón

De forma predeterminada, los bordes de los botones toman el color de acento de su tema, como se define en el personalizador del tema. Esta opción le permite asignar un color de borde personalizado al botón en 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 radio pequeño que redondea las esquinas de los píxeles 3. Puede reducirlo a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones circulares.

Espaciado de letras de los botones

El espaciado de las 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 introduzca el tamaño del 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 ingresar "px" o "em" de acuerdo con su tamaño para cambiar su tipo de unidad.

Botón de policía

Puede cambiar la fuente de su texto seleccionando la fuente de su elección en el menú desplegable. Divi viene con docenas de excelentes fuentes basadas en Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando negrita, cursiva, mayúsculas y opciones de subrayado.

Agregar icono de botón

Desactivado esta configuración eliminará los iconos de su botón. Por defecto, todos los botones Divi muestran un ícono de flecha cuando se desplazan.

Icono de botón

Si los iconos están habilitados, puede usar esta configuración para seleccionar el ícono a 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 ícono que aparece en su botón. Por defecto, el color del icono es el mismo que el color del texto de sus botones, pero esta configuración le permite ajustar el color de forma independiente.

Ubicación del icono del botón

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

Mostrar solo el icono de desplazamiento del botón

Por defecto, los iconos de los botones se muestran solo durante la renovación. Si desea que el ícono aparezca siempre, desactive esta configuración.

Color del texto del paso elevado del botón

Cuando el mouse del visitante pasa sobre el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Color de fondo del mouse

Cuando el mouse del visitante pasa sobre el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Desplazar el color del borde

Cuando el mouse del visitante pasa sobre el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Botón de radio que se mueve

Cuando un mouse de visitante mueve el botón, se usa este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

Letras de cambio de botón de espaciado

Cuando un mouse de visitante mueve el botón, se usa este valor. 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 los atributos CSS y HTML personalizados. Aquí puede aplicar un CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se puede usar para personalizar el módulo en el archivo style.css del tema secundario.

sección avanzada divi builder module comments.png

ID de CSS

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

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema Divi Child o en el CSS personalizado que agregue a su página o sitio web utilizando las opciones de Divi theme o Divi Builder.

CSS personalizado

Un CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizada, encontrará un campo de texto donde puede agregar CSS directamente a cada elemento. Las entradas de CSS en estas configuraciones ya están incorporadas en las etiquetas de estilo. Solo necesita ingresar reglas de CSS separadas por punto y coma.

visibilidad

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

Eso es todo por este tutorial.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
5 acciones
cuota1
Tweet1
Siguiente 3
WhatsApp