Cómo agregar preguntas adhesivas intercambiables a su diseño de preguntas frecuentes con Divi


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear preguntas adhesivas intercambiables a medida que se desplaza por su diseño de preguntas frecuentes. Esta es una excelente manera de agregar interacción a su diseño al tiempo que permite a las personas encontrar la información que están buscando. ¡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

preguntas adhesivas

Móvil

preguntas adhesivas

Descargar The Sticky Questions FAQ Design GRATIS

Para poner sus manos en el diseño de preguntas frecuentes de preguntas frecuentes gratuitas, 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.

1. Crear nueva página usando el diseño de página de contacto de la biblioteca

Agregar nueva página

Comience agregando una nueva página. Ingrese el título de una página, publíquela y active Divi Builder.

preguntas adhesivas

Cargar diseño de página de contacto de biblioteca

Navegue a los diseños prefabricados y seleccione el diseño de la página de contacto en el Paquete de diseño de la biblioteca.

preguntas adhesivas

2. Eliminar la sección de preguntas frecuentes actual

Localizar y quitar sección de preguntas frecuentes

Localice y elimine la siguiente sección en la página que ya contiene un diseño de preguntas frecuentes:

preguntas adhesivas

3. Agregar nuevo diseño de sección de preguntas frecuentes

Agregar nueva sección regular

¡Ahora podemos comenzar a crear nuestro nuevo diseño que incluye las preguntas adhesivas intercambiables! Para hacer eso, inserte una nueva sección regular.

preguntas adhesivas

Agregar nueva fila

Estructura de columna

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

preguntas adhesivas

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla. Una parte muy importante de este paso es habilitar también la opción "Igualar alturas de columna". Esto generará automáticamente algo de espacio en la columna 1, en función del contenido que se coloca en la columna 2. Este espacio se utilizará para permitir que las preguntas adhesivas se muevan libremente mientras se desplaza hacia arriba y hacia abajo en la página.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

preguntas adhesivas

Espaciado

Elimine todos los rellenos de fila superior e inferior predeterminados a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

preguntas adhesivas

Columna 1

Continúe abriendo la configuración de la columna 1.

preguntas adhesivas

Color de fondo predeterminado

Agrega un color de fondo predeterminado.

  • Color de fondo: rgba (224,216,200,0.15)

preguntas adhesivas

Pase el color de fondo

Y cambie este color de fondo al pasar el mouse.

  • Color de fondo: #FFFFFF

preguntas adhesivas

Columna 2

Abra la configuración de la segunda columna a continuación.

preguntas adhesivas

Espaciado

Y aplique algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 100 px (escritorio), 50 px (tableta y teléfono)
  • Acolchado inferior: 100 px (escritorio), 50 px (tableta y teléfono)
  • Acolchado izquierdo: 100 px (escritorio), 50 px (tableta), 30 px (teléfono)
  • Relleno derecho: 100 px (escritorio), 50 px (tableta), 30 px (teléfono)

preguntas adhesivas

Agregar módulo de texto a la columna 1

Añadir contenido H3

¡Es hora de comenzar a agregar módulos! El primer y único módulo que necesitamos en la columna 1 es un Módulo de texto que contiene una de las preguntas más frecuentes. Estamos usando H3 para esto.

preguntas adhesivas

Color de fondo

Agregue un color de fondo al Módulo de texto a continuación.

  • Color de fondo: #FFFFFF

preguntas adhesivas

Configuraciones de texto H3

Pase a la pestaña de diseño y cambie la configuración del texto H3 en consecuencia:

  • Título 3 Fuente: Open Sans
  • Título 3 Peso de la fuente: negrita
  • Título 3 Estilo de fuente: mayúscula
  • Encabezado 3 Alineación de texto: centro
  • Encabezado 3 Tamaño del texto: 20px
  • Encabezado de 3 letras: 1px
  • Título 3 Altura de línea: 1.5em

preguntas adhesivas

Espaciado

Agregue también algunos valores de relleno personalizados.

  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Relleno izquierdo: 20px
  • Relleno derecho: 20px

preguntas adhesivas

Clase CSS

Complete la configuración asignando una clase CSS al módulo. Al final de este tutorial, utilizaremos esta clase CSS para hacer que el módulo sea adhesivo.

  • Clase CSS: pegajosa

preguntas adhesivas

Agregar módulo de texto a la columna 2

Agregar contenido

A la segunda columna. Allí, agregaremos un módulo de texto con algún contenido de nuestra elección.

preguntas adhesivas

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Open Sans
  • Altura de la línea de texto: 2em (computadora de escritorio y tableta), 1.6em (teléfono)

preguntas adhesivas

Espaciado

Y también un margen inferior a la configuración de espacio del módulo.

  • Margen inferior: 50 px

preguntas adhesivas

Clonar módulo de texto en columna 2 y cambiar contenido

Clone todo el módulo de texto en la columna 2 y cambie el contenido.

preguntas adhesivas

Eliminar margen inferior

Retire el margen inferior también.

preguntas adhesivas

Clone toda la fila tantas veces como desee

Una vez que haya completado la primera fila y todos sus módulos, puede clonar la fila completa tantas veces como desee; dependiendo de cuántas preguntas frecuentes quiera mostrar en su página.

preguntas adhesivas

Cambiar preguntas y respuestas

Por supuesto, tendrá que modificar toda la copia.

preguntas adhesivas

Cambiar los colores de fondo predeterminados de la columna 1

Cambie los colores de fondo predeterminados de la columna 1 de cada fila duplicada también. Si desea que coincida con el paquete de diseño de la biblioteca, use los siguientes códigos de color:

  • Color 1: # f2ece1
  • Color 2: rgba (0,0,0,0.2)
  • Color 3: rgba (0,0,0,0.64)
  • Color 4: # 000000

preguntas adhesivas

Agregar nueva fila

Estructura de columna

La última parte de este tutorial se centra en hacer que el efecto adhesivo funcione. Para eso, necesitaremos algunas líneas de código CSS. Agregue una nueva fila al final de su sección.

preguntas adhesivas

Agregar módulo de código a la columna

Insertar código CSS de pregunta fija

Agregue un módulo de código con las siguientes líneas de código CSS que harán que el efecto adhesivo funcione para cada módulo de texto de pregunta:

preguntas adhesivas

Avance

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

Escritorio

preguntas adhesivas

Móvil

preguntas adhesivas

Pensamientos finales

En esta publicación, le mostramos cómo crear preguntas adhesivas intercambiables para su próximo diseño de preguntas frecuentes utilizando el paquete de diseño de biblioteca de Divi. Aunque hemos utilizado la apariencia del paquete de diseño de la biblioteca, puede diseñar este diseño como desee y utilizarlo para su próximo proyecto Divi. Este tutorial es parte de nuestra iniciativa de diseño Divi, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.