MakeInOff – Alternar paquetes según periodo
Para crear una página con ventanas que informen sobre alternar precios de paquetes de servicios mensual semestral anual en Divi sin plugins y con CSS y Javascript, siga estos pasos:
1. Crea una página en Divi y agrega una sección de texto.
2. Dentro de la sección de texto, crea tres columnas y agrega el precio para cada uno de los paquetes (mensual, semestral y anual) en cada columna.
3. Agrega un botón debajo de cada precio que diga “Alternar precio”.
4. Crea una sección de texto adicional debajo de las columnas de precios.
5. Usa CSS para ocultar los precios semestrales y anuales por defecto. Puedes hacer esto agregando las siguientes líneas de código a tu hoja de estilo:
“`
.et_pb_column:nth-child(2), .et_pb_column:nth-child(3) {
display: none;
}
“`
6. Usa Javascript para alternar los precios cuando se hace clic en el botón “Alternar precio”. Puedes hacer esto agregando las siguientes líneas de código a tu archivo Javascript:
“`
jQuery(document).ready(function($) {
$(‘.alternar-mensual’).click(function() {
$(‘.et_pb_column:nth-child(1)’).show();
$(‘.et_pb_column:nth-child(2)’).hide();
$(‘.et_pb_column:nth-child(3)’).hide();
});
$(‘.alternar-semestral’).click(function() {
$(‘.et_pb_column:nth-child(1)’).hide();
$(‘.et_pb_column:nth-child(2)’).show();
$(‘.et_pb_column:nth-child(3)’).hide();
});
$(‘.alternar-anual’).click(function() {
$(‘.et_pb_column:nth-child(1)’).hide();
$(‘.et_pb_column:nth-child(2)’).hide();
$(‘.et_pb_column:nth-child(3)’).show();
});
});
“`
7. Agrega el nombre de clase “alternar-mensual”, “alternar-semestral” y “alternar-anual” a cada botón correspondiente.
8. Guarda y publica tu página.
Ahora deberías poder hacer clic en los botones “Alternar precio” para alternar entre los precios mensuales, semestrales y anuales en tu página Divi sin necesidad de usar plugins adicionales.
