Todas as coleções
Construtor/Builder
Elementos
Como funciona o elemento Embed no RockFunnels
Como funciona o elemento Embed no RockFunnels

Saiba como inserir códigos por elemento Embed em suas páginas.

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

O elemento Embed é uma solução para o caso de precisar inserir um código externo (script) em locais específicos da página para que gere elementos externos que não estejam disponíveis de forma nativa no RockFunnels. As possibilidades são muitas, mas para citarmos alguns como exemplo, é possível inserir códigos para gerar vídeos, botões, animações, formulários, etc. ...

Atenção: Nem todos os códigos são compatíveis com a nossa estrutura, sendo necessário testar o comportamento do código na página publicada.


Em caso de dúvidas sobre como adicionar um elemento embed em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:


Após adicionar um elemento Embed em sua página, no local onde adicionou o elemento será apresentado um texto, conforme imagem abaixo:

A principal particularidade do elemento Embed é que ele será exibido (renderizado) no exato local onde foi inserido na página.

Para adicionar um código pelo elemento de Embed, clique no elemento para abrir na tela uma janela, conforme imagem abaixo, onde poderá inserir o código conforme desejado.

Para excluir o elemento Embed clique no ícone em formato de lixeira ou para fechar a janela, clique no ícone no formato X.

Atenção: O elemento que inserir por código ficará visível apenas na página publicada.


Acesse a engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos abaixo.

Ajustes

· Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

Posição | Margem | Espaçamento Interno

Nas configurações de posição é possível configurar a posição (esquerda, centro, direita), margem (topo), espaçamento interno (topo, baixo, esquerda, direita) do elemento, inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.


Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Avançado

· Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:

Comportamento:

- Uma vez > o efeito de animação será apresentado apenas uma vez.

- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).

Ativação:

- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

· CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:

https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels


Para saber como integrar formulários por elemento Embed, acesse nosso tutorial sobre integração por elemento Embed no link abaixo:

https://help.rockfunnels.com/pt-BR/articles/5742393-o-que-e-integracao-por-embed-e-como-faze-la


Respondeu à sua pergunta?