• Marketo Engage Assets - Escolha este tipo para procurar e selecionar um ativo de imagem da biblioteca Journey Optimizer B2B edition ou da instância conectada do Market Engage.

    Procurar os ativos de imagem disponíveis {width="700" modal="regular"}

    Na caixa de diálogo, é possível escolher uma imagem do repositório selecionado. Clique em Selecionar para adicionar o ativo.

    Há ferramentas disponíveis para ajudar a localizar o ativo necessário:

    • Clique no ícone Filtro na parte superior esquerda para filtrar os itens exibidos de acordo com seus critérios.

    • Digite texto no campo Pesquisa para filtrar os itens exibidos para uma correspondência do nome do ativo.

      Use os filtros e o campo de pesquisa para localizar o ativo necessário {width="700" modal="regular"}

  • Experience Manager Assets - Escolha este tipo para procurar e selecionar um ativo de imagem de um repositório configurado do Experience Manager Assets.

    Na caixa de diálogo Selecionar Assets, escolha uma imagem usando as ferramentas disponíveis para localizar o ativo necessário e clique em Selecionar.:

    • Altere o Repositório na parte superior direita.

    • Clique em Gerenciar ativos na parte superior direita para abrir o repositório do Assets em outra guia do navegador e usar as ferramentas de gerenciamento do AEM Assets.

    • Clique no seletor de Tipo de exibição na parte superior direita para alterar a exibição para Exibição de Lista, Exibição de Grade, Exibição de Galeria ou Exibição em Cascata.

    • Clique no ícone Ordem de classificação para alterar a ordem de classificação entre crescente e decrescente.

      Use as ferramentas na caixa de diálogo Selecionar Assets para localizar e selecionar um ativo de imagem {width="700" modal="regular"}

    • Clique na seta de menu Classificar por para alterar os critérios de classificação para Nome, Tamanho ou Modificado.

    • Clique no ícone Filtro na parte superior esquerda para filtrar os itens exibidos de acordo com seus critérios.

    • Digite texto no campo Pesquisa para filtrar os itens exibidos para uma correspondência do nome do ativo.

    Use os filtros e o campo de pesquisa para localizar o ativo {width="700" modal="regular"}

  • Importar mídia - Escolha esse tipo para selecionar um arquivo do seu sistema e importá-lo para a biblioteca de ativos do Journey Optimizer B2B edition.

    Na caixa de diálogo Carregar imagem, arraste e solte um arquivo do seu sistema na caixa de arquivo. O tamanho máximo do arquivo é 100 MB.

    Importar um arquivo de imagem para o(a) {width="450"}

    Os nomes de arquivo das imagens selecionadas são exibidos na caixa de diálogo. Os nomes dos arquivos do ativo devem ser exclusivos (em várias pastas). Se um arquivo com o nome já existir, uma mensagem será exibida. Os nomes podem ter no máximo 100 caracteres e não podem conter caracteres especiais (como ;, :, \ e |).

    Clique em Importar.

Você pode adicionar um título de imagem e um texto alternativo para a imagem no painel direito.

Configurações de imagem {width="250"}

Na guia Configurações, use as opções Link para vincular a imagem a um destino e ao comportamento do navegador para carregar a página de destino.

  1. Defina o Tipo para o link:

    • Link externo - Escolha este tipo para usar uma URL padrão como o destino do link.

      Em Url, insira a URL para o destino do link. Clique no ícone Personalizar ( Personalizar ícone ) para usar um token de personalização como parâmetro na URL.

      Definir um link externo para um componente de botão {width="250"}

    • Página de aterrissagem - Escolha esse tipo para selecionar uma página de aterrissagem publicada em a instância conectada do Marketo Engage.

      Para a opção Página de aterrissagem, selecione a página de aterrissagem publicada. Clique no ícone Selecionar página ( Ícone Mostrar links ) e selecione a página de aterrissagem publicada.

      Definir um link para uma página de aterrissagem para um componente de botão {width="250"}

  2. Para Rótulo, insira o texto que deseja exibir dentro do botão.

    O dimensionamento do botão é ajustado de acordo com o texto e o estilo definidos.

  3. Para Target, escolha como o destino vinculado será redirecionado do email ou da página:

    • Nenhum - Abre o link usando o navegador padrão ou o comportamento do cliente (padrão).
    • Em branco - Abre o link em uma nova janela ou guia.
    • Self - Abre o link no mesmo quadro.
    • Pai - abre o link no quadro pai.
    • Superior - Abre o link no corpo inteiro da janela.

Definir os estilos

Defina os estilos do componente de Imagem no painel direito.

Histórico

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

Seletor de cor de fundo {width="300"}

Borda

  1. No painel direito, com a guia Estilos selecionada, expanda a seção Borda e defina as opções para exibir uma borda para o componente:

  2. Mova o botão para a direita para ativar as opções de exibição de borda e defina-as de acordo com seus critérios de design:

    • Para definir a Cor da borda, marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

    Seletor de cores da borda {width="300"}

    • Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    • Para definir o Estilo de borda, escolha um valor na lista de valores CSS border-style padrão.

    • Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.

    Estilos de borda {width="250"}

  3. Para o Raio da borda, defina o valor numérico de acordo com a curva desejada para os cantos.

    Um valor de 0 (padrão) produz um canto quadrado.

Tamanho

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

  • Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

  • Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

    • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

      Estilo de largura usando porcentagem {width="250"}

    • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

      Estilo de largura usando pixels {width="250"}

Alinhamento

Expanda a seção Alinhamento e escolha o alinhamento horizontal que deseja usar: esquerda, centro ou direita. Este estilo traduz para um estilo CSS text-align padrão e afeta como o componente é posicionado dentro do componente que o contém.

Estilos de alinhamento horizontal {width="250"}

Margem

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

  • Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir margem para todos os lados {width="250"}

  • Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  • Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Bloquear margens para as margens superior inferior e esquerda direita {width="250"}

  • Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir margens independentes {width="250"}

Preenchimento

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

  • Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir preenchimento para todos os lados {width="250"}

  • Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  • Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Bloquear preenchimento para as margens superior inferior e esquerda direita {width="250"}

  • Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir preenchimento independente {width="250"}

Avançado

Para aplicar atributos adicionais compatíveis com CSS com valores, use as configurações de estilo Avançadas. Você pode alterar os valores dos atributos existentes ou adicionar novos. O estilo é aplicado ao componente usando o modelo de herança CSS para componentes pai-filho (elementos).

Os atributos exibidos refletem os estilos que estão definidos atualmente para o componente. Você pode alterar os valores de acordo com definições de CSS. Clique no ícone Adicionar (+) para adicionar um novo atributo de estilo para o componente.

Estilos avançados {width="250"}

Redes sociais

Use o componente Social para inserir links para páginas de redes sociais no seu conteúdo. Ele inclui três tipos de redes sociais padrão, mas você pode adicionar ou remover os tipos de acordo com suas necessidades.

Novo componente social com tipos padrão {width="600" modal="regular"}

  • Para adicionar um tipo de rede social, clique no ícone Adicionar ( + ) e escolha um tipo de rede social que deseja adicionar.

    Clique em + para adicionar o tipo de rede social {width="250"}

  • Para remover um tipo de rede social, clique em X ao lado do ícone de rede social.

Com um tipo de rede social selecionado, defina as opções para esse tipo:

  • URL - Insira a URL da rede social que você deseja vincular ao gráfico ou ícone da rede social.

  • Source - Se você quiser usar sua própria imagem em vez do padrão, escolha e ativo de imagem. Você pode selecionar uma imagem do repositório de ativos conectado do Marketo Engage, um repositório do Experience Manager Assets (se configurado) ou importar um arquivo de imagem do seu sistema. Consulte as informações sobre o componente de imagem para obter detalhes sobre a seleção e a importação de ativos de imagem.

  • Texto alternativo - Digite o texto alternativo da imagem exibida.

    Configurações para o tipo de mídia social selecionado {width="250"}

Para definir um tamanho de exibição consistente para todos os elementos gráficos de redes sociais, defina o Tamanho das imagens.

Você pode definir as seguintes opções de estilo para o componente Social:

Histórico

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

Seletor de cor de fundo {width="300"}

Borda

  1. No painel direito, com a guia Estilos selecionada, expanda a seção Borda e defina as opções para exibir uma borda para o componente:

  2. Mova o botão para a direita para ativar as opções de exibição de borda e defina-as de acordo com seus critérios de design:

    • Para definir a Cor da borda, marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

    Seletor de cores da borda {width="300"}

    • Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    • Para definir o Estilo de borda, escolha um valor na lista de valores CSS border-style padrão.

    • Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.

    Estilos de borda {width="250"}

  3. Para o Raio da borda, defina o valor numérico de acordo com a curva desejada para os cantos.

    Um valor de 0 (padrão) produz um canto quadrado.

Tamanho

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

  • Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

  • Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

    • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

      Estilo de largura usando porcentagem {width="250"}

    • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

      Estilo de largura usando pixels {width="250"}

Alinhamento

Expanda a seção Alinhamento e escolha o alinhamento horizontal que deseja usar: esquerda, centro ou direita. Este estilo traduz para um estilo CSS text-align padrão e afeta como o componente é posicionado dentro do componente que o contém.

Estilos de alinhamento horizontal {width="250"}

Margem

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

  • Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir margem para todos os lados {width="250"}

  • Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  • Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Bloquear margens para as margens superior inferior e esquerda direita {width="250"}

  • Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir margens independentes {width="250"}

Preenchimento

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

  • Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir preenchimento para todos os lados {width="250"}

  • Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  • Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Bloquear preenchimento para as margens superior inferior e esquerda direita {width="250"}

  • Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir preenchimento independente {width="250"}

Avançado

Para aplicar atributos adicionais compatíveis com CSS com valores, use as configurações de estilo Avançadas. Você pode alterar os valores dos atributos existentes ou adicionar novos. O estilo é aplicado ao componente usando o modelo de herança CSS para componentes pai-filho (elementos).

Os atributos exibidos refletem os estilos que estão definidos atualmente para o componente. Você pode alterar os valores de acordo com definições de CSS. Clique no ícone Adicionar (+) para adicionar um novo atributo de estilo para o componente.

Estilos avançados {width="250"}

Formulário (páginas de destino)

[Beta]{class="badge informative" title="Recurso do Beta"}

Use o componente Formulário para adicionar um formulário publicado a uma página de aterrissagem ou modelo de página de aterrissagem. Para obter mais informações sobre criação e publicação de formulários, consulte Forms.

  1. Clique na ferramenta Formulário na barra de ferramentas do componente ou use as propriedades Incorporar Formulário à direita para selecionar o formulário publicado.

    Selecione o formulário publicado {width="600"}

  2. Se você deseja substituir o Tipo de acompanhamento padrão do formulário, altere a configuração de acordo com os requisitos da página ou do modelo.

    Esta página também é conhecida como página de agradecimento do formulário e essa configuração determina o que acontece quando um visitante envia o formulário:

    • Permanecer na página - Escolha essa opção para manter o visitante na mesma página quando o formulário for enviado.

    • Página de aterrissagem - Escolha essa opção para selecionar qualquer página de aterrissagem do Journey Optimizer B2B edition ou do Marketo Engage como acompanhamento.

    • URL Externa - Escolha esta opção para especificar qualquer URL como página de acompanhamento. Depois que o visitante envia o formulário, o navegador carrega o URL designado.

      note tip
      TIP
      Se quiser que o use o formulário para baixar um arquivo, você pode especificar uma URL para o arquivo hospedado. Com essa configuração, o botão de envio funciona como um botão de download.

      Alterar a configuração de acompanhamento {width="280"}

Se necessário, selecione a guia Estilos no painel direito para definir as margens do formulário dentro do componente de estrutura.

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

  • Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir margem para todos os lados {width="250"}

  • Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  • Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Bloquear margens para as margens superior inferior e esquerda direita {width="250"}

  • Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

    Definir margens independentes {width="250"}

recommendation-more-help