Criação de layouts de aparência de edifícios
O que há nesta página
Sobre a criação de layouts de aparência de edifícios
Qdica: As seções desta página descrevem como editar um criativo de sobreposição no Appearance Studio. Para obter informações sobre como editar um anúncio incorporado, consulte “Anúncios incorporados”.
Esta página explica como criar um layout visual para uma interceptor digital. Um layout é composto por vários elementos. Cada elemento individual é um componente diferente da sua interceptor digital. Isso inclui caixas de texto, gráficos, pesquisas incorporadas e muito mais.
Você criará o layout do tema na guia “Build ” do Appearance Studio.
Os seguintes elementos estão disponíveis para personalizar seu layout:
- Texto: Adicione uma caixa de texto.
- Imagem: Adicione uma imagem.
- Botão: Adicione um botão para os visitantes clicarem, que inicie uma pesquisa ou abra um link externo.
- Conexão incorporada: Incorpore uma pesquisa ou um agente diretamente na interceptor.
- Botão de feedback: Adicione um botão de feedback para que os usuários possam clicar nele e abrir a janela interceptor.
- Linha: Agrupe os elementos em linhas para que eles sejam exibidos horizontalmente, em vez de verticalmente.
- Espaçador: Adiciona um espaço vazio entre outros elementos.
Desfazer edições e salvar alterações
O Appearance Studio é um editor flexível que permite controlar o salvamento e a reversão das alterações feitas no layout de aparência. Ao editar seu layout, você pode usar os botões “Desfazer” e “Refazer” para reverter e restaurar ações conforme necessário (por exemplo, se você excluir acidentalmente um elemento de caixa de texto).
Suas edições não serão finalizadas até que você clique no botão “Salvar aparência”, localizado na parte inferior do editor.
Atenção: Depois de salvar, você não poderá mais desfazer ou refazer as ações realizadas antes do salvamento. Observe que não é possível reverter seu layout para uma versão salva anteriormente.
Depois de salvar o tema, você pode testar o novo visual no seu site e, em seguida, publicar as alterações na versão ativa interceptor. Isso funciona da mesma forma que publicar qualquer alteração em uma interceptor ativa. Consulte as páginas a seguir para obter mais informações:
- Teste de alterações Interceptor não publicadas
- Ativação, publicação e gerenciamento de Interceptores
Elementos móveis
Os elementos aparecerão em uma lista vertical no Appearance Studio. A ordem em que os elementos aparecem nesta lista determina a ordem em que o elemento aparece no seu layout. O elemento superior ficará mais à esquerda, enquanto o elemento inferior ficará mais à direita, com todos os demais aparecendo entre eles.
A maneira mais fácil de reorganizar os elementos é clicar neles com o mouse e arrastá-los para um novo local na lista.
No entanto, você pode gerenciar um elemento específico passando o mouse sobre ele e selecionando uma opção:
- Copiar: Cria uma cópia do elemento.
- Excluir: exclui o elemento.
- Mover para o topo da estrutura: move o elemento para o topo da lista de elementos.
- Mover o elemento para cima: move o elemento uma posição para cima na lista de elementos.
- Mover o elemento para baixo: move o elemento uma posição para baixo na lista de elementos.
- Mover para o final da estrutura: move o elemento para o final da lista de elementos.
Configurando o contêiner Interceptor
O contêiner contém todos os elementos da sua interceptor e determina como eles são exibidos no seu site. Todos os elementos ficarão aninhados dentro do contêiner.
Qdica: Um único contêiner suporta até 15 elementos. O botão “Feedback” não está incluído nesse limite.
Clique em um contêiner para abrir suas configurações. Você pode personalizar o seguinte:
Ignorar as configurações Interceptor:
- Ativar: Incluir um ícone para fechar. Se você quiser incluir um “X” para fechar sua interceptor. Observe que não é necessário incluir um “X”. Você pode adicionar um botão que feche a janela de interceptor.
- Defina a cor do ícone.
- Determine o deslocamentovertical e horizontal, em pixels.
As configurações de layout controlam o seguinte:
- Tipo de exibição: determina o posicionamento do anúncio. Escolha entre “Overlay” (exibido sobre o conteúdo do site) ou “Inline” (incorporado à página, deslocando o conteúdo para cima ou para baixo).
- Largura (px): Controla a largura máxima do elemento, em pixels. Você também pode ativar ou desativar a opção “ Full width” para que o contêiner ocupe sempre toda a largura da sua página da web.
- Espaçamento entre elementos (px): Define o espaçamento vertical padrão entre os elementos empilhados dentro do contêiner.
- Padding (px): Controla o tamanho da margem dentro da borda do contêiner, deslocando todos os elementos internos para dentro. Selecione “Usar preenchimento igual” para aplicar o mesmo valor aos quatro lados, ou desmarque essa opção para definir o preenchimento superior, inferior, esquerdo e direito individualmente.
Se o tipo de exibição estiver definido como “Overlay”, escolha a posição do contêiner na página da web definindo os alinhamentos horizontal e vertical e selecionando se deseja incluir uma margem.
UnderStyle, personalize a aparência do contêiner:
- Cor de fundo: Escolha uma cor ou insira o valor HEX ou RGBA. Você também pode escolher a opção “Sem cor” para selecionar a cor transparente.
- Borda: Defina a largura da borda (px) e a cor da borda.
- Canto arredondado (px): Aumenta a curvatura dos cantos externos da interceptor. Selecione “Usar cantos arredondados personalizados” para definir curvas diferentes para os cantos superior, inferior, esquerdo e direito, ou selecione “Usar cantos arredondados iguais” para aplicar a mesma configuração a todos os cantos.
- Sombra projetada: aplica uma sombra atrás do quadro interceptor. Escolha entre “Nenhum”, “Leve”, “Médio” ou “Pesado”.
Qdica: Ative a opção “Mostrar diretrizes de espaçamento” para exibir o espaçamento e o preenchimento do elemento selecionado, destacado em rosa. É possível visualizar as diretrizes de espaçamento no nível do contêiner, no nível da linha e no nível de cada elemento. As diretrizes de espaçamento podem ajudar você a visualizar como os elementos estão dispostos uns em relação aos outros.
Formatação de texto
Você pode personalizar o texto no seu layout. Isso inclui elementos de texto e outros elementos que contêm componentes de texto, como botões e botões de feedback.
Esta seção abordará como adicionar um elemento de texto, mas os princípios gerais de edição de texto se aplicam a qualquer lugar em que seja possível editar texto no Appearance Studio.
Clique em “Adicionar ao contêiner”.
Selecione Texto.
Insira seu texto na caixa de texto. Destaque o texto ao qual você deseja aplicar formatação.
Use a barra de ferramentas para ajustar a formatação do texto:
- Família de fontes: o tipo de fonte utilizado. Selecione “Padrão do sistema” para herdar automaticamente a fonte do site onde o interceptor está implantado.
- Tamanho da fonte: O tamanho do texto em pixels. O valor padrão é 12.
- Formato do texto: as opções incluem Negrito, Itálico, Sublinhado, Cor do texto e Cor de destaque.
- Alinhamento: Alinha o texto à esquerda, ao centro ou à direita do bloco que o contém.
- Hiperlink: Acesse um URL externo ou inicie sua pesquisa vinculada.
- Remover formatação: Remove a formatação do texto selecionado, revertendo-o para as configurações padrão.
Você pode ajustar o tamanho da caixa de texto na seção “Layout” com as seguintes configurações:
- Largura: Ajuste a largura da caixa.
- Porcentagem (%): ajusta o tamanho da caixa de texto em relação ao seu contêiner.
- Fixo (px): Largura fixa em pixels da caixa de texto.
- Espaço interno (px): Ajuste o espaço interno para adicionar espaço dentro do fundo do bloco de texto. Você pode usar um preenchimento igual ou personalizado para os lados superior, inferior, esquerdo e direito.
Se a caixa de texto ocupar menos de 100% da largura do contêiner, você pode configurar sua posição (itsPosition) escolhendo um alinhamento à esquerda (Left), ao centro (Center) ou à direita (Right).
As configurações de estilo permitem que você personalize o seguinte:
- Fundo e borda: aplique uma cor de fundo, uma largura de borda e uma cor de borda específicas.
- Cantos arredondados: ajuste o arredondamento dos cantos da caixa de texto, independentemente da aparência geral do contêiner. Você pode usar cantos arredondados iguais ou personalizados nos quatro cantos.
Inserção de imagens
Você pode inserir imagens no layout do seu tema usando o elemento ` Graphic `.
Qdica: Os tipos de arquivo compatíveis são JPEG, PNG e GIF. O tamanho máximo do arquivo é de 25 MB.
Click Add to container.
Selecione “Gráfico”.
Clique em “Escolher imagem” e selecione qualquer imagem à qual você tenha acesso.
Qdica: Para adicionar um novo elemento gráfico, selecione “Ir para a biblioteca” e, em seguida, faça o upload do elemento gráfico para a sua biblioteca.
Configure o tamanho da imagem na seção Layout:
- Largura: Selecione “ ” ou “Fixed (px)” para definir uma largura específica em pixels para a imagem. Selecione “ %” para redimensionar a imagem em relação ao seu contêiner.
- Espaço interno (px): Ajuste o espaço interno para criar uma moldura ao redor da imagem. Você pode aplicar o mesmo preenchimento em todos os lados da imagem ou clicar em “Usar preenchimento personalizado” para definir uma largura de preenchimento diferente para cada lado.
Se a imagem tiver menos de 100% da largura do contêiner, você pode definir sua posição na seção “Position ”. Defina o alinhamento da imagem como Esquerda, Central ou Direita.
A seção “Style” permite definir uma borda e uma sombra projetada:
- Borda, cor da borda e cantos arredondados: adicione uma borda colorida ao gráfico e ajuste o raio dos cantos para criar imagens arredondadas ou circulares.
- Sombra projetada: Aplica um efeito de sombra. As opções incluem “Nenhuma”, “Leve”, “Média” ou “Intensa”.
Elementos de botão
Os botões estimulam a ação dos visitantes. Você pode adicionar um botão ao layout de sua interface e definir o que acontece quando ele é clicado, personalizando sua aparência nos diferentes estados interativos.
Click Add to container.
Botão “Selecionar”.
Personalize o texto do seu botão. Use a barra de ferramentas na parte superior para definir a fonte, o tamanho e adicionar formatação adicional, como um ícone. Consulte “Personalização de texto” para obter mais informações.
Qdica: Selecione “Padrão do sistema” para herdar automaticamente a fonte do site onde o interceptor está implantado. Por motivos de acessibilidade, o texto e o ícone do botão devem ter a mesma cor; portanto, a formatação de cor por palavra ou por letra não está disponível em botões.
Escolha o tipo de botão e configure as opções adicionais:
- Iniciar conexão: Abre uma conexão vinculada Qualtrics definida nas configurações de conexão interceptor. Você pode optar por abrir a conexão em uma nova aba, em uma nova janela, na janela atual ou em uma nova sobreposição.
Qdica: Você está limitado a uma conexão por interceptor. Isso significa que, embora você possa adicionar quantos botões de conexão quiser, esses botões só podem levar a um único destino de conexão. Essa é a mesma conexão referenciada pelo elemento “Embed Connection”.
- Link externo: redireciona o usuário para uma URL especificada. Digite a URL completa da página. Você pode optar por abrir a URL em uma nova aba, em uma nova janela ou na janela atual.
- Ignorar: Fecha a janela de interceptor.
Configure o layout do botão:
- Ajuste a largura do botão. Selecione “Largur e (%)” para dimensionar a largura do botão em relação ao seu contêiner. Escolha “ ”. Use a largura fixa (px) para definir a largura do botão em um número específico de pixels.
- Altere o Padding (px), que controla o espaço entre o texto do botão e a borda. Clique em . Use o preenchimento personalizado para ajustar o espaçamento de cada lado do botão individualmente.
Se o botão tiver menos de 100% da largura do contêiner, você pode configurar sua posição. Selecione um alinhamento de : à esquerda, centralizado ou à direita.
Você pode personalizar a aparência de cada estado do botão individualmente :
- Padrão: A aparência do botão antes de o usuário interagir com ele.
- Hover: A aparência do botão quando o usuário passa o cursor sobre ele.
- Ativo: A aparência do botão quando clicado.
Defina a aparência do seu botão para o estado selecionado
- Cores: Defina a cor de fundo, a cor do texto e a cor do ícone (caso seja utilizado um ícone).
- Bordas e cantos: defina a largura da borda, a cor da borda e o raio dos cantos arredondados (em px) (por exemplo, defina um raio de canto alto para criar botões em formato de comprimido).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Qdica: É possível definir a cor de fundo, a cor do texto e a borda para cada estado de forma independente. Para economizar tempo e garantir uma experiência consistente entre os diferentes estados, configure o estado Padrão e, em seguida, clique na opção “Aplicar estilo a todos os estados do botão”.
Qdica: Você pode substituir o texto do botão por um gráfico clicando em “Usar meu próprio botão” e, em seguida, escolhendo uma imagem da sua biblioteca de imagens.
Conexão incorporada
O elemento de conexão “ ” permite que você incorpore uma pesquisa, um agente ou um site externo em seu anúncio. Esse elemento pode ser posicionado, redimensionado e movido em seu layout como qualquer outro elemento.
Qdica: Quer incorporar uma pesquisa vinculada a um botão (um botão de feedback ou um controle deslizante)? Em vez disso, use o elemento “Botão de feedback ”.
Primeiro, você precisará adicionar uma conexão ao seu material publicitário. Na configuração interceptor guiada, clique em “Adicionar conexão” e selecione o recurso que você deseja exibir.
Em seguida, siga estas instruções para adicionar o elemento ao seu layout:
Click Add to container.
Selecione “Incorporar conexão”.
Fechamento automático após a conclusão pesquisa: quando ativada, a janela interceptor tentará fechar automaticamente assim que o usuário chegar à mensagem de fim da pesquisa.
A seção “TheBehavior” mostra o que será exibido aos visitantes. pesquisa do ClickView para visualizar a pesquisa no editor pesquisa.
Layout: Ajuste a forma como deseja que o elemento se encaixe no anúncio:
- Largura: Escolha entre Preenchimento, Fixa (px) ou Porcentagem (%).
- Preencher: Preenche completamente o espaço em que a pesquisa está inserida. Se estiver em uma linha, ocupa toda a largura disponível nessa linha. Se a conexão não estiver alinhada, ela ocupa 100% da largura definida da aparência (independentemente de a aparência estar configurada para largura total, 500 px, etc.).
- Fixo (px): Define a largura da conexão em um número específico de pixels. Só é possível definir uma largura em pixels menor que a largura de exibição ou menor que a largura da coluna na qual a conexão está inserida.
- Porcentagem (%): Define a largura da conexão em relação ao seu contêiner (1–100%). Se estiver em uma linha, trata-se de uma porcentagem da largura disponível da coluna nessa linha. Se não estiver alinhado, será uma porcentagem da largura disponível da aparência.
Qdica: Comece com a opção “Preencher”, a menos que precise de uma personalização mais detalhada para o dimensionamento e o espaçamento, com base em outras restrições de design.
- Altura: Escolha entre “Automático” ou “Altura (px)”:
- Automático: Define o tamanho da conexão com base na configuração da pesquisa (por exemplo, uma pesquisa com uma única pergunta resulta em uma altura automática menor do que uma pesquisa com 3 a 4 perguntas). A altura automática tenta exibir todas as perguntas e o botão “Próximo”. Se a altura pesquisa exceder a altura da página da web, a pesquisa será reduzida para se adequar ao tamanho da página.
- Altura (px): Defina manualmente uma altura específica em pixels para a conexão, mas leve em consideração a altura do seu pesquisa. Se pesquisa sua pesquisa for mais alta do que a altura definida, será adicionada uma barra de rolagem. Se pesquisa seu questionário for mais curto do que a altura definida, será adicionado um espaço em branco extra.
Posição: Escolha o alinhamento do elemento (alinhado à esquerda, ao centro ou à direita). Se a conexão incorporada tiver menos de 100% da largura (sem usar a opção “Preenchimento” e com valor inferior a 100% ao usar a opção %), é possível definir seu alinhamento.
Estilo: Adiciona uma borda colorida ao elemento.
Otimização para Pesquisas incorporadas
Pesquisas adicionadas ao layout da sua página também possuem suas próprias opções de edição, cores e configuração no editor pesquisa. Isso permite que você crie pesquisas robustas e altamente personalizadas, mas é preciso ter cuidado para garantir a coerência entre o design e o conteúdo pesquisa. Aqui estão algumas dicas e truques que você pode seguir:
- Adicione seu logotipo em um único lugar. Se sua pesquisa tiver um logotipo, provavelmente você não precisará incluir um no visual da pesquisa, e vice-versa.
- Use o mesmo código hexadecimal principal da sua pesquisa na aparência do texto, dos botões, dos contornos etc.
- Para tornar uma pesquisa mais compacta em um site ou em um dispositivo móvel, experimente estas configurações do tema:
- O espaçamento entre as perguntas está definido como “Compacto”.
- A largura do texto exibido está definida como “Largura total”.
- Você pode adicionar CSS personalizado à sua pesquisa para personalizar ainda mais sua aparência.
Atenção: Os recursos de codificação personalizada são fornecidos no estado em que se encontram e exigem conhecimento de programação para serem implementados. O suporte da Qualtrics não oferece assistência nem consultoria em codificação customizada. Você sempre pode tentar perguntar à nossa comunidade de usuários dedicados. Caso deseje saber mais sobre nossos serviços de programação personalizada, entre em contato com seu executivo de contas Qualtrics.
Exemplo: Este CSS pode reduzir o espaço entre as perguntas e o botão “Próximo”:
#navigation { padding-bottom: 0rem; padding-top: 1rem; }Este CSS pode remover o contêiner do cabeçalho (oculta tudo o que estiver definido no cabeçalho do tema):
#header-container { display: none !important; }
Qdica: Você pode apresentar uma pesquisa de três maneiras: incorporá-la diretamente na aparência usando o elemento “Conexão de incorporação”, vinculá-la como uma “Conexão de ativação” por meio de um botão ou adicioná-la como um URL externo (com o link anônimo). Configurar sua pesquisa como uma “Conexão Incorporada” é uma prática recomendada, já que é mais fácil editá-la, alterá-la e administrá-la a partir do cartão de conexão pré-configurado.
Botão de feedback
O botão “Feedback” é um elemento especial que você pode adicionar ao seu perfil. Isso adiciona um botão ao lado do seu anúncio, no qual os usuários podem clicar para abrir a janela de interceptor.
Atenção: ao adicionar um botão de feedback ao seu layout, todo o conteúdo existente será removido.
Click Add to container.
Selecione o botão Feedback.
Customize the text for your button. Use the toolbar at the top to set the font, size, and add additional formatting like an icon. See Customizing Text for more information.
Qtip: Select “System Default” to automatically inherit the font of the website where the intercept is deployed. For accessibility, the button text and icon must share the same color, so per-word or per-letter color formatting isn't available on buttons.
Um link externo será adicionado automaticamente ao botão de feedback. Você pode verificar o que está conectado aqui. Se você não quiser uma conexão, pode excluir o elemento “Conexão incorporada”.
Qtip: You are limited to 1 connection per intercept. This means that while you can add as many connection buttons as you like, those buttons can only link to the single connection destination. This is the same connection referenced by the Embed Connection element.
Configure o layout do botão:
- Adjust the Width of the button. Selecione “Largura (%) ” para dimensionar a largura do botão em relação à página inteira. Selecione “Usar largura fixa (px) ” para definir a largura do botão em um número específico de pixels.
Qdica: Recomendamos uma largura entre 15% e 30%.
- Change the Padding (px), which controls the space between the button text and border. Clique em “Usar preenchimento personalizado ” para ajustar o espaçamento de cada lado do botão individualmente.
Configure a posição do botão, que determina onde o botão e interceptor aparecem no seu site:
- Posicionamento: Escolha se o botão ficará à direita, à esquerda ou acima da interceptor. Isso afetará a posição em que a interceptor aparecerá na página (por exemplo, se o botão estiver na parte superior e alinhado ao centro, a interceptor aparecerá na parte inferior da página).
- Alinhamento: Escolha entre Esquerda, Central e Direita, ou um alinhamento personalizado.
Você pode personalizar a aparência de cada estado do botão individualmente :
- Default: How the button looks before the user interacts with it.
- Hover: How the button looks when the user hovers their cursor over it.
- Active: How the button looks when clicked.
Defina a aparência do seu botão para o estado selecionado:
- Colors: Define the Background color, Text color, and Icon color (if an icon is used).
- Border & Corners: Set the Border width, Border color, and Rounded corner (px) radius (e.g., set a high corner radius to create pill-shaped buttons).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Qtip: You can set the Background color, Text color, and Border for each state independently. Para economizar tempo e garantir uma experiência consistente entre os diferentes estados, configure o estado Padrão e, em seguida, clique na opção “ ” (Aplicar estilo a todos os estados do botão).
Clique no Container e escolha um método de exibição para o botão:
- Slider: O contêiner está vinculado ao botão. Quando os usuários clicam no botão, o contêiner desliza para fora, ficando embaixo ou ao lado dele.
- Overlay: O contêiner não está vinculado ao botão. Quando os usuários clicam no botão, uma janela sobreposta aparece no centro da página. O Overlay também permite que você escolha um fundo esmaecido por trás da janela de sobreposição.
- Nova janela: Abre o contêiner em uma nova janela do navegador.
Qdica: Como se trata de uma nova janela do navegador, apenas uma conexão incorporada pode ser inserida no contêiner. Outros elementos (Texto, Gráfico, Botão, Linha, Espaçador) não são compatíveis com novas janelas. Os controles de layout, altura e estilo também não estão disponíveis, já que são a janela do navegador que os controla.
Se for exibir o contêiner como um controle deslizante ou sobreposição, você pode personalizar o layout e o estilo:
- Largura e altura: Escolha a largura do contêiner como uma porcentagem da página ou como uma largura fixa em pixels, e escolha uma altura fixa em pixels ou baseada em porcentagem.
- Espaçamento entre elementos: Igual ao dos controles de contêiner padrão.
- Preenchimento (px): Controla o espaçamento da margem dentro da borda do contêiner, deslocando os elementos internos para dentro.
Qdica: Clique em “Usar preenchimento igual” para aplicar o mesmo valor aos quatro lados, ou você pode definir os valores de Cima, Baixo, Esquerda e Direita individualmente.
- Element spacing (px): Defines the default vertical gap between elements stacked within the container.
- Cores, plano de fundo, cantos arredondados e sombra projetada: iguais aos controles padrão do contêiner.
Você pode adicionar elementos adicionais ao seu botão de feedback (por exemplo, adicionar texto para incluir uma política de privacidade).
Versão para celular
Você pode personalizar individualmente a posição e o alinhamento do botão de feedback para dispositivos móveis:
Ative a visualização para celular.
Clique no botão “ ” do ClickFeedback para editar as seguintes configurações:
- Posicionamento: Escolha onde o botão de feedback aparecerá no elemento.
- Alinhamento: Escolha em que parte da tela o botão de feedback será exibido.
- Ocultar elemento em dispositivos móveis: ative essa opção para ocultar completamente o botão de feedback em dispositivos móveis.
ClickContainer para editar o método `toDisplay`, que determina como o botão de feedback aparece no celular:
- Pull-up: O contêiner desliza para cima a partir da parte inferior da tela. Escolha a porcentagem da tela do celular que o menu suspenso deve ocupar.
- Nova aba: Ao tocar no botão de feedback, o conteúdo do contêiner é aberto em uma nova aba do navegador, em vez de aparecer como um controle deslizante ou sobreposição.
Qdica: Consulte “Ocultando elementos em dispositivos móveis ” para obter informações sobre como ocultar elementos individuais em dispositivos móveis (por exemplo, um gráfico).
Linhas
Por padrão, o Appearance Studio empilha os elementos verticalmente dentro do seu criativo. No entanto, é possível reorganizar os elementos horizontalmente agrupando-os dentro de um aRow. Você pode pensar na linha como um subcontêiner no qual você coloca elementos para organizá-los horizontalmente.
Qdica: Se os seus elementos estiverem dispostos em uma linha, o próprio elemento não terá a opção de definir o tamanho na seção “Layout”. O tamanho de um elemento em uma linha é definido no nível da linha.
Para adicionar elementos em uma linha:
Click Add to container.
Selecione a linha.
Para adicionar um novo elemento à linha, clique em “Adicionar à linha”. É possível adicionar elementos de Texto, Gráfico, Botão e Espaçador dentro de uma linha. Consulte a seção indicada no link para obter mais informações sobre como personalizar esses elementos.
É possível mover os elementos existentes arrastando-os e soltando-os dentro do contêiner da linha.
Qdica: Você pode ter até 5 elementos em uma linha. Os elementos aparecerão na peça publicitária da esquerda para a direita, na mesma ordem em que estão listados no editor.
Clique na linha para abrir um painel de participantes lateral e personalizar a aparência da linha. Estão disponíveis as seguintes opções para gerenciar a linha:
- Desagrupar linha: Desagrupar os elementos e excluir o elemento da linha.
- Copiar: Faça uma cópia da linha e de todos os elementos nela contidos. Essa opção é perfeita para criar uma grade uniforme de itens.
- Excluir: exclui a linha e todos os elementos contidos nela.
Atenção: ao excluir uma linha, todo o conteúdo nela contido é excluído. Se necessário, você pode desfazer suas alterações imediatamente.
As opções de layout contêm as seguintes configurações para personalizar a forma como os elementos são dispostos na linha:
- Largura: Ajuste a largura total da linha:
- Fixo (px): Define uma largura específica em pixels para a linha.
- Porcentagem (%): Dimensiona a linha em relação ao contêiner do criativo.
- Largura do elemento: ajuste a largura de cada elemento da linha:
- Largura igual: a largura da linha será dividida igualmente entre os elementos.
- Personalizado: Defina porcentagens de largura personalizadas para cada elemento. A porcentagem total não pode ultrapassar 100%, mas pode ser inferior a 100%. Se o valor for inferior a 100%, Qualtrics ajustará o tamanho e adicionará espaço entre os elementos, quando for necessário.
- Espaçamento: Ajuste o espaçamento entre os elementos dentro da linha:
- Espaçamento entre elementos (px): Controla o espaço horizontal diretamente entre os elementos posicionados lado a lado. Aumente esse valor se os elementos parecerem muito próximos uns dos outros.
- Preenchimento (px): Adiciona espaço dentro da linha, afastando todos os elementos internos do limite externo da linha.
Selecione o alinhamento do elemento, que determina como cada elemento se alinha verticalmente dentro da linha. Você pode escolher entre “Superior”, “Médio” ou “Inferior”.
Qdica: O posicionamento vertical afeta apenas os elementos cuja altura é menor do que a altura total da linha. Um elemento com altura definida como 100% ocupa toda a linha e não é afetado.
Configure a aparência da sua linha com as opções de estilo:
- Defina a cor de fundo.
- Bordas e cantos: defina a largura da borda, a cor da borda e o raio dos cantos arredondados (em px) (por exemplo, defina um raio de canto alto para criar uma linha em formato de comprimido).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Qdica: As cores e as edições nas linhas substituem as cores definidas no contêiner. Se você quiser que sua linha fique transparente e herde a cor do contêiner, defina a linha como “Sem cor”.
Qdica: As linhas e suas formatações podem ser usadas para criar diferentes caixas e blocos dentro do layout da sua apresentação. Por exemplo, se você quiser que sua aparência fique metade branca e metade azul, pode adicionar duas linhas e definir as respectivas cores.
Espaçadores
Os elementos espaçadores criam espaços verticais precisos entre outros elementos. Adicione-os a uma linha para criar um espaço horizontal entre os elementos da mesma linha.
Clique em “Adicionar ao contêiner”.
Selecione “Espaçador”.
Ajuste a altura (px) do espaçador, em pixels. O valor padrão é 50 px.
Qdica: Se o espaçador estiver em uma linha, ele será controlado pelas configurações da linha.
Personalização de experiências para dispositivos móveis
Você pode personalizar a experiência para dispositivos móveis ocultando elementos específicos apenas nesses dispositivos.
Ativar visualização para dispositivos móveis.
- Clique na opção para ocultar o elemento em dispositivos móveis.
Qdica: A visualização para dispositivos móveis exibe uma pré-visualização responsiva do seu criativo, além de um conjunto específico de controles exclusivos para dispositivos móveis (ocultar elementos e posicionamento/alinhamento/exibição do botão de feedback). Todas as outras edições de layout e estilo devem ser feitas na visualização para desktop.
Modelos de layout
Há uma variedade de modelos de layout à sua disposição para ajudar você a começar a criar seus materiais publicitários. Você pode optar por começar com um modelo ou mudar para um mais tarde.
Para alterar o layout, clique no menu com os três pontos ao lado do botão “Adicionar ao contêiner” e, em seguida, escolha uma opção:
- Redefinir o layout atual: Se você começou com um modelo, essa opção fará com que o modelo volte à configuração original.
- Selecione um novo layout: mude para um modelo de layout diferente. A escolha de um modelo substitui qualquer elemento que esteja atualmente em seu material publicitário.
- Excluir toda a configuração: Inicia com uma tela em branco.
Atenção: Se você excluir ou substituir seu material criativo ao reiniciar ou ao mudar para um layout diferente, não será possível recuperar a versão anterior.
Modelos padrão de sobreposição
Os layouts pré-configurados a seguir incluem:
- Popover central: uma sobreposição de alta visibilidade que aparece sobre o conteúdo do seu site para chamar a atenção dos usuários para uma única mensagem.
- Barra de informações: uma faixa que ocupa toda a largura e fica na parte superior ou inferior do conteúdo da página, ou que pode deslocar o conteúdo da página para cima ou para baixo.
- Notificação no canto: uma notificação educada que aparece deslizando no canto da janela de visualização. Ele notifica os usuários sem bloquear a tela principal.
- Pesquisa Incorporada: Uma sobreposição na barra lateral que se abre na edge da tela para coletar as respostas do usuário por meio de uma pesquisa totalmente integrada.
- Controle deslizante do botão de feedback: Um botão fixado em uma das laterais da janela do navegador. Ao clicar nele, ele desliza para fora da página e se transforma em um link.
- Sobreposição do botão de feedback: Um botão fixado em um dos lados da janela do navegador. As conexões são abertas em uma janela sobreposta quando se clica no botão.
Modelos embutidos padrão
Estão disponíveis os seguintes layouts pré-configurados para criativos incorporados:
- Pesquisa embutida: uma pesquisa incorporada diretamente ao seu site, que permite que os usuários respondam sem interromper a navegação.
- Sugestão de chamada à ação: uma sugestão embutida no seu site que permite que os usuários interajam diretamente na página.
- Cartão de destaque: Um cartão incorporado ao conteúdo da sua página que destaca mensagens importantes sem interferir no layout ao redor.
Anúncios incorporados
Esta seção descreve como editar um anúncio incorporado e as opções disponíveis especificamente para anúncios incorporados. Para editar um criativo incorporado no Appearance Studio,selecione “Incorporado” como tipo de interceptor ao criar uma interceptor guiada. Para obter informações sobre como editar criativos de sobreposição, consulte as outras seções desta página.
Layouts de aparência
No editor de aparência, você pode escolher entre um modelo de layout, criar um layout do zero ou selecionar Feedback com modelo.
Qdica: Você pode alternar entre diferentes layouts após a criação, a menos que escolha a opção “Feedback com modelo”. O feedback baseado em modelo cria automaticamente uma pesquisa vinculada à interceptor e à aparência. Se você começar com um feedback baseado em modelo e depois removê-lo, não será possível recuperar a aparência original nem pesquisa vinculada a ele.
Diferenças de aparência incorporadas
As aparências incorporadas são criadas da mesma forma que as aparências sobrepostas, utilizando contêineres, linhas e elementos. Tenha em mente as seguintes dicas ao editar a aparência de um anúncio incorporado:
- Informações sobre o contêiner: Defina a cor de fundo do contêiner como Sem cor se você quiser que o visual herde o plano de fundo da sua página da web.
- Borda do contêiner: Adicione uma borda ao contêiner se quiser que ele tenha a aparência de um cartão distinto na página.
- Elementos não suportados: Os seguintes elementos não estão disponíveis em aparências incorporadas:
- Um botão “Fechar” no contêiner
- Uma sombra projetada no contêiner
- Animações de entrada/saída ou temporizadores de exibição
- Botão de feedback / Elementos deslizantes
Adicionando um seletor CSS
interceptores incorporadas utilizam um seletor CSS para determinar em que parte da página sua interceptação será exibida.
Abra as ferramentas de desenvolvedor do seu navegador e localize o elemento na página que deve conter o elemento incorporado.
Clique com o botão direito do mouse no elemento e copie seu seletor.
Clique Selecione o seletor CSS no Appearance Studio.
Cole o seletor no campo “Seletor CSS”.
Se desejar, defina quantas vezes a interceptor será exibida na página caso seu seletor corresponda a vários elementos. Por exemplo, você pode inserir o mesmo estilo após cada seção de artigo em uma página.
Clique Salvar seletor CSS.
Qdica: A aparência incorporada sempre será adicionada ao final do elemento correspondente ao seu seletor CDSS. Não é possível inseri-lo em uma posição diferente dentro do elemento.
Dimensionamento incorporado
A largura e a altura das aparências incorporadas oferecem mais opções de personalização do que as aparências sobrepostas. Essas configurações determinam como a aparência é redimensionada dentro do elemento selecionado pelo seu seletor CSS.
Largura:
- Preenchimento: O contêiner terá 100% da largura do elemento pai.
- Corrigido: O contêiner terá uma largura definida.
Altura:
- Auto: A altura do contêiner será ajustada de acordo com seu conteúdo. Por exemplo, uma pesquisa com uma única pergunta terá uma altura menor do que uma pesquisa com 3 a 4 perguntas.
- Altura: O contêiner terá uma altura definida.
Qdica: Se você estiver incorporando um agente, recomenda-se definir uma altura fixa. Como as respostas dos agentes podem variar, é preferível manter um tamanho consistente em vez de ajustar automaticamente a altura. Se você estiver incorporando conteúdo que deva se ajustar dinamicamente a todos os tamanhos de tela ou se expandir para acomodar o conteúdo, recomenda-se definir a altura e a largura como automáticas.
Isso é ótimo! Obrigado pelo seu feedback!
Obrigado pelo seu feedback!