Cómo diseñar el módulo de comentarios de Divi dentro de una plantilla de publicación de blog

Avance

Echemos un vistazo a cómo se ven los diseños de diseño de comentarios en diferentes tamaños de pantalla. El primer diseño es un estilo minimalista en blanco y negro y el segundo es más colorido.

Escritorio

Tableta

Teléfono

Escritorio

Tableta

Móvil

Descargue las plantillas del módulo de comentarios GRATIS

Para poner sus manos en las plantillas del módulo de comentarios gratuitos, primero deberá descargarlas usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Recreemos el diseño del módulo de comentarios #1

Crear diseño de fondo

El primer paso para recrear la plantilla de diseño de comentarios en blanco y negro es diseñar el fondo de puntos. Uno para la vista de escritorio y otro para pantallas receptivas. Si desea crearlo usted mismo, necesitará la herramienta de creación de patrones de Adobe Illustrator. De lo contrario, puede obtener un patrón similar de Internet o usar el que se incluye en el archivo .zip descargable anterior.

1. En Adobe Illustrator, cree una mesa de trabajo en blanco de alrededor de 1920 px de alto + 670 px de ancho.
2. Cree un círculo negro dentro de un cuadrado blanco con márgenes de aproximadamente la mitad del tamaño del círculo.
3. Seleccione ambas formas y haga un patrón haciendo clic en objeto> patrón> hacer.
4. En el creador de patrones, elija ‘ladrillo por columna’ y guárdelo como una muestra de patrón.
5. Cree una forma del tamaño de la mesa de trabajo y aplique el patrón.
6. Para los tamaños de pantalla sensibles, reduzca la forma a la mitad de su tamaño. Presiona shift para mantener la relación de los círculos.
7. Copie y pegue la forma estampada al lado de la primera y ahora tiene el mismo patrón con círculos más pequeños.
8. Descarga ambos por separado.

Abra Theme Builder y agregue una nueva plantilla

Ahora es el momento de abrir el generador de temas. Agregar una nueva plantilla.

Seleccione la plantilla para todas las publicaciones

Utilice la nueva plantilla en todas las publicaciones.

Agregue un cuerpo personalizado y construya desde cero

Por último, pero no menos importante, comience a crear el cuerpo personalizado de la plantilla.

Agregar nueva sección

Fondo

Ahora, podemos comenzar a construir el diseño para el diseño de comentarios. Dentro del editor de plantillas, verás una sección. Abra la configuración de la sección y cargue las imágenes de fondo del patrón. Agregue una superposición de degradado también.

• Fondo: Gradiente
• Color 1: Blanco semitransparente rgba (255,255,255,0.96)
• Color 2: Blanco #ffffff
• Coloque el degradado sobre la imagen de fondo: Sí
• Imagen:
  
  • Escritorio: Imagen de patrón de puntos 1
  • Tableta y teléfono: Imagen de patrón de puntos 2

Agregar nueva fila

Estructura de la columna

Ahora, agregue una nueva fila con dos columnas.

Dimensionamiento

Luego, ajuste el tamaño de la fila.

• Ancho de canalón personalizado: 2
• Ancho: 80%
• Ancho máximo: 100%

Configuración de la columna 2

Borde

En la configuración de las columnas, agregue un borde superior a la segunda columna.

• Estilo: solo superior
• Ancho: 3px
• Color: Negro #ffffff

Agregar módulo de texto a la columna 1

Contenido

Agregue el primer módulo de texto a la columna 1 con algún contenido H3 de su elección.

• Texto: Párrafo

Texto de encabezado

Luego, en la pestaña de diseño, aplique estilo al texto del título.

• Nivel de título: H3
• Fuente: GFS Didot
• Color: Negro #000000
• Tamaño:
  
  • Escritorio: 5vw
  • Tableta: 9vw
  • Teléfono: 13vw

Espaciado

Además, ajuste el espaciado.

• Acolchado inferior
  
  • Escritorio: 3vw
  • Tableta y teléfono: 7vw

Agregar módulo de testimonios a la columna 1

Contenido

Ahora, agregue un módulo de testimonios a la columna 1 con algún contenido de su elección. Sube una imagen también.

• Autor: Lector Leal
• Título del puesto: Oficial de marketing de contenido
• Compañía: Tiger Media Company
• Cuerpo: Texto de párrafo
• Imagen: Foto de retrato

Fondo

Asegúrate de que el fondo sea transparente.

• Color de fondo: transparente

Elementos

En la pestaña de elementos, seleccione para mostrar el icono de cotización.

• Mostrar icono de cotización: Sí

Icono de cotización

Luego, diseñe el ícono de cotización de la siguiente manera.

• Color: Negro #000000
• Fondo: Blanco #ffffff
• Tamaño de fuente del icono:
  
  • Escritorio: 2vw
  • Tableta: 5vw
  • Teléfono: 9vw

Imagen

Cambie la configuración de la imagen a continuación.

• Anchura y altura:
  
  • Escritorio: 110px
  • Tableta y teléfono: 90px
• Esquinas redondeadas: 90px
• Color del borde: transparente

Texto

Cambie la alineación del texto también.

• Alineación: Centro

Cuerpo de texto

Luego, aplique estilo al cuerpo del texto.

• Fuente: Verdana
• De color negro
• Tamaño:
  
  • Escritorio: 0.7vw
  • Tableta: 2vw
  • Teléfono: 3vw

Texto del autor

Continúe diseñando el texto del autor.

• Fuente: GFS Didot
• Peso: Negrita
• Color: Negro #ffffff
• Tamaño:
  
  • Escritorio: 1.2vw
  • Tableta: 2.5vw
  • Teléfono: 4vw
• Espaciado entre letras: 1px

Texto de posición

Luego, el texto de la posición.

• Fuente: GFS Didot
• Color: Negro #ffffff
• Tamaño:
  
  • Escritorio: 0.9vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Altura de línea: 2em

Texto de la empresa

Además, el texto de la empresa.

• Fuente: GFS Didot
• Color: Negro #ffffff
• Tamaño:
  
  • Escritorio: 0.7vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Altura de línea: 2em

Dimensionamiento

Continúe ajustando el tamaño del módulo.

• Ancho:
  
  • Escritorio: 60%
  • Tableta: 65%
  • Teléfono: 75%
• Alineación del módulo: Centro

Espaciado

Además, ajuste el espaciado.

• Acolchado superior:
  
  • Escritorio: 1.5vw
  • Tableta: 5vw
  • Teléfono: 6vw

Borde

Finalmente, agregue un borde superior al módulo.

• Estilos de borde: solo superior
• Ancho: 2px
• Color: Negro #ffffff

Agregar módulo de comentarios a la columna 2

Elementos

Pasando a la columna 2, agregue un módulo de comentarios. Cambie la configuración de los elementos de la siguiente manera.

• Mostrar avatar del autor: No
• Mostrar botón de respuesta: Sí
• Mostrar número de comentarios: No

Campos

Pase a la pestaña de diseño del módulo y cambie la configuración de los campos.

• Color del texto: Negro #oooooo
• Color de fondo: gris pálido #f7f7f7
• Color del texto de enfoque: negro #oooooo
• Color de fondo del foco: gris pálido #f7f7f7
• Fuente: GFS Didot
• Tamano del texto:
  
  • Escritorio: 0.9vw
  • Tableta: 1.5vw
  • Teléfono: 2.5vw
• Espaciado entre letras: 1px

Texto del título del formulario

Modifique la configuración del texto del título del formulario a continuación.

• Fuente: GFS Didot
• Color: Negro #ffffff
• Tamaño:
  
  • Escritorio: 0.9vw
  • Tableta: 2.5vw
  • Fuente: 3.5vw

metatexto

Continúe diseñando el metatexto.

• Fuente: GFS Didot
• Color: Negro #ffffff
• Tamaño:
  
  • Escritorio: 1.3vw
  • Tableta: 3vw
  • Teléfono: 4vw

Texto del comentario

Además, el texto del comentario.

• Fuente: Verdana
• Color: Negro #ffffff
• Tamaño:
  
  • Escritorio: 0.7vw
  • Tableta: 1.7vw
  • Teléfono: 2.7vw
• Espaciado entre letras: 1px
• Altura de la línea: 1,8 em

Botón

Continuando, diseña los botones.

• Tamano del texto:
  
  • Escritorio: 0.9vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw
• Color del texto: Blanco #000000
• Fondo: Negro #ffffff
• Espaciado entre letras: 1px
• Fuente: GFS Didot

Dimensionamiento

Luego, ajuste la configuración de tamaño del módulo.

• Ancho: 90%
• Alineación del módulo: Centro

Espaciado

Por último, el espaciado también.

• Acolchado superior:
  
  • Escritorio: 4vw
  • Tableta y teléfono: 8vw
• Acolchado izquierdo y derecho: 3vw

Recreemos el diseño del módulo de comentarios #2

Crear diseño de fondo

El primer paso para recrear el diseño del módulo de comentarios de los círculos de colores es preparar un diseño de fondo. Puede crear un diseño de círculo simple dentro de su editor de gráficos favorito. Estos son los pasos que debe seguir para crear la imagen de fondo:

1. Cree un lienzo de 1800 px de ancho y alrededor de 1800 px de alto.
2. Agrega dos círculos, uno más grande que el otro.
3. Colorea los círculos y agrega algo de transparencia.
4. Coloque los dos círculos un poco superpuestos en la parte superior izquierda del lienzo.
5. Agrupe los círculos como un objeto y duplíquelos.
6. Voltee los círculos y colóquelos en diagonal hacia abajo y hacia la derecha desde los dos primeros.
7. Asegúrate de dejar espacio en la parte superior e inferior. Cuando hay muchos comentarios, la imagen se repetirá y formará un mosaico vertical.

El diseño de fondo que creamos para esta plantilla de diseño de comentarios también está disponible en la carpeta comprimida que puede descargar al comienzo del tutorial.

Abra Theme Builder y agregue una nueva plantilla

Ahora es el momento de abrir el generador de temas. Agregar una nueva plantilla.

Seleccione la plantilla para todas las publicaciones

Aplicar la plantilla a todas las publicaciones.

Agregue un cuerpo personalizado y construya desde cero

Y comience a crear el cuerpo personalizado de la plantilla.

Agregar nueva sección

Una vez en el editor de plantillas, notará una sección. Abre esa sección y sube la imagen de fondo. Incluya también una superposición de color degradado.

Fondo

• Fondo: Gradiente
• Color de degradado 1: Blanco transparente rgba (255,255,255,0.55)
• Color de degradado 2: Blanco transparente rgba (255,255,255,0.55)
• Imagen: Círculos Fondo

Espaciado

Además, ajuste el espaciado de la sección antes de agregar una fila.

• Relleno superior e inferior: 200px

Agregar nueva fila

Estructura de la columna

Ahora agregue una fila con tres columnas.

Dimensionamiento

Antes de agregar módulos, ajuste el tamaño de la fila.

• Ancho de canalón personalizado: 2
• Ancho: 80%
• Ancho máximo: 100%

Configuración de la columna 2

Fondo

Ahora, diseñe la segunda columna agregando un fondo azul.

• Color de fondo: Azul #51a2ff

Borde

Continúe redondeando los bordes.

• Esquinas redondeadas: 1vw las cuatro esquinas

Sombra de la caja

Finalmente, agregue una sombra de caja también.

• Sombra: Tercera Opción
• Fuerza de desenfoque: 80px
• Color: RGBA (0,0,0,0,13)

Agregar módulo de persona a la columna 1

Contenido

Es hora de agregar los módulos. Comience con un módulo de persona en la columna 1 y agregue el contenido.

• Nombre: Jenny McAbee
• Puesto: Colaborador habitual
• Cuerpo: Texto de párrafo
• Imagen: Foto de retrato

Fondo

Agregue un fondo blanco al módulo.

• Color de fondo: Blanco #000000

Imagen

En la pestaña de diseño, aplique estilo al borde de la imagen de la siguiente manera.

• Esquinas redondeadas: 0.5vw arriba a la izquierda y arriba a la derecha
• Estilos de borde: borde inferior
  
  • Ancho: 5px
  • Color: Azul #51a2ff

Texto del título

Continúe diseñando el texto del encabezado.

• Nivel de título: H4
• Fuente: Alegreya Sans SC
• Estilo: TT
• Color: #021859
• Tamaño:
  
  • Escritorio: 1vw
  • Tableta: 3vw
  • Teléfono: 5vw
• Espaciado entre letras: 1px
• Altura de la línea: 1,6 em

Cuerpo de texto

Luego también, el cuerpo del texto.

• Fuente: Lato
• Color: Azul #1a1f73
• Tamaño:
  
  • Escritorio: 0.7vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Altura de línea: 2em

Texto de posición

Continúe con el texto de la posición.

• Fuente: Lato
• Estilo: cursiva
• Color: #021859
• Tamaño:
  
  • Escritorio: 0.8vw
  • Tableta: 3vw
  • Teléfono: 3.5vw

Dimensionamiento

Luego, ajusta el tamaño.

• Ancho:
  
  • Escritorio: 100%
  • Tableta: 50%
  • Teléfono: 70%
• Alineación del módulo: Centro

Espaciado

Además, el espaciado.

• Acolchado superior e inferior: 4vw

Borde

Luego, agrega algunas esquinas redondeadas.

• Esquinas redondeadas: o.5vw en las cuatro esquinas
• Estilos de borde: 24 px en los cuatro lados
  
  • Color: Blanco #ffffff

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Sombra: Tercera Opción
• Fuerza de desenfoque: 80px
• Color: RGBA (0,0,0,0,13)

Agregue el módulo de seguimiento de redes sociales a la columna 1

Redes

Debajo del módulo de persona, agregue un módulo de seguimiento de redes sociales con tres redes sociales.

• Facebook
• LinkedIn
• Gorjeo

Configuración de la red

Aplica un color de fondo transparente a cada red social. Necesitas hacer esto uno por uno.

• Fondo: transparente

Alineación

En la configuración de diseño principal, centre la alineación del módulo.

• Alineación del módulo: Centro

Icono

Finalmente, colorea los iconos de azul.

• Color: Azul #51a2ff
• Tamaño:
  
  • Escritorio: 1vw
  • Tableta y Teléfono: 4vw

Agregar módulo de texto a la columna 2

Contenido

Pase a la columna 2. Agregue un módulo de texto con algún contenido h3 de su elección.

• Texto: Déjanos un comentario

Fondo

Agrega un fondo blanco.

• Color de fondo: Blanco #ffffff

Texto de encabezado

Luego pase a la pestaña de diseño y aplique estilo al texto del encabezado.

• Nivel de título: H3
• Fuente: Alegreya Sans SC
• Peso: Negrita
• Estilo de fuente: TT
• Color: Azul #021859
• Tamaño:
  
  • Escritorio: 2vw
  • Tableta y teléfono: 5.5vw

Espaciado

Finalmente, ajuste el espaciado.

• Acolchado superior:
  
  • Escritorio: 3vw
  • Tableta: 2vw
  • Teléfono: 6vw
• Acolchado inferior
  
  • Escritorio y tableta: 3vw
• Relleno izquierdo y derecho:
  
  • Escritorio y tableta: 1vw

Agregar módulo de comentarios a la columna 2

Elementos

Ahora agregue el módulo de comentarios a la columna 2. Habilite todos los elementos.

• Mostrar avatar de autor: Sí
• Mostrar botón de respuesta: Sí
• Mostrar recuento de comentarios: Sí

Fondo

Agregue un fondo blanco al módulo de comentarios.

• Color de fondo: Blanco #ffffff

Campos

Luego, comience a diseñar el módulo ajustando la configuración de los campos de la siguiente manera

• Color de fondo: Blanco #ffffff
• Color del texto: Azul #1a1f73
• Color de fondo del foco: Blanco #ffffff
• Color del texto de enfoque: Azul #1a1f73
• Fuente: Alegreya Sans SC
• Estilo: TT
• Tamaño:
  
  • Escritorio: 1vw
  • Tableta: 3vw
  • Teléfono: 4vw
• Esquinas redondeadas: 5px todas las esquinas

Imagen

Cambie la configuración de la imagen también.

• Esquinas redondeadas: 5px
• Estilo de borde: todos los lados
• Ancho: 3px
• Color: Azul #1a1f73

Texto de conteo de comentarios

Luego, el texto de recuento de comentarios.

• Nivel de título: H3
• Fuente: Alegreya Sans SC
• Estilo de fuente: TT
• Color: Azul #021859
• Tamaño:
  
  • Escritorio: 1.3vw
  • Tableta: 3vw
  • Teléfono: 5vw
• Altura de línea: 2 em

Texto del título del formulario

Además, aplique estilo al texto del título del formulario.

• Nivel de título: H3
• Fuente: Alegreya Sans SC
• Estilo de fuente: TT
• Color: Azul #021859
• Tamaño:
  
  • Escritorio: 1vw
  • Tableta: 3vw
  • Teléfono: 5vw
• Altura de línea: 2 em

metatexto

Pase al metatexto y estilo de la siguiente manera.

• Fuente: Lato
• Color: #021859
• Tamaño:
  
  • Escritorio: 1vw
  • Tableta: 2.7vw
  • Teléfono: 3.5vw

Texto del comentario

Luego el texto del comentario.

• Fuente: Lato
• Color: #021859
• Tamaño:
  
  • Escritorio: 0.9vw
  • Tableta: 1.8vw
  • Teléfono: 2.5vw

Botón

No te olvides de diseñar los botones también.

• Tamano del texto:
  
  • Escritorio: 0.9vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw
• Color del texto: Blanco #ffffff
• Radio del borde: 5px
• Fuente: Lato

Espaciado

Además, el espaciado del módulo de comentarios.

• Margen superior:
  
  • Escritorio: -1vw
  • Tableta y teléfono: -3.3vw
• Acolchado superior:
  
  • Escritorio y tableta: 3vw
  • Teléfono: 4vw
• Acolchado inferior:
  
  • Escritorio: 3vw
  • Teléfono y tableta: 0vw
• Relleno izquierdo y derecho:
  
  • Escritorio: 2vw
  • tableta: 4vw
  • Teléfono: 7vw

Borde

Finalmente, agregue algunas esquinas redondeadas al módulo de comentarios.

• Estilos de borde: 2px en los cuatro lados
• Color: Azul #1a1f73

Agregue el módulo de opción de correo electrónico a la columna 3

Contenido

Pase a la columna 3 y un módulo de suscripción de correo electrónico. Asigne un título al módulo.

• Texto: Obtenga actualizaciones periódicas
• Cuerpo: Texto de párrafo

Cuenta de correo electrónico

Configure su proveedor de correo electrónico en la pestaña de cuenta de correo electrónico. Elija una lista y agregue su clave API.

• Proveedor de correo electrónico
  
  • Lista
  • Clave API

Campos

Luego, seleccione usar solo un campo de nombre único.

• Usar campo de nombre único: Sí

Fondo

Agregue un fondo blanco al módulo.

• Color de fondo: blanco

Disposición

Pase a la tabla de diseño y cambie la configuración de diseño de la siguiente manera.

• Diseño: cuerpo a la izquierda, formulario a la derecha
• Nombre de ancho completo: Sí
• Nombre de ancho completo: Sí
• Apellido Ancho completo: Sí
• Correo electrónico de ancho completo: Sí

Campos

Luego, aplique estilo a la configuración de los campos.

• Color del texto: Azul #1a1f73
• Color de fondo: Blanco #ffff
• Color del texto de enfoque: Azul #1a1f73
• Color de fondo del foco: Blanco #ffff
• Fuente: Lato
• Tamano del texto:
  
  • Escritorio: 0.7vw
  • Tableta: 2.2vw
  • Teléfono: 3.2vw
• Espaciado entre letras: 1px
• Esquinas más redondeadas: 0.2vw en todas las esquinas
• Estilos de borde: los cuatro lados
  
  • Ancho: 2px
  • Color: Azul #1a1f73

Texto del título

Seguido del texto del título.

• Nivel de título: H4
• Fuente: Alegreya Sans SC
• Peso: Medio
• Estilo de fuente: TT
• Color: Azul #1a1f73
• Tamaño:
  
  • Escritorio: 1vw
  • tableta: 4vw
  • Teléfono: 5vw
• Espaciado entre letras: 1px

Cuerpo de texto

Además, el cuerpo del texto.

• Fuente: Lato
• Color: Azul #1a1f73
• Tamaño:
  
  • Escritorio: 0.7vw
  • Tableta: 2.3vw
  • Teléfono: 3vw

Texto del mensaje de resultado

No olvide el texto del mensaje de resultado.

• Fuente: Lato
• Color: Azul #1a1f73
• Tamaño:
  
  • Escritorio: 0.7vw
  • Tableta: 2.3vw
  • Teléfono: 3vw

Botón

Además, diseñe el botón.

• Tamano del texto:
  
  • Escritorio: 0.7vw
  • Tableta: 2.3vw
  • Teléfono: 3vw
• Color del texto: Blanco #ffffff
• Color de fondo: Azul #51a2ff
• Fuente: Lato

Espaciado

Ajuste el espaciado.

• Acolchado superior e inferior: 4vw

Borde

Luego, agrega algunas esquinas redondeadas.

• Esquinas redondeadas: o.5vw en las cuatro esquinas

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Sombra: Tercera Opción
• Fuerza de desenfoque: 80px
• Color: RGBA (0,0,0,0,13)

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado de este tutorial.

Escritorio

Tableta

Teléfono

Escritorio

Tableta

Móvil

¡Es una envoltura del módulo de comentarios!

¡Eso es todo! Acabas de agregar una sección de comentarios personalizados a tu plantilla de publicación de blog. Esperamos que estos diseños inspiren sus propias creaciones de creadores de temas Divi. Pudo descargar los archivos JSON de ambos diseños al comienzo de este tutorial. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!