Desplegable en versión móvil con Elementor en WordPress

Tabla de contenidos

Vamos a maquetar unas secciones para móvil, luego las vamos a ocultar con css y por último, vamos a hacer que se muestren con un botón mediante jquery.

Este es el efecto deseado:

diseño web valencia generacionweb

Maquetamos las secciones que se desplegarán

Nos ponemos en versión móvil y maquetemos a nuestro gusto con elementor, en este caso hemos maquetado debajo del header unos recuadros en color para whatsapp y teléfono, seguido de 3 bloques de contactos. Todo esto se desplegará desde el botón del header del sobrecito.

maquetacion

Añadimos la clase que oculta los elementos

Una vez tenemos todo maquetado, ponemos con elementor que es sólo visible para móvil y le ponemos la siguiente clase «contenido-oculto» a los elementos que se tienen que desplegar. En nuestro caso, se puso en las 4 secciones de debajo del header.

contenido oculto 1

Seguidamente, en nuestro css, añadimos el siguiente código para ocultar estos elementos:

.contenido-oculto{
    display:none;
}

Creando el botón

El siguiente paso es ponerle la clase al botón que queremos que despliege estos elementos ocultos, en este caso es nuestro sobrecito, le ponemos la clase «btn-oculta»

botn

Añadiendo el código jQuery

Ahora, en nuestro archivo js añadimos el siguiente código:

jQuery(document).on('click', 'div.btn-oculta i.far',
function (event){
    event.preventDefault();
    jQuery('.contenido-oculto').slideToggle();
});

 

 

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Relacionados: