Dynamic Media modelos dynamic-media-templates
Crie modelos personalizáveis em tempo real para seus banners e folhetos usando os modelos do Dynamic Media, um editor de modelos do WYSIWYG. Publique seu modelo Dynamic Media e use-o nos aplicativos downstream. Um modelo Dynamic Media inclui camadas de imagem e texto. Adicione parâmetros às camadas de imagem e texto do modelo e use Dynamic Media URLs para reposicionar e redimensionar a camada e atualizar seu conteúdo em tempo real.
Alguns dos principais recursos incluem:
- Dynamic MediaEditor de modelos do WYSIWYG: Crie banners personalizáveis com camadas de imagem e texto.
- Parametrização de Camada: Defina pares de valores-chave dinâmicos para camadas para habilitar atualizações em tempo real.
- Suporte a URL Dynamic Media: Use URLs Dynamic Media para modelos, integrando valores personalizados de aplicativos próprios ou de terceiros.
- Controle de Visibilidade de Camada oculta ou mostra camadas dinamicamente, conforme necessário.
- Redimensionamento de Texto Inteligente: Ajuste automaticamente o tamanho do texto para ajustar às áreas designadas.
Alguns dos principais benefícios dos modelos Dynamic Media incluem:
- Otimizar 1:1 Personalization: Personalize o conteúdo para sinais de clientes em tempo real.
- Reduza o esforço manual: automatize e acelere a criação e o gerenciamento de conteúdo.
- Garanta Experiências omnicanais Consistentes: Mantenha a consistência da marca em todos os canais.
- Reutilizar conteúdo efetivamente: Evite conteúdo de uso único e dimensione com modelos dinâmicos e parametrizados.
- Atenuar Riscos Atualize preços, descontos e links em tempo real.
- Aprimorar o Engajamento com o Cliente. Promover experiências interativas e relevantes contextualmente.
Saiba como criar um modelo Dynamic Media passo a passo neste vídeo.
Antes de começar prerequisites-for-dynamic-media-wysiwyg-template
Atenda aos seguintes requisitos para criar um modelo Dynamic Media e gerar sua URL de entrega:
-
Acesso a Dynamic Media.
-
Na página inicial do Assets View, você tem uma pasta no Dynamic Media Assets para salvar seu modelo. Crie uma pasta no
-
Publique as imagens que serão usadas na criação do modelo para gerar o URL de entrega do modelo após criá-lo. O URL do delivery pode ser usado em aplicativos downstream.
-
Para usar uma fonte diferente da fonte padrão Adobe Sans F2 na camada de texto do modelo, carregue e publique o arquivo de fonte no AEM e no Dynamic Media simultaneamente. Os formatos de arquivo de fonte com suporte são: AFM, OTF, PFB, PFM, PhotoFont, TTC, TTF. Além disso, certifique-se de reprocessar as fontes existentes para usá-las. Consulte Fontes para obter mais informações.
-
verifique o seguinte na interface para toque:
- Na página Editar Configuração Dynamic Media, o modo de sincronização Dynamic Media, definido como Desabilitado por padrão, não é aplicado a todas as pastas do AEM (Sincronizar todo o conteúdo está desmarcado). Consulte configurando o Dynamic Media Cloud Service para obter mais informações.
- O modo de sincronização Dynamic Media está definido como Habilitar para subpastas para a pasta ou subpasta de destino onde você salvará o modelo após a criação. Consulte configurando Dynamic Media Cloud Service para obter mais informações.
Criar modelo Dynamic Media how-to-create-dynamic-media-template
Execute as seguintes etapas para criar um modelo Dynamic Media:
Criar uma tela em branco create-a-canvas
Execute estas etapas para criar uma tela em branco:
-
Navegue até Assets View, selecione Dynamic Media Assets, disponível no painel esquerdo, e navegue até a pasta para salvar o modelo nessa pasta.
-
Selecione Criar Modelo. A caixa de diálogo Novo Modelo é exibida.
note note NOTE O modelo é salvo no local onde foi criado. Na página inicial do Assets View, selecione Dynamic Media Assets e clique em Criar Modelo para salvar o modelo na pasta raiz do Dynamic Media Assets. -
Especifique um nome de modelo, defina a largura e a altura da tela e clique em Criar. Uma tela de desenho em branco é exibida com opções de menu em ambos os lados para ser usada na criação do modelo. Passe o mouse sobre as opções de menu para ver a dica de ferramenta.
note note NOTE A faixa de largura e altura permitida é de 50 a 5000.
Opções de menu no painel direito: Use essas opções para adicionar as imagens e camadas de texto necessárias à tela.
-
-
-
Opções de menu no painel esquerdo: Use essas opções para as seguintes ações comuns do editor.
-
-
](Windows) ou Cmd +](Mac) para avançar uma camada selecionada. -
[(Windows) ou Cmd +[(Mac) para voltar uma camada selecionada. -
-
-
-
- Pressione backspace ou delete para excluir a camada selecionada se nenhum texto ou propriedade estiver sendo editado.
Clique em
Adicionar imagens à tela add-images-to-the-canvas
Execute estas etapas para adicionar imagens à tela:
- Clique em
- Navegue pelo painel ou use palavras-chave na barra de pesquisa para localizar uma imagem específica.
- Arraste e solte uma imagem na tela para usá-la. Consulte o Painel Propriedades para redimensionar ou reposicionar uma camada na tela de desenho.
- Habilite o botão de alternância Raio Uniforme e use o controle deslizante Raio do Canto para ajustar o arredondamento de todos os quatro cantos de uma imagem uniformemente. Desative o botão de alternância para personalizar o arredondamento do canto, atribuindo valores de raio específicos a cada canto.
Adição de camadas de texto à tela de desenho add-text-to-the-canvas
Execute estas etapas para adicionar camadas de texto à tela de desenho:
- Clique
- Selecione a camada e clique no texto para atualizá-la.
- Selecione Redimensionamento do Texto Inteligente no painel Propriedades para ajustar automaticamente o comprimento do texto e o tamanho da fonte para que se ajustem de forma ideal à área designada.
Consulte o Painel Propriedades para reposicionar, redimensionar, girar ou excluir a camada. Formate o texto para a fonte, o tamanho, a cor, o estilo e o alinhamento necessários (na camada) alterando os valores nos respectivos campos na seção Texto do painel. O campo Família da Fonte exibe a fonte padrão Adobe Sans F2, as fontes existentes reprocessadas e as fontes recém-carregadas e publicadas. Consulte o ponto 5 na seção Antes de começar acima para obter mais informações.
Formatar partes específicas do texto e parametrizá-las para controlá-las independentemente.
Formatar texto seletivo apply-formatting-to-substring
Execute as seguintes etapas para formatar partes específicas de uma string:
-
Selecione um ou mais caracteres na cadeia de caracteres a ser formatada.
-
Formate a seleção usando o painel de propriedades. As seguintes opções de formatação são aplicáveis a substrings e suas partes:
- Estilo da Fonte: Negrito, itálico, sublinhado, subscrito e sobrescrito usando a opção Estilo da Fonte.
- Propriedades da Fonte: altere a família, a cor e o tamanho da fonte usando as respectivas opções de painel.
Adicionar formas à tela de desenho add-shapes-to-the-canvas
Execute estas etapas para adicionar formas à tela de desenho:
- Clique em
- Role até a seção Estilo do painel, defina um código hexadecimal no campo Cor da Forma ou use o seletor de cores para preencher a cor na forma selecionada.
- Habilite o botão de alternância Raio Uniforme e use o controle deslizante Raio do Canto para ajustar o arredondamento de todos os quatro cantos do retângulo uniformemente. Desative o botão de alternância para personalizar o arredondamento do canto, atribuindo valores de raio específicos a cada canto.
- Adicione o parâmetro Hide à camada selecionada para mostrar ou ocultar a camada no modelo em tempo real usando a URL do modelo.
- Selecione a camada para adicionar um link CTA a ela, permitindo que os usuários cliquem na forma como um hiperlink no modelo ativo.
Editar ou excluir uma camada edit-or-delete-a-layer
Execute estas etapas para editar ou excluir uma camada da tela de desenho:
- Clique em
- Clique em mais opções (
- Clique em Excluir para excluir a camada.
- Clique em Editar para editar a camada usando o Painel de Propriedades.
Painel Propriedades properties-panel
O painel Propriedades inclui seções para reposicionar, redimensionar e girar uma camada. Também fornece opções de preenchimento de cores para camadas de forma, opções de formatação de texto para camadas de texto e uma opção para adicionar um link CTA a qualquer camada selecionada.
Para navegar até o painel de propriedades de uma camada, clique em
No painel Propriedades de uma camada, selecione outra camada na tela para navegar até o painel Propriedades.
Reposicionar, redimensionar, girar ou excluir uma camada reposition-resize-delete-a-layer
Veja estas ações comuns de edição de camadas para editar um texto ou uma camada de imagem:
- Reposicionar a camada: Arraste a camada para movê-la para qualquer lugar na tela. Essa ação atualiza os valores X e Y no painel de propriedades. X e Y são as coordenadas do centro da camada no plano da tela de desenho.
- Redimensionar a camada: Selecione a camada e arraste suas alças de borda para redimensioná-la. Essa ação atualiza os valores L (largura) e A (altura) no painel de propriedades.
- Girar a camada: arraste a alça quadrada colocada verticalmente acima da camada para girá-la em torno de seu centro. Essa ação atualiza os valores de ângulo no painel de propriedades.
- Excluir a camada: Pressione Backspace ou delete e clique em Confirmar para excluir uma camada selecionada.
Opções de formatação de texto text-formatting-options-on-properties-panel
Formate o texto para a fonte, o tamanho, a cor, o estilo e o alinhamento necessários (dentro da camada) alterando os valores nos respectivos campos na seção Texto do painel.
Certifique-se de incluir Redimensionamento de Texto Inteligente. O Redimensionamento de Texto Inteligente funciona no algoritmo Ajuste de Texto para preencher o texto de maneira ideal na área de texto, evitar o excesso de texto e minimizar o espaço extra na parte inferior do texto.
Camadas de parâmetros parameterise-a-layer
Depois de criar um modelo com várias camadas de imagens, textos e formas, parametrize as camadas selecionadas. Quando uma camada ou sua propriedade é parametrizada, ela obtém um par de valores-chave (também chamado de parâmetro ). Esse parâmetro pode ser incluído no URL do modelo para atualizar a posição, o tamanho ou o conteúdo da camada em tempo real, resultando na personalização rápida do modelo.
Para parametrizar uma camada:
- clique em
- Alternar Incluir Parâmetro para parametrizar uma propriedade. Consulte a opção de painel Parâmetros para saber o comportamento da propriedade após a parametrização.
- Opcional: Renomeie o nome do parâmetro. Um nome de parâmetro tem um nome de camada seguido por um sufixo. Para uma camada selecionada, todas as suas propriedades parametrizadas compartilham o mesmo nome de camada seguido por um sufixo variável. Renomeie o nome da camada seguindo a convenção de nomenclatura semântica para que, ao incluir o parâmetro no URL, o próprio nome do parâmetro explique sobre o conteúdo da camada ou sua finalidade.
- Clique em Salvar.
Para alternar entre o painel Parâmetro de uma imagem e uma camada de texto, selecione a camada na tela e clique em Parâmetros.
Opção do painel Parâmetros parameterisation-options-or-allowed-parameters
As propriedades com parâmetros podem ser incluídas como parâmetros de URL no URL do modelo para editar o modelo em tempo real usando o URL.
Parâmetros de camada layer-parameters
A seguir estão os parâmetros de camada que se aplicam às camadas de imagem e texto.
X: Inclua para mover a camada horizontalmente ao longo de sua linha central, paralelamente ao eixo X do plano de modelo, alterando o valor do parâmetro na URL.
Y: Inclua para mover a camada verticalmente ao longo de sua linha central, paralelamente ao eixo Y do plano de modelo, alterando o valor do parâmetro na URL.
Largura: Inclua para ajustar a largura da camada alterando o valor do parâmetro na URL.
Altura: Inclua para ajustar a altura da camada alterando o valor do parâmetro na URL.
Ocultar: Incluir para ocultar ou mostrar a camada no modelo usando 0 (mostrar) e 1 (ocultar).
Parâmetro de imagem image-parameter
Inclua o parâmetro Source para substituir a imagem da camada por uma nova imagem alterando o caminho da imagem no valor do parâmetro na URL.
Parâmetros de formatação de texto text-formatting-parameters
Inclua os seguintes parâmetros para editar o texto, sua fonte, cor e tamanho no URL de entrega atualizando os valores de parâmetro no URL:
Texto: Incluir para atualizar o texto da URL.
Família da Fonte: Incluir para atualizar a fonte do texto da URL.
Tamanho da Fonte: Incluir para atualizar o tamanho da fonte do texto da URL.
Cor do texto: Incluir para atualizar a cor da fonte do texto da URL.
Parametrizar substrings substring-parameterisation
No painel Parâmetros, role até a seção Parâmetros da Substring. Esta seção inclui um seletor de subsequência que exibe a sequência completa (camada de texto selecionada) com formatação consistente ou suas partes formatadas como subsequências separadas. Selecione uma subcadeia de caracteres para parametrizar seu texto, família de fontes, tamanho da fonte e cor.
Use o seletor de subcadeia de caracteres para dividir subcadeias de caracteres para parametrizar suas partes individuais ou mesclar subcadeias de caracteres para aplicar parâmetros uniformes.
Dividir subcadeia de caracteres split-substring
Para parametrizar uma parte específica de uma substring, puxe a parte para transformá-la em uma substring separada para seleção e parametrização individuais. Execute as seguintes etapas para dividir uma substring em substrings separadas:
- No seletor de substring, selecione os caracteres em uma substring para separá-la.
- Clique em
Você pode selecionar a subcadeia necessária para parametrizar seu texto, família de fontes, tamanho da fonte e cor.
Mesclar subcadeia de caracteres merge-substring
A mesclagem de substrings remove seus parâmetros individuais existentes e permite aplicar parâmetros consistentes na substring recém-formada.
Execute as seguintes etapas para mesclar duas substrings adjacentes para aplicar parâmetros uniformes à substring resultante:
-
No seletor de subsequência, selecione os caracteres em duas subsequências adjacentes com a mesma formatação.
-
Clique em
Você pode aplicar parâmetros uniformes à substring recém-formada.note note NOTE Somente substrings com formatação idêntica podem ser mescladas.
Agrupar camadas para controlar sua visibilidade simultaneamente group-layers
Outra maneira de manter seus modelos flexíveis é usar um único nome de parâmetro para controlar várias camadas. Essa estratégia é útil para o parâmetro de visibilidade (ocultar ou mostrar camadas), para atualizar o design ou os gráficos de um único modelo.
Siga estas etapas para atribuir o mesmo nome aos Ocultar parâmetros (
- Navegue até o Painel Propriedades de uma camada.
- Alternar o parâmetro Hide se não for parametrizado anteriormente.
- Opcional: Renomeie o Parâmetro Hide.
- Copie o nome do parâmetro Hide.
- Vá para o painel Parâmetro de outras camadas selecionando-as na tela e alterne seu Parâmetro Hide se não for parametrizado.
- Substitua o nome Hide parameter pelo nome copiado.
- Clique em Salvar para agrupar as camadas.
- Execute a etapa 3 e depois a etapa 4 na seção Visualizar e Publicar para ver suas alterações.
Pré-visualizar e publicar o modelo para copiar o URL de entrega preview-and-publish-template-and-copy-template-deliver-url
Execute estas etapas para visualizar e publicar o modelo e copiar o URL do delivery:
-
Na página da tela, clique em Visualizar. Você também pode navegar para o Modo de Exibição do Assets > Dynamic Media Assets > localizar e selecionar seu modelo > clicar em Editar Modelo > clicar em Visualizar. A página de visualização exibe o modelo, seus parâmetros (camadas e propriedades com parâmetros), status de publicação e a opção Publicar.
-
Selecione parâmetros do painel Parâmetros do modelo para editar seus valores e atualizar instantaneamente o conteúdo, o tamanho, a posição ou a formatação de texto da camada de modelo correspondente na visualização. Por exemplo:
- Selecione uma camada de texto e edite seu texto ou
- Selecione uma camada de imagem, clique em
O modelo é atualizado imediatamente, exibindo o texto editado e substituindo a imagem anterior pela nova. Além disso, o valor do parâmetro de imagem reflete o novo caminho de imagem. Da mesma forma, é possível redimensionar uma camada ajustando seus valores, e as alterações são aplicadas ao modelo em tempo real.
-
Selecione o parâmetro Hide para camadas agrupadas da lista para exibi-las ou ocultá-las no modelo.
-
Opcional: Altere o valor do parâmetro Ocultar entre 0 e 1 e clique em Atualizar para ver as alterações. Camadas com o mesmo parâmetro Hide oculta ou é exibido junto. Da mesma forma, é possível controlar a visibilidade das camadas a partir do URL.
Você também pode alternar Incluir todos os parâmetros para editar todos os valores de parâmetros exibidos e ver as atualizações na visualização do modelo. -
Para publicar o modelo a partir da página de visualização, clique em Publicar e confirme para publicar. Uma mensagem Publicação concluída é exibida e o status de publicação é atualizado para Publicado.
Copiar o URL de entrega
Os parâmetros selecionados na página Visualização tornam-se os parâmetros de URL na URL de modelo.
Verifique se as imagens no modelo já estão publicadas no AEM e no Dynamic Media para gerar o URL de entrega do modelo.
Execute as seguintes etapas para copiar o URL de entrega do modelo:
- Clique em Copiar URL. A caixa de diálogo Copiar URL é exibida. Selecione e copie o URL exibido. O primeiro parâmetro na URL começa após um ponto de interrogação (?) e um par chave-valor começam com $ e terminam com &. A chave e o valor são separados por um sinal de igual (=), com a chave à esquerda e o valor à direita.
- Cole esse URL na guia do navegador e veja seu modelo em tempo real. Personalize o modelo em tempo real atualizando o valor do parâmetro necessário (valor da chave) diretamente na URL, conforme demonstrado na etapa 2 da seção Visualizar e Publicar.
- Use este URL para um merchandising rápido de seus produtos ou serviços. Você pode compartilhar esse URL com seus clientes ou integrá-lo ao seu site ou a qualquer aplicativo downstream de terceiros para exibir o banner e fazer atualizações em tempo real nele para refletir as ofertas em andamento.
Faça atualizações em tempo real no modelo a partir do URL update-the-template-from-the-url
Editar parâmetros diretamente no URL pode ser entediante. Para simplificar:
-
Copie o URL e cole-o em um bloco de notas.
-
Use Cmd+F (Mac) ou Ctrl+F (Windows) para localizar e editar os valores de parâmetro. Tais como:
- Localizar e substituir caminhos de imagem para camadas de imagem.
- Localize as coordenadas parametrizadas da camada, a largura e a altura, para ajustar seus valores.
- Editar texto, fonte, cor, tamanho ou alinhamento para camadas de texto.
- Altere os valores de visibilidade entre 0 e 1.
Cole esse URL atualizado no navegador para visualizar as alterações.
Editar o modelo edit-the-template
Edite o template seguindo estas etapas:
- No Assets view, clique em Dynamic Media Assets.
- Navegue até o local do modelo.
- Selecione o template.
- Clique em Editar Modelo. A tela de modelo exibe o modelo e a lista de todas as suas camadas no painel Camadas. Comece a editar o modelo de acordo com seus requisitos.
Adicionar link do Call to action (CTA) à camada de modelo add-CTA-in-dynamic-media-templates
Transforme qualquer camada de imagem, texto ou forma do modelo Dynamic Media em um hiperlink adicionando um link do CTA a ela que direcione os usuários para uma página de destino.
Execute estas etapas para adicionar um link do CTA a uma camada:
-
Navegue até o local do modelo, selecione o modelo e clique em
-
Selecione a camada de modelo e navegue até o painel de propriedades para adicionar um link de CTA a ela.
-
No painel de propriedades, selecione Adicionar CTA, especifique a URL de destino no campo URL e clique em Salvar.
-
Clique em Visualizar e selecione Publicar para publicar seu modelo, se não tiver sido publicado anteriormente.
-
Navegue até a pasta onde este modelo está salvo, selecione este modelo e clique em
-
Clique em Opções de Cópia e selecione Copiar Código de Inserção. Certifique-se de publicar as imagens do modelo em AEM and Dynamic Media para copiar o código de inserção.
Veja a seguir um exemplo do Código incorporado:
code language-json <div class="adobe-dynamicmedia-template-embed-container"> <img id="<Image ID>>" src="<Image Source>>" alt="adobe dynamicmedia template" usemap="#adobe-dynamicmedia-template-map" width="800" height="300"> <map name="adobe-dynamicmedia-template-map"> <area shape="rect" coords="417,-60,817,340" href="https://business.adobe.com/br/products.html" alt="Layer with CTA" title="https://business.adobe.com/br/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/br/products.html" alt="Layer with CTA" title="https://business.adobe.com/br/products.html" target="_blank"> </map> </div> -
Adicione o código incorporado copiado ao arquivo HTML do site e execute-o no navegador para exibir o modelo.
Clique no elemento CTA no modelo para navegar até a página de destino.
Assista a este vídeo passo a passo para saber como adicionar um link do CTA a uma camada de modelo.
Pontos importantes a observar important-points-to-note
- Depois de criar um modelo com camadas de imagem com parâmetros para atualizações dinâmicas, verifique se as imagens destinadas a atualizações futuras compartilham as mesmas dimensões que as imagens com parâmetros. Isso garante que as imagens se encaixem perfeitamente dentro das camadas sem transbordar ou deixar espaços vazios. Atualmente, o modelo não oferece suporte a ajustes de dimensão automáticos para ajustar imagens às camadas.
- Não há suporte para substring em uma camada de texto. O usuário não pode aplicar propriedades de fonte diferentes em uma substring de uma camada de texto.
- Atualmente, o suporte para várias empresas do Dynamic Media não está disponível com os Modelos do Dynamic Media.
- No caso de copiar ou mover, o Seletor de Destino mostra todas as pastas (incluindo pastas sincronizadas que não são Dynamic Media). Além disso, no momento, ele não exibe os Dynamic Media ativos do modelo (ambos são limitações do seletor de destino).
- Qualquer operação de atualização em uma pasta (por exemplo, Publicar ou Excluir) da seção Assets afeta os Dynamic Media Modelos disponíveis nessa pasta.
- A lixeira não funciona para Modelos Dynamic Media. Se um ativo for movido para o lixo e depois restaurado, ele será restaurado no AEM, mas não no Dynamic Media. O mesmo é válido para Dynamic Media Modelos.
Consulte também:
- Explorar Dynamic Media e seus recursos
- Explorar Dynamic Media com recursos OpenAPI