Componentes do conteúdo content-components
Ao criar conteúdo para emails, páginas de aterrissagem, modelos e fragmentos visuais, use os Componentes de conteúdo para adicionar elementos de design visual. É possível adicionar quantos componentes de conteúdo forem necessários dentro de um ou mais componentes da estrutura, que definem o layout.
Biblioteca de conteúdo
A seção Conteúdo, na parte inferior da biblioteca de Componentes, exibe os componentes de conteúdo disponíveis:
Barras de ferramentas do componente de Conteúdo
Cada tipo de componente de conteúdo exibe uma barra de ferramentas ao selecioná-la na tela. As ferramentas disponíveis, que variam de acordo com o tipo de componente, fornecem uma maneira fácil de trabalhar com o componente diretamente no conteúdo renderizado. Inclui formatação e recursos funcionais aplicáveis ao tipo de componente.
Ferramentas de formatação
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Aplique negrito, itálico, sublinhado ou tachado, sobrescrito ou subscrito à cadeia de texto selecionada. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Aplique um tipo de alinhamento horizontal ao conteúdo do componente. Escolha 'esquerda', 'centralizada', 'direita' ou 'justificada'. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Aplique formatação de lista ordenada ou não ordenada ao texto do componente. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Aplique a formatação em nível de cabeçalho ao parágrafo para o local do cursor. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Aplicar tamanho de fonte ao texto selecionado. Clique na ferramenta e escolha o tamanho ou insira o valor px. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Aplicar cor da fonte ao texto selecionado. Escolha uma cor no seletor e use o controle deslizante de cores e o campo de cores para selecionar a cor. Ou você pode inserir um valor RGB, HSL, HSB ou hexadecimal conhecido. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Crie um link clicável (URL externo ou página de aterrissagem) para o texto ou elemento selecionado. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Ferramenta | Uso | Componentes |
|
Remova o link clicável (URL externo ou página de aterrissagem) do texto ou elemento selecionado. |
|
Ferramentas funcionais
Adicionar um componente de conteúdo ao seu design
-
No espaço de design visual, use um modelo existente ou adicione os componentes de estrutura necessários em uma tela vazia para definir o layout.
-
Na biblioteca Componentes, segure a alça de arrastar
É possível adicionar vários componentes em um único componente de estrutura e em cada coluna de um componente de estrutura.
-
Ajuste a exibição do componente usando as guias Configurações e Estilo à direita ou a barra de ferramentas de contexto exibida na tela.
Por exemplo, você pode alterar o estilo do texto, o preenchimento ou a margem do componente.
Como você está trabalhando com seu design, também pode remover ou duplicar um componente.
Configurações e estilos do componente de Conteúdo
Depois de adicionar um componente, ele é selecionado no espaço de design visual e suas propriedades são exibidas no painel direito. Você também pode selecionar um componente a qualquer momento para alterar as configurações e os estilos. Muitas configurações e estilos são específicos para o componente, mas há algumas configurações e estilos padrão que você pode aplicar a qualquer componente de conteúdo selecionado.
Opções de exibição
Se desejar excluir o componente da exibição de desktop ou dispositivo móvel, altere a configuração Opções de Exibição. O padrão, Mostrar em todos os dispositivos, habilita a exibição em todos os dispositivos. Escolha outra configuração para tornar o componente exclusivo por tipo de dispositivo:
- Mostrar apenas em dispositivos desktop - Escolha esta configuração quando desejar exibir o componente em dispositivos desktop e excluí-lo de dispositivos móveis.
- Mostrar apenas em dispositivos móveis - Escolha essa configuração quando desejar exibir o componente em dispositivos móveis, como telefones e tablets, e excluí-lo de dispositivos desktop.
Container
Use um container para aplicar um estilo específico a um grupo de componentes de conteúdo. Adicione um componente Contêiner e adicione outros componentes de conteúdo dentro dele. Este componente é semelhante à forma como você pode usar um elemento div no HTML. É possível aplicar um estilo distinto ao contêiner que difere do estilo aplicado aos componentes de conteúdo que ele contém.
Por exemplo, adicione um componente Container e, em seguida, adicione um componente Botão dentro desse container. Você pode usar um estilo de área específico para o contêiner e estilizar o botão e seu plano de fundo conforme necessário.
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.
-
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:
-
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.
-
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-stylepadrão. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
-
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.
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
-
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.
-
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.
-
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.
-
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.
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.
-
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.
-
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.
Botão
Use o componente Botão para inserir um ou vários botões clicáveis em seu conteúdo. Use botões para redirecionar visualizadores de página ou destinatários de email para conteúdo de suporte (página de aterrissagem publicada ou um link externo).
Adicionar o texto do botão
Quando o componente de botão é exibido na tela, a barra de ferramentas inclui opções para formatação de texto, bem como personalização e variantes condicionais. Para obter mais informações sobre as opções da barra de ferramentas do editor, consulte #.
Ao inserir o texto do rótulo do botão e definir a formatação, o botão é redimensionado para acomodar o conteúdo.
Definir opções de link
Na guia Configurações, use as opções Link para definir o texto do botão, o destino do link e o comportamento do navegador para carregar a página de destino.
-
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 (
-
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 (
-
-
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.
-
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 estilos
Personalize o estilo do botão na guia Estilos.
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.
No painel direito com a guia Estilos selecionada, expanda a seção Texto e defina as opções para os estilos de texto do componente:
-
Família da fonte - Clique no ícone de seta para baixo para selecionar uma família de fontes para o texto no componente.
-
Tamanho da fonte - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o tamanho da fonte ou insira um valor. Para valores inseridos, é possível usar decimais.
-
Altura da linha - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir a altura da linha ou insira um valor. Para valores inseridos, é possível usar decimais.
-
Estilos de texto - Selecione o ícone para o estilo de texto: Negrito, Itálico, Sublinhado ou Tachado.
-
Alinhamento do texto - Selecione o ícone para o alinhamento do texto horizontal: Esquerda, Centralizada, Direita ou Justificada.
-
Cor da fonte - Clique no quadrado de cores para escolher uma cor de fonte 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.
-
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:
-
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.
-
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-stylepadrão. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
-
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.
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
-
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.
-
Expanda a seção Alinhamento e escolha o alinhamento horizontal e vertical que deseja usar. Os estilos de alinhamento afetam como o componente do HTML é posicionado dentro do componente que o contém (estrutural ou contêiner).
O alinhamento horizontal é convertido em um estilo CSS text-align padrão, e você pode escolher entre esquerda, centro ou direita. O alinhamento vertical é convertido para o estilo CSS vertical-align padrão e você pode escolher entre cima, meio ou baixo.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
Texto
Use o componente de Texto para inserir um bloco de texto no conteúdo. Quando o componente de texto for selecionado na tela, insira o texto e use as opções da barra de ferramentas para adicionar formatação e opções em linha, incluindo tokens de personalização e variantes condicionais.
Personalize o estilo do componente de texto na guia Estilos.
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.
Esses estilos são aplicados ao bloco de texto inteiro. É possível aplicar o estilo em linha a uma cadeia de caracteres de texto selecionada.
No painel direito com a guia Estilos selecionada, expanda a seção Texto e defina as opções para os estilos de texto do componente:
-
Família da fonte - Clique no ícone de seta para baixo para selecionar uma família de fontes para o texto no componente.
-
Tamanho da fonte - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o tamanho da fonte ou insira um valor. Para valores inseridos, é possível usar decimais.
-
Altura da linha - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir a altura da linha ou insira um valor. Para valores inseridos, é possível usar decimais.
-
Estilos de texto - Selecione o ícone para o estilo de texto: Negrito, Itálico, Sublinhado ou Tachado.
-
Alinhamento do texto - Selecione o ícone para o alinhamento do texto horizontal: Esquerda, Centralizada, Direita ou Justificada.
-
Cor da fonte - Clique no quadrado de cores para escolher uma cor de fonte 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.
-
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:
-
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.
-
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-stylepadrão. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
-
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.
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
-
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.
-
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
Divisor
Adicione um componente Divider para incorporar uma divisão linear entre seções do seu conteúdo.
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.
No painel direito, com a guia Estilos selecionada, expanda a seção Linha e defina as opções de altura e largura do componente:
-
Cor - Clique no quadrado colorido 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.
-
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.
- 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 - Escolha um valor na lista de valores CSS
line-stylepadrão, como Sólido, Pontilhado e Tracejado.
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
-
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.
-
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.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
HTML
Use o componente HTML para adicionar partes do seu HTML existente. Esse componente fornece uma maneira fácil de criar elementos modulares do HTML que reutilizam o conteúdo externo.
-
Selecione o componente na tela de desenho e clique no ícone Mostrar o código-fonte na barra de ferramentas.
-
Cole a HTML na caixa de texto e clique em Salvar.
Editar caixa de diálogo do HTML
Se o HTML for válido, ele renderizará o elemento na tela. Se for um elemento que mapeia para um dos outros componentes de conteúdo, você poderá alterar as configurações e os estilos no painel direito de acordo com o tipo de componente. Caso contrário, permanecerá como um componente do HTML.
Para um componente do HTML, você pode definir os seguintes estilos para todo o componente do HTML no painel direito:
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.
-
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:
-
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.
-
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-stylepadrão. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
-
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.
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
-
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.
-
Expanda a seção Alinhamento e escolha o alinhamento horizontal e vertical que deseja usar. Os estilos de alinhamento afetam como o componente do HTML é posicionado dentro do componente que o contém (estrutural ou contêiner).
O alinhamento horizontal é convertido em um estilo CSS text-align padrão, e você pode escolher entre esquerda, centro ou direita. O alinhamento vertical é convertido para o estilo CSS vertical-align padrão e você pode escolher entre cima, meio ou baixo.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
Imagem
Use o componente Imagem para inserir um ativo de imagem no seu conteúdo. Quando o componente Imagem é selecionado na tela, você pode adicionar ou alterar o arquivo de ativo da imagem exibida.
Adicionar o ativo de imagem
Escolha o tipo de origem do ativo e selecione um arquivo de imagem:
-
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.
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.
-
-
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.
-
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.
-
-
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.
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.
Definir opções de link
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.
-
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 (
-
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 (
-
-
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.
-
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.
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.
-
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:
-
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.
-
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-stylepadrão. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
-
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.
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
-
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.
-
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.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
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.
-
Para adicionar um tipo de rede social, clique no ícone Adicionar ( + ) e escolha um tipo de rede social que deseja adicionar.
-
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.
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:
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.
-
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:
-
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.
-
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-stylepadrão. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
-
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.
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
-
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.
-
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.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
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.
-
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.
-
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. 
-
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.
-
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.
-
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.