Cuando se trata de mostrar planes de precios en su sitio web, puede tomar muchos turnos y crear páginas o secciones de precios absolutamente impresionantes y atractivas. Al crear un sitio web con Divi , lo más probable es que opte por el Módulo de tablas de precios. Este módulo le permite agregar rápidamente tablas de precios y darles el estilo que desee. Pero si desea agregar más interacción a esta sección particular de su página, también puede usar el Módulo de alternar para mostrar los planes de precios al hacer clic. Esta es una excelente manera de resaltar un plan de precios específico manteniendo su estado abierto y cerrando los otros dos.
En este tutorial, le mostraremos paso a paso cómo crear un magnífico diseño de tabla de precios de alternancia utilizando el Módulo de alternancia de Divi. Una vez que obtenga el enfoque, podrá crear todo tipo de planes de precios de alternancia con un clic para cualquier tipo de sitio web que cree.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
¡Comencemos a crear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Espaciado
Cree una nueva página o abra una existente usando Visual Builder de Divi. Agregue una nueva sección a la página, abra la configuración de la sección y agregue un relleno superior e inferior personalizado para crear espacio en la parte superior e inferior de la sección.
- Relleno superior: 160px
- Relleno inferior: 160px
Añadir Fila #1
Estructura de la columna
Una vez que haya terminado de modificar la configuración de espaciado de la sección, puede continuar y agregar una nueva fila usando la siguiente estructura de columnas:
Agregar módulo de texto
Agregar contenido
No es necesario realizar cambios en la fila, así que continúe y agregue un módulo de texto de inmediato. Ingrese algún contenido de H2 de su elección en el cuadro de contenido del módulo.
Ajustes de texto de encabezado
Continúe yendo a la pestaña de diseño y cambie la configuración del texto del encabezado.
- Encabezado 2 Fuente: Didact Gothic
- Encabezado 2 Peso de fuente: Regular
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #000000
- Encabezado 2 Tamaño del texto: 40px
- Encabezado 2 Espaciado entre letras: -1px
Agregar módulo divisor
Visibilidad
Agregue un módulo divisor justo debajo del módulo de texto que agregó y modificó en los pasos anteriores. Asegúrese de que la opción ‘Mostrar divisor’ del módulo divisor esté habilitada.
- Mostrar divisor: Sí
Color
Continúe yendo a la pestaña de diseño y cambie el color del divisor.
- Color: #000000
Dimensionamiento
Cambie también el ancho del módulo en la configuración de tamaño.
- Ancho: 39%
- Alineación del módulo: Centro
Espaciado
Agregue también un margen inferior personalizado.
- Margen inferior: 50px
Añadir Fila #2
Estructura de la columna
Hemos terminado de modificar la primera fila y sus módulos. Es hora de agregar una nueva fila usando la siguiente estructura de columna:
Fondo degradado de la columna 1
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un fondo degradado a la columna 1.
- Color 1: #00fff2
- Color 2: rgba (255.255.255,0)
- Columna 1 Tipo de gradiente: Radial
- Columna 1 Dirección radial: Abajo a la derecha
- Columna 1 Posición inicial: 30%
- Columna 1 Posición final: 30%
Fondo degradado de la columna 2
Haz lo mismo para la segunda columna también.
- Color 1: #fce96f
- Color 2: rgba (255.255.255,0)
- Columna 2 Tipo de gradiente: Radial
- Columna 2 Dirección radial: Arriba a la derecha
- Columna 2 Posición inicial: 40%
- Columna 2 Posición final: 40%
Fondo degradado de la columna 3
Del mismo modo, agregue un fondo degradado a la tercera columna usando la siguiente configuración:
- Color 1: #a659ff
- Color 2: rgba (255.255.255,0)
- Columna 3 Tipo de gradiente: Radial
- Columna 3 Dirección radial: Inferior
- Columna 3 Posición inicial: 30%
- Columna 2 Posición final: 30%
Dimensionamiento
Una vez que haya terminado de agregar el fondo degradado, pase a la pestaña de diseño y cambie la configuración de tamaño.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
Agregar módulo de alternar a la columna 1
Agregar contenido
¡Es hora de comenzar a crear diferentes planes de precios! Agregue un nuevo módulo de alternancia a la primera columna e ingrese un título. Para diseñar los diferentes elementos en el cuadro de contenido, hemos usado algunas etiquetas HTML adicionales. Continúe, copie las siguientes líneas y agréguelas a la pestaña Texto de su cuadro de contenido:
|
01
02
03
04
05
06
07
|
<p> </p><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p><p> </p><p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p><p> </p><p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p><p> </p> |
Estado
Puede elegir si desea que el estado del Módulo de alternancia sea abierto o cerrado. Para poder ver todos los cambios que realiza a lo largo del resto del tutorial, recomiendo mantener el estado ‘abierto’ hasta que termine de modificar todas las diferentes configuraciones de diseño.
Color de fondo
Continúe yendo a la configuración de fondo del Módulo de alternar y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Configuración de iconos
Cambia el color del icono en la pestaña de diseño a continuación.
- Color del icono: #000000
Alternar configuración
Y modifique el Color de fondo de alternancia abierta en la configuración de alternancia también.
- Color de fondo de alternancia abierta: rgba (255,255,255,0)
Configuración del texto del título
Luego, realice algunos cambios en la configuración del texto del título.
- Fuente del título: Didact Gothic
- Peso de la fuente del título: Negrita
- Color del texto del título: #000000
- Tamaño del texto del título: 3,5 vw (escritorio), 60 px (tableta), 40 px (teléfono)
Configuración del texto del cuerpo
Modifique también la configuración del texto del cuerpo.
- Fuente del cuerpo: Didact Gothic
- Alineación del texto del cuerpo: Izquierda
- Color del cuerpo del texto: #000000
- Tamaño del cuerpo del texto: 18px
- Altura de la línea del cuerpo: 1,5 em
Clone Toggle Module dos veces y colóquelo en las dos columnas restantes
Una vez que haya terminado de modificar el módulo de alternar en la columna 1, puede continuar, clonarlo dos veces y colocar los duplicados en las dos columnas restantes.
Cambiar copia
¡Asegúrate de cambiar toda la copia de los duplicados y listo!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado del diseño que hemos creado en diferentes tamaños de pantalla.
Pensamientos finales
En este tutorial, le mostramos un enfoque creativo sobre el uso del Módulo de alternancia de Divi para mostrar los planes de precios en su sitio web. Esta es una excelente manera de interactuar con los visitantes y elevar su estilo de diseño. Hace que sea más fácil resaltar un plan de precios específico en su sección al mantener esa opción abierta y las otras dos opciones cerradas. Puede utilizar este enfoque para cualquier tipo de sitio web que esté creando. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!