Saiba mais como adicionar widgets de composição no Adobe Muse. Configure widgets de composição para criar sites interativos.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Os widgets de composição em Adobe Muse permitem adicionar interatividade complexa a seus sites. É um site de fotografia ou sites de restaurante, widgets de composição pode ser praticamente indispensável para qualquer site, para exibir uma grande variedade de conteúdo. Você pode usar esses widgets para criar experiências únicas de navegação e de navegação sem escrever uma única linha de código.

Adobe Muse oferece vários tipos de widgets de composição que permitem adicionar e criar diferentes tipos de conteúdo para o site. Por exemplo, quando um usuário está criando um site de fotografia, você pode escolher um widget de exibição de negatoscópio que contêm uma galeria de fotos para seu site. Este widget escurece temporariamente o restante da página, assim atraindo o foco do visitante para a área de exibição ativa.

Também é possível criar designs da web interessantes aninhando widgets em um widget de composição. Por exemplo, se você estiver criando um catálogo, você pode usar um widget vazio de composição para criar um menu de Hamburger e aninha um widget de Apresentação de slides na área de destino do widget vazio de composição. , Designs fornecem uma experiência do usuário exclusivo para os visitantes do site.

Leia para saber mais sobre os tipos de widgets de composição estão disponíveis no Adobe Muse.

Tipos de widgets de composição

Um widget de composição é composto por dois contêineres: acionamento e destino. A área de acionamento é onde os cliques de um visitante do site, e a área de destino é a área correspondente, que é exibida. Você pode vincular as áreas do disparador e destino para aumentar a complexidade e interatividade ao seu site.

O Adobe Muse oferece os seguintes tipos de Widgets de composição. Com base em seus requisitos de design, você pode usar um desses widgets ou uma combinação desses widgets com o aninhamento.

Em branco

Widget vazio de composição em Adobe Muse
Widget vazio de composição em Adobe Muse

Um widget com pequenas miniaturas. Por padrão, o widget não tem nenhum usuários. Você pode vinculá-lo manualmente a um contêiner de destino.

Novidades em destaque

Widget em destaque da composição de notícias em Adobe Muse
Widget em destaque da composição de notícias em Adobe Muse

Um widget que se comporta de forma semelhante a um widget sanfonado. Você pode adicionar texto e imagens na área do contêiner para este widget.

Exibição de negatoscópio

Widget de composição de exibição de negatoscópio em Adobe Muse
Widget de composição de exibição de negatoscópio em Adobe Muse

Um widget cujo conteúdo na área de destino torna-se ativo quando você clica no acionamento. O restante da página fica esmaecido quando o destino é exibido.

Apresentação

Widget de composição da apresentação em Adobe Muse
Widget de composição da apresentação em Adobe Muse

Esse widget contém miniaturas pequenas que são conectadas à área de apresentação de destino. Por padrão, as telas deslizam horizontalmente neste widget.

Dica de ferramenta

Widget de composição de dica em Adobe Muse
Widget de composição de dica em Adobe Muse

Esse widget contém texto de dica de ferramentas. Quando um usuário passar o mouse sobre a área de acionamento, a dica de ferramenta é exibida imediatamente.

Adicionar e configurar widgets de composição

Para adicionar e usar um Widget de composição no Adobe Muse, selecione o Widget de composição que você deseja adicionar e arraste o widget na exibição Design. Como esses recursos são responsivos por padrão, é possível observar que o widget flui entre diferentes pontos de quebra. Se você deseja alterar a posição ou o conteúdo de um widget de composição, é possível modificar, redimensionar e fixar os elementos do widget individual para um determinado ponto de quebra.

Siga este procedimento para adicionar um widget de composição em seu layout.

  1. Abra o Adobe Muse. Na tela de boas-vindas, clique em criar novo para criar um site recente ou abre um site existente do Adobe Muse onde deseja adicionar um widget de composição.

  2. No modo de exibição plano, clique duas vezes e abra a página onde deseja adicionar o widget.

  3. Abra a biblioteca de Widgets (janela > biblioteca de Widgets) e clique em composições para expandir a opção. Escolha um dos widgets de composição, com base no seu requisito de design.

    Por exemplo, escolha uma Exibição de negatoscópio da Biblioteca de widgets.

    Observação:

    Para remover o conteúdo padrão preenchido em um widget, clique com o botão direito no widget e selecione Limpar conteúdo de widgets.

    Arraste um widget de composição da Biblioteca de widgets para o Adobe Muse.
    Arraste um widget de composição da Biblioteca de widgets.

    A versão padrão do Widget de exibição de negatoscópio tem três caixas acionadoras cinza menores acima do contêiner de destino cinza claro maior.

    Quando os visitantes clicarem no contêiner de acionamento, o contêiner de destino do widget de exibição de negatoscópio será exibido. Você pode incluir imagens, texto, vídeos, inclusive vídeos do YouTube, incorporados como o destino.

  4. Selecione o contêiner ou o acionamento no widget de composição. Para selecionar todo o widget, selecione o widget. O indicador de seleção no canto superior esquerdo do aplicativo exibe a palavra Composição.

    Para selecionar o acionamento, clique duas vezes e selecione as caixas menores nesse widget. A palavra Acionamento é exibida no indicador de seleção. As caixas menores são os acionamentos para este widget. Elas são os botões que respondem à interação do usuário.

    Exibir o indicador de seleção no canto superior esquerdo da página do Adobe Muse
    Exibir o indicador de seleção no canto superior esquerdo da página

    Você pode observar que nenhum outro elemento está selecionado quando o indicador de seleção no canto superior esquerdo exibe a palavra Página.

  5. Escolha Arquivo > Posicionar para abrir a caixa de diálogo Importar. Procure e selecione os arquivos que você deseja colocar neste widget. Clique em Abrir para fechar o arquivo e a caixa de diálogo Importar.

    Clique uma vez em qualquer lugar da página para posicionar a imagem principal em seu tamanho máximo.

  6. Com a imagem ainda selecionada, clique com o botão direito e escolha recortar menu contextual.

    Você também pode usar o atalho de teclado para recortar a imagem, o que a remove da página e a copia para a área de transferência.

  7. Clique com o botão direito dentro do botão de acionamento e selecione Colar. Você também pode usar o atalho do teclado para colar a imagem no acionamento. Observe que o contêiner de acionamento é expandido automaticamente para o tamanho das dimensões da imagem principal.

    Colar o conteúdo em um contêiner pode ser complicado. Às vezes, quando você acredite que o conteúdo é colado dentro, o conteúdo pode realmente ser colado na página.

    Se for necessário verificar se a imagem principal está dentro do contêiner de disparo, pressione Escape uma vez e verifique o Indicador de seleção. Se ele exibir a palavra Acionador, você saberá que a imagem está dentro do acionador. Se o indicador de seleção exibir a palavra Página, é necessário recortar e colar novamente a imagem dentro do contêiner de acionamento.

    Você também pode abrir o painel Camadas (janela > camadas) para verificar quando a imagem é colada. O painel camadas mostra a hierarquia de elementos em uma página.

  8. Para adicionar mais miniaturas, clique no sinal de adição (+) ao lado dos contêineres de acionamento.

    Clique em + para adicionar miniaturas em uma exibição de negatoscópio
    Clique em + para adicionar miniaturas
  9. Após inserir o widget na visualização de Design, você pode prosseguir e configurar o widget. Para configurar as opções para o seu widget de composição, selecione-o e clique na seta azul no canto superior direito do widget.

    Configurar os widgets de composição utilizando o menu Opções
    Configurar Widgets de composição utilizando o painel Opções

    Você pode definir as seguintes configurações no painel Opções:

    • Posição: especifica onde a área de destino é posicionada na página. Selecione empilhado se você quiser que seus destinos se sobrepor e selecionar disperso se você quiser que seus destinos ser colocado em posições diferentes. Negatoscópio selecione se deseja escurecer o restante da página.
    • Exibir destino: especifica a configuração de comportamento de destino quando um usuário clica no acionamento. 
    • Ocultar destino: especifica as configurações para ocultar um destino. A menos que um usuário clique no acionamento, a área de destino permanece oculta. 
    • Transição: especifica como o conteúdo na área de destino muda quando um usuário clica ou rola pelo acionamento. Escolha Esmaecido para esmaecer o novo destino, Horizontal para fazer os destinos deslizarem na horizontal e Vertical para fazer os destinos deslizarem na vertical. 
    • Velocidade de transição: Especifica a velocidade de transição para o widget de composição. Se você deseja que a transição seja imediata, selecione Nenhuma.
    • Reprodução automática: configure essa opção para criar uma apresentação de slides no seu site. Se você selecionar esta opção, os slides reproduzem automaticamente, sem nenhuma interação do usuário.
    • Ordem aleatória: selecione esta opção se você deseja exibir os destinos em ordem aleatória.
    • Disparadores acima: Selecione esta opção para colocar o acionador acima do contêiner de destino. Você pode visualizar a mesma hierarquia exibida no painel Camadas.
    • Ativar gesto de passar o dedo: selecione esta opção para ativar o gesto de passar o dedo para mover para o próximo destino em dispositivos habilitados com toque.
    • Ocultar tudo inicialmente: selecione esta opção se você deseja ocultar todas as opções de destino quando o site for carregado inicialmente. Para visualizar o destino, os usuários precisam clicar no acionamento correspondente.
    • Negatoscópio automático: selecione esta opção se você deseja que o negatoscópio seja exibido automaticamente quando o site for carregado.
    • Peças: selecione as opções de botão Ant. (Anterior), Próximo ou Fechar para adicionar mais interatividade ao seu widget. Os usuários podem clicar nas opções anterior, próximo e fechamento em seu site.
    • Editar: selecione Mostrar partes do negatoscópio ao editar para exibir a área de destino na exibição Design, quando você estiver editando o widget. Selecione Mostrar Tudo no modo Design para visualizar todos os contêineres de destino ao mesmo tempo na exibição Design.
    Defina as configurações para os widgets de composição no Adobe Muse
    Defina as configurações para os widgets de composição

    Observação:

    As partes do negatoscópio mostrar ao editar a opção são desativadas quando você escolheu espalhado ou empilhados como a opção da lista suspensa posição.

    Ocultar tudo inicialmente opção é desabilitada se você selecionar a opção de negatoscópio.

  10. Para remover acionamentos que você não precisa, clique duas vezes no acionamento selecionado que você deseja excluir. Pressione Delete (Mac) ou Backspace (Windows) para remover o acionador selecionado.

  11. Clique na imagem principal no contêiner de disparo para chamar o efeito de negatoscópio.

    Clique em uma imagem à esquerda (disparador) para ver a exibição de negatoscópio
    Clique em uma imagem à esquerda (o acionador) para ver a exibição de negatoscópio (como mostrado no à direita)

    Pressione a tecla Escape para fechar a janela de negatoscópio e voltar para a exibição Design para continuar editando a página do Adobe Muse.

  12. Após configurar e colocar o widget de composição em seu design, teste o widget na exibição de Pré-visualização.

Se você estiver usando um widget de composição em um layout responsivo, leia a seção a seguir. Certifique-se de testar e visualizar o widget em todos os seus pontos de interrupção.

Uso de widgets de composição em um layout responsivo

Os widgets de composição são fluidos ou responsivos, por padrão. Para adicionar e usar widgets de composição em um layout responsivo, execute uma das seguintes etapas:

  • Se você estiver criando um site responsivo nova usando a versão mais recente do Adobe Muse, do painel Biblioteca de Widgets, arraste e solte o widget de composição na visualização de Design.
  • Se você tiver usado Adobe Muse 2017.0.3 ou versões anteriores, o widget de composição não for responsivo. Nesse caso, abra o arquivo.muse usando a versão mais recente do Adobe Muse. Selecione os elementos no widget, e escolha a opção Redimensionar como largura responsiva ou largura e altura responsiva (qualquer aplicável).
Convertendo widgets de composição não-responsivos responsivo
Convertendo widgets de composição não-responsivos responsivo

Observação:

Não é possível selecionar o widget inteiro e a modificação Redimensionar propriedades. Elemento ou selecione elementos individuais dentro do widget para torná-lo interativo.

Configurar o widget seguindo as etapas mencionadas em adicionar e configurar widgets de composição. Depois de configurar e estilizar o widget, você pode visualizar o widget em um navegador ou usando o depurador e redimensionar. Você encontrará os widgets são redimensionados automaticamente de acordo com o tamanho da tela.

Widget interativo de composição em Adobe Muse
Widget interativo de composição em Adobe Muse

Observação:

Quando você adicionar widgets de composição em um layout responsivo, é recomendável que você apresenta o design no ponto de interrupção maior primeiro. Após finalizar a posição e a configuração do widget no ponto de interrupção maior, adicione os pontos de interrupção adicionais necessários.

Para saber mais sobre o projeto do seu site para o layout responsivo, consulte organizar objetos no design responsivo.

Combinação de um widget de composição com outros widgets

Um aspecto mais original de um widget de composição é o suporte para widgets aninhados dentro de um widget de composição. Isto é, você pode adicionar widgets como formulários, apresentações de slides ou itens de menu em um widget de composição.

Por exemplo, você pode adicionar um widget apresentação de slides dentro do contêiner de destino do widget em destaque de notícias em um site de cozinha. Quando um visitante do site clicar no rótulo do menu (destacado o widget de notícias), a área de destino que contém a galeria é exibida como uma apresentação de slides.

Você também pode adicionar um formulário de contato como um destino de tal forma que um usuário que clica no rótulo de contato é levado para o formulário de contato imediatamente.

Há muito mais combinações e possibilidades de design que você pode conseguir com aninhamento. No entanto, observe os seguintes aspectos quando você criar widgets aninhados em um layout responsivo:

  • Corrigir não está disponível para os elementos responsivos que estão aninhados dentro de um contêiner não-responsivo. 
  • Os objetos não serão responsivos quando você coloca dentro de um contêiner não-responsivo.

Observação:

Ao aninhar widgets nos widgets de composição, recomenda-se não usar mais de três níveis de aninhamento.

A seção a seguir explica como criar um submenu usando um widget de composição. Leia para saber este cenário de amostra criar um submenu oculto para a navegação do site.

Criar submenus usando widgets de composição

Você pode configurar widgets de composição para elaborar a navegação do site com submenus. Você pode para criar um item de menu que exibe um submenu quando um visitante posiciona o cursor sobre a área ativa e oculta o mesmo submenu quando o visitante posiciona o cursor fora da área ativa que disparou a abertura do submenu. Você pode também pode configurar widget, como um submenu que é ocultado quando o usuário opta por não clicar nos links no submenu e simplesmente rola o cursor para fora do submenu. A capacidade de criar esses tipos de submenus interativos é útil quando você está criando uma barra de navegação de um site com várias subseções diferentes. 

Os menus Exibir destino e Ocultar destino são úteis quando você deseja replicar um comportamento comum de menu para o seu site. O visitante pode clicar nos links ou pode rolar o cursor para fora da área da janela para ocultar a janela. Não é necessário clicar no botão Fechar para ocultar um submenu quando esta opção está ativada.

Este recurso está disponível para trabalhar com os seguintes widgets de Composição:

  • Em branco
  • Novidades em destaque
  • Dica de ferramenta

O painel Opções oferece duas configurações para exibir o contêiner de destino:

  • Ao clicar: Exibe o destino quando um usuário clica
  • Na rolagem: Exibe o destino quando um usuário passa sobre o acionador

Você também pode ocultar o contêiner de destino em um widget de composição. Os seguintes são as quatro opções para ocultar o contêiner de destino:

  • Nenhum
  • Ao clicar
  • Na distribuição
  • Na distribuição do acionador e do destino

Na seção seguinte, você verá como usar o comportamento Ao sobrepor para mostrar o contêiner de destino e de rolagem do contêiner de acionamento e do contêiner de destino para ocultar o contêiner de destino.

Execute as etapas a seguir para saber como ativar as configurações Ocultar ao distribuir para os widgets de Composição, a fim de criar uma barra de menus que oculte e mostre links de submenu com base na interação do visitante:

  1. No modo de exibição Design, adicione um widget de Composição de negatoscópio à página arrastando-o da Biblioteca de widgets.

  2. Selecione os contêineres de acionamento. Usando a ferramenta Seleção, mova os três contêineres do Acionador para cima, acima do contêiner de destino maior, e coloque um espaço igual entre eles.

    Reposicione os contêineres de acionamento
    Reposicione os contêineres do Acionador acima da imagem principal maior.

  3. Use a ferramenta Seleção para arrastar as alças laterais de cada contêiner do Acionador. Expanda a largura para criar um conjunto de três "guias" na parte superior, parecido com o widget de Painéis com guias.

    Use a ferramenta de Seleção para arrastar as alças
    Arraste as caixas delimitadoras para estender a largura dos três botões de acionamento.

  4. Adicione o conteúdo exigido a cada uma das três áreas de acionamento. O conteúdo de disparo pode incluir texto, links, imagens, retângulos, HTML incorporado etc. Por exemplo, você pode usar a ferramenta Texto para adicionar texto a cada acionador: Link um, Link dois e Link três.

    Agora, crie um link dentro da segunda área de conteúdo de destino.

  5. Clique em um contêiner de acionamento e selecione o contêiner de destino maior que corresponde a ele. Adicione um link à segunda área de conteúdo de destino. Em seguida, clique na lista suspensa ao lado do rótulo Hiperlinks à direita do painel de controle. Adicione um link ao endereço da Web ao qual você deseja vincular.

  6. Escolha Arquivo > Visualizar página no navegador para testar a exibição do widget de Composição.
    Interaja com o widget clicando nos contêineres de acionamento com rótulo Link um, Link dois e Link três.

    Observe que, por padrão, o contêiner de destino é sempre exibido, nunca é ocultado. Você pode clicar entre três botões de disparo para exibir o contêiner de destino correspondente, mas um dos três contêineres de destino é exibida sempre.

  7. Para definir a configuração Ocultar na rolagem, selecione o widget de composição. Clique na seta azul para acessar o painel Opções e edite as opções de configuração do widget.

    Garanta que as seguintes configurações estejam ativadas:

    • Posição: Empilhado (padrão)
    • Mostrar destino: Ao sobrepor
    • Ocultar destino: Na distribuição do acionador e do destino
    • Transição: Esmaecido (padrão)
    • Velocidade de transição: 0,5 segundo (padrão)
    • Reprodução automática: Desativada (padrão)
    • Ordem aleatória: desativada (padrão)
    • Ocultar tudo inicialmente: Ativado
    Painel de opções das composições
    Atualize as configurações no menu Opções para controlar o comportamento do widget.

    As principais configurações que controlam a funcionalidade de ocultar/mostrar são o menu Mostrar destino, o menu Ocultar destino e a ativação da opção: Ocultar tudo inicialmente.

  8. Escolha Arquivo > Visualizar página no Navegador novamente para testar as alterações recentes do widget.

    Agora, quando o Widget de composição for carregado pela primeira vez, todas as áreas de destino estarão ocultas, por padrão.

    Interaja com o widget novamente. Observe que ao rolar sobre uma área de acionamento, a área de destino correspondente é exibida. Se o cursor permanecer na área do widget, você poderá interagir com o conteúdo das áreas de destino (por exemplo, clicando no link do site no contêiner de destino do meio).

    Contudo, se você posicionar o cursor fora das regiões de acionamento ou de destino, as regiões de destino ficarão ocultas até você rolar para uma outra área de acionamento novamente.

    Esse recurso permite configurar de maneira mais complexa a navegação interativa do site, a fim de responder aos movimentos de mouse dos visitantes.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online