Widget «Forma»

Categorías de widgets: Medios

El widget de forma es una herramienta de diseño para destacar mensajes importantes: crea botones y banners, resalta premios o pon el foco en precios de oferta. Puedes añadirle una imagen, un fondo de color y texto, controlar el tamaño y ponerle sombras. Y como lo colocas donde quieras, tienes total libertad.

Para saber cómo añadir widgets, consulta «Add Widgets».

Consejo: Para más información sobre los widgets y la biblioteca de widgets, consulta «Widgets: Library and Overview».

Editor de contenido

Haz clic en el elemento para abrir el menú flotante y luego en la opción del editor de contenido.

1. Elige una forma.

2. Para añadir un enlace a la forma, haz clic en Añadir enlace (para más información sobre enlaces, consulta «Link Picker»).

3. Escribe un título y una descripción para la forma. Para ocultarlos, haz clic en el icono de ojo.

   Nota: El campo de texto largo ofrece varias opciones de formato, como poner el texto en cursiva, en negrita o subrayado.

4. Escribe el Alt text y el Tooltip de la forma.

Editor de diseño

Haz clic en el elemento para abrir el menú flotante y luego en la opción para editar el diseño.

1. Para pasar de un fondo de color a un fondo de imagen, haz clic en Diseño.

   • Para cambiar la imagen predeterminada, ve a la pestaña Estilo y selecciona la pestaña Imagen.

   Nota: Si Conservar proporciones está desactivado, las proporciones de la imagen se ajustan al widget.

2. Ajusta el ancho, el alto y el efecto hover (para escritorio) en la pestaña Estilo.

3. Para colocar el widget encima de una imagen u otro widget, o hacer que se solapen, haz clic en la pestaña Espaciado y pon los márgenes en un número negativo (por ejemplo, -50px).

4. Para convertirlo en un widget flotante, activa la opción Flotante y elige una posición. Para que el widget flotante aparezca solo en la página actual, activa la opción Mostrar solo en esta página.

Asegúrate de que los ajustes de diseño son los correctos en cada dispositivo. Ajustes como los espaciados (del widget entero y de cada elemento), el ancho y demás se definen por dispositivo.

Para saber más sobre las opciones de diseño que no son específicas de este widget (por ejemplo, la disposición, el estilo o los espaciados), consulta «Widget Design».

Ejemplos

Crear una composición llamativa con una forma amorfa

Para crear una composición llamativa con una forma amorfa:

1. Crea una fila con dos columnas.
2. Elige una forma amorfa y añádela a la columna de la derecha.
3. Haz la forma tan grande como la columna.
4. En el editor de diseño, elige la disposición con imagen de fondo y sustituye la imagen por la que quieras.

Usar una forma como botón

Para usar una forma como botón, añadiéndole un enlace y un efecto hover:

1. Elige la forma de círculo y añade un título y una descripción.
2. Elige colores para la forma y los textos.
3. Para colocar la forma en la esquina de una imagen, usa un margen negativo en el lado izquierdo de la forma (Espaciado > Margen > -50px de margen izquierdo y superior).

Destacar un plan o servicio concreto

Para destacar un plan o servicio concreto con formas:

1. Elige la forma de bandera y añade un título y una descripción corta.
2. Desactiva Keep proportion para poder ajustar solo el ancho.
3. Elige colores para la forma y los textos.
4. Para colocar la forma de modo que sobresalga por la parte de arriba de una columna, usa un margen superior negativo (Espaciado > Margen > -30px de margen superior).

Crear un botón de desplazamiento

Para crear un botón de desplazamiento con una forma:

1. Elige la forma de rombo y añade un título.
2. Desactiva Keep proportion para poder ajustar solo el ancho.
3. Elige colores para la forma y los textos.
4. Para colocar la forma encima de una imagen, usa un margen superior negativo (Espaciado > Margen > -50px de margen superior).