widget: Forma

widget Categorías: Medios de comunicación

El widget Forma es una herramienta de diseño que se puede utilizar para destacar mensajes importantes. Cree botones y banners, convoque a premios y destaque precios de venta. Puede añadir una imagen, cambiar color de fondo y texto, controlar el tamaño y añadir sombras. El widget puede colocarse en cualquier ubicación para una total flexibilidad.

Editor de contenido

  1. Seleccione una forma.

  2. Para agregar un vínculo a la forma, haga clic en agregar Enlace (para obtener más información sobre los vínculos, consulte Selector de vínculos.

  3. Escriba un título y una descripción para la forma. Para ocultar el título y la descripción, haga clic en el ojo (24517315481495-icono_ojo.png) icono.

    Nota

    El campo de texto largo proporciona varias opciones de formato de texto, como cursiva, negrilla o subrayado.

  4. Escriba el Texto alternativo y una Información sobre herramientas para la forma.

Editor de diseño

  1. Para cambiar de un fondo de color a uno de imagen, haga clic en Diseño .

    • Para cambiar la imagen predeterminada, navegue a la pestaña Estilo y seleccione la pestaña Imagen .

      Nota

      Si la opción Mantener proporciones está desactivada, las proporciones de la imagen se ajustarán a las del widget.

  2. Ajuste la anchura, la altura y el efecto hover (por desktop) en la pestaña Estilo .

  3. Para colocar el widget encima de una imagen u otro widget, haga clic en la pestaña Espaciado y configure los márgenes para que sean un número negativo (por ejemplo, -50px).

  4. Para convertir el icono en un widget flotante, habilite el botón de alternancia Flotante y seleccione una posición para el widget. Para mostrar el widget flotante solo en la página actual, habilite la opción Mostrar solo en esta página .

Asegúrese de que las configuraciones de diseño que defina sean correctas para el dispositivo. Como de costumbre, las configuraciones tales como espaciado (de todo el widget y de los elementos individuales), ancho, entre otras, se definen por dispositivo.

Ejemplos

Crea un diseño interesante con una forma amorfa

Para crear un diseño interesante con una forma amorfa:

  1. Cree una fila con dos columnas.

  2. Escoja una forma amorfa y agréguela a la columna del lado derecho.

  3. Haga que la forma sea tan grande como la columna.

  4. En el Editor de diseño, seleccione la disposición con la imagen de fondo y reemplace la imagen por la que desee.

22384747496983-shapewidget2_en-us.jpg
Emplee una forma como un botón

Para usar una forma como un botón agregando un enlace y efecto de superposición:

  1. Seleccione la forma de círculo y agregue un título y una descripción.

  2. Seleccione los colores para la forma y los textos.

  3. Para colocar la forma en la esquina de una imagen, use un margen negativo en la lado izquierdo de la forma (espaciado > margen > margen izquierdo y superior en - 50 píxeles).

22384799701783-shapewidget3_en-us.jpg
Resalte un plan o servicio específico

Para utilizar formas para destacar un plan o servicio específico:

  1. Elija la forma de bandera y agregue un título o una descripción breve.

  2. Desactiva la opción Mantener proporción para poder ajustar solo el ancho.

  3. Seleccione los colores para la forma y los textos.

  4. Para colocar la forma de modo que esta se superponga a la parte superior de la columna, use un margen superior negativo (espaciado > margen > margen superior en - 30 píxeles).

22384747643031-shapewidget4_en-us.jpg
Crear un botón de desplazamiento

Para utilizar una forma para crear un botón de desplazamiento:

  1. Escoja la forma de diamante y agregue un título.

  2. Desactiva la opción Mantener proporción para poder ajustar solo el ancho.

  3. Seleccione los colores para la forma y los textos.

  4. Para colocar la forma en la parte superior de la imagen, use un margen superior negativo (espaciado > margen > margen superior en - 50 píxeles).

22384816667031-shapewidget5_en-us.jpg