Cómo estilizar el módulo de comentarios de Divi en una plantilla de publicación de blog

Diseñar una plantilla de publicación de blog es bastante fácil con el generador de temas de Divic. Pero hay algo que tiende a pasarse por alto al diseñar plantillas de blog y esta es la sección de comentarios. Afortunadamente, Div tiene un comentario personalizable que se pueden agregar fácilmente a una plantilla de publicación de blog. En esta publicación, le mostraremos cómo crear dos modelos de comentarios personalizados que puede incluir en cualquier plantilla de blog. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa para ver cómo se muestran los aspectos de los comentarios en diferentes dimensiones de pantalla. El primer diseño es un estilo mínimo 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 gratuito para poner su mano en las plantillas del módulo de comentarios gratuitos, primero deberá descargarlas usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Recrea el diseño del módulo de comentarios no. 1
Cree diseño de fondo El primer paso para recrear la apariencia de comentarios en blanco y negro es diseñar el fondo. Uno para visualizar el escritorio y otro para pantallas receptivas. Si desea crear esto solo, necesitará la herramienta para crear modelos Adobe Illustrator. De lo contrario, puede obtener un modelo similar de Internet o puede usar el incluido en el archivo. Descargable anterior.

En Adobe Illustrator, cree una hoja vacía de aproximadamente 1920px de altura + 670px de ancho.
Cree un círculo negro en un cuadrado blanco con bordes de aproximadamente la mitad del tamaño del círculo.
Seleccione ambas formas y cree un modelo haciendo clic en el objeto> modelo> hacer.
En el creador de modelos, elija “Ladrillo de columna” y guarde como modelo de modelo.
Cree una forma del tamaño del piso y aplique el modelo.
Para las dimensiones de la pantalla receptiva, reduzca la forma a la mitad de su tamaño. Presione la tecla para mantener la relación círculo.
Copie y pegue la forma en forma al lado del primero y ahora tiene el mismo modelo con círculos más pequeños. Ambos separados.
Abra el constructor de temas y agregue una nueva plantilla ahora es el momento de abrir el generador de tareas. Agregue una nueva plantilla.
Seleccione la plantilla para todas las publicaciones Use la nueva plantilla para todas las publicaciones.

Agregue el cuerpo personalizado y cree desde cero no menos importante, comience a construir el cuerpo personalizado de la plantilla.

Agregue una nueva sección de fondo ahora, podemos comenzar a construir el diseño para la aparición de comentarios. En el editor de plantillas, notará una sección. Abra la configuración de la sección y cargue las imágenes de fondo del modelo. Agregue una superposición en el gradiente.

Antecedentes: gradiente


Color 1: RGBA blanco semitransparente (255,255,255,96)
Color 2: blanco #ffffff
Coloque el gradiente sobre la imagen de fondo: sí
Imagen:
Escritorio: imagen del modelo de punto 1
Tableta y teléfono: imagen 2 del patrón de puntos
Agregue una nueva línea a la estructura de la columna ahora, agregue una nueva línea con dos columnas.
Dimensión luego ajuste el tamaño de la fila.


Ancho de canaleta personalizado: 2

Ancho: 80%
Ancho máximo: 100%
Configuración de la columna 2 Border en columnas Configuración, agregue un borde superior a la segunda columna.
Estilo: solo top

Ancho: 3 PX
Color: negro #ffffff
Agregue un módulo de texto al contenido de la columna 1 Agregue el primer módulo de texto en la columna 1 con un contenido H3 de su elección.
Texto: párrafo

El texto del encabezado luego, en la pestaña de diseño, estiliza el texto del encabezado.
Nivel de título: H3

FUENTE: GFS Didot
Color: negro # 000000
Tamaño:
Escritorio: 5VW
Tableta: 9VW
Teléfono: 13VW
El espacio también ajusta la distancia.
Revestimiento inferior

Desktop: 3VWTable y teléfono: 7VW
Agregue un módulo testimonial al contenido de la columna 1 ahora, agregue un módulo testimonial en la columna 1 con un contenido de su elección. Cargue una imagen también.
Autor: Lector leal
Nombre de la publicación: contenido de marketing responsable

Compañía: Tiger Media Company
Cuerpo: texto de párrafo
Imagen: Foto de retrato
Fondo asegúrese de que el fondo sea transparente
Color de fondo: transparente
Los elementos en la pestaña Elementos, seleccione para mostrar el icono de cotización.


Muestra el icono de oferta: sí
El icono citado entonces, estilice el icono de cita de la siguiente manera.

Color: negro # 000000
Fondo: blanco #ffffff

Icono de tamaño de fuente:
Escritorio: 2VW
Tableta: 5VW
Teléfono: 9VW
Imagen luego cambie la configuración de la imagen.
Anchura y altura:
Escritorio: 110 PX

Tableta y teléfono: 90 PX
Esquinas redondeadas: 90 px
Color de borde: transparente
Texto Cambiar la alineación del texto.
Alineación: centro
El cuerpo del texto luego estiliza el texto del cuerpo.

Fuente: Verdana
De color negro

Tamaño:
Escritorio: 0.7 VW
Tableta: 2VW
Teléfono: 3VW
El autor del autor continúa con el estilo del autor del autor.
FUENTE: GFS Didot
Peso: en negrita

Color: negro #ffffff
Tamaño:
Escritorio: 1.2VW
Tableta: 2.5VW
Teléfono: 4VW
Espacio de letras: 1 PX
El texto de la posición entonces, 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
El texto de la empresa también, el texto de la empresa.
FUENTE: GFS Didot
Color: negro #ffffff

Tamaño:
Escritorio: 0.7 VW
Tableta: 2VW
Teléfono: 3VW
Altura de línea: 2em
La dimensión continúa ajustando el tamaño del módulo.
Ancho:
Escritorio: 60%

Tableta: 65%
Teléfono: 75%
Alineación del módulo: centro
El espacio también ajusta la distancia. Cabeza superior:
Escritorio: 1.5VW
Tableta: 5VW

Teléfono: 6VW
El borde finalmente agregue un borde superior al modo.
Estilos de borde: solo desde arriba
Ancho: 2 PX
Color: negro #ffffff

Agregue el módulo de comentarios a los elementos de la columna 2 que pasan a la columna 2, agregue un módulo de comentarios. Cambie la configuración de los elementos de la siguiente manera.
Muestra al autor Avatar: No
Muestra el botón de respuesta: Sí
Muestra el número de comentarios: no

Los campos van a la pestaña Diseño del módulo y cambian la configuración del campo.
Color de texto: Negro #oooooo
Color de fondo: gris pálido # f7f7f7
Color de texto de enfoque: negro #oooooo

Color de fondo de enfoque: gris pálido # f7f7f7
FUENTE: GFS Didot
Tamano del texto:
Escritorio: 0.9VW
Tableta: 1.5VW
Teléfono: 2.5VW
Espacio de letras: 1 PX
El texto del título del formulario luego modifique la configuración del texto del título del formulario.
FUENTE: GFS Didot
Color: negro #ffffff
Tamaño:

Escritorio: 0.9VW
Tableta: 2.5VW
Fuente: 3.5VW
El meta texto continúa con el estilo metico de Meta.
FUENTE: GFS Didot
Color: negro #ffffff
Tamaño:

Escritorio: 1.3VW
Tableta: 3VW
Teléfono: 4VW
El texto también comenta, el texto del comentario.
Fuente: Verdana
Color: negro #ffffff
Tamaño:

Escritorio: 0.7 VW
Tableta: 1.7VW
Teléfono: 2.7VW
Espacio de letras: 1 PX
Altura de la línea: 1.8em
Botón Continuando, estilice los botones.
Tamano del texto:
Escritorio: 0.9VW
Tableta: 2.5VW

Teléfono: 3.5VW
Color de texto: blanco # 000000
Fondo: negro #ffffff
Espacio de letras: 1 PX
FUENTE: GFS Didot
Dimensión luego ajuste la configuración del dimensionamiento del módulo.
Ancho: 90%
Alineación del módulo: centro
Finalmente espaciado, distancia.

Revestimiento superior:
Escritorio: 4VW
Tableta y teléfono: 8VW

Junta izquierda y derecha: 3VW
Recrea el diseño del módulo de comentarios no. 2
Crear diseño de fondo El primer paso para recrear la apariencia del módulo de comentarios de los círculos coloreados es la preparación de un diseño de fondo. Puede crear un diseño de círculo simple en su editor gráfico favorito. Estos son los pasos que debe seguir para crear la imagen de fondo:
Cree una tela de ancho de 1800 PX y aproximadamente 1800 PX.
Agregue dos círculos, uno más grande que el otro.

Colorea los círculos y agregue transparencia.

Coloque los dos círculos ligeramente superpuestos en la parte superior izquierda del lienzo.
Agrupar los círculos como un solo objeto y copiarlos.
Gire los círculos y colóquelos diagonalmente hacia abajo e incluso de los dos primeros.
Asegúrese de dejar espacio en la parte superior e inferior. Cuando hay muchos comentarios, la imagen se repetirá y se tigre verticalmente.
El diseño de fondo que creé para esta plantilla de apariencia para comentarios también está disponible en la carpeta ZIP que puede descargar al comienzo del tutorial.
Abra el constructor de temas y agregue una nueva plantilla ahora es el momento de abrir el generador de tareas. Agregue una nueva plantilla.
Seleccione la plantilla para todas las publicaciones, aplique la plantilla a todas las publicaciones.
Agregue el cuerpo personalizado y cree desde cero y comience a construir el cuerpo personalizado de la plantilla.
Agregue una nueva sección una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y cargue la imagen de fondo. Incluya una superposición de color degradada. antecedentes

Antecedentes: gradiente

Color degradado 1: RGBA blanco transparente (255,255,255,05)

Color degradado 2: RGBA blanco transparente (255,255,255,055) Imagen: Fondo de círculo



El espacio también ajusta el espacio de sección antes de agregar una fila.
Revestimiento superior e inferior: 200 PX
Agregue una nueva línea a la estructura de la columna Ahora agregue una fila con tres columnas.
Dimensión Antes de agregar módulos, ajuste el tamaño de la fila.
Ancho de canaleta personalizado: 2


Ancho: 80%
Ancho máximo: 100%

Configuración de la columna 2 de fondo ahora, estilice la segunda columna agregando un fondo azul.

Color de fondo: azul # 51a2ff
El borde continúa redondeando los bordes.
Esquinas redondeadas: 1VW las cuatro esquinas
Box Shadow Finalmente agregue un tono de caja.

Shadow: tercera opción
Fuerza de harina: 80 PX

Color: RGBA (0.0,0,0.13)
Agregue el módulo de persona al contenido de la columna 1 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
Posición: colaborador ordinario
Cuerpo: texto de párrafo
Imagen: Foto de retrato

fondo Agregue un fondo blanco al modo.
Color de fondo: blanco # 000000
Imagen En la pestaña de diseño, estilice el borde de la imagen de la siguiente manera.
Esquinas redondeadas: 0.5 VW en la parte superior izquierda y derecha derecha
Estilos de borde: borde inferior


Ancho: 5 PX
Color: azul # 51a2ff

El texto del título continúa con el estilo del texto del encabezado.
Nivel de título: H4
FUENTE: Alegregreya Sans SC
Estilo: TT
Color: # 021859

Tamaño:
Escritorio: 1VW
Tableta: 3VW
Teléfono: 5VW
Espacio de letras: 1 PX
Altura de la línea: 1.6em
El cuerpo del texto también el texto del cuerpo.
Fuente: lato
Color: Azul # 1A1F73
Tamaño:
Escritorio: 0.7 VW

Tableta: 2VW
Teléfono: 3VW
Altura de línea: 2em
Texto de posición Continuar con el texto de posición. FUNT: Lato
Estilo: cursiva
Color: # 021859
Tamaño:
Escritorio: 0.8VW

Tableta: 3VW
Teléfono: 3.5VW
Dimensión luego ajuste el tamaño.
Ancho:
Escritorio: 100%
Tableta: 50%
Teléfono: 70%
Alineación del módulo: centro

Espaciar también la distancia.
Revestimiento superior e inferior: 4VW
Borde entonces, agregue algunas esquinas redondeadas.
Esquinas redondeadas: o.5vw en las cuatro esquinas
Estilos de borde: 24 PX Los cuatro lados
Color: blanco #ffffff

Box Shadow Finalmente agregue un tono de caja.
Shadow: tercera opción

Fuerza de harina: 80 PX
Color: RGBA (0.0,0,0.13)
Agregue el módulo de seguimiento de las redes sociales a las redes de la columna 1 en el módulo de persona, agregue un módulo de seguimiento de redes sociales con tres redes sociales.
Facebook

LinkedIn
Gorjeo
La configuración de la red aplica un color de fondo transparente a cada red social. Tienes que hacer esto uno por uno.
Antecedentes: transparente

Alineación En la configuración de diseño principal, enfoque la alineación del módulo.
Alineación del módulo: centro
Finalmente ícono, coloree los íconos en azul.
Color: azul # 51a2ff

Tamaño:
Escritorio: 1VW

Tableta y teléfono: 4VW
Agregue un módulo de texto en el contenido de la columna 2, pase a la columna 2. Agregue un módulo de texto con un contenido H3.

Texto: Déjanos un comentario
Fondo Agregar un fondo blanco.
Color de fondo: blanco #ffffff
El texto del encabezado luego cambia a la pestaña de diseño y estiliza el texto del encabezado.
Nivel de título: H3

FUENTE: Alegregreya Sans SC
Peso: en negrita

Estilo de fuente: TT
Color: azul # 021859

Tamaño:
Escritorio: 2VW
Tableta y teléfono: 5.5VW
Finalmente espaciado, ajuste la distancia. Cabeza superior:
Escritorio: 3VW
Tableta: 2VW
Teléfono: 6VW
Revestimiento inferior
Escritorio y tableta: 3VW

Forro izquierdo y derecho:
Escritorio y tableta: 1 VW
Agregue el módulo de comentarios a los elementos de la columna 2 Ahora agregue el módulo de comentarios en la columna 2. Habilite todos los elementos.
Muestra al autor Avatar: Sí
Muestra el botón de respuesta: Sí
Muestra el número de comentarios: Sí
Fondo Agregue un fondo blanco al módulo de comentarios.
Color de fondo: blanco #ffffff
Los campos luego comienzan a diseñar el módulo ajustando la configuración del campo de la siguiente manera

Color de fondo: blanco #ffffff
Color de texto: Azul # 1A1F73
Color de fondo de enfoque: blanco #ffffff
Color de texto de enfoque: azul # 1a1f73

FUENTE: Alegregreya Sans SC
Estilo: TT

Tamaño:
Escritorio: 1VW
Tableta: 3VW
Teléfono: 4VW
Esquinas redondeadas: 5 px todas las esquinas
La imagen modifica la configuración de la imagen.
Esquinas redondeadas: 5 px
Estilo de borde: todos los lados
Ancho: 3 PX
Color: Azul # 1A1F73
Comentarios de conteo de texto Entonces el texto importa los comentarios.
Nivel de título: H3


FUENTE: Alegregreya Sans SC
Estilo de fuente: TT
Color: azul # 021859
Tamaño:
Escritorio: 1.3VW

Tableta: 3VW
Teléfono: 5VW
Altura de la línea: 2 em
El texto del título de formulario también estiliza el texto del título del formulario.
Nivel de título: H3
FUENTE: Alegregreya Sans SC
Estilo de fuente: TT
Color: azul # 021859
Tamaño:
Escritorio: 1VW

Tableta: 3VW
Teléfono: 5VW
Altura de la línea: 2 em
El meta texto va a meta texto y estilo de la siguiente manera.
Fuente: lato
Color: # 021859
Tamaño:
Escritorio: 1VW
Tableta: 2.7VW
Teléfono: 3.5VW

Comentario de texto Entonces el texto del comentario.
Fuente: lato
Color: # 021859
Tamaño:
Escritorio: 0.9VW
Tableta: 1.8VW
Teléfono: 2.5VW

Botón No olvide estilizar los botones.
Tamano del texto:
Escritorio: 0.9VW
Tableta: 2.5VW
Teléfono: 3.5VW
Color de texto: blanco #ffffff
Border Ray: 5 PX

Fuente: lato
Espacio también el espacio del módulo de comentarios.
Margen superior:
Escritorio: -1VW
Tableta y teléfono: -3.3VW
Revestimiento superior:
Escritorio y tableta: 3VW
Teléfono: 4VW

Levante inferior:
Escritorio: 3VW
Teléfono y tableta: 0VW
Forro izquierdo y derecho:
Escritorio: 2VW
Tableta: 4VW
Teléfono: 7VW
El borde finalmente agregue algunas esquinas redondeadas al módulo de comentarios.
Estilos de borde: 2 veces en los cuatro lados
Color: Azul # 1A1F73
Agregue el módulo de correo electrónico al contenido de la columna 3 Mover a la columna 3 y un módulo de correo electrónico. Le da al módulo un título.
Texto: recibir actualizaciones regulares
Cuerpo: texto de párrafo
Cuenta de correo electrónico Configuración del proveedor de correo electrónico en su cuenta de correo electrónico. Elija una lista y agregue la tecla API.

Proveedor de correo electrónico
Lista
API clave

Fields Entonces, seleccione usar solo un campo de nombre.
Use el campo con un solo nombre: Sí
fondo Agregue un fondo blanco al modo.

Color de fondo: blanco
La apariencia pasa a su diseño y cambie la configuración de apariencia de la siguiente manera.
Apariencia: cuerpo a la izquierda, forma a la derecha
Nombre de ancho completo: Sí

Nombre Nombre Ancho completo: Sí
Nombre rápido Ancho completo: Sí

Ancho de correo electrónico completo: sí
Los campos luego, estilizan la configuración del campo.

Color de texto: Azul # 1A1F73
Color de fondo: blanco #ffff
Color de texto de enfoque: azul # 1a1f73
Color de fondo de enfoque: blanco #ffff
Fuente: lato
Tamano del texto:

Escritorio: 0.7 VW
Tableta: 2.2VW
Teléfono: 3.2vwsspatia litros: 1 PX
Esquinas redondeadas: 0.2VW en todas las esquinas
Estilos de borde: los cuatro lados
Ancho: 2 PX
Color: Azul # 1A1F73
El texto del título seguido del texto del texto.
Nivel de título: H4
FUENTE: Alegregreya Sans SC
Peso promedio
Estilo de fuente: TT
Color: Azul # 1A1F73
Tamaño:
Escritorio: 1VW

Tableta: 4VW
Teléfono: 5VW
Espacio de letras: 1 PX
El cuerpo del texto también, el texto del cuerpo.
Fuente: lato
Color: Azul # 1A1F73
Tamaño:
Escritorio: 0.7 VW
Tableta: 2.3VW
Teléfono: 3VW
Resultado del resultado del mensaje No olvide el texto del mensaje resultante.

Fuente: lato
Color: Azul # 1A1F73
Tamaño:
Escritorio: 0.7 VW
Tableta: 2.3VW
Teléfono: 3VW
El botón también estiliza el botón.

Tamano del texto:
Escritorio: 0.7 VW
Tableta: 2.3VW
Teléfono: 3VW
Color de texto: blanco #ffffff
Color de fondo: azul # 51a2ff
Fuente: lato

Extender el ajuste del espacio.
Revestimiento superior e inferior: 4VW
Borde entonces, agregue algunas esquinas redondeadas.
Esquinas redondeadas: o.5vw en las cuatro esquinas
Box Shadow Finalmente agregue un tono de caja.
Shadow: tercera opción
Fuerza de harina: 80 PX
Color: RGBA (0.0,0,0,13)

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado de este tutorial. Escritorio
Tableta

Teléfono
Escritorio

Tableta
Móvil