Usar widgets no Adobe Muse

Você pode adicionar recursos interativos do site e conteúdo gerado dinamicamente usando widgets no Adobe Muse. Os widgets são objetos configuráveis pré-construídos que oferecem recursos comuns da Web como menus, formulários, apresentações de slides, etc. O Adobe Muse fornece uma variedade de widgets para simplificar designs da Web complexos. 

Os widgets no Adobe Muse podem ser estilos de acordo com o design do site, permitindo combiná-los perfeitamente com o restante das páginas da Web. A Biblioteca de widgets contém todos os recursos predefinidos do site, que você pode arrastar para páginas, configurar para controlar o comportamento e definir o estilo para modificar a aparência.

O Adobe Muse oferece os seguintes tipos de widget:

• Widgets de composição: esses widgets permitem a você interagir com uma área na página da Web para alterar o conteúdo mostrado em outra área. Ocorre um esmaecimento ou animação deslizante na alteração. 
• Widgets de formulário: adicione um formulário que os visitantes do seu site podem usar para contatá-lo. Campos diferentes do formulário estão disponíveis, dependendo do widget de formulário você selecionar.
  
• Widgets de menu: crie uma barra de menus preenchida dinâmica ou manualmente que inclua os estados de cada item de menu. Em cada página, o link apropriado no menu terá automaticamente um estado "ativo" para mostrar que é a página atual.
• Widgets de painel: mostre apenas um painel de conteúdo de cada vez, com links de navegação intuitiva para alternar para o painel visível. Escolha entre uma estrutura de acordeão animada em slides ou uma aparência com guias familiares.
• Widgets de apresentação de slides: esses widgets permitem a você exibir facilmente as suas imagens em uma galeria com animações elegantes. Eles são ideais para apresentações de slides simples baseadas em imagem. Os casos de uso mais complexos são melhor atendidos por um widget de composição.
• Widgets sociais: os widgets sociais fornecem um método fácil para configurar HTML personalizado e incorporá-lo em suas páginas do Adobe Muse. A maioria dos widgets da Web fornecem funcionalidades que também estão disponíveis incorporando HTML de sites de terceiros. Você economiza tempo ao adicionar e configurar o conteúdo da web dentro do Adobe Muse, em vez de gerar o código fora do aplicativo e colá-lo no Adobe Muse como um HTML incorporado.

Adicionar um widget a uma página da Web do Adobe Muse

É possível selecionar e adicionar widgets à página do Adobe Muse na Web a partir da Biblioteca de widgets. Para adicionar um widget, faça o seguinte:

Configurar e personalizar widgets

O Adobe Muse permite que você configure widgets no painel Opções depois de inseri-los nas páginas da Web. O painel Opções é um painel de contexto que permite aplicar alterações e atualizar configurações específicas do widget. O painel Opções contém configurações que ajudam a determinar a aparência do conteúdo.

As opções de traçado e preenchimento permitem melhorar significativamente a aparência de um widget. Se o widget contiver texto, você poderá usar o painel Texto (Windows > Texto ou opções de texto no painel de controle) para modificar e definir o estilo do texto de acordo com suas necessidades de design.

Para configurar um widget, faça o seguinte:

Selecionar elementos aninhados em um widget

Ao arrastar um widget da Biblioteca de widgets para uma página, você está basicamente inserindo um grupo aninhado de contêineres. Esses contêineres podem ser selecionados e editados com base na hierarquia.

Ao trabalhar com widgets, é importante saber como selecionar o widget e seus contêineres. O Adobe Muse exibe a seleção atual usando o Indicador de seleção. O Indicador de seleção, localizado no canto superior esquerdo do Adobe Muse, exibe a seleção atual juntamente com um menu suspenso que permite visualizar um objeto de acordo com seu estado.

No exemplo abaixo, o Indicador de seleção exibe a seleção da Página (quando nenhuma página da Web está selecionada), um widget de Menu (na seleção de um widget de Menu), e um Item de menu (contêiner em um widget de Menu).

Quando você clica uma vez no widget inteiro, o indicador de seleção exibe a palavra "Widget". Se você clicar novamente, poderá selecionar um contêiner no widget, e o indicador de seleção exibirá a palavra "Contêiner". Você pode continuar clicando repetidamente para selecionar os elementos (como quadros de texto) que serão aninhados dentro dos contêineres.

Quando um quadro de texto for selecionado, o indicador de seleção exibe palavras "Quadro de texto". Ao clicar em um widget "pesquisar detalhadamente" dentro dos elementos aninhados, é recomendável observar as palavras do indicador de seleção para saber qual elemento aninhado foi selecionado. Você selecionará contêineres diferentes (como botões individuais de uma navegação de menu) para atualizar os estados dos botões, o que permite controlar opcionalmente como os botões aparecem quando a página é carregada pela primeira vez, quando o visitante passa o mouse sobre um botão e quando o visitante clica neles. Também permite definir um estado "ativo" que oriente o visitante, indicando visualmente o botão que corresponde à página que o visitante está vendo no momento.

Para clicar nos contêineres aninhados em um widget, você pode clicar várias vezes no item que deseja editar. Anote o indicador de seleção e as opções apresentadas no painel Estados para ver quando você selecionou o elemento aninhado que deseja alterar.

Depois de terminar de atualizar um widget, você pode clicar (em algum outro lugar da página) para cancelar a seleção do widget ou pressionar repetidamente a tecla Escape para saltar um nível na hierarquia do widget.

Configurar widgets usando o painel Opções

Depois de arrastar um widget da Biblioteca de widgets para uma página, você verá um ícone de seta azul no canto superior direito do widget, quando ele for selecionado. Clique nesse ícone de seta azul para abrir o menu Opções.

Cada widget tem diferentes opções disponíveis, portanto, as opções que podem ser definidas na interface do menu Opções são variáveis. As configurações controlam o comportamento do widget (como escolher se uma apresentação de slides será reproduzida automaticamente ou se os visitantes devem clicar nas miniaturas para ver cada imagem maior) e a exibição do widget (como especificar o tipo de transição que será animada à medida que cada imagem nova for exibida).

Ao projetar sites, você terá uma oportunidade de fazer essas configurações e trabalhar com os clientes para encontrar as melhores opções para um projeto específico. Lembre-se de que, a qualquer momento, mesmo depois que um site seja publicado on-line, você poderá retornar ao arquivo .muse, selecionar um widget, clicar no respectivo ícone de seta azul para acessar o menu Opções e fazer novas configurações para alterar o widget. Posteriormente, depois que você publicar o site novamente, as alterações feitas serão refletidas no site ao vivo.

Com os widgets de Menu, você pode fazer com que os widgets exibam dinamicamente os nomes das páginas do site e criem automaticamente os links para essas páginas. Isso facilita muito a adição da navegação do site a páginas com base no mapa do site no modo de exibição Plano, e você nunca precisa se preocupar com criação de links quebrados. Você também pode desativar páginas específicas para que não apareçam dinamicamente nos widgets de Menu clicando com o botão direito na miniatura da página no modo de exibição Plano e desmarcando a opção Incluir página na navegação. Essa opção é ativada por padrão (e exibe uma marca de seleção quando está ativada).

Como alternativa, você também pode optar por configurar os widgets de Menu manualmente, se preferir nomear os botões sozinho e adicionar links para páginas específicas, em vez de deixar que o Adobe Muse crie os itens de menu. No menu Opções, na seção chamada Tipo de menu, escolha a opção Manual.