Descargue un diseño de interruptor mensual / anual gratuito para Div

Cuando decide presentar los planes de precios en su sitio web, hay algunas maneras de abordarlo. Uno de los enfoques más populares allí es la creación de un cambio de precios mensual / anual, que permite a los usuarios navegar fácilmente a través de los diversos planes de precios dependiendo de cómo elijan facturar. En el tutorial de hoy, le mostraremos cómo hacer que la función de cambio de precio funcione con Div. ¡Recrearemos un ejemplo sorprendente desde cero y podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el diseño de precios mensual / anual gratuito para poner su mano en un diseño de conmutación mensual / anual gratuito, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue la sección no. 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
Bajo el separador pase a la pestaña de diseño e ingrese un separador inferior.

Estilo divisor: encontrar en la lista
Altura del divisor: 10 VW
Espacio agregue un relleno personalizado, superior e inferior.

Revestimiento superior: 5VW
Revestimiento inferior: 10 VW
ID CSS y agregue una ID de CSS en la sección.

ID CSS: sección Switch
Agregue una nueva estructura de columna de fila Continúe agregando una fila a la sección utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 30VW (escritorio), 45VW (tableta), 50VW (teléfono)
Ancho máximo: 100%
Espacio deshacerse del relleno predeterminado y aguas abajo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Borde y modifique la configuración del borde. Redondeado: 50 VW (todas las esquinas)

Ancho fronterizo: 1 PX
Color del borde: # E8E8E8
La pantalla para garantizar que ambas columnas aparezcan una al lado de las otras en dimensiones de pantalla más pequeñas, agregaremos una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;
Agregue un módulo de texto a la columna 1 Agregar contenido es hora de comenzar a agregar módulos. La única forma en que necesitamos en la columna 1 es un módulo de texto. Ingrese un contenido de su elección.

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

Texto de fuente: Montserrat

Tamaño de texto: 1VW (escritorio), 1.5VW (tableta), 2VW (teléfono)
Alineación de texto: Centro
Color de texto: Abierto
Extienda el cambio de los valores de llenado hacia arriba e inferior en diferentes tamaños de pantalla.
Revelaje superior: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)

Bajo forro: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)
ID y clase CSS y asigne una ID de CSS y una clase de texto.
ID de CSS: precio-plan-printm-1

Clase CSS: curso de elección del cursor
Clone el módulo de texto y coloque el duplicado en la columna 2 Después de haber completado el módulo de texto en la columna 1, puede clonarlo una vez y colocar el duplicado en la columna 2.
Cambie el contenido Asegúrese de cambiar el contenido.

Cambie la ID de CSS y use otra ID de CSS.

ID CSS: Precio-Plano-We-2

Agregue el color de fondo de la Sección 2, vamos a la segunda sección. Agregue el siguiente color de fondo:
Color de fondo: # 6B63DD

Extienda luego, acceda a la configuración de separación de la sección y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 7VW

Reinicio inferior: 15vwcăptușa izquierda: 21VW (escritorio), 10VW (tableta y teléfono)
Revestimiento derecho: 21 VW (escritorio), 10VW (tableta y teléfono)
ID CSS también agregue un ID CSS a la sección.
ID CSS: Price-1
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Borde luego acceda a la configuración de espaciado y aplique la siguiente configuración del borde:
El ancho del borde recto: 1 PX
Ancho del borde izquierdo: 1 PX

El ancho del borde superior: 0 PX
Ancho del borde inferior: 0 PX
Color del borde: RGBA (255,255,255.0)
Visualización Asegúrese de que las columnas aparezcan una al lado de la otra en dimensiones de pantalla más pequeñas, agregando una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;
Configuración de la columna 2 Espacio Después de haber completado la configuración de la fila general, abra la configuración de la columna 2 y agregue algunos rellenos personalizados en la parte superior e inferior.
Revestimiento superior: 1VW

Revestimiento inferior: 4VW

El borde también usa un borde en la columna 2.
El ancho del borde recto: 1 PX
Color de borde derecho: #ffffff

Configuración de espaciado de la columna 3 Vaya a la configuración de la tercera columna y agregue algunos valores de llenado personalizados.
Revestimiento superior: 1VW
Revestimiento inferior: 4VW

¡Agregue el divisor a la columna 1, la visibilidad es hora de comenzar a agregar módulos! El primer módulo y la única forma que necesitamos en la columna 1 es un módulo divisor. Asegúrese de deshabilitar la opción “Pantalla”. Solo necesitamos este módulo para asegurarnos de que el resto del diseño permanezca intacto. Divisor: No
Agregue el módulo de texto no. 1 en la columna 2 Agregar contenido H3 Pase a la columna 2 y agregue un módulo de texto con un contenido H3.
Configuración de texto H3 Cambie la configuración de texto H3 de la siguiente manera:

3 Fuentes de fuentes: Montserrat
Título 3 Alineación de texto: Centro

Frup 3 color de texto: #ffffff

Texto 3 Sección: 2VW (escritorio), 3VW (tableta), 3.5VW (teléfono)
Rúbrica 3 Espaciación de litros: -1 PX
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto justo debajo del anterior e ingrese un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Montserrat
El peso de la fuente de texto: ultra luz

Color de texto: #ffffff

Tamaño de texto: 2VW (escritorio), 3VW (tableta), 3.5VW (teléfono)
La altura de la línea de texto: 1em
Alineación de texto: Centro
Espacio Agregar un margen personalizado.
Margen superior: 0.5 VW
Clone ambos módulos y coloque los duplicados en la columna 3 Después de haber completado los módulos en la columna 2, puede clonar en ambos y puede colocar los duplicados en la columna 3.
Cambie el contenido para asegurarse de cambiar el contenido de cada duplicado.

¡Agregue la estructura de la fila # 2 de la columna por segundo de la sección 2! Elija la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera: use el ancho de canaleta personalizado: sí

El ancho de la canaleta: 1


Igualar las alturas de la columna: sí

Ancho: 100%

Ancho máximo: 100%
Espacio Retire el relleno predeterminado e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Borde y aplicar una ventaja.
El ancho del borde superior: 0 PX

El ancho del borde recto: 1 PX
Ancho de borde inferior: 1 PX
Ancho del borde izquierdo: 1 PX

Color del borde: # 8882DD
Visualización Asegúrese de que las columnas aparezcan una al lado de la otra en dimensiones de pantalla más pequeñas, agregando una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;
Configuración de la columna 1 Espacio Continúe abriendo la configuración de la columna 1 y aplique algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 3VW (escritorio), 5VW (tableta y teléfono)
Bajo forro: 3VW (escritorio), 5VW (tableta y teléfono)
Borde Agregue un borde recto a la columna.

El ancho del borde recto: 1 PX

Color de borde derecho: # 8882DD
Configuración Columna 2 Interruptor de separación a la segunda columna y cambie la configuración de espaciado.
Revelaje superior: 3VW (escritorio), 5VW (tableta y teléfono)

Bajo forro: 3VW (escritorio), 5VW (tableta y teléfono)
Border agregue un borde recto.
El ancho del borde recto: 1 PX

Color de borde derecho: #ffffff
Configuración de espaciado de la columna 3 Luego, abra la configuración de la columna 3 y agregue algunos valores de llenado hacia arriba y hacia abajo en diferentes tamaños de pantalla.
Revelaje superior: 3VW (escritorio), 5VW (tableta y teléfono)

Reinicio inferior: 3VW (escritorio), 5VW (tableta y teléfono) Agregue un módulo de texto en la columna 1 Agregar contenido Después de haber completado la configuración de la fila y la columna, es hora de comenzar a agregar módulos. Agregue un módulo de texto en la columna 1 e ingrese un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Montserrat

Color de texto: #ffffff
Tamaño de texto: 1VW (escritorio), 1.5VW (tableta), 2VW (teléfono)
Alineación de texto: Centro

Agregue un módulo de texto a la columna 2 Agregue el 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 Diseño y cambie la configuración de texto de la siguiente manera:
Color de texto: # FFAD72
Tamaño de texto: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)
La altura de la línea de texto: 1em
Alineación de texto: Centro

Clone el módulo de texto y coloque el duplicado en la columna 3 Después de haber completado el módulo de texto en la columna 2, puede clonar y colocar el duplicado en la columna 3.

Símbolo alternativo y color de texto Dependiendo de la característica que exponga, es posible que desee cambiar el símbolo a “✗”. Use un color de texto diferente.
Color de texto: #ffffff
Clone el giro tantas veces como desee después de haber completado toda la fila, puede clonarla tantas veces como desee, dependiendo de cuántas funciones desee mostrar.
Agregue la estructura de la fila # 3 de la última fila que agregaremos a la segunda sección contiene la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: el daño de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho: 100%


Ancho máximo: 100%

Espacio Retire el relleno predeterminado e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Borde agregue un borde.
El ancho del borde superior: 0 PX
Ancho del borde inferior: 0 PX
El ancho del borde recto: 1 PX

Ancho del borde izquierdo: 1 PX
Color del borde: RGBA (255,255,255.0)
Muestre y asegúrese de que las columnas aparezcan una al lado de la otra en dimensiones de pantalla más pequeñas, agregando una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;

Configuración El espacio de columna 2 y 3 Continúa agregando un margen superior en la columna 2 y 3.
Revestimiento superior: 4VW
Columna 2 borde y agregue un borde recto a la columna 2.
El ancho del borde recto: 1 PX
Color de borde derecho: #eaea
Clon el módulo divisor y coloque en la columna 1 en el nuevo clon de fila El módulo divisor que puede encontrar en primer lugar la sección y coloque el duplicado en la primera columna de la nueva fila.

Agregue un módulo de botón a la columna 2 Agregue una copia Continuar agregando un botón en la columna 2 e ingrese una copia de su elección.

Alineación Cambiar la alineación de los botones en la pestaña Diseño.
Alineación de botones: centro

Botón de configuración y cambiar la configuración del botón de la siguiente manera:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 1.5VW (tableta), 2VW (teléfono)

El color del texto del botón: #ffffff

El color de fondo del botón: # FFAD72

El ancho del nudo del botón: 0 PX
Butter Rasse: 50VW

Botón de fuente: Montserrat
Espaciado Agregar algunos valores de llenado personalizados al módulo de botón. Habitación más alta: 1VW (escritorio), 1.5VW (tableta y teléfono)
Bajo forro: 1VW (escritorio), 1.5VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 6VW (tableta y teléfono)
Revestimiento derecho: 4VW (escritorio), 6VW (tableta y teléfono)
El botón de clonación y colocación duplicada en la columna 3 Después de haber completado el módulo de botón en la columna 2, puede clonar y colocar el duplicado en la columna 3.

Clon Sección 2 Continuar 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á después de que alguien haga clic en “facturación anual”.
Cambie la ID de CSS y agregue la clase CSS y luego cambie la ID CSS de la sección y agregue una clase CSS.

ID CSS: precio-2
Clase CSS: Ocultar-Sección-2
Agregue una nueva fila con una columna en la parte superior de la sección no. 1 Lo único que queda por hacer es agregar el código CSS y JQUEY para que funcione la funcionalidad. Para esto, agregaremos una nueva fila a la parte superior de la Sección 1.
Agregue el módulo de código # 1 con el código CSS Agregue un módulo de primer código e ingrese las siguientes líneas de código CSS:
. PRECICIÓN-PRESTURA ACURSOR {

Cursor: puntero;

}

.-Sección-2 {
Pantalla: ninguno;
}

. Active-Plane {

Color: #6B63DD! IMPORTANTE;
Color de fondo: #fff;
}
Agregue el módulo de código # 2 con el código jQuery Agregue otro módulo de código justo debajo del anterior, ingrese el código jQuery a continuación entre las etiquetas de script y ¡está listo! JQuery (function ($) {
$ (‘#precios-plano-printm-1’). addClass (‘activo-par-plan’);
$ (‘[id*= “Preciete-Plane-AISTEM”]). Click (function () {var selector = $ (this) .attr (‘ id ‘).);
var $ fienteelect = $ (‘#’ + selector);
$ (‘[id*= “precios-“]’). no (‘[id*= “precios-pln”]’). hide ();
$ PricingElect.show ()
$ (‘#toggle-section’). show ();
$ (‘[id*= “Plano de precios”]).

$ (this) .AddClass (‘Plan de parado activo’);
});
});
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo crear un diseño de conmutación mensual / anual. Esta es una excelente manera de agregar interacción a sus planes de precios. Además de aplicar la técnica de clic, también diseñamos un plan de precios para una cuadrícula hermosa, que le permite enfatizar qué características se incluyen en qué planes. Puede 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.