Descargue un diseño de alternancia de precios mensual / anual GRATUITO para Divi

Cuando decide exhibir planes de precios en su sitio web, hay un par de formas de abordarlo. Uno de los enfoques más populares es la creación de un conmutador de precios mensual / anual que permite a los usuarios navegar fácilmente a través de los diferentes planes de precios según la forma en que eligen facturar. En el tutorial de hoy, le mostraremos cómo hacer que el cambio de precios funcione con Divi. ¡Recrearemos un ejemplo impresionante desde cero y también podrá descargar el archivo JSON de forma gratuita!

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 tener en sus manos el diseño de alternancia de precios mensual / anual gratuito, 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Agregar la sección 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 acolchado superior e inferior personalizado también.

• Acolchado superior: 5vw
• Acolchado inferior: 10vw

ID de CSS

Y agregue un 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 de la canaleta: 1
• Ancho: 30vw (escritorio), 45vw (tableta), 50vw (teléfono)
• Ancho máximo: 100%

Espaciado

A continuación, elimine el relleno superior e inferior predeterminado.

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

Frontera

Y modifique la configuración del borde también.

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

Monitor

Para asegurarnos de que ambas columnas aparezcan una al lado de la otra en pantallas de menor tamaño, 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. Ingrese algún contenido de su elección.

Configuración de texto

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

• Fuente de 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.

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

ID y clase de CSS

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

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

Clonar el módulo de texto y colocar el 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 un ID de CSS diferente.

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

Agregar sección n. ° 2

Color de fondo

Pasemos a la segunda sección. Agregue 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
• Acolchado izquierdo: 21vw (escritorio), 10vw (tableta y teléfono)
• Relleno derecho: 21vw (escritorio), 10vw (tableta y teléfono)

ID de CSS

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

• ID de CSS: precio-1

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva 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 fila y modifique la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Frontera

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

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

Monitor

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 personalizado superior e inferior.

• Acolchado superior: 1vw
• Acolchado inferior: 4vw

Frontera

Utilice también un borde en la columna 2.

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

Configuración de la columna 3

Espaciado

Continúe con 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 único módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de deshabilitar 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 n. ° 1 a la columna 2

Agregar contenido H3

Continúe con 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 del texto H3 de la siguiente manera:

• Fuente del encabezado 3: Montserrat
• Alineación del texto del encabezado 3: centro
• Color del texto del encabezado 3: #ffffff
• Encabezado 3 Tamaño del texto: 2vw (escritorio), 3vw (tableta), 3.5vw (teléfono)
• Espacio entre letras del encabezado 3: -1px

Agregue el módulo de texto n. ° 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

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

• Fuente de texto: Montserrat
• Peso de la fuente del texto: ultraligero
• Color del texto: #ffffff
• Tamaño del texto: 2vw (escritorio), 3vw (tableta), 3.5vw (teléfono)
• Altura de la 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 clonar ambos y colocar los duplicados en la columna 3.

Cambiar contenido

Asegúrese de cambiar el contenido de cada duplicado.

Agregar fila n. ° 2

Estructura de la columna

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

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine el acolchado superior e inferior predeterminado.

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

Frontera

Y aplica un borde.

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

Monitor

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)

Frontera

Agrega un borde derecho a la columna también.

• Ancho del borde derecho: 1 px
• 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)

Frontera

A continuación, agregue un borde derecho.

• Ancho del borde derecho: 1 px
• 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

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

• Fuente de 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

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

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

Clonar el módulo de texto y colocar el 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 y color de texto alternativos

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

• Color del texto: #ffffff

Clone Row tantas veces como desee

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

Agregar fila n. ° 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 fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine el acolchado superior e inferior predeterminado.

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

Frontera

Agrega un borde también.

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

Monitor

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: 1 px
• Color del borde derecho: #eaeaea

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

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 de los botones 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)
• Acolchado izquierdo: 4vw (escritorio), 6vw (tableta y teléfono)
• Relleno derecho: 4vw (escritorio), 6vw (tableta y teléfono)

Clonar módulo de botón y colocar 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 la sección 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

A continuación, cambie el ID de CSS de la sección y agregue una clase de CSS también.

• ID de CSS: precio-2
• Clase CSS: hide-section-2

Agregar nueva fila de una columna a 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 hacer eso, 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 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 alternancia de precios 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 de cuadrícula que le permite enfatizar qué funciones están incluidas 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.