Componentes da estrutura structure-components

Escolha este tipo para procurar e selecionar um ativo de imagem na biblioteca B2B edition do Journey Optimizer.

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

  {width="700" modal="regular"}

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.

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

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.

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

  {width="700" modal="regular"}

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.

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

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

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 separadamente:

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

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

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

  {width="250"}

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.

{width="250"}

• Cor do plano de fundo - 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.

  {width="300"}

• Imagem de plano de fundo - Para habilitar as configurações de imagem de plano de fundo, mova o seletor de alternância.

  {width="250"}

  Escolha o tipo de origem do ativo e selecione um arquivo de imagem.

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.

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

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

Expanda a seção Alinhamento e escolha o alinhamento vertical que deseja usar: superior, meio ou inferior. Este estilo traduz para um estilo CSS vertical-align padrão e afeta o posicionamento dentro do componente que o contém.

{width="250"}

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 separadamente:

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

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

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

  {width="250"}

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.

{width="250"}