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 pegajosas 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 mientras permite que las personas encuentren la información que están buscando. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga GRATIS el diseño de preguntas frecuentes de Sticky Questions
Para poner sus manos en el diseño de preguntas frecuentes de preguntas adhesivas gratuitas, 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 un título de página, publique la página y habilite Divi Builder.
Cargar el diseño de la página de contacto de la 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.
2. Eliminar la sección de preguntas frecuentes actual
Localizar y eliminar la 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:
3. Agregue un 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.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
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 ‘Ecualizar alturas de columna’. Esto generará automáticamente un espacio en la columna 1, según el 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ón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno predeterminado de las filas superior e inferior a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
columna 1
Continúe abriendo la configuración de la columna 1.
Color de fondo predeterminado
Agregue un color de fondo predeterminado.
- Color de fondo: rgba(224,216,200,0.15)
Color de fondo flotante
Y cambie este color de fondo al pasar el mouse.
- Color de fondo: #FFFFFF
columna 2
Abra la configuración de la segunda columna a continuación.
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)
- Relleno inferior: 100 px (escritorio), 50 px (tableta y teléfono)
- Relleno izquierdo: 100 px (escritorio), 50 px (tableta), 30 px (teléfono)
- Relleno derecho: 100 px (escritorio), 50 px (tableta), 30 px (teléfono)
Agregar módulo de texto a la columna 1
Agregar 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.
Color de fondo
Agregue un color de fondo al módulo de texto a continuación.
- Color de fondo: #FFFFFF
Configuración de texto H3
Pase a la pestaña de diseño y cambie la configuración de texto H3 en consecuencia:
- Título 3 Fuente: Open Sans
- Encabezado 3 Peso de fuente: Negrita
- Título 3 Estilo de fuente: Mayúsculas
- Encabezado 3 Alineación de texto: Centro
- Título 3 Tamaño del texto: 20px
- Encabezado 3 Espaciado entre letras: 1px
- Encabezado 3 Altura de línea: 1,5 em
Espaciado
Agregue también algunos valores de relleno personalizados.
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Clase CSS
Complete la configuración asignando una clase CSS al módulo. Al final de este tutorial, usaremos esta clase CSS para hacer que el módulo sea fijo.
- Clase CSS: pegajoso
Agregar módulo de texto a la columna 2
Agregar contenido
Vamos a la segunda columna. Allí, agregaremos un módulo de texto con algún contenido de nuestra elección.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Open Sans
- Altura de línea de texto: 2em (computadora de escritorio y tableta), 1,6em (teléfono)
Espaciado
Y también un margen inferior para la configuración de espaciado del módulo.
- Margen inferior: 50px
Clonar módulo de texto en la columna 2 y cambiar contenido
Clone todo el módulo de texto en la columna 2 y cambie el contenido.
Eliminar margen inferior
Elimina también el margen inferior.
Clonar toda la fila tantas veces como se desee
Una vez que hayas completado la primera fila y todos sus módulos, puedes clonar toda la fila tantas veces como quieras; dependiendo de cuántas preguntas frecuentes desee que aparezcan en su página.
Cambiar preguntas y respuestas
Por supuesto, tendrás que modificar toda la copia.
Cambiar los colores de fondo predeterminados de la columna 1
Cambie también los colores de fondo predeterminados de la columna 1 de cada fila duplicada. 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
Agregar nueva fila
Estructura de la columna
La última parte de este tutorial se centra en hacer que funcione el efecto adhesivo. Para eso, necesitaremos unas pocas líneas de código CSS. Agregue una nueva fila al final de su sección.
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:
|
01
02
03
04
05
06
07
|
<style>.sticky {position: sticky;position: -webkit-sticky;top: 200px !important;}</style> |
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
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 usado la apariencia del Paquete de diseño de biblioteca, puede diseñar este diseño como desee y usarlo 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 de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.