Descargue un diseño de cambio de precio mensual/anual GRATIS para Divi

Cuando decide mostrar planes de precios en su sitio web, hay un par de formas de abordarlo. Uno de los enfoques más populares que existen es la creación de un cambio de precios mensual/anual que permite a los usuarios navegar fácilmente a través de los diferentes planes de precios en función de la forma en que eligen facturar. En el tutorial de hoy, le mostraremos cómo hacer que el conmutador de precios funcione con Divi . ¡Recrearemos un impresionante ejemplo desde cero y 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

Móvil

Descargue el diseño de alternancia de precios mensuales/anuales GRATIS

Para poner sus manos en el diseño de alternancia de precios mensuales/anuales gratuitos, 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!

¡Empecemos a Recrear!

Añadir Sección #1

Color de fondo

Comience agregando una primera sección a la página en la que está trabajando. Abra la configuración de la sección y agregue un color de fondo.

Color de fondo: #ffad72

Divisor inferior

Pase a la pestaña de diseño e inserte un divisor inferior a continuación.

Estilo de divisor: Buscar en la lista
Altura del divisor: 10vw

Espaciado

Agregue un poco de relleno superior e inferior personalizado también.

Acolchado superior: 5vw
Acolchado inferior: 10vw

ID de CSS

Y agregue una ID de CSS a la sección.

ID de CSS: sección de alternancia

Agregar nueva fila

Estructura de la columna

Continúe agregando una fila a la sección 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.

Usar ancho de canalón personalizado: Sí
Ancho del canalón: 1
Ancho: 30vw (escritorio), 45vw (tableta), 50vw (teléfono)
Ancho máximo: 100%

Espaciado

Deshágase del relleno superior e inferior predeterminado a continuación.

Relleno superior: 0px
Relleno inferior: 0px

Borde

Y modifique también la configuración de los bordes.

Esquinas redondeadas: 50vw (todas las esquinas)
Ancho del borde: 1px
Color del borde: #e8e8e8

Mostrar

Para asegurarnos de que ambas columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! El único módulo que necesitamos en la columna 1 es un módulo de texto. Introduzca algún contenido de su elección.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

Fuente del texto: Montserrat
Tamaño del texto: 1vw (escritorio), 1,5vw (tableta), 2vw (teléfono)
Alineación de texto: Centro
Color del texto: Claro

Espaciado

Modifique también los valores de relleno superior e inferior en diferentes tamaños de pantalla.

Relleno superior: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
Acolchado inferior: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)

ID y clase de CSS

Y asigne una ID y una clase de CSS al módulo de texto.

ID de CSS: artículo-1 del plan de precios
Clase CSS: precio-elemento-cursor

Clonar módulo de texto y colocar duplicado en la columna 2

Una vez que haya completado el módulo de texto en la columna 1, puede clonarlo una vez y colocar el duplicado en la columna 2.

Cambiar contenido

Asegúrate de cambiar el contenido.

Cambiar ID de CSS

Y use una ID de CSS diferente.

ID de CSS: artículo-2 del plan de precios

Añadir Sección #2

Color de fondo

Vamos a la segunda sección. Agrega el siguiente color de fondo:

Color de fondo: #6b63dd

Espaciado

Luego, vaya a la configuración de espaciado de la sección y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

Acolchado superior: 7vw
Acolchado inferior: 15vw
Relleno izquierdo: 21vw (escritorio), 10vw (tableta y teléfono)
Relleno derecho: 21vw (escritorio), 10vw (tableta y teléfono)

ID de CSS

Agregue también una ID de CSS a la sección.

ID de CSS: precio-1

Añadir Fila #1

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño.

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 superior e inferior predeterminado a continuación.

Relleno superior: 0px
Relleno inferior: 0px

Borde

Luego, vaya a la configuración de espaciado y aplique la siguiente configuración de borde:

Ancho del borde derecho: 1px
Ancho del borde izquierdo: 1px
Ancho del borde superior: 0px
Ancho del borde inferior: 0px
Color del borde: rgba(255,255,255,0)

Mostrar

Asegúrese de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

Configuración de la columna 2

Espaciado

Una vez que haya completado la configuración general de la fila, abra la configuración de la columna 2 y agregue un relleno superior e inferior personalizado.

Acolchado superior: 1vw
Acolchado inferior: 4vw

Borde

Use un borde en la columna 2 también.

Ancho del borde derecho: 1px
Color del borde derecho: #ffffff

Configuración de la columna 3

Espaciado

Pase a la configuración de la tercera columna y agregue algunos valores de relleno personalizados.

Acolchado superior: 1vw
Acolchado inferior: 4vw

Agregar divisor a la columna 1

Visibilidad

¡Es hora de comenzar a agregar módulos! El primer módulo y el único módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de desactivar la opción ‘Mostrar divisor’. Solo necesitamos este módulo para asegurarnos de que el resto del diseño permanezca intacto.

Mostrar divisor: No

Agregue el Módulo de Texto #1 a la Columna 2

Agregar contenido H3

Pase a la columna 2 y agregue un módulo de texto con algún contenido H3 de su elección.

Configuración de texto H3

Cambie la configuración de texto H3 de la siguiente manera:

Título 3 Fuente: Montserrat
Encabezado 3 Alineación de texto: Centro
Título 3 Color del texto: #ffffff
Título 3 Tamaño del texto: 2vw (Escritorio), 3vw (Tablet), 3.5vw (Teléfono)
Encabezado 3 Espaciado entre letras: -1px

Agregue el Módulo de Texto #2 a la Columna 2

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido de su elección.

Configuración de texto

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

Fuente del texto: Montserrat
Peso de fuente de texto: ultraligero
Color del texto: #ffffff
Tamaño de texto: 2vw (escritorio), 3vw (tableta), 3.5vw (teléfono)
Altura de línea de texto: 1em
Alineación de texto: Centro

Espaciado

Agregue un margen superior personalizado también.

Margen superior: 0.5vw

Clonar ambos módulos y colocar duplicados en la columna 3

Una vez que haya completado los módulos en la columna 2, puede clonarlos y colocar los duplicados en la columna 3.

Cambiar contenido

Asegúrese de cambiar el contenido de cada duplicado.

Añadir Fila #2

Estructura de la columna

¡A la segunda fila en la sección 2! Elija la siguiente estructura de columna:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

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 el relleno superior e inferior predeterminado a continuación.

Relleno superior: 0px
Relleno inferior: 0px

Borde

Y aplicar un borde.

Ancho del borde superior: 0px
Ancho del borde derecho: 1px
Ancho del borde inferior: 1px
Ancho del borde izquierdo: 1px
Color del borde: #8882dd

Mostrar

Asegúrese de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

Configuración de la columna 1

Espaciado

Continúe abriendo la configuración de la columna 1 y aplique algunos valores de relleno personalizados en diferentes tamaños de pantalla.

Acolchado superior: 3vw (escritorio), 5vw (tableta y teléfono)
Acolchado inferior: 3vw (escritorio), 5vw (tableta y teléfono)

Borde

Agregue un borde derecho a la columna también.

Ancho del borde derecho: 1px
Color del borde derecho: #8882dd

Configuración de la columna 2

Espaciado

Pase a la segunda columna y cambie la configuración de espaciado.

Acolchado superior: 3vw (escritorio), 5vw (tableta y teléfono)
Acolchado inferior: 3vw (escritorio), 5vw (tableta y teléfono)

Borde

Agregue un borde derecho a continuación.

Ancho del borde derecho: 1px
Color del borde derecho: #ffffff

Configuración de la columna 3

Espaciado

Luego, abra la configuración de la columna 3 y agregue algunos valores de relleno superior e inferior personalizados en diferentes tamaños de pantalla.

Acolchado superior: 3vw (escritorio), 5vw (tableta y teléfono)
Acolchado inferior: 3vw (escritorio), 5vw (tableta y teléfono)

Agregar módulo de texto a la columna 1

Agregar contenido

Una vez que haya completado la configuración de filas y columnas, es hora de comenzar a agregar módulos. Agregue un módulo de texto a la columna 1 e inserte algún contenido de su elección.

Configuración de texto

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

Fuente del texto: Montserrat
Color del texto: #ffffff
Tamaño del texto: 1vw (escritorio), 1,5vw (tableta), 2vw (teléfono)
Alineación de texto: Centro

Agregar módulo de texto a la columna 2

Agregar símbolo al cuadro de contenido

En la segunda columna, necesitaremos otro módulo de texto. Agregue el símbolo ‘✓’ al cuadro de contenido.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

Color del texto: #ffad72
Tamaño de texto: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
Altura de línea de texto: 1em
Alineación de texto: Centro

Clonar módulo de texto y colocar duplicado en la columna 3

Una vez que haya completado el módulo de texto en la columna 2, puede clonarlo y colocar el duplicado en la columna 3.

Símbolo alternativo y color de texto

Dependiendo de la función que esté mostrando, es posible que desee cambiar el símbolo a ‘✗’. Use un color de texto diferente también.

Color del texto: #ffffff

Clona fila tantas veces como quieras

Una vez que haya completado toda la fila, puede clonarla tantas veces como desee, según la cantidad de funciones que desee mostrar.

Añadir Fila #3

Estructura de la columna

La última fila que agregaremos a la segunda sección contiene la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

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 el relleno superior e inferior predeterminado a continuación.

Relleno superior: 0px
Relleno inferior: 0px

Borde

Agregue un borde también.

Ancho del borde superior: 0px
Ancho del borde inferior: 0px
Ancho del borde derecho: 1px
Ancho del borde izquierdo: 1px
Color del borde: rgba(255,255,255,0)

Mostrar

Y asegúrese de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

Configuración de las columnas 2 y 3

Espaciado

Continúe agregando un margen superior a las columnas 2 y 3.

Acolchado superior: 4vw

Borde de la columna 2

Agregue un borde derecho a la columna 2 también.

Ancho del borde derecho: 1px
Color del borde derecho: #eaeaea

Clonar módulo divisor y colocar en la columna 1 de la nueva fila

Clone el Módulo divisor que puede encontrar en la primera fila de la sección y coloque el duplicado en la primera columna de su nueva fila.

Agregar módulo de botones a la columna 2

Agregar copia

Continúe agregando un Módulo de botones a la columna 2 e inserte alguna copia de su elección.

Alineación

Modifique la alineación del botón en la pestaña de diseño.

Alineación de botones: Centro

Configuración de botones

Y cambie la configuración del botón de la siguiente manera:

Usar estilos personalizados para el botón: Sí
Tamaño del texto del botón: 1vw (escritorio), 1.5vw (tableta), 2vw (teléfono)
Color del texto del botón: #ffffff
Color de fondo del botón: #ffad72
Ancho del borde del botón: 0px

Radio del borde del botón: 50vw
Fuente del botón: Montserrat

Espaciado

Agregue también algunos valores de relleno personalizados al Módulo de botones.

Acolchado superior: 1vw (escritorio), 1.5vw (tableta y teléfono)
Acolchado inferior: 1vw (escritorio), 1.5vw (tableta y teléfono)
Relleno izquierdo: 4vw (escritorio), 6vw (tableta y teléfono)
Relleno derecho: 4vw (escritorio), 6vw (tableta y teléfono)

Módulo de botón de clonación y lugar duplicado en la columna 3

Una vez que haya completado el Módulo de botones en la columna 2, puede clonarlo y colocar el duplicado en la columna 3.

Clonar Sección #2

Continúe clonando toda la segunda sección. Asegúrese de cambiar los valores de precios en los módulos de texto para que coincidan con las opciones de facturación anual. Esta es la sección que aparecerá una vez que alguien haga clic en ‘facturación anual’.

Cambiar ID de CSS y agregar clase de CSS

Cambie el ID de CSS de la sección a continuación y agregue también una clase de CSS.

ID de CSS: precio-2
Clase CSS: ocultar-sección-2

Agregue una nueva fila de una columna en la parte superior de la sección n.º 1

Lo único que queda por hacer es agregar el código CSS y jQuery para que la funcionalidad funcione. Para hacerlo, agregaremos una nueva fila en la parte superior de la sección 1.

Agregue el módulo de código n. ° 1 con código CSS

Agregue un primer módulo de código e inserte las siguientes líneas de código CSS:

<style>
.pricing-item-cursor {
cursor: pointer;
}
 
.hide-section-2 {
display: none;
}
 
.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Agregue el módulo de código n. ° 2 con el código JQuery

Agregue otro módulo de código justo debajo del anterior, inserte el código jQuery a continuación entre las etiquetas de script y ¡listo!

jQuery(function($){
   
$('#pricing-plan-item-1').addClass('active-pricing-plan');
 
$('[id*="pricing-plan-item"]').click(function() {
 
var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);
 
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
   
$pricingselect.show()
   
$('#toggle-section').show();
   
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');
 
});
});

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 un diseño de cambio de precio mensual/anual con Divi. Esta es una excelente manera de agregar interacción a sus planes de precios. Además de aplicar la técnica del clic, también hemos diseñado un hermoso plan de precios en cuadrícula que le permite enfatizar qué funciones se incluyen en qué planes. También pudo descargar el archivo JSON de forma gratuita. 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.