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

Avance

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

Escritorio

Móvil

Descarga el diseño de preguntas frecuentes de The Column GRATIS

Para tener en sus manos 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 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.

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: Gradiente
• Color uno: Aqua oscuro #50aebf
• Color dos: Aqua 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 utilizando la siguiente estructura de columnas:

Configuración de columna

Espaciado

Abra la configuración de la columna 1 y agregue un poco 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 algo de H2 y contenido de 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 hueso ##f6f6f6
• Tamano del texto:
  
  • Escritorio + Tableta: 1.5vw
  • Teléfono: 3.8vw
• Espaciado entre letras de texto: 1px
• Alineación de texto: Centro

Texto de encabezado

Luego, aplique estilo al texto del título.

• Nivel de texto de encabezado: H2
• Fuente H2: Verdana
• Peso de fuente H2: seminegrita
• Color de fuente H2: blanquecino: #f6f6f6
• Tamaño de fuente H2:
  
  • Escritorio: 3vw
  • Tableta: 5vw
  • Teléfono: 6vw
• Espaciado entre letras H2: 7px
• Altura de línea H2:
  
  • Escritorio: 1,8 em
  • Tableta: 1.6em
  • Teléfono: 1,5 em

Dimensionamiento

Además, ajusta 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, ajusta el talle.

• Ancho del canalón: 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

Fondo al pasar el mouse

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 gradiente: Radial
• Dirección radial: superior izquierda
• Posición inicial y final: 19%

Espaciado

Agregue algunos valores de espaciado a la siguiente columna.

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

Borde

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.

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

Duplicar la columna 1 cuatro veces

Ahora, duplica la primera columna cuatro veces.

Configuración de la columna 2

Transformar

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

• Transform Translate: eje y de 2vw (escritorio), 0vw (desplazamiento, 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 de 2vw (escritorio), 0vw (desplazamiento, 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 de 4vw (escritorio), 0vw (desplazamiento, tableta y teléfono)

Agregar módulo de alternar 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 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 tenue

Icono

En la pestaña de diseño, diseñe el 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áticos y flotantes.

• Color de fondo de palanca abierta: Verde azulado #0092af
• Alternar cerrado Color de fondo: Blanco hueso: #f7f7f7
  
  • Pasar el cursor: Verde azulado #0092af

Texto del título

Continúe diseñando el texto del título.

• Color del texto del título abierto: Blanco hueso: #f7f7f7
• Color del texto del título: Gris muy oscuro #3a3a3a
  
  • Pasar el cursor: Blanco apagado: #f7f7f7
• Título Nivel de encabezado: 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.

• 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 olvides el cuerpo del texto.

• Fuente del cuerpo: Actor
• Alineación del texto del cuerpo: Izquierda
• Color del cuerpo del texto: Blanco hueso: #f7f7f7
• Tamaño del cuerpo del texto:
  
  • Escritorio: 0.9vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Altura de la línea del cuerpo: 1,8 em

Espaciado

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

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

Borde

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 interior.

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

Módulo de alternar 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 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 un diseño único de preguntas frecuentes de columna. 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!