Creación de diseños únicos de preguntas frecuentes de columna con Divi


Cada sitio web que se comunica regularmente con los clientes puede beneficiarse de una sección de preguntas frecuentes. Al crear su sitio web con Divi, hay muchas maneras de abordar el diseño de su sección de preguntas frecuentes. Ahora, en esta publicación, crearemos una divertida sección de preguntas frecuentes que se centrará en combinar la columna y el contenedor del módulo para crear un diseño hermoso. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargar The Column FAQ Design GRATIS

Para poner sus manos en el diseño de preguntas frecuentes de la columna gratuita, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Comencemos a recrear

Agregar nueva sección

Antecedentes

Comience agregando una nueva sección regular a la página en la que está trabajando. Antes de agregar una fila, ajuste el fondo de la sección.

  • Fondo: gradiente
  • Color uno: Aqua oscuro # 50aebf
  • Color dos: Aqua claro # 6bf2ff
  • Dirección: 180 grados
  • Posición de inicio: 21%

Espaciado

Modifique también los valores de relleno de la sección.

  • Relleno superior:
    • Escritorio: 4vw
    • Tableta: 15vw
    • Teléfono: 24vw
  • Acolchado inferior: 2vw

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Configuraciones de columna

Espaciado

Abra la configuración de la columna 1 y agregue algo de relleno izquierdo y derecho.

  • Relleno izquierdo y derecho:
    • Escritorio: 1vw
    • Tableta + Teléfono: 3vw

Agregar módulo de texto

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un nuevo módulo de texto con contenido de H2 y párrafo de su elección.

Texto

Pase a la pestaña de diseño y aplique estilo al texto del párrafo.

  • Fuente de texto: actor
  • Color del texto: Blanco roto ## f6f6f6
  • Tamano del texto:
    • Escritorio + tableta: 1.5vw
    • Teléfono: 3.8vw
  • Espacio entre letras de texto: 1 px
  • Alineación de texto: centro

Encabezado de texto

Luego, dale estilo al texto del encabezado.

  • Nivel de texto del encabezado: H2
  • Fuente H2: Verdana
  • Peso de la fuente H2: semi negrita
  • Color de fuente H2: Blanco roto: # f6f6f6
  • Tamaño de fuente H2:
    • Escritorio: 3vw
    • Tableta: 5vw
    • Teléfono: 6vw
  • Espaciado de letras H2: 7px
  • Altura de la línea H2:
    • Escritorio: 1.8em
    • Tableta: 1.6em
    • Teléfono: 1.5 em

Dimensionamiento

Además, ajuste el tamaño.

  • Ancho: 100%

Espaciado

Finalmente, ajuste el espacio.

  • Margen superior:
    • Escritorio + tableta: 1.5vw
  • Margen inferior:
    • Teléfono: -5vw
  • Relleno inferior: 0vw
  • Acolchado izquierdo + derecho: 7vw

Agregar módulo divisor

Línea

Debajo del texto, agregue un módulo divisor y hágalo amarillo.

  • Color de línea: amarillo # ffe100

Dimensionamiento

Luego, ajuste el peso y el ancho.

  • Divisor de peso: 4px
  • Ancho: 12%
  • Alineación del módulo: centro

Espaciado

Finalmente, ajuste el espacio.

  • Margen superior:
    • Escritorio + Tableta: -1vw
    • Teléfono: 10vw

Agregar nueva fila

Estructura de columna

Continúe agregando uno nuevo utilizando la siguiente estructura de columnas:

Dimensionamiento

Antes que nada, ajuste el tamaño.

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

Espaciado

Luego ajuste el espacio.

  • Margen superior: 3vw
  • Margen inferior: 11vw
  • Margen izquierdo y derecho: auto
  • Relleno superior: 0vw
  • Acolchado inferior: 11vw
  • Relleno izquierdo y derecho: 5vw

Configuración de columna 1

Antecedentes sobre el desplazamiento

Antes de agregar las otras columnas, diseñe el fondo de la columna 1 de la siguiente manera:

  • Fondo flotante: gradiente
  • Color uno: amarillo # ffe100
  • Color dos: transparente
  • Tipo de degradado: radial
  • Dirección radial: arriba a la izquierda
  • Posición inicial y final: 19%

Espaciado

Agregue algunos valores de espaciado a la columna siguiente.

  • Acolchado inferior:
    • Escritorio + Tableta: 0vw
    • Teléfono: 4vw
  • Relleno izquierdo y derecho:
    • Escritorio: 1vw
    • Tableta + Teléfono: 3vw

Frontera

Agregue algunas esquinas redondeadas a la columna también.

  • Esquinas redondeadas: 1vw las cuatro esquinas

Transformar

Finalmente, aplique un valor de traducción de transformación personalizado a la columna.

  • Transformar Traducir: 4vw y-axis (Desktop), 0vw (Hover, Tablet & Phone)

Duplicar la columna 1 cuatro veces

Ahora, duplica la primera columna cuatro veces.

Configuración de columna 2

Transformar

Luego, ajuste los valores de transformación. Primero, columna 2.

  • Transformar Traducir: 2vw y-axis (Desktop), 0vw (Hover, Tablet & Phone)

Configuración de columna 3

Transformar

Luego, restablezca el valor de transformación en la columna 3.

  • Transformar Traducir: Restablecer

Configuración de la columna 4

Transformar

Además, ajuste el valor de transformación en la columna 4.

  • Transformar Traducir: 2vw y-axis (Desktop), 0vw (Hover, Tablet & Phone)

Configuración de la columna 5

Transformar

Finalmente, revise los valores de transformación en la columna 5.

  • Transformar Traducir: 4vw y-axis (Desktop), 0vw (Hover, Tablet & Phone)

Agregar módulo de alternar a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de alternar a la primera columna con algún contenido de su elección.

  • Título
  • Cuerpo

Estado

Luego, seleccione "Cerrar" como el estado del módulo.

  • Estado: cerrado

Antecedentes

Y agregue una imagen transparente de un signo de interrogación como fondo.

  • Imagen de fondo
  • Mezcla de imagen de fondo: luz suave

Icono

En la pestaña de diseño, dale estilo al icono.

  • Color del icono: Amarillo # ffe100
  • Tamaño de ícono:
    • Escritorio: 34 px
    • Tablet + Teléfono: 20px

Palanca

Luego, diseñe los fondos de alternancia para estática y pase el mouse.

  • Color de fondo de alternancia abierta: verde azulado # 0092af
  • Color de fondo de alternar cerrado: Blanco roto: # f7f7f7
    • Desplazamiento: Teal # 0092af

Texto del título

Continúe con el estilo del texto del título.

  • Color del texto del título abierto: Blanco roto: # f7f7f7
  • Color del texto del título: Gris muy oscuro # 3a3a3a
    • Desplazamiento: Blanco roto: # f7f7f7
  • Nivel de título del título: H5
  • Fuente H5: Actor
  • Alineación H5: izquierda
  • Tamaño de texto H5:
    • Escritorio: 1.5 vw
    • Tableta: 3 vw
    • Teléfono: 4.5 vw

Texto de título cerrado

Dale estilo al texto cerrado también.

  • Título cerrado Color del texto: Gris muy oscuro # 3a3a3a
  • Título cerrado Fuente: Actor
  • Alineación: izquierda
  • Tamaño de texto cerrado:
    • Escritorio: 1.5vw
    • Tableta: 3vw
    • Teléfono: 4.5vw

Cuerpo de texto

No olvides el texto del cuerpo.

  • Fuente del cuerpo: actor
  • Alineación del texto del cuerpo: izquierda
  • Color del texto del cuerpo: Blanco roto: # f7f7f7
  • Tamaño del texto del cuerpo:
    • Escritorio: 0.9vw
    • Tableta: 2vw
    • Teléfono: 3vw
  • Altura de la línea del cuerpo: 1.8em

Espaciado

Después del estilo del texto, agregue algunos valores de espacio.

  • Margen superior:
    • Escritorio + Tableta: 1vw
  • Acolchado superior + inferior:
    • Escritorio: 2vw
    • Tableta: 3vw
    • Teléfono: 5vw
  • Acolchado Izquierdo:
    • Escritorio: 2vw
    • Tableta: 4vw
    • Teléfono: 5vw
  • Relleno derecho:
    • Escritorio: 2vw
    • Tableta: 3vw
    • Teléfono: 4vw

Frontera

Agregue algunas esquinas redondeadas y elimine el borde predeterminado de 1px.

  • Esquinas redondeadas: 1vw las cuatro esquinas
  • Borde: 0px

Sombra de la caja

Finalmente, agregue una sombra de cuadro interno.

  • Box Shadow: sexta opción
  • Box Shadow Blur Fuerza:
    • Escritorio + Tableta: 18px
    • Teléfono: 9px
  • Fuerza de propagación de la sombra de la caja: -4px
  • Color de sombra: rgba (0,0,0,0.21)

Módulo de alternar duplicado 4 veces

Duplique el módulo de alternar con estilo cuatro veces y arrastre los nuevos a las columnas vacías.

Contenido editado

Edite las preguntas y respuestas en los módulos de alternar duplicados y ¡listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Conclusión

En esta publicación, le mostramos cómo crear una columna única de diseño de preguntas frecuentes. Agregamos algunas opciones de desplazamiento para darle al diseño un interesante efecto de esquina amarilla. Esperamos que este diseño lo inspire a crear interesantes diseños de preguntas frecuentes como parte de sus proyectos Divi. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!