Banners em carrossel carousel-banners

Identificar variáveis de ponto de acesso e mapa de imagem (somente para clientes que usam Experience Manager Assets + Dynamic Media)

Comece identificando variáveis dinâmicas usadas pela implementação existente do Quickview para que você possa inserir hotspots e dados de mapa de imagem corretamente durante o processo de criação do banner do carrossel no Adobe Experience Manager Assets.

Opcional: crie uma predefinição do visualizador Conjunto de carrossel, conforme necessário.

Se você for um administrador, poderá personalizar o comportamento e a aparência do carrossel criando sua própria predefinição do visualizador do Carrossel. O principal benefício é poder reutilizar essa predefinição do visualizador personalizado para vários carrosséis. No entanto, os usuários podem, opcionalmente, personalizar o comportamento e a aparência do carrossel diretamente durante a criação do carrossel. Esse método é a abordagem preferida quando você deseja um design específico para um determinado carrossel.

Carregar um banner de imagem.

Carregue banners de imagem que você deseja tornar interativos.

Criar Conjuntos De Carrossel.

Em Conjuntos de carrosséis, os usuários navegam por imagens de banner e selecionam pontos de acesso ou mapas de imagem para acessar conteúdo relevante.

Para criar um Conjunto de carrossel no Assets, selecione Criar e selecione Conjuntos de carrossel. Adicione ativos a cada slide e selecione Salvar. Além disso, edite a aparência e o comportamento do carrossel diretamente no editor.

Adicionar pontos de acesso ou mapas de imagem a um Banner de Imagem.

Adicione um ou mais pontos de acesso ou mapas de imagem a um banner de imagem e associe cada um a uma ação, como um link, uma Quickview ou um Fragmento de experiência. Depois de adicionar pontos de acesso ou mapas de imagem, conclua essa tarefa publicando o conjunto de carrossel. A publicação cria o código incorporado que pode ser usado para copiar e aplicar à página de aterrissagem do site.

Consulte (Opcional) Banners do carrossel de visualização - Opcional. Se desejar, é possível visualizar uma representação do conjunto de carrossel e testar a interatividade.

Banners do carrossel do Publish.

Publique um Conjunto de carrossel como faria com qualquer ativo. No Assets, navegue até o Conjunto de carrosséis, selecione-o e selecione Publish. A publicação de um Conjunto de carrossel ativa o URL e a sequência de caracteres Incorporada.

Siga uma das seguintes opções:

• Adicionar um banner de carrossel à página do site Você pode adicionar a URL do banner de carrossel ou o código de inserção copiado na página do site.

  • Integre o banner do carrossel a um Quickview existente. Se você usa um sistema de gerenciamento de conteúdo da Web de terceiros, é necessário integrar o novo banner do carrossel com a implementação do Quickview existente em seu site.

• Adicionar um banner de carrossel ao seu site no Experience Manager Se você for um cliente do Experience Manager Sites, poderá adicionar o conjunto de carrossel diretamente à página no Experience Manager, usando o componente de Mídia interativa.

No Assets, navegue até a pasta em que deseja criar o Conjunto de carrosséis e vá para Criar > Conjunto de carrosséis.

Na página do editor de banner do carrossel, selecione Toque para abrir o Seletor de ativos e selecionar a imagem para seu primeiro slide.

Na página do editor de banner do carrossel, siga um destes procedimentos:

• Próximo ao canto superior esquerdo da página, selecione o ícone Adicionar slide.

• Próximo ao meio da página, selecione Toque para abrir o Seletor de ativos.

Selecione para selecionar os ativos que deseja incluir no Conjunto de carrosséis. Os ativos selecionados têm um ícone de marca de seleção sobre eles. Quando terminar, próximo ao canto superior direito da página, selecione Selecionar.

Com o Seletor de ativos, procure por ativos ao digitar uma palavra-chave e tocar ou clicar em Retornar. Aplique filtros para refinar os resultados da pesquisa. Filtre por caminho, coleção, tipo de arquivo e tag. Selecione o filtro e o ícone Filtro na barra de ferramentas. Altere a exibição ao tocar no ícone Exibir e selecionar Exibição em coluna, Exibição de cartão ou Exibição em lista.

Consulte Trabalhar com seletores para obter mais informações.

Continue a adicionar slides até ter adicionado todas as imagens que deseja girar no Conjunto de carrossel.

(Opcional) Siga qualquer um destes procedimentos:

• Se necessário, arraste o slide para reordenar as imagens na lista.

• Para excluir uma imagem, selecione-a e, em seguida, selecione Excluir Slide na barra de ferramentas.

• Para aplicar uma predefinição, próximo ao canto superior direito da página, selecione a lista suspensa predefinição e, em seguida, selecione uma predefinição para aplicar simultaneamente ao conjunto.

Para excluir um slide, selecione-o e, na barra de ferramentas, selecione Excluir Slide. Para mover um slide, selecione o ícone de reordenação, mantenha pressionada a tecla e mova-o para o local desejado.

Depois de adicionar as imagens aos slides, é possível adicionar um ponto de acesso, um mapa de imagem ou ambos à imagem. Consulte Adicionar pontos de acesso ou mapas de imagem a um Banner de imagem.

Você pode alterar o design visual e o comportamento dos conjuntos de carrossel. Selecione as guias Comportamento e Aparência e ajuste como o banner do carrossel aparece ou como componentes específicos se comportam. Consulte Gerenciar predefinições do visualizador para obter mais informações sobre como usar o editor do visualizador.

* Duração da exibição de uma imagem. Por padrão, cada imagem é exibida por 9 segundos.
* Animação. Por padrão, cada transição de slide é um fade. Você pode alterá-la para uma transição de slides.
* Estilo dos botões. Os usuários podem girar pelos banners tocando cada ponto ou número. É possível alterar o local em que os botões indicadores definidos são exibidos (e se são numéricos ou de um estilo pontilhado) e o tamanho deles.
* Altere o estilo de destaque de um mapa de imagem ou do ícone usado para pontos de acesso.
* Antes de editar uma predefinição do visualizador, escolha o estilo no qual deseja basear a predefinição. Se você não escolher um estilo, ao começar a editar a predefinição do visualizador, perderá todas as alterações se decidir alterá-la para uma predefinição diferente.

Você também pode visualizar como o banner do carrossel é exibido. Consulte (Opcional) banners do carrossel de visualização.

Selecione Salvar quando terminar.

No Assets, navegue até o conjunto de carrossel que deseja tornar interativo.

Selecione o conjunto de carrosséis e selecione Editar. O Editor do visualizador do carrossel é aberto.

Selecione o slide que você deseja tornar interativo.

Próximo ao canto superior esquerdo da página, selecione Ponto de acesso ou Mapa de imagem.

Siga um destes procedimentos:

• Para pontos de acesso: na imagem, selecione um local onde deseja que o ponto de acesso apareça.
• Para mapas de imagem: na imagem, selecione e arraste de cima à esquerda para baixo à direita para criar a área do mapa de imagem. Você pode ajustar o tamanho do mapa de imagem arrastando os cantos.

Se necessário, arraste o ponto de acesso ou o mapa de imagem para um novo local. Adicione mais pontos de acesso ou mapas de imagem, conforme necessário.

Para excluir um ponto de acesso ou mapa de imagem, selecione a guia Ações. No cabeçalho Mapas e pontos de acesso, no menu suspenso Tipo selecionado, selecione o nome do ponto de acesso ou mapa de imagem que deseja remover. Selecione o ícone Lixeira ao lado do menu e selecione Excluir.

No campo de texto Nome, digite o nome do ponto de acesso ou do mapa de imagem. Esse nome também aparece na lista suspensa Mapas e pontos de acesso. Fornecer um nome facilita a identificação do ponto de acesso ou mapa de imagem se você decidir alterá-lo no futuro.

Siga um destes procedimentos na guia Ações:

• Selecione Quickview.

  • Se você for um cliente do Experience Manager Sites e do Ecommerce, selecione o ícone Seletor de produto (lupa) para abrir a página Selecionar produto. Selecione o produto que deseja usar e marque a marca de seleção no canto superior direito da página para que você possa retornar ao editor de banner do carrossel.

  • Se você não for um cliente do Experience Manager Sites ou do Ecommerce

    • Consulte Identificar variáveis de ponto de acesso se desejar definir essas variáveis.

    • Em seguida, insira manualmente o valor do SKU. No campo de texto Valor do SKU, digite o SKU (Unidade de manutenção de estoque) do produto, que é um identificador exclusivo para cada produto ou serviço distinto que você oferece. O valor de SKU inserido preenche automaticamente a parte variável do modelo Quickview para que o sistema saiba como associar o ponto de acesso tocado a uma Quickview de SKU específica.

    • (Opcional) Se houver outras variáveis no Quickview que você deve usar para identificar melhor um produto, selecione Adicionar variável genérica. No campo de texto, especifique uma variável extra. Por exemplo, category=Mens é uma variável adicionada.

    • Consulte Trabalhar com seletores para obter mais informações.

• Selecione Hiperlink.

  • Se você for um cliente do Experience Manager Sites, selecione o ícone Seletor de sites (pasta) para navegar até um URL.

    note note
    NOTE
    O método de vinculação baseado em URL não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do Experience Manager Sites.

  • Se você for um cliente independente, no campo de texto HREF, especifique o caminho completo do URL para uma página da Web vinculada.

Certifique-se de especificar se o link deve ser aberto em uma nova guia do navegador (padrão recomendado) ou na mesma guia.

Consulte Trabalhando com seletores para obter mais informações.

• Selecione Fragmento de experiência.

  • Se você for um cliente do Experience Manager Sites, selecione o ícone Pesquisar (lupa) para abrir a página Fragmento de experiência. Selecione o Fragmento de experiência que deseja usar e selecione Selecionar no canto superior direito da página para poder retornar à página de gerenciamento de pontos de acesso.
    Consulte Fragmentos de experiência.

  • Especifique a largura e a altura do Fragmento de experiência conforme ele aparece no banner.

    note note
    NOTE
    As ferramentas de compartilhamento de redes sociais no banner do carrossel não são compatíveis quando você incorpora o visualizador em um Fragmento de experiência.
    Para contornar esse problema, crie predefinições do visualizador que não tenham ferramentas de compartilhamento de redes sociais. Essas predefinições do visualizador permitem incorporá-lo com sucesso aos Fragmentos de experiência.

Você também pode visualizar como o banner do carrossel é exibido. Consulte (Opcional) Visualização de banners do carrossel.

Selecione Salvar.

Publish o conjunto do carrossel. A publicação cria o código incorporado ou o URL que você pode usar na página do site. Se você for um cliente do Experience Manager Sites, poderá adicionar o conjunto de carrossel diretamente à sua página da Web.

Consulte Publicar ativos.

Consulte Adicionando um conjunto de carrossel à página de aterrissagem de seu site

Siga um destes procedimentos:

• Passe o mouse sobre um ativo Conjunto de carrossel e selecione Editar (ícone de lápis).

• Passe o mouse sobre um ativo Conjunto de carrosséis, selecione Selecionar (ícone de marca de seleção) e Editar na barra de ferramentas.

• Selecione um ativo Conjunto de carrosséis e, no canto superior esquerdo da página, selecione Editar (ícone de lápis).

Para editar o Conjunto de carrosséis, siga um destes procedimentos:

• Para adicionar um slide, selecione o ícone Adicionar slide, navegue até o ativo que deseja adicionar ao slide e marque a marca de seleção.
• Para reordenar slides, arraste um slide para um novo local (selecione o ícone reordenar para mover itens).
• Para adicionar um ponto de acesso ou mapa de imagem, selecione os ícones de ponto de acesso ou mapa de imagem e consulte adicionando pontos de acesso e mapas de imagem.
• Para editar a aparência ou o comportamento do conjunto de carrossel, selecione a guia Aparência ou a guia Comportamento e defina as opções desejadas.
• Para editar hotspots ou mapas de imagem, no slide apropriado, selecione um hotspot ou mapa de imagem e altere conforme necessário na guia Ações.
• Para excluir um slide, selecione-o e, em seguida, selecione Excluir Slide na barra de ferramentas.
• Para aplicar uma predefinição, próximo ao canto superior direito da página, selecione a lista suspensa Predefinição e selecione uma predefinição do visualizador.
• Para excluir um Conjunto de carrossel inteiro, navegue até o Conjunto de carrossel, selecione-o e Excluir.

No Assets, navegue até um banner de carrossel existente que você criou e selecione para abri-lo.

Selecione Editar.

Na lista de predefinições do visualizador, no canto direito da barra de ferramentas, selecione um visualizador para visualizar o banner do carrossel.

Selecione Visualizar.

Selecione os pontos de acesso ou mapas de imagem na imagem para testar as ações associadas a eles.

Copie o código incorporado do conjunto de carrossel publicado.
Consulte Incorporar o vídeo ou o Visualizador de Imagens em uma página da Web.

Adicione o código incorporado que você copiou do Experience Manager Assets para sua página da Web.
O código incorporado copiado é responsivo, portanto, deve se ajustar automaticamente à área de incorporação da página.