Diseñar una plantilla de publicación de blog es bastante fácil con el creador de temas Divi. Pero hay una cosa que tiende a pasarse por alto al diseñar plantillas de blog, y esa es la sección de comentarios. Afortunadamente, Divi tiene un módulo de comentarios personalizable que se puede agregar fácilmente a una plantilla de publicación de blog. 

Hagámoslo.

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

Módulo de comentarios de Divi dentro de una plantilla de publicación de blog

Tableta

Teléfono

Escritorio

Módulo de comentarios de Divi dentro de una plantilla de publicación de blog

Tableta

Móvil

 

Recreemos el diseño del módulo de comentarios n. ° 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 crear esto 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 utilizar el que se incluye en el archivo .zip descargable anterior.

  1. En Adobe Illustrator, cree una mesa de trabajo en blanco alrededor de 1920px alto + 670px 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 receptivos, reduzca la forma a la mitad de su tamaño. Presione Mayús para mantener la proporción de los círculos.
  7. Copie y pegue la forma estampada junto a la primera y ahora tiene el mismo patrón con círculos más pequeños.
  8. Descargue ambos por separado.

Abra el generador de temas y agregue una nueva plantilla

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

Seleccione la plantilla para todas las publicaciones

Use la nueva plantilla en todas las publicaciones.

Agregar cuerpo personalizado y construir desde cero

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

Agregar nueva sección

Antecedentes

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: rgba blanco semitransparente (255,255,255,0.96)
  • Color 2: Blanco #ffffff
  • Coloque el gradiente 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 columna

Ahora, agregue una nueva fila con dos columnas.

Dimensionamiento

Luego, ajuste el tamaño de la fila.

  • Ancho de canal personalizado: 2
  • Ancho: 80%
  • Ancho Máx .: 100%

Configuración de columna 2

Frontera

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

Encabezado de texto

Luego, en la pestaña de diseño, diseñe el texto del encabezado.

  • Nivel de rumbo: H3
  • Fuente: GFS Didot
  • Color: negro # 000000
  • Talla:
    • Escritorio: 5vw
    • Tableta: 9vw
    • Teléfono: 13vw

Espaciado

Además, ajuste el espacio.

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

Agregar módulo de testimonio a la columna 1

Contenido

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

  • Autor: Lector Leal
  • Cargo: Oficial de marketing de contenidos
  • Empresa: Tiger Media Company
  • Cuerpo: texto de párrafo
  • Imagen: Foto de retrato

Antecedentes

Asegúrese 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 cita

Luego, diseñe el ícono de la cita 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: 110 px
    • Tableta y teléfono: 90 px
  • Esquinas redondeadas: 90 px
  • Color del borde: transparente

Texto

Cambia la alineación del texto también.

  • Alineamiento: centro

Cuerpo de texto

Luego, peina el texto del cuerpo.

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

Texto del autor

Continúe con el estilo del texto del autor.

  • Fuente: GFS Didot
  • Peso: negrita
  • Color: negro #ffffff
  • Talla:
    • Escritorio: 1.2vw
    • Tableta: 2.5vw
    • Teléfono: 4vw
  • Espaciado de letras: 1px

Texto de posición

Luego, el texto de posición.

  • Fuente: GFS Didot
  • Color: negro #ffffff
  • Talla:
    • Escritorio: 0.9vw
    • Tableta: 2vw
    • Teléfono: 3vw
  • Altura de línea: 2em

Texto de la compañía

Además, el texto de la empresa.

  • Fuente: GFS Didot
  • Color: negro #ffffff
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 2vw
    • Teléfono: 3vw
  • Altura de línea: 2em

Dimensionamiento

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

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

Espaciado

Además, ajuste el espacio.

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

Frontera

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 autor Avatar: No
  • Mostrar botón de respuesta: sí
  • Mostrar recuento 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 de 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
  • Talla:
    • Escritorio: 0.9vw
    • Tableta: 2.5vw
    • Fuente: 3.5vw

Meta texto

Continúe estilizando el meta texto.

  • Fuente: GFS Didot
  • Color: negro #ffffff
  • Talla:
    • Escritorio: 1.3vw
    • Tableta: 3vw
    • Teléfono: 4vw

Texto de comentario

Además, el texto del comentario.

  • Fuente: Verdana
  • Color: negro #ffffff
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 1.7vw
    • Teléfono: 2.7vw
  • Espaciado de letras: 1px
  • Altura de línea: 1.8em

Botón

Continuando, estilo los botones.

  • Tamano del texto:
    • Escritorio: 0.9vw
    • Tableta: 2.5vw
    • Teléfono: 3.5vw
  • Color del texto: blanco # 000000
  • Fondo: negro #ffffff
  • Espaciado de 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

Finalmente, el espacio también.

  • Relleno superior:
    • Escritorio: 4vw
    • Tableta y teléfono: 8vw
  • Relleno 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 coloridos 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. Agregue 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 solo objeto y duplíquelos.
  6. Voltee los círculos y colóquelos en diagonal hacia abajo y a la derecha de los dos primeros.
  7. Asegúrese de dejar espacio en la parte superior e inferior. Cuando hay muchos comentarios, la imagen se repetirá y se colocará en mosaico verticalmente.

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 el generador de temas y agregue una nueva plantilla

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

Seleccione la plantilla para todas las publicaciones

Aplicar la plantilla a todas las publicaciones.

Agregar cuerpo personalizado y construir desde cero

Y comience a construir el cuerpo personalizado de la plantilla.

Agregar nueva sección

Una vez en el editor de plantillas, verás una sección. Abra esa sección y cargue la imagen de fondo. Incluya también una superposición de color degradado.

Antecedentes

  • Fondo: gradiente
  • Color del degradado 1: rgba blanco transparente (255,255,255,0.55)
  • Gradient Color 2: Transparent White rgba (255,255,255,0.55)
  • Imagen: Fondo de círculos

Espaciado

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

  • Acolchado superior e inferior: 200 px

Agregar nueva fila

Estructura de columna

Ahora agregue una fila con tres columnas.

Dimensionamiento

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

  • Ancho de canal personalizado: 2
  • Ancho: 80%
  • Ancho Máx .: 100%

Configuración de columna 2

Antecedentes

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

  • Color de fondo: azul # 51a2ff

Frontera

Continúa redondeando las fronteras.

  • Esquinas redondeadas: 1vw las cuatro esquinas

Sombra de la caja

Finalmente, agregue una sombra de cuadro también.

  • Sombra: tercera opción
  • Fuerza de desenfoque: 80 px
  • 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

Antecedentes

Agregue un fondo blanco al módulo.

  • Color de fondo: blanco # 000000

Imagen

En la pestaña de diseño, diseñe el borde de la imagen de la siguiente manera.

  • Esquinas redondeadas: 0.5vw en la parte superior izquierda y superior derecha
  • Estilos de borde: borde inferior
    • Ancho: 5px
    • Color: azul # 51a2ff

Texto del título

Continúe con el estilo del texto del encabezado.

  • Nivel de rumbo: H4
  • Fuente: Alegreya Sans SC
  • Estilo: TT
  • Color: # 021859
  • Talla:
    • Escritorio: 1vw
    • Tableta: 3vw
    • Teléfono: 5vw
  • Espaciado de letras: 1px
  • Altura de línea: 1.6em

Cuerpo de texto

Luego también, el texto del cuerpo.

  • Fuente: Lato
  • Color: azul # 1a1f73
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 2vw
    • Teléfono: 3vw
  • Altura de línea: 2em

Texto de posición

Continuar con el texto de posición.

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

Dimensionamiento

Luego, ajuste el tamaño.

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

Espaciado

Además, el espaciado.

  • Acolchado superior e inferior: 4vw

Frontera

Luego, agregue 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 un cuadro de sombra.

  • Sombra: tercera opción
  • Fuerza de desenfoque: 80 px
  • 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 red

Aplique 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 íconos de azul.

  • Color: azul # 51a2ff
  • Talla:
    • 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

Antecedentes

Agrega un fondo blanco.

  • Color de fondo: blanco #ffffff

Encabezado de texto

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

  • Nivel de rumbo: H3
  • Fuente: Alegreya Sans SC
  • Peso: negrita
  • Estilo de fuente: TT
  • Color: azul # 021859
  • Talla:
    • Escritorio: 2vw
    • Tableta y teléfono: 5.5vw

Espaciado

Finalmente, ajuste el espacio.

  • Relleno 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 autor Avatar: Sí
  • Mostrar botón de respuesta: sí
  • Mostrar recuento de comentarios: Sí

Antecedentes

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
  • Talla:
    • 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 recuento de comentarios

Luego, el comentario cuenta el texto.

  • Nivel de rumbo: H3
  • Fuente: Alegreya Sans SC
  • Estilo de fuente: TT
  • Color: azul # 021859
  • Talla:
    • 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 rumbo: H3
  • Fuente: Alegreya Sans SC
  • Estilo de fuente: TT
  • Color: azul # 021859
  • Talla:
    • Escritorio: 1vw
    • Tableta: 3vw
    • Teléfono: 5vw
  • Altura de línea: 2 em

Meta texto

Pase al meta texto y estilo de la siguiente manera.

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

Texto de comentario

Luego el texto del comentario.

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

Botón

No olvides 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 de borde: 5px
  • Fuente: Lato

Espaciado

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

  • Margen superior:
    • Escritorio: -1vw
    • Tableta y teléfono: -3.3vw
  • Relleno 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

Frontera

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

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

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

Contenido

Pase a la columna 3 y a un módulo optin de correo electrónico. Dale 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 la 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í

Antecedentes

Agregue un fondo blanco al módulo.

  • Color de fondo: blanco

Diseño

Pase al diseño ta y cambie la configuración de diseño de la siguiente manera.

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

Campos

Luego, diseñe 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 de letras: 1px
  • Esquinas redondeadas: 0.2vw en todas las esquinas
  • Estilos de borde: los cuatro lados
    • Ancho: 2px
    • Color: azul # 1a1f73

Texto del título

Seguido por el texto del título.

  • Nivel de rumbo: H4
  • Fuente: Alegreya Sans SC
  • Peso: medio
  • Estilo de fuente: TT
  • Color: azul # 1a1f73
  • Talla:
    • Escritorio: 1vw
    • Tableta: 4vw
    • Teléfono: 5vw
  • Espaciado de letras: 1px

Cuerpo de texto

Además, el texto del cuerpo.

  • Fuente: Lato
  • Color: azul # 1a1f73
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 2.3vw
    • Teléfono: 3vw

Texto del mensaje de resultado

No olvides el texto del mensaje de resultado.

  • Fuente: Lato
  • Color: azul # 1a1f73
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 2.3vw
    • Teléfono: 3vw

Botón

Además, estilo 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

Ajusta el espaciado.

  • Acolchado superior e inferior: 4vw

Frontera

Luego, agregue algunas esquinas redondeadas.

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

Sombra de la caja

Finalmente, agregue un cuadro de sombra.

  • Sombra: tercera opción
  • Fuerza de desenfoque: 80 px
  • Color: rgba (0,0,0,0.13)

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!