>

El tema Avada para WordPress sigue manteniéndose en el top 10 de ventas del 2018 y aprovechando que es tan popular quisiera aportar un pequeño truco para sacarle si cabe más partido aún.

Este tema es 100% visual y entre sus características esta la de poder elegir si un bloque o un elemento es visible o no en lo que Avada predefine como:

  • Large screen
  • Medium screen
  • Small screen

El valor de estas tres variables puede modificarse, en pixels, desde la administracion del tema Avada:  Avada->Theme Options->Fusion Builder Elements->Visibility Size Options

¿Porqué escribo este artículo si solo hay que decidir si un elemento es visible o no en un dispositivo eligiendo una de las tres opciones?

Porque quiero explicar como podemos aprovechar esta característica para controla si aparece o no un elemento dentro de un bloque, pero no todo el bloque, es decir, Avada nos permite seleccionar en todos sus elementos y bloques si es visible o no en estos tres tamaños pero ¿que ocurre si lo que queremos es controlar solo una parte de ese bloque, por ejemplo un botón o una frase dentro del bloque completo? No es posible, o se ve o no se ve todo el conjunto.

Bien, la solucción pasa por usar código de estilos, CSS, y personalizarlo pero ¿porqué no reutilizar la clase que ya viene de por si con Avada y no crear una nueva?

Las clases, que controlan estos tres tamaños predefinidos de pantalla son:

  • Large screen    –> fusion-no-large-visibility 
  • Medium screen  –> fusion-no-medium-visibility
  • Small screen   –>  fusion-no-small-visibility

Basta con añadir esta clase a cada uno de los elementos que queramos controlar y listo. Por ejemplo:

Queremos que el siguiente <blockquote> no aparezca en pantallas muy pequeñas puesto que es un slogan en tamaño T1 bastante largo. Queda muy bien en pantallas medianas y grandes pero en el móvil, pues como que «daña a la vista este tamaño y esta frase tan extensa».

Cada empresa es diferente, cada necesidad también, por eso se necesitan desarrollos a medida, programación a medida.

De esta forma, con la clase fusion-no-small-visibility estamos indicando que no queremos que se muestre en pantallas pequeñas, teniendo en cuenta que previamente hemos definido lo que es una pantalla pequeña para este proyecto en las propiedades del tema WordPress Avada.

Categorías: CSS y HTMLWordPress