Vamos a maquetar unas secciones para móvil utilizando técnicas de diseño web valencia, 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:
¿Cómo 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. Utilizamos el plugin Elementor para crear layouts responsivos que se adapten perfectamente a dispositivos móviles, tal como se documenta en la página oficial del plugin Elementor.
¿Cómo 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.
Seguidamente, en nuestro css, añadimos el siguiente código para ocultar estos elementos:
.contenido-oculto{
display:none;
}
¿Cómo creamos 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»
¿Cómo añadimos 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();
});
Crear desplegable móvil en Elementor y WordPress
- Maquetar secciones en versión móvil con Elementor que se desplegarán desde un botón
- Aplicar la clase 'contenido-oculto' a los elementos que deben ocultarse inicialmente
- Usar CSS display:none para ocultar los elementos con la clase 'contenido-oculto'
- Asignar la clase 'btn-oculta' al botón que activará el despliegue
- Implementar jQuery con slideToggle() para mostrar/ocultar contenido al hacer clic
Datos de Generacionweb
- Ubicada en Avenida Tir de Colom 6, 46980 Paterna (Valencia)
- Horario: lunes a viernes de 9:00 a 20:00
- Teléfono de contacto: 660 202 266
