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

Todos los sitios web que se comunican regularmente con los clientes pueden beneficiarse de una sección de preguntas frecuentes. Al crear su sitio web con Divi, hay muchas formas 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 centra en combinar el contenedor de la columna y el módulo para crear un diseño hermoso. ¡También podrá descargar el archivo JSON de forma gratuita!

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

Descargue el diseño de preguntas frecuentes de la columna GRATIS

Para tener en sus manos el diseño de las 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

Empecemos a recrear

Agregar nueva sección

Fondo

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: degradado
• Color uno: Aqua oscuro # 50aebf
• Color dos: aguamarina claro # 6bf2ff
• Dirección: 180 grados
• Posición inicial: 21%

Espaciado

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

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

Agregar nueva fila

Estructura de la columna

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

Configuración de columna

Espaciado

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

• Acolchado 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 H2 y de párrafo de su elección.

Texto

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

• Fuente de texto: Actor
• Color del texto: blanco hueso ## f6f6f6
• Tamano del texto:
  • Escritorio + Tableta: 1.5vw
  • Teléfono: 3.8vw
• Espaciado de letras de texto: 1px
• Alineación de texto: centro

Texto de encabezado

Luego, aplique estilo al texto del encabezado.

• Nivel de texto del encabezado: H2
• Fuente H2: Verdana
• Peso de fuente H2: Semi-negrita
• Color de fuente H2: Blanco roto: # f6f6f6
• Tamaño de fuente H2:
  • Escritorio: 3vw
  • Tableta: 5vw
  • Teléfono: 6vw
• Espacio entre 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 espaciado.

• Margen superior:
  • Escritorio + Tableta: 1.5vw
• Margen inferior:
  • Teléfono: -5vw
• Acolchado 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.

• Peso del divisor: 4px
• Ancho: 12%
• Alineación del módulo: centro

Espaciado

Finalmente, ajuste el espaciado.

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

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva usando la siguiente estructura de columnas:

Dimensionamiento

Antes que nada, ajuste el tamaño.

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Luego ajuste el espaciado.

• Margen superior: 3vw
• Margen inferior: 11vw
• Margen izquierdo y derecho: automático
• Acolchado superior: 0vw
• Acolchado inferior: 11vw
• Acolchado izquierdo y derecho: 5vw

Configuración de la columna 1

Antecedentes de Hover

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

• Fondo flotante: degradado
• 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
• Acolchado izquierdo y derecho:
  • Escritorio: 1vw
  • Tableta + Teléfono: 3vw

Frontera

Agrega también algunas esquinas redondeadas a la columna.

• Esquinas redondeadas: 1vw en las cuatro esquinas

Transformar

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

• Transform Translate: eje y 4vw (escritorio), 0vw (hover, tableta y teléfono)

Columna 1 duplicada cuatro veces

Ahora, duplique la primera columna cuatro veces.

Configuración de la columna 2

Transformar

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

• Transform Translate: eje y 2vw (escritorio), 0vw (hover, tableta y teléfono)

Configuración de la 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.

• Transform Translate: eje y 2vw (escritorio), 0vw (hover, tableta y teléfono)

Configuración de la columna 5

Transformar

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

• Transform Translate: eje y 4vw (escritorio), 0vw (hover, tableta y teléfono)

Agregar módulo de alternancia a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de alternancia 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

Fondo

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, aplique estilo al icono.

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

Palanca

Luego, diseñe los fondos de alternancia para estática y flotar.

• Abrir alternar color de fondo: verde azulado # 0092af
• Color de fondo de alternancia cerrada: Blanco roto: # f7f7f7
  • Hover: Teal # 0092af

Texto del título

Continúe aplicando estilo al texto del título.

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

Texto de título cerrado

Diseñe también el texto cerrado.

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

Cuerpo de texto

No olvide 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 espaciado.

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

Frontera

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

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

Sombra de la caja

Finalmente, agregue una sombra de cuadro interior.

• Sombra de caja: sexta opción
• Fuerza del desenfoque de la sombra de la caja:
  • Escritorio + tableta: 18px
  • Teléfono: 9px
• Fuerza de propagación de la sombra de caja: -4px
• Color de sombra: rgba (0,0,0,0.21)

Módulo de alternancia duplicado 4 veces

Duplique el módulo de alternancia 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 alternancia 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 un diseño de preguntas frecuentes de columna único. 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 diseños de preguntas frecuentes interesantes 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!