En este tutorial, aprenderemos cómo crear botones para mostrar u ocultar contenido utilizando la versión gratuita de Elementor. El ejemplo que veremos es la creación de dos botones que alternan el contenido visible en una página. ¡Vamos a empezar!
Preparación del Diseño
-Abre tu página en Elementor o crea una nueva.
-Crea la estructura deseada, como un contenedor con una imagen, un botón y un área de contenido que deseas mostrar u ocultar.
Asignación de Clases
-En el widget de botón, ve a la pestaña «Avanzado» y define una clase, por ejemplo, «boton-mostrar-ocultar-1».
-En el contenedor que contiene el contenido a mostrar u ocultar, ve a la pestaña «Avanzado» y define otra clase, por ejemplo, «contenido-1».
Código HTML Personalizado
-Agrega un widget de HTML dentro del contenedor con la imagen y el botón.
-Copia y pega el script que encontraras al final del tutorial:
Configuración de la Visibilidad Inicial
-Ve a «Apariencia» y selecciona «Personalizar».
-En la sección de «CSS Adicional», agrega el código CSS que encontrarás al final del tutorial.
Duplicación para Botones Adicionales (Opcional)
Si deseas crear más botones para mostrar y ocultar contenido adicional, duplica el contenedor y repite los pasos 2 y 3, asegurándote de cambiar las clases y los números correspondientes (por ejemplo, «boton-mostrar-ocultar-2» y «contenido-2»).
Resultado
Al realizar estos pasos, habrás creado botones que alternan la visibilidad del contenido en tu página. Puedes repetir el proceso para agregar más botones si es necesario.
¡Espero que este tutorial te haya sido útil! Si te gustó, no olvides darle like y suscribirte al canal para más tutoriales. Si tienes preguntas o dudas, déjalas en los comentarios. ¡Hasta la próxima!
Si para este tutorial necesitas algún plugin lo podrás encontrar en la pagina de plugins.
