Banners em carrossel

Última atualização em 2024-02-23
  • Criado para:
  • User

Os banners do carrossel permitem que os profissionais de marketing impulsionem a conversão criando facilmente conteúdo promocional rotativo interativo e entregando-o em qualquer tela.

Criar e modificar conteúdo em destaque em banners promocionais pode ser demorado, limitando sua capacidade de publicar rapidamente novo conteúdo ou torná-lo mais direcionado. Os banners do carrossel permitem criar ou modificar rapidamente banners giratórios e adicionar interatividade, como links de pontos de acesso para detalhes de produtos ou recursos relacionados. Você pode entregá-los em qualquer tela, permitindo que você traga novos conteúdos promocionais para o mercado mais rapidamente.

Os banners do Carousel são designados por um banner com a palavra CAROUSELSET:

chlimage_1-438

Em seu site, um banner de carrossel pode ter a seguinte aparência:

chlimage_1-439

Aqui você pode navegar pelas imagens selecionando os números. Além disso, os slides giram automaticamente com base em um intervalo de tempo que pode ser personalizado. As imagens em um banner de carrossel são compatíveis com pontos de acesso e mapas de imagem. Os usuários podem selecionar ou acessar um hiperlink ou uma janela de visualização rápida.

Neste exemplo, um usuário selecionou um mapa de imagem e acessou a janela do Quickview para luvas:

chlimage_1-440

Veja uma apresentação sobre como os banners do carrossel são criados (Duração: 10 minutos e 33 segundos). Você também aprende a visualizar, editar e entregar banners do carrossel.

OBSERVAÇÃO

Os usuários não administrativos devem ser adicionados ao dam-users para criar ou editar banners do carrossel. Se tiver problemas para criar ou editar o, consulte o administrador do sistema que pode adicioná-lo ao dam-users grupo.

Para começar a usar o com rapidez:

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

    Comece identificando variáveis dinâmicas usadas pela implementação de Visualização rápida existente. Isso o ajuda a inserir os pontos de acesso e os dados de mapa de imagem corretamente durante o processo de criação do banner do carrossel no Experience Manager Assets.

  2. 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. Essa abordagem é preferível quando você deseja um design específico para um determinado carrossel.

  3. Carregar um banner de imagem.

    Carregue banners de imagem que você deseja tornar interativos.

  4. Criar um conjunto do Carousel.

    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. Adicionar ativos a slides e selecionar Salvar. Além disso, edite a aparência e o comportamento do carrossel diretamente no editor.

  5. 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. Em seguida, associe cada um deles a uma ação, como um link, uma Visualização rápida 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) Visualizar banners do carrossel - Opcional. Se desejar, é possível visualizar uma representação do conjunto de carrossel e testar a interatividade.

  6. Publicar banners do Carousel.

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

  7. Siga uma das seguintes opções:

Se precisar editar Conjuntos de carrossel, consulte Editar conjuntos de carrossel. Além disso, é possível exibir e editar Propriedades do conjunto de carrossel.

Identificação das variáveis de ponto de acesso e mapa de imagem

Comece identificando variáveis dinâmicas usadas pela implementação de Visualização rápida existente. Esse método ajuda você a inserir pontos de acesso ou dados de mapa de imagem corretamente durante o processo de criação do conjunto de carrossel no Experience Manager Assets.

Ao adicionar pontos de acesso ou mapas de imagem a uma imagem de banner, você atribui uma SKU (Stock Keeping Unit, Unidade de manutenção de estoque). Você também pode atribuir variáveis extras opcionais a cada ponto de acesso ou mapa de imagem. Essas variáveis são usadas posteriormente para corresponder pontos de acesso ou mapas de imagem ao conteúdo de Visualização rápida.

É importante identificar corretamente o número e o tipo de variáveis a serem associadas aos dados de ponto de acesso ou mapa de imagem. Cada ponto de acesso ou mapa de imagem adicionado a uma imagem de banner deve conter informações suficientes para identificar sem ambiguidade o produto no sistema de back-end existente. Ao mesmo tempo, verifique se cada ponto de acesso ou mapa de imagem não inclui mais dados do que o necessário. O motivo é que isso tornaria o processo de entrada de dados muito complexo e contínuo, como o gerenciamento de pontos de acesso ou de mapas de imagem, mais sujeito a erros.

Há diferentes maneiras de identificar um conjunto de variáveis a serem usadas para dados de ponto de acesso ou mapa de imagem.

Às vezes, basta consultar especialistas de TI responsáveis pela implementação do Quickview existente. Eles provavelmente saberão qual é o conjunto mínimo de dados para identificar a Visualização rápida no sistema. No entanto, é possível simplesmente analisar o comportamento existente do código front-end.

A maioria das implementações do Quickview usa o seguinte paradigma:

  • O usuário ativa um elemento da interface do usuário no site. Por exemplo, selecionar um Quickview botão.
  • O site envia uma solicitação Ajax para o back-end a fim de carregar os dados ou o conteúdo da Visualização rápida, se necessário.
  • Os dados do Quickview são traduzidos no conteúdo como preparação para renderização na página da Web.
  • Por fim, o código de front-end renderiza visualmente esse conteúdo na tela.

A abordagem então é visitar diferentes áreas do site existente onde o recurso de Visualização rápida é implementado. Em seguida, acione o Quickview e adquira o URL do Ajax enviado pela página da Web para carregar os dados ou conteúdo do Quickview.

Normalmente, não há necessidade de usar ferramentas de depuração especializadas. Navegadores da Web modernos possuem inspetores da Web que fazem um trabalho adequado. A seguir estão alguns exemplos de navegadores da Web que incluem inspetores da Web:

  • Para ver todas as solicitações HTTP de saída no Google Chrome, pressione F12 (Windows®) ou Command-Option-I (Mac) para abrir o painel Ferramenta do desenvolvedor. Selecione a guia Rede.
  • No Firefox, você pode ativar o plug-in do Firebug pressionando F12 (Windows®) ou Command-Option-I (Mac). Use a guia Rede ou a ferramenta Inspetor integrada e a guia Rede.

Quando o monitoramento de rede estiver ativado no navegador, acione o Quickview na página.

Agora, localize o URL do Ajax de visualização rápida no log de rede e copie o URL gravado para análise futura. Geralmente, quando você aciona a Visualização rápida, várias solicitações são enviadas para o servidor. Normalmente, o URL do Ajax Quickview é um dos primeiros na lista. Ele tem uma parte ou um caminho de sequência de consulta complexo e seu tipo de resposta MIME é text/html, text/xmlou text/javascript.

Durante esse processo, é importante visitar diferentes áreas do site, com diferentes categorias e tipos de produtos. O motivo é que os URLs de exibição rápida têm partes comuns para determinada categoria de site, mas só são alterados se você visitar uma área diferente do site.

No caso mais simples, a única parte variável no URL do Quickview é o SKU do produto. Nesse caso, o valor do SKU é a única parte dos dados necessária para adicionar pontos de acesso ou mapas de imagem à imagem do banner.

No entanto, em casos complexos, o URL do Quickview tem diferentes elementos variáveis, além do SKU. Alguns desses elementos incluem ID de categoria, código de cor, código de tamanho e assim por diante. Nesses casos, cada elemento é uma variável separada na definição de dados de ponto de acesso ou mapa de imagem no recurso de banner do carrossel.

Considere os seguintes exemplos de URLs do Quickview e seus pontos de acesso ou variáveis de mapa de imagem resultantes:

SKU única, encontrada na cadeia de caracteres de consulta.

Os URLs de Visualização rápida gravados incluem o seguinte:

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

A única parte variável no URL é o valor da variável productId= parâmetro da sequência de consulta e é claramente um valor de SKU. Portanto, os pontos de acesso ou mapas de imagem precisam apenas de campos SKU preenchidos com valores como 866558, 1196184, 1081492, 1898294.

SKU única, encontrada no caminho do URL.

Os URLs de Quickview gravados incluem o seguinte:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

A parte variável está na última parte do caminho e se torna o valor SKU dos pontos de acesso/mapas de imagem:6422350843, 1607745002, 0086724882.

SKU e ID de categoria na cadeia de caracteres de consulta.

Os URLs de Visualização rápida gravados incluem o seguinte:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

Nesse caso, há duas partes variáveis no URL. O SKU é armazenado no prodId e a ID da categoria for armazenada na variável category=parâmetro.

Dessa forma, as definições de ponto de acesso/mapa de imagem são pares. Ou seja, um valor de SKU e uma variável extra chamada categoryId. Os pares resultantes são os seguintes:

  • O SKU é 305466 e categoryId é 1100004.

  • O SKU é 310181 e categoryId é 1100004.

  • O SKU é 308706 e categoryId é 1740148.

Fazer upload de banners de imagem

Se você já tiver carregado as imagens que deseja usar, avance para a próxima etapa, Criar conjuntos de carrossel. As imagens usadas no carrossel devem ser carregadas após a ativação do Dynamic Media.

Para carregar banners de imagem, consulte Fazer upload de ativos.

OBSERVAÇÃO

Os usuários não administrativos devem ser adicionados ao dam-users para criar ou editar banners do carrossel. Se tiver problemas para criar ou editar o, consulte o administrador do sistema que pode adicioná-lo ao dam-users grupo.

Para criar Conjuntos de Carrossel:

  1. No Assets, navegue até a pasta em que deseja criar o Conjunto de carrossel e acesse Criar > Conjunto de carrossel.

  2. Na página Editor de banners do Carousel, selecione Toque para abrir o Seletor de ativos para selecionar a imagem do primeiro slide.

    Na página Editor de banners do Carousel, siga um destes procedimentos:

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

    • 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 selecionar Retornar. Aplique filtros para refinar os resultados da pesquisa. Filtre por caminho, coleção, tipo de arquivo e tag. Selecione o filtro e, em seguida, selecione a variável Filtro na barra de ferramentas. Alterar a exibição ao clicar no ícone Exibir e selecionar Exibição de coluna, Exibição de cartão ou Exibição de lista.

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

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

  4. (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, 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. Na barra de ferramentas, selecione Excluir slide na barra de ferramentas. Para mover um slide, selecione o ícone de reordenação e mova-o para o local desejado.

  5. 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.

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

    OBSERVAÇÃO

    Para banners do carrossel, você pode ajustar o seguinte:

    • 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 selecionando 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 alterar para uma predefinição diferente.

    Você também pode visualizar a aparência do banner do carrossel. Consulte (Opcional) Visualizar banners do carrossel.

  7. Selecionar Salvar quando terminar.

Adicionar pontos de acesso ou mapas de imagem a um banner de imagem

Você pode adicionar pontos de acesso ou mapas de imagem a um banner usando o editor de conjunto de carrossel.

Ao adicionar pontos de acesso ou mapas de imagem, você pode defini-los como uma exibição pop-up de Visualização rápida, como um hiperlink ou um Fragmento de experiência.

Consulte Fragmento de experiência.

OBSERVAÇÃO

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, é possível usar ou criar 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.

Ao adicionar pontos de acesso ou mapas de imagem a uma imagem, lembre-se de salvar seu trabalho. As opções Desfazer e Refazer, próximas ao canto superior direito da página, são compatíveis durante a sessão de criação/edição atual.

Ao terminar de criar o banner do carrossel, você pode usar a opção Visualizar para ver uma representação de como o banner do carrossel aparece para os clientes.

Consulte (Opcional) Visualizar banners do carrossel.

OBSERVAÇÃO

Quando você adiciona pontos de acesso a um banner de imagem, as informações do ponto de acesso são armazenadas no mesmo local de metadados, em relação à localização da imagem. Esse ponto é verdadeiro independentemente de ser uma Imagem interativa ou um Banner de carrossel. Essa funcionalidade significa que você pode reutilizar facilmente a mesma imagem, juntamente com seus dados de ponto de acesso definidos, em qualquer visualizador.

No entanto, esteja ciente de que os banners do carrossel são compatíveis com mapas de imagem em imagens que também podem conter pontos de acesso; uma imagem interativa não é compatível. Lembre-se dessa dica se você pretende criar uma Imagem interativa ou um Banner de carrossel que use a mesma imagem. Considere a criação de imagens interativas e banners do carrossel usando cópias separadas da mesma imagem.

OBSERVAÇÃO

Se você estiver editando imagens interativas com pontos de acesso e recortar a imagem, os pontos de acesso serão removidos.

Para adicionar pontos de acesso ou mapas de imagem a um Banner de imagem:

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

  2. Selecione o conjunto de carrossel e Editar. O Editor do visualizador do carrossel é aberto.

  3. Selecione o slide que deseja tornar interativo.

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

  5. 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, arraste do canto superior esquerdo para o canto inferior direito 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. Ou use as teclas de seta do teclado para controlar a posição de um ponto de acesso selecionado. Adicione mais pontos de acesso ou mapas de imagem, conforme necessário.

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

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

  7. Siga um destes procedimentos na Ações guia:

    • Selecionar Quickview.

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

      • Se você não for um Experience Manager Sites cliente:

        • Defina variáveis. Consulte Identificação de variáveis de ponto de acesso.

        • 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 SKU inserido preenche automaticamente a parte variável do modelo de Visualização rápida. O sistema agora associa o ponto de acesso selecionado à exibição rápida de um SKU específico.

        • (Opcional) Se houver outras variáveis na Exibição rápida que você deve usar para identificar ainda mais 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.

    • Selecionar Hiperlink.

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

        OBSERVAÇÃO

        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 Trabalhar com seletores para obter mais informações.

    • Selecionar 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. Para retornar à página Gerenciamento de pontos de acesso, selecione o Fragmento de experiência que deseja usar e, no canto superior direito da página, selecione Selecionar.
        Consulte Fragmentos de experiência.

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

        OBSERVAÇÃO

        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 ponto, é possível usar ou criar 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.

    experience_fragment-carouselbanner

    Você também pode visualizar a aparência do banner do carrossel. Consulte (Opcional) Visualizar banners do carrossel.

  8. Selecione Salvar.

  9. Publique o conjunto de 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, adicione o conjunto de carrossel diretamente à sua página da Web.

    Consulte Publicar ativos.

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

OBSERVAÇÃO

Os usuários não administrativos devem ser adicionados ao dam-users para criar ou editar banners do carrossel. Se tiver problemas para criar ou editar o, consulte o administrador do sistema que pode adicioná-lo ao dam-users grupo.

É possível executar várias tarefas de edição em Conjuntos de carrosséis, como as seguintes:

  • Adicione slides a um Conjunto de carrossel. Consulte também Trabalhar com seletores.
  • Reordenar slides no Conjunto de carrossel.
  • Excluir ativos no conjunto de carrossel.
  • Aplicar uma predefinição do visualizador.
  • Exclua o conjunto de carrosséis.
  • Adicionar ou editar pontos de acesso e mapas de imagem. Consulte também Trabalhar com seletores.

Para editar Conjuntos de Carrossel:

  1. Siga um destes procedimentos:

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

    • Passe o mouse sobre um ativo Conjunto de carrossel, selecione Selecionar (ícone de marca de seleção), em seguida, na barra de ferramentas, selecione Editar.

    • Selecione um ativo Conjunto de carrossel e, no canto superior esquerdo da página, selecione Editar (lápis).

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

    • Para adicionar um slide, selecione o Adicionar slide ícone. Navegue até o ativo que deseja adicionar a esse 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 Adicionar pontos de acesso e mapas de imagem a um banner de imagem.
    • Para editar a aparência ou o comportamento do conjunto de carrossel, selecione a Aparência ou Comportamento e defina as opções desejadas.
    • Para editar pontos de acesso ou mapas de imagem, no slide apropriado, selecione um ponto de acesso ou mapa de imagem. No Ações faça as alterações.
    • Para excluir um slide, selecione-o e, em seguida, Excluir slide na barra de ferramentas.
    • Para aplicar uma predefinição, próximo ao canto superior direito da página, selecione a 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, em seguida, Excluir.
    OBSERVAÇÃO

    Se você estiver editando imagens interativas com pontos de acesso e recortar a imagem, os pontos de acesso serão removidos.

Você pode usar a Visualização para ver como o banner do carrossel aparece para os clientes. Usar a visualização também permite que você teste os pontos de acesso e mapas de imagem do banner do carrossel para garantir que eles se comportem conforme esperado.

Quando estiver satisfeito com o banner do carrossel, você poderá publicá-lo.
Consulte Incorporar o visualizador de vídeo ou imagem em uma página da Web.
Consulte Vincular URLs ao aplicativo da Web. 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.
Consulte Adicionar ativos do Dynamic Media a páginas.

Você pode visualizar banners do carrossel no Editor do carrossel (método preferencial) ou no Visualizadores lista.

Como opção, para visualizar os banners do carrossel:

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

  2. Selecione Editar.

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

    experience_fragment-carouselbanner-viewdropdown

  4. Selecionar Visualizar.

  5. Para testar suas ações associadas, selecione os pontos de acesso ou mapas de imagem na imagem.

Para visualizar banners do carrossel na lista Visualizadores:

  1. Entrada Assets, navegue até um banner de carrossel existente que você criou e selecione-o para abri-lo.
  2. Próximo ao canto superior esquerdo da página Visualizar, selecione o ícone Conteúdo.
  3. No Visualizadores no painel à esquerda da página, selecione o nome da predefinição do visualizador de banner do carrossel que deseja usar.
  4. Para testar suas ações associadas, selecione os pontos de acesso ou mapas de imagem na imagem.

Para usar o carrossel, você deve publicá-lo. A publicação de um Conjunto de carrossel ativa o URL e o Código incorporado. Ele também publica o carrossel na nuvem do Dynamic Media, que é integrada a um CDN para entrega escalável e com desempenho.

OBSERVAÇÃO

Se você usar uma imagem interativa existente com pontos de acesso para o banner do carrossel, será necessário publicar a imagem interativa separadamente após publicar o banner do carrossel.

Além disso, se você modificar uma imagem interativa publicada pré-existente usada em um banner do carrossel, publique a imagem interativa para que essas alterações sejam refletidas no banner do carrossel.

Consulte Publicar ativos do Dynamic Media para obter informações sobre como publicar banners do carrossel.

Depois de carregar as imagens do banner para criar um carrossel, você adicionou pontos de acesso, mapas de imagem ou ambos ao banner. Publicado o conjunto de carrossel. Agora você está pronto para adicioná-lo à página existente do site.

OBSERVAÇÃO

Se você for um cliente do Experience Manager Sites, poderá adicionar o banner do carrossel diretamente à sua página arrastando o componente de Mídia interativa para sua página. Consulte Adicionar ativos do Dynamic Media às páginas.

No entanto, se você for um cliente independente do Experience Manager Assets, poderá adicionar manualmente o banner do carrossel à página de aterrissagem do site.

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

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

Observação: esta etapa se aplica somente se você for um cliente independente do Experience Manager Assets.

A última etapa deste processo é integrar o banner do carrossel a uma implementação do Quickview existente no seu site. Cada implementação de visualização rápida é única e é necessária uma abordagem específica que geralmente envolve a assistência de um profissional de TI de front-end.

A implementação existente do Quickview normalmente representa uma cadeia de ações inter-relacionadas que ocorrem na página da Web na seguinte ordem:

  1. Um usuário aciona um elemento na interface do usuário do seu site.
  2. O código front-end obtém um URL de visualização rápida com base no elemento de interface do usuário que foi acionado na etapa 1.
  3. O código de front-end envia uma solicitação de Ajax usando o URL obtido na etapa 2.
  4. A lógica de back-end retorna os dados ou o conteúdo de visualização rápida correspondentes ao código de front-end.
  5. O código de front-end carrega os dados ou o conteúdo da Visualização rápida.
  6. Como opção, o código de front-end converte os dados de Visualização rápida carregados em uma representação HTML.
  7. O código de front-end exibe uma caixa de diálogo ou painel modal e renderiza o conteúdo do HTML na tela para o usuário.

Essas chamadas não representam chamadas de API públicas independentes que podem ser chamadas pela lógica da página da Web de uma etapa arbitrária. Em vez disso, é uma chamada encadeada em que cada próxima etapa é ocultada na última fase (retorno de chamada) da etapa anterior.

Ao mesmo tempo em que o banner do carrossel substitui a etapa 1 e parcialmente a etapa 2, quando um usuário seleciona um ponto de acesso ou mapa de imagem, essa interação é realizada pelo visualizador. O visualizador retorna um evento à página da Web que contém todos os dados de ponto de acesso ou mapa de imagem adicionados anteriormente.

Nesse manipulador de eventos, o código de front-end faz o seguinte:

  • Escuta um evento emitido pelo banner do carrossel.
  • Constrói um URL de visualização rápida com base nos dados do ponto de acesso ou mapa de imagem.
  • Aciona o processo de carregar a Visualização rápida do back-end e renderizá-la na tela para exibição.

O código incorporado retornado pelo Experience Manager Assets já tem um manipulador de eventos pronto para uso em vigor que está comentado.

Portanto, é necessário apenas remover o comentário do código e substituir o corpo do manipulador fictício pelo código específico da página da Web.

O processo de construção do URL de visualização rápida é oposto ao processo usado para identificar as variáveis de ponto de acesso e mapa de imagem abordadas anteriormente.

Consulte Identificar variáveis de ponto de acesso e mapa de imagem.

A última etapa para acionar o URL de visualização rápida e ativar o painel de Visualização rápida provavelmente requer a assistência de um profissional de TI de front-end do seu departamento de TI. Eles têm o conhecimento para saber como acionar com precisão a implementação da Visualização rápida a partir da etapa adequada, com um URL de Visualização rápida pronto para uso.

Crie um pop-up personalizado do Windows® usando o Quickview

Consulte Crie um pop-up personalizado do Windows® usando o Quickview.

Nesta página