Incorporação de código personalizado - Ajuda do Webflow
Adicione blocos de código personalizados ao seu site usando o elemento Code Embed para desbloquear todos os tipos de funcionalidades personalizadas.
<style>, e JS em tags <script>. Você não pode integrar linguagens do lado do servidor (por exemplo, Perl, PHP, Python, Ruby) em um elemento Code Embed.Como adicionar um elemento Code Embed
Você pode incorporar código de terceiros ou seu próprio código personalizado em qualquer lugar do seu design ou em um elemento de texto rico.
Como adicionar código personalizado diretamente ao seu design
- Copie o código que você gostaria de incorporar para a área de transferência
- Abra o painel de Adição e adicione um elemento Code Embed ao canvas do Webflow
- Cole o código personalizado que você copiou no passo 1
- Salve e feche o modal
<html>, <body> ou <head> no seu código personalizado, ou seu site/layout será quebrado.Como adicionar código personalizado a um elemento de texto rico
- Copie o código que você deseja incorporar para a área de transferência
- Coloque o cursor no elemento de texto rico onde deseja adicionar seu código personalizado
- Clique no ícone “mais” para abrir o menu de inserção e clique no botão de código personalizado
- Cole o código personalizado que você copiou na etapa 1
Como usar conteúdo dinâmico dentro do seu código personalizado
Você pode incorporar campos de Coleção no código incorporado para extrair informações dinamicamente para vários usos. Saiba mais: Veja Embeds dinâmicos no Centro de Ajuda do Webflow.
Como editar o elemento de Incorporação de Código
Existem várias maneiras de abrir o editor de código e editar o código em um elemento de Incorporação de Código. Você pode:
- Selecionar o elemento de Incorporação de Código na tela e clicar duas vezes
- Selecionar o elemento de Incorporação de Código na tela e pressionar enter
- Selecionar o elemento de Incorporação de Código na tela e clicar no ícone de configuração “engrenagem”
- Selecionar o elemento de Incorporação de Código na tela e clicar em Abrir editor de código no Painel de Configurações em configurações de Incorporação de Código
Como definir dimensões no elemento Incorporar Código
Se o código personalizado dentro do elemento Incorporar Código não definir explicitamente o tamanho ou as dimensões, o conteúdo pode muitas vezes ocupar toda a largura de seu elemento pai. Você pode adicionar height="100%" width="100%" em seu código personalizado, o que permitirá ajustar a largura e a altura do elemento incorporado e do conteúdo a partir do painel de Estilo.
Como visualizar o conteúdo incorporado
Código personalizado envolvido em tags <iframe></iframe> ou <style> mostrará uma prévia na tela ou dentro do seu elemento de texto rico, mas alguns códigos incorporados só podem ser visualizados no site ao vivo. Sempre que uma tag é usada no editor de código, você verá um espaço reservado para esse elemento no Designer.
Uma vez que você visualize, publique ou exporte seu site, o script e o código personalizado dentro dele serão renderizados onde você os colocou.
Todo o código aqui será excluído
Saiba mais: Veja Use .webflow.io como um domínio de teste para testes e feedback.
FAQ e dicas de solução de problemas
Posso usar linguagens do lado do servidor em um elemento Incorporar Código?
Você não pode integrar linguagens do lado do servidor (por exemplo, Perl, PHP, Python, Ruby) em um elemento Incorporar Código. O elemento Incorporar Código só suporta HTML, CSS em tags <style>, e JS em tags <script>.
Posso aumentar o limite de 50.000 caracteres para o elemento Code Embed?
O código personalizado no elemento Code Embed não pode exceder 50.000 caracteres. Se o código que você deseja incorporar for maior, você pode armazená-lo em outro servidor e referenciar o script no seu embed. Você também pode minificar seu código personalizado usando uma ferramenta de terceiros ou dividir o código em vários elementos Code Embed (desde que isso não quebre nenhuma função JavaScript).
Socorro! Meu código personalizado não está funcionando!
Verifique se o seu código inclui as tags de abertura e/ou fechamento apropriadas e não inclui as tags <html>, <body> ou <head>.
A partir de agosto de 2020, sites Webflow recém-publicados incluem jQuery v3.5.1. Importar outras versões do jQuery com código personalizado pode causar conflitos e comportamentos inesperados no seu site. Scripts que afetam eventos DOM como onClick, onHover, etc., também podem causar comportamentos inesperados.
É importante lembrar que o código personalizado é uma modificação avançada que pode entrar em conflito com a funcionalidade subjacente do Webflow. Assim, o Webflow não pode garantir a funcionalidade ou a compatibilidade total de qualquer código personalizado.
Nossa equipe de suporte não pode fornecer ajuda direta com a configuração ou solução de problemas de código personalizado, pois esses tópicos estão fora do escopo da nossa política de suporte ao cliente. Se você encontrar problemas com código personalizado, por favor, nos avise no Fórum do Webflow, onde toda a comunidade Webflow (incluindo a equipe) pode fornecer ajuda e recursos adicionais.