Cómo ocultar módulos de Joomla en dispositivos móviles

Escrito por | 01 Septiembre 2013 | Publicado en Sept. 2013
Es este tutorial queremos mostrar cómo se pueden ocultar módulos en Joomla, para mejorar la usabilidad en los dispositivos móviles, para ver aquellos módulos que nos interesen, mientras que no se vean los que no interesan.

Utilizaremos para ello la propiedad "display:none" de las hojas de estilo CSS. Desde ellas podremos esconder los módulos que interese que no se vean en los dispositivos móviles.

Es una herramienta muy sencilla de utilizar que permitirá que añadamos flexibilidad en la forma de mostrar contenido en nuestra página según el dispositivo que se esté utilizando.

Cuando creamos un nuevo módulo en Joomla, en la pestaña de opciones avanzadas tenemos disponible un parámetro para añadir un sufijo de clase CSS para el módulo, que nos va a servir de ayuda en este tutorial.

Veamos ahora cómo podemos ocultar los módulos utilizando el atributo CSS display:none y los sufijos de clase.

Paso 1. El código CSS

Añada el siguiente fragmento de código al archivo de CSS de la plantilla que estés utilizando. Con estas líneas estamos indicando que esta regla se aplique solo en el caso de que la pantalla tenga menos de 480 píxeles de ancho.

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px) {
   .moduletable.mobilehide {display:none}
}

Paso 2. Añadir la clase al módulos

A continuación tendremos que ir al módulo que queremos ocultar y en el campo “Clase CSS del módulo” en la pestaña de opciones avanzadas, hay que añadir la clase “ mobilehide”.

Se han utilizado comillas para resaltar el espacio en blanco que hay antes de la palabra mobilehide, es importante añadirlo, sin las comillas.

Sin el espacio en blanco, el código html del módulo se representaría de la siguiente forma

<div class="moduletablemobilehide">

y para el tutorial que estamos realizando se necesita que tenga el siguiente aspecto

<div class="moduletable mobilehide">

anadir clase de modulos en joomla

Paso 3. Probar

Ya tenemos un módulo que se muestra en todas las pantallas superiores a 480 píxeles mientras que en las pantallas inferiores no se verá. Puede hacer pruebas entrando en el sitio web con un dispositivo móvil o disminuyendo el tamaño de la ventana del navegador en el ordenador.

Para finalizar

Hemos de tener en cuenta que este método, carga igualmente el módulo en el dispositivo, por lo que no es ideal, ya que el tiempo de carga no disminuye... pero como mínimo mejoramos la visibilidad del sitio web.

Se ha comentado que los dos atributos CSS "display:none" y "visibility:hidden" permiten ocultar un elemento en el navegador.

Sin embargo, existe una pequeña diferencia:

  • visibility: hidden oculta el elemento, pero sigue conservando el espacio que ocupaba, los elementos adyacentes conservan su ubicación.
  • display:none quita el elemento definitivamente. El espacio que ocupaba, según sea el caso, es ocupado por los elementos adyacentes como si el elemento ya no existiera.

Para no cargar los módulos, de momento, solo hay la solución de instalar un complemento que recree el sitio para dispositivos móviles, tipo Mobile... o similar. En este sentido, puede ver aquí, las extensiones que hay para esto en el directorio de extensiones de Joomla.org. 

Basado en el artículo: Hiding Joomla modules on mobile devices

Visto 13513 veces Etiquetado como Spanish, Desarrollador
Manuel Rubio

Manuel Rubio

Emprendedor, autodidacta, diseñador, artesano... Encontré el CMS de Joomla buscando soluciones que facilitaran la creación de sitios web allá por el 2008, y desde ese día lo he venido utilizando para realizar proyectos. Cuando descubrí que detrás del proyecto existía una comunidad, me uní a ella para ayudar en lo que pudiera... y en eso estoy :-)