Descubra cómo añadir widgets de composición en Adobe Muse. Configure los widgets de composición para crear sitios interactivos.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

Los widgets de composición en Adobe Muse le permiten añadir interactividad compleja a las páginas web. Ya sea en un sitio de fotografía o en un sitio de restaurante, los widgets de composición pueden ser prácticamente indispensables en cualquier sitio para mostrar una amplia variedad de contenido. Puede utilizar estos widgets para crear experiencias de navegación únicas sin tener que escribir ni una sola línea de código.

Adobe Muse ofrece varios tipos de widgets de composición que permiten añadir y diseñar diferentes tipos de contenido para su sitio web. Por ejemplo, cuando un usuario cree un sitio de fotografía, puede elegir el widget de pantalla de caja de iluminación para ofrecer una galería de imágenes de su sitio web. Este widget atenúa temporalmente el resto de la página, atrayendo así la atención del visitante al área activa de la pantalla.

También es posible crear diseños web interesantes al anidar widgets dentro de un widget de composición. Por ejemplo, si está diseñando un catálogo, puede utilizar el widget de composición en blanco para crear un menú de hamburguesas y anidar el widget de proyección de diapositivas en el área de destino del widget de composición en blanco. Estos diseños proporcionan una experiencia de usuario única para los visitantes.

Siga leyendo para obtener más información sobre los tipos de widgets de composición que están disponibles en Adobe Muse.

Tipos de widgets de composición

Un widget de composición consta de dos contenedores: desencadenante y destino. El área de activación es donde el visitante del sitio hace clic, y el área de destino es la correspondiente que se muestra. Puede vincular las áreas de activación y de destino para añadir complejidad e interactividad a su sitio.

Adobe Muse ofrece los siguientes tipos de widgets de composición. En función de sus requisitos de diseño, puede utilizar uno de estos widgets o una combinación de estos mediante la anidación.

En blanco

Widget de composición en blanco en Adobe Muse
Widget de composición en blanco en Adobe Muse

Un widget con miniaturas pequeñas. De forma predeterminada, el widget no tiene relleno. Puede vincular de forma manual este widget a un contenedor de destino.

Noticias destacadas

Widget de composición de noticias destacadas en Adobe Muse
Widget de composición de noticias destacadas en Adobe Muse

Un widget que se comporta de forma similar a un widget de acordeón. Puede añadir texto e imágenes en el área del contenedor para dicho widget.

Pantalla de caja de iluminación

Widget de composición de pantalla de caja de iluminación en Adobe Muse
Widget de composición de pantalla de caja de iluminación en Adobe Muse

Un widget en el que el contenido del área de destino se muestra activo al hacer clic en el desencadenante. El resto de la página se atenúa cuando se muestra el destino.

Presentación

Widget de composición de presentación en Adobe Muse
Widget de composición de presentación en Adobe Muse

Este widget contiene miniaturas pequeñas que están conectadas al área de presentación de destino. De forma predeterminada, las diapositivas se deslizan horizontalmente en este widget.

Sugerencia

Widget de composición de sugerencia en Adobe Muse
Widget de composición de sugerencia en Adobe Muse

Este widget contiene sugerencias. Cuando el usuario pasa el ratón sobre el área de desencadenante, se muestra inmediatamente el texto de la sugerencia.

Adición y configuración de widgets de composición

Para añadir un widget de composición en Adobe Muse, seleccione el widget de composición que desea añadir y arrástrelo a la vista Diseño. Como estos widgets son adaptables de forma predeterminada, podrá ver que el widget es fluido en distintos puntos de rotura. Si desea cambiar la posición del contenido de un widget de composición, puede modificar, cambiar de tamaño y fijar los elementos del widget individual según un punto de rotura en concreto.

Siga este procedimiento para añadir un widget de composición a su diseño.

  1. Abra Adobe Muse. Desde la pantalla de bienvenida, haga clic en Crear nuevo para crear un nuevo sitio o abrir un sitio de Adobe Muse existente en el que desee añadir un widget de composición.

  2. En la vista Plan, haga doble clic y abra la página en la que desea añadir el widget.

  3. Abra Biblioteca la biblioteca de widgets (Ventana > Biblioteca de widgets) y haga clic en las composiciones para expandir la opción. Elija uno de los widgets de composición, según sus requisitos de diseño.

    Por ejemplo, elija una pantalla de caja de iluminación de la librería de widgets.

    Nota:

    Para quitar todo el contenido predeterminado que se rellena en un widget, haga clic con el botón derecho del ratón en el widget y seleccione Borrar contenido de widget.

    Arrastre un widget de composición desde la biblioteca de widgets a Adobe Muse.
    Arrastre un widget de composición desde la biblioteca de widgets.

    La versión predeterminada del widget de pantalla de caja de iluminación tiene tres cuadros grises más pequeños de desencadenante por encima del contenedor gris claro más grande de destino.

    Cuando un visitante hace clic en el contenedor de desencadenante, aparece el contenedor de destino del widget de pantalla de caja de iluminación. Puede integrar imágenes, texto o vídeos, incluidos vídeos de YouTube, como destino.

  4. Seleccione el contenedor o el desencadenante en el widget de composición. Para seleccionar el widget completo, seleccione el widget. El indicador de selección de la esquina superior izquierda de la aplicación muestra la palabra Composición.

    Para seleccionar el desencadenante, haga doble clic y seleccione los cuadros más pequeños de este widget. La palabra Desencadenante se muestra en el indicador de selección. Los cuadros más pequeños son los desencadenantes de este widget. Son los botones que responden a la interacción del usuario.

    Visualización del indicador de selección, en la esquina superior izquierda de la página de Adobe Muse
    Visualización del indicador de selección, en la esquina superior izquierda de la página

    Se puede decir que no hay otros elementos seleccionados cuando el indicador de selección de la esquina superior izquierda muestra la palabra Página.

  5. Elija Archivo > Colocar para abrir el cuadro de diálogo Importar. Examine para seleccionar los archivos que desea colocar en este widget. Haga clic en Abrir para seleccionar el archivo y cerrar el cuadro de diálogo Importar.

    Haga clic una vez, en cualquier lugar de la página, para colocar la imagen a su tamaño completo.

  6. Mientras la imagen esté aún seleccionada, haga clic con el botón derecho del ratón y elija Cortar en el menú contextual.

    También puede utilizar el método abreviado de teclado para cortar la imagen, que la elimina de la página y la copia en el portapapeles.

  7. Haga clic con el botón derecho del ratón dentro del botón de desencadenante y elija Pegar. También puede utilizar el método abreviado de teclado para pegar la imagen en el desencadenante. Tenga en cuenta que el contenedor de desencadenante se expande automáticamente según el tamaño de las dimensiones de la imagen.

    Pegar contenido en un contenedor puede resultar complicado. A veces, aunque piense que el contenido se ha pegado dentro, en realidad se ha pegado en la página.

    Si necesita comprobar que la imagen se encuentra en el interior del contenedor de desencadenante, pulse Esc una vez y observe el indicador de selección. Si aparece la palabra Desencadenante, sabe que la imagen se encuentra dentro del desencadenante. Si en el indicador de selección aparece la palabra Página, tiene que cortar y volver a pegar la imagen dentro del contenedor de desencadenante.

    También puede abrir el panel Capas (Ventana > Capas) para verificar dónde se pega la imagen. El panel Capas muestra la jerarquía de los elementos de una página.

  8. Para añadir miniaturas, haga clic en el signo más (+) al lado de los contenedores de desencadenante.

    Haga clic en + para añadir miniaturas a una pantalla de caja de iluminación
    Haga clic en + para añadir miniaturas
  9. Después de colocar el widget en la vista Diseño, puede continuar y configurar el widget. Para configurar las opciones del widget de composición, seleccione el widget y haga clic en la flecha azul de la esquina superior derecha del widget.

    Configuración de los widgets de composición con el menú Opciones
    Configuración de los widgets de composición con el panel Opciones

    Puede configurar los siguientes ajustes desde el panel Opciones:

    • Posición: especifica dónde se sitúa el área de destino en la página. Seleccione Apilado si desea que los destinos se superpongan y seleccione Disperso si desea que se coloquen en posiciones distintas. Seleccione Caja de iluminación si desea atenuar el resto de la página.
    • Mostrar destino: especifica la configuración de comportamiento del destino cuando un usuario hace clic en el desencadenante. 
    • Ocultar destino: especifica la configuración para ocultar un destino. A menos que un usuario haga clic en el desencadenante, el área de destino permanece oculta. 
    • Transición: especifica cómo cambia el contenido en el área de destino cuando el usuario hace clic o pasa el cursor sobre el desencadenante. Elija Atenuación para atenuar el nuevo destino; Horizontal, para que los destinos se desplacen con un movimiento deslizante horizontal; y Vertical, para que los destinos se desplacen con un movimiento deslizante vertical. 
    • Velocidad de transición: especifica la velocidad de transición del widget de composición. Si quiere que la transición sea inmediata, seleccione Ninguno.
    • Reproducción automática: configure esta opción para crear una proyección de diapositivas en el sitio web. Si selecciona esta opción, las diapositivas se reproducen automáticamente, sin ninguna interacción por parte del usuario.
    • Reorganizar: seleccione esta opción si desea que las diapositivas se muestren en orden aleatorio.
    • Activar encima: seleccione esta opción para colocar el desencadenante encima del contenedor de destino. Puede ver la misma jerarquía que aparece en el panel Capas.
    • Habilitar barrido: seleccione esta opción para habilitar el movimiento de barrido y desplazarse al siguiente destino en dispositivos con pantalla táctil.
    • Ocultar todo al inicio: seleccione esta opción si desea ocultar todas las opciones de destino cuando se carga el sitio web por primera vez. Para ver el destino, el usuario tiene que hacer clic en el desencadenante correspondiente.
    • Cuadro de iluminación automático: seleccione esta opción si desea que la caja de iluminación se muestre automáticamente cuando se carga el sitio web.
    • Partes: seleccione las opciones Anterior, Siguiente o el botón Cerrar para añadir más interactividad al widget. Los usuarios pueden hacer clic en las opciones anteriores, siguientes y de cierre en el sitio web.
    • Edición: seleccione Mostrar partes de la caja de iluminación al editar para mostrar el área de destino en la vista Diseño, cuando esté editando el widget. Seleccione Mostrar todo en modo de diseño para ver todos los contenedores de destino al mismo tiempo en la vista Diseño.
    Configuración de los ajustes de los widgets de composición en Adobe Muse
    Configuración de los ajustes de los widgets de composición

    Nota:

    La opción Mostrar partes de la caja de iluminación al editar se desactiva cuando elija Disperso o Apilado como opción en la lista desplegable Posición.

    La opción Ocultar todo al inicio se desactiva si selecciona la opción Cuadro de iluminación automática.

  10. Para eliminar los desencadenantes innecesarios, haga doble clic para seleccionar el desencadenante que desea eliminar. Pulse la tecla para eliminar (Mac) o Retroceso (Windows) para eliminar el desencadenante seleccionado.

  11. Haga clic en la imagen principal en el contenedor de desencadenante para invocar el efecto de caja de iluminación.

    Haga clic en una imagen de la izquierda (desencadenante) para ver la pantalla de caja de iluminación
    Haga clic en una imagen de la izquierda (desencadenante) para ver la pantalla de caja de iluminación (como se muestra a la derecha)

    Si pulsa Esc, se cierra la ventana de caja de iluminación y puede volver a la vista Diseño para continuar editando la página de Adobe Muse.

  12. Después de configurar y colocar el widget de composición en el diseño, pruebe el widget en Vista previa.

Si está utilizando un widget de composición en un diseño adaptable, lea la siguiente sección. Asegúrese de probar y previsualizar el widget en todos los puntos de rotura.

Uso de widgets de composición en un diseño adaptable

De forma predeterminada, los widgets de composición son fluidos o adaptables. Para añadir y utilizar widgets de composición en un diseño adaptable, realice uno de los pasos siguientes:

  • Si está creando un nuevo sitio adaptable utilizando la última versión de Adobe Muse, dese el panel Biblioteca de widgets, arrastre y coloque el widget de composición en la vista Diseño.
  • Si ha estado utilizando Adobe Muse 2017.0.3 o versiones anteriores, el widget de composición no será adaptable. En este caso, abra el archivo .muse con la última versión de Adobe Muse. Seleccione los elementos dentro del widget y elija la opción Cambiar tamaño como Anchura adaptable o Anchura y altura adaptables (la que sea aplicable).
Conversión de widgets de composición que no son adaptables en adaptables
Conversión de widgets de composición que no son adaptables en adaptables

Nota:

No puede seleccionar el widget completo y cambiar las propiedades de Cambiar tamaño. Seleccione los elementos o el elemento individual del widget para que sean adaptables.

Configure el widget siguiendo los pasos que se indican en Adición y configuración de widgets de composición. Después de configurar y aplicar estilo al widget, puede previsualizar el widget en un navegador o utilizar la barra de desplazamiento para cambiar el tamaño. Verá que los widgets cambiarán de tamaño automáticamente según el tamaño de la pantalla.

Widget de composición adaptable en Adobe Muse
Widget de composición adaptable en Adobe Muse

Nota:

Cuando agrega widgets de composición a un diseño adaptable, se recomienda que disponga primero su diseño en el mayor punto de rotura. Tras finalizar el posicionamiento y la configuración del widget en el punto de rotura más grande, añada puntos de rotura adicionales en cualquier lugar que sea necesario.

Para obtener más información sobre el diseño de su sitio para el diseño adaptable, consulte Disposición de objetos en un diseño adaptable.

Combinación de un widget de composición con otros widgets

Uno de los aspectos más exclusivos de un widget de composición es la compatibilidad con los widgets anidados dentro de un widget de composición. Es decir, puede añadir widgets como formularios, proyecciones de diapositivas o elementos de menú a un widget de composición.

Por ejemplo, puede añadir un widget de proyección de diapositivas dentro del contenedor de destino de un widget de noticias destacadas en un sitio web de recetas. Cuando un visitante hace clic en etiqueta de menú (widget de noticias destacadas), el área de destino que contiene la galería se muestra como una proyección de diapositivas.

También puede añadir un formulario de contacto como destino de manera que cuando un usuario haga clic en la etiqueta Contacto, se le dirija al formulario de contactos inmediatamente.

Hay muchas más combinaciones y posibilidades de diseño que puede conseguir con la anidación. Sin embargo, tenga en cuenta los siguientes aspectos cuando diseñe widgets anidados en un diseño adaptable:

  • Las opciones de fijación no están disponibles en los elementos adaptables anidados en un contenedor no adaptable. 
  • Los objetos no serán adaptables cuando los coloque en un contenedor no adaptable.

Nota:

Cuando anide widgets dentro de widgets de composición, se recomienda que no utilice más de tres niveles de anidación.

La sección siguiente le indica cómo crear un submenú utilizando un widget de composición. Siga leyendo para obtener información de este escenario de muestra, para crear un submenú oculto para la navegación de su sitio.

Creación de submenús con los widgets de composición

Puede configurar los widgets de composición para configurar la navegación del sitio con submenús. Puede crear un elemento de menú que muestre un submenú cuando un visitante pase el cursor por el área activa y oculte dicho submenú cuando se retire el cursor del área que activó la apertura del submenú. También puede configurar el widget de manera que un submenú se oculte si el visitante decide no hacer clic en los vínculos del submenú y retire el cursor del mismo. La capacidad de crear estos tipos de submenús interactivos resulta útil si está creando una barra de navegación para un sitio con diferentes subsecciones. 

Los menús Mostrar destino y Ocultar destino son útiles cuando desea replicar un comportamiento de menú habitual en el sitio web. El visitante puede hacer clic en los vínculos de manera opcional, o bien desplazar el cursor fuera del área de la ventana para ocultarla. No es necesario hacer clic en un botón Cerrar para ocultar un submenú cuando esta opción está activada.

Esta función está disponible al utilizar los siguientes widgets de composición:

  • En blanco
  • Noticias destacadas
  • Sugerencia

El panel de opciones ofrece dos ajustes para mostrar el contenedor de destino:

  • Al hacer clic: muestra el destino cuando un usuario hace clic
  • Al hacer rollover: muestra el destino cuando un usuario pasa el cursor sobre el desencadenante

También puede optar por ocultar el contenedor de destino en un widget de composición. A continuación, se muestran cuatro opciones para ocultar el contenedor de destino:

  • Ninguno
  • Al hacer clic
  • Instalación
  • Instalación de desencadenante y destino

En la siguiente sección, verá cómo se utiliza el comportamiento "Al hacer rollover" para mostrar el contenedor de destino y el comportamiento "Al hacer rollout" del contenedor de desencadenante y del contenedor de destino para ocultar el contenedor de destino.

Siga estos pasos para aprender a activar los ajustes de Ocultar en los widgets de composición para crear una barra de menús que oculte o muestre los vínculos del submenú según la interacción del visitante:

  1. En la vista Diseño, añada un widget de composición de caja de iluminación a la página arrastrándolo desde la biblioteca de widgets.

  2. Seleccione los contenedores de desencadenante. Con la herramienta Selección, mueva los tres contenedores de activación hasta la parte superior, por encima del contenedor de destino de mayor tamaño, y distribúyalos uniformemente.

    Cambio de posición de los contenedores de desencadenante
    Cambie la posición de los contenedores de activación por encima de la imagen principal de mayor tamaño.

  3. Utilice la herramienta Selección para arrastrar los manejadores laterales de cada contenedor de activación. Expanda la anchura para crear un conjunto de tres "fichas" en la parte superior, similar a un widget de paneles en fichas.

    Utilice la herramienta de selección para arrastrar los manejadores
    Arrastre los cuadros delimitadores para aumentar la anchura de los tres botones de activación.

  4. Añada el contenido necesario a cada una de las tres áreas de desencadenante. El contenido de activación puede incluir texto, vínculos, imágenes, rectángulos y HTML incrustado, entre otros. Para este ejemplo, puede utilizar la herramienta Texto para añadir texto a cada desencadenante: Vínculo uno, Vínculo dos y Vínculo tres.

    Ahora, cree un vínculo dentro de la segunda área de contenido de destino.

  5. Haga clic en un contenedor de desencadenante y, a continuación, seleccione el contenedor de destino más grande que se corresponda con el mismo. Añada un vínculo a la segunda área de contenido de destino. A continuación, haga clic en la lista desplegable situada junto a la etiqueta Hipervínculos del lado derecho del panel de control. Añada un vínculo a la dirección web con la que desea enlazar.

  6. Elija Archivo > Vista previa de página en navegador para probar cómo se muestra el widget de composición.
    Interactúe con el widget haciendo clic en los contenedores de activación denominados Vínculo uno, Vínculo dos y Vínculo tres.

    Observe que, de forma predeterminada, el contenedor de destino se muestra siempre y nunca se oculta. Puede hacer clic en cada uno de los tres botones de activación para mostrar el contenedor de destino correspondiente, pero siempre se mostrará uno de los tres contenedores de destino.

  7. Para configurar el ajuste Ocultar al instalar, seleccione el widget de composición. Haga clic en la flecha azul para acceder al panel de opciones y editar las opciones de configuración del widget.

    Compruebe que las siguientes opciones estén habilitadas:

    • Posición: Apilado (predeterminado)
    • Mostrar destino: Al hacer rollover
    • Ocultar destino: Rollout de desencadenante y destino
    • Transición: Atenuación (predeterminado)
    • Velocidad de transición: 0,5 segundos (predeterminado)
    • Reproducción automática: Desactivada (predeterminado)
    • Aleatorio: Desactivado (predeterminado)
    • Ocultar todo al inicio: Activado
    Panel de opciones de las composiciones
    Actualice la configuración en el panel Opciones para controlar cómo se comporta el widget.

    Los ajustes que controlan la función de ocultar/mostrar son el menú Mostrar destino, el menú Ocultar destino y la activación de la opción Ocultar todo al inicio.

  8. Elija de nuevo Archivo > Vista previa de página en navegador para probar los cambios recientes en el widget.

    Ahora, cuando el widget de composición se cargue por primera vez, todas las áreas de destino estarán ocultas de forma predeterminada.

    Vuelva a interactuar con el widget. Observe que al pasar el cursor por un área de activación se muestra el área de destino correspondiente. Si el cursor permanece en el área del widget, puede interactuar con el contenido que hay dentro de las áreas de destino (por ejemplo, haciendo clic en el vínculo a un sitio web en el contenedor de destino central).

    No obstante, si retira el cursor de las regiones de desencadenante o de destino, las regiones de destino se ocultan hasta que vuelva a pasar el cursor por otra área de desencadenante.

    Esta función le permite configurar una navegación interactiva por el sitio mucho más compleja que responda a los movimientos del ratón de los visitantes.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea