Cuando decida mostrar planes de precios en su sitio web, hay un par de formas de abordarlo. Uno de los enfoques más populares es crear una alternancia de precios mensual / anual que permita a los usuarios navegar fácilmente a través de los diferentes planes de precios según la forma en que elijan 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!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

alternar precios

Móvil

alternar precios

¡Comencemos a recrear!

Agregar 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

alternar precios

Divisor inferior

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

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

alternar precios

Espaciado

Agregue también algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 5vw
  • Relleno inferior: 10vw

alternar precios

ID de CSS

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

  • ID de CSS: alternar sección

alternar precios

Agregar nueva fila

Estructura de columna

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

alternar precios

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 30vw (escritorio), 45vw (tableta), 50vw (teléfono)
  • Ancho Máx .: 100%

alternar precios

Espaciado

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

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

alternar precios

Frontera

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

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

alternar precios

Monitor

Para asegurarnos de que ambas columnas aparecen 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.

01
display: flex;

alternar precios

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.

alternar precios

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de 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

alternar precios

Espaciado

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

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

alternar precios

ID de CSS y clase

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

  • ID de CSS: price-plan-item-1
  • Clase CSS: precio-elemento-cursor

alternar precios

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.

alternar precios

Cambiar contenido

Asegúrate de cambiar el contenido.

alternar precios

Cambiar ID de CSS

Y use una ID de CSS diferente.

  • ID de CSS: price-plan-item-2

alternar precios

Agregar Sección # 2

Color de fondo

En la segunda sección. Agregue el siguiente color de fondo:

  • Color de fondo: # 6b63dd

alternar precios

Espaciado

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

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

alternar precios

ID de CSS

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

  • ID de CSS: fijación de precios-1

alternar precios

Agregar fila # 1

Estructura de columna

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

alternar precios

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

alternar precios

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

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

alternar precios

Frontera

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)

alternar precios

Monitor

Asegúrese de que las columnas aparecen 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.

01
display: flex;

alternar precios

Configuración de 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 algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 1vw
  • Relleno inferior: 4vw

alternar precios

Frontera

Use un borde en la columna 2 también.

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

alternar precios

Configuración de columna 3

Espaciado

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

  • Relleno superior: 1vw
  • Relleno inferior: 4vw

alternar precios

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 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

alternar precios

Agregue el módulo de texto n. ° 1 a la columna 2

Añadir contenido H3

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

alternar precios

Configuraciones de texto H3

Cambie la configuración del 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
  • Encabezado 3 Tamaño del texto: 2vw (escritorio), 3vw (tableta), 3.5vw (teléfono)
  • Encabezado de 3 letras: -1px

alternar precios

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.

alternar precios

Configuraciones de texto

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

  • Fuente de texto: Montserrat
  • Peso de la fuente de texto: Ultra ligero
  • 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

alternar precios

Espaciado

Agregue también un margen superior personalizado.

  • Margen superior: 0.5vw

alternar precios

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 a ambos y colocar los duplicados en la columna 3.

alternar precios

Cambiar contenido

Asegúrese de cambiar el contenido de cada duplicado.

alternar precios

Agregar fila # 2

Estructura de columna

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

alternar precios

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

alternar precios

Espaciado

Elimine el relleno predeterminado superior e inferior a continuación.

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

alternar precios

Frontera

Y aplica 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

alternar precios

Monitor

Asegúrese de que las columnas aparecen 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.

01
display: flex;

alternar precios

Configuración de 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.

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

alternar precios

Frontera

Agregue un borde derecho a la columna también.

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

alternar precios

Configuración de columna 2

Espaciado

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

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

alternar precios

Frontera

Agregue un borde derecho a continuación.

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

alternar precios

Configuración de 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.

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

alternar precios

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.

alternar precios

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de 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

alternar precios

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.

alternar precios

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de 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

alternar precios

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

alternar precios

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

alternar precios

alternar precios

Clone Row tantas veces como desee

Una vez que haya completado toda la fila, puede clonarla tantas veces como desee, dependiendo de cuántas funciones desee mostrar.

alternar precios

Agregar fila # 3

Estructura de columna

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

alternar precios

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

alternar precios

Espaciado

Elimine el relleno predeterminado superior e inferior a continuación.

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

alternar precios

Frontera

Agrega 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)

alternar precios

Monitor

Y asegúrese de que las columnas aparecen 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.

01
display: flex;

alternar precios

Configuración de columna 2 y 3

Espaciado

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

  • Relleno superior: 4vw

alternar precios

Columna 2 Borde

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

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

alternar precios

Módulo divisor de clones y lugar 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.

alternar precios

Agregar módulo de botón 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.

alternar precios

Alineación

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

  • Alineación de botones: centro

alternar precios

Configuraciones 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

alternar precios

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

alternar precios

Espaciado

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

  • Relleno 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)

alternar precios

Módulo de botón de clonar 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.

alternar precios

Clon Sección # 2

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

alternar precios

Cambiar ID de CSS y agregar clase de CSS

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

  • ID de CSS: fijación de precios-2
  • Clase CSS: hide-section-2

alternar precios

Agregue una 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 a la parte superior de la sección 1.

alternar precios

Agregar código Módulo # 1 con código CSS

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<style>
.pricing-item-cursor {
cursor: pointer;
}
 
.hide-section-2 {
display: none;
}
 
.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

alternar precios

Agregar Código Módulo # 2 con Código JQuery

Agregue otro módulo de código justo debajo del anterior, inserte el código jQuery a continuación y listo.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
<script>
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);
 
$pricingselect.show().siblings().hide();
$('#toggle-section').show();
 
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');
 
});
});
</script>

alternar precios

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!