Añadir transparencias al diseño de las Apps

Las transparencias pueden utilizarse en varias secciones, pero principalmente nos vamos a centrar en las imágenes animadas y el fondo de color de los botones de las funcionalidades.

Transparencias en ítems de Pedidos de Comida y Tienda

Sólo disponible en PWA
Para que las imágenes de tus ítems en Pedidos de Comida y Tienda muestren la imagen de fondo, con un cuadro de texto transparente, sólo tienes que asegurarte que en el apartado Diseño – Estilo global tienes ajustado un color distinto al blanco (#FFFFFF) en Color de fondo:

Transparencias en las imágenes animadas

En el diseño de la pantalla principal de nuestra Home podemos añadir imágenes animadas que vayan pasando con distintos tipos de transición. Para poder hacer una buena composición, es necesario que tengamos en cuenta las transparencias de cada imagen.

En primer lugar tendremos que crear la imagen que se mantiene fija. En este caso vamos a dejar fija toda la imagen menos el botón y el texto. De manera que pondremos diferentes llamadas a la acción con botones distintos.

Para crearla, tendremos que mantener el tamaño recomendado en cada uno de los diseños. (640 x 1136 px)

Esta imagen la añadiremos como Fondo de Pantalla de Inicio, de modo que las imágenes animadas aparecerán encima de esta.

Para las imágenes animadas, mantendremos las medidas recomendadas, pero sólo pondremos contenido en una parte del lienzo, dejando transparente todo el fondo. Para ello, tendremos que guardarlas en formato PNG con fondo transparente para que se siga viendo la imagen principal.

Añadiremos estas imágenes en la sección «Imágenes animadas» del constructor. Al añadir las imágenes animadas podemos enlazarlas a alguna de las funcionalidades. Para conseguir el efecto de botón vamos a enlazar la primera imagen a un formulario para apuntarse y la segunda a la sección de contacto.

A continuación elegimos un efecto de transición para que cambie de una imagen a otra. En este caso vamos a elegir Sliding.

Transparencias en los botones

⚠️ También deberás seguir estos pasos si estás viendo un botón con una transparencia distinta a los demás.

A la hora de diseñar la home de nuestra App podemos poner transparencia en los botones para crear nuestros propios botones personalizados. Gracias a este ajuste podemos crear efectos que sirvan, por ejemplo, para resaltar una funcionalidad o simplemente para mostrar la imagen de fondo.


Lo primero que haremos para conseguir este efecto, será quitar por completo la transparencia del fondo del botón. 

Navegamos a Diseño – Navegación – Color de fondo de menú.

Al hacer clic en el color, se abrirá una ventana emergente con los ajuste de color. Modificaremos el valor de «A» para personalizar la opacidad, siendo 0 transparente y 100 un color sólido.

Si tienes activada la opción de «Diseño Personalizado» en alguna funcionalidad, deberás buscar la opción «Color de fondo de cuadrícula»

Una vez hayamos eliminado el fondo de los botones deberemos crear los nuestros personalizados.

Para ello tendremos que respetar el tamaño recomendado de 260 x 260 px y dejar el fondo transparente. 

En este caso vamos a hacer círculos, pero podremos hacer el diseño de botón que queramos o incluso podremos crear un botón diferente para cada funcionalidad y ocultar el icono para que sólo se vea nuestro diseño.

Una vez que hayamos diseñado nuestro botón, lo cambiaremos en la sección de Diseño – Navegación – Fondo de botón. 

También podemos modificar el botón de una funcionalidad para destacarla. Para ello deberemos ir a Funciones – Diseño personalizado – Fondo de botón.