O editor é flexível, pois permite que você modifique o código existente ou adicione o seu próprio. Isso permite que você estenda a funcionalidade da plataforma e lhe dá recursos adicionais. Por exemplo, você pode adicionar um widget de calendário personalizado ou até mesmo um formulário de contato personalizado de terceiros para receber pagamentos em seu site.
Atenção
O modo de desenvolvedor não está disponível quando você está editando o site no modo flexível no Editor Clássico. Você deve sair do modo flexível para acessar o Modo Desenvolvedor.
Há várias maneiras de adicionar código personalizado: por meio do modo de desenvolvedor ou do widget HTML. A seguir estão as instruções sobre como acessar ambos.
Nota
O código personalizado que deve ficar visível no site deve ser adicionado usando um widget HTML. O código personalizado que não é normalmente deve ser colocado no cabeçalho. Em geral, é sempre melhor seguir primeiro as instruções fornecidas pelo redator do código antes de adicioná-lo ao seu site.
O Modo de Desenvolvedor oferece acesso para editar e alterar o HTML e o CSS de seu site. Adicionar código personalizado permite a customização avançada que não é possível com o arrastar e soltar do Editor; no entanto, isso só deve ser realizado por usuários avançados com uma sólida compreensão dos códigos de desenvolvimento da web.
Para acessar o Modo Desenvolvedor:
O widget HTML é o método mais fácil de adicionar código personalizado ao seu site. Dependendo de onde você colocar seu widget HTML, ele aparecerá em todas as páginas do seu site ou em apenas uma única página. Se você colocar o widget HTML no cabeçalho ou no rodapé, ele será colocado em todas as páginas do site ao mesmo tempo. Isso ocorre porque todo site compartilha o cabeçalho e o rodapé. Se o senhor colocar o widget HTML em qualquer outro lugar, ele aparecerá somente no corpo.
No painel lateral, clique em widgete arraste o HTML widget para uma coluna ou linha em seu site e cole seu código.
Você pode colocar o código no cabeçalho de todo o site ou no cabeçalho de uma página individual.
Nota
Os aplicativos de gerenciamento de consentimento não conseguem impedir que o código seja executado antes do consentimento quando o código é colocado no cabeçalho HTML. Isso ocorre porque otimizamos a estrutura e a ordem de carregamento do conteúdo, com base nas melhores práticas de desempenho do site. Colocamos scripts e banners CMP na parte inferior da página, a fim de melhorar o desempenho do conteúdo principal. Por isso, é recomendável colocar o código na extremidade do corpo ao usar um aplicativo de gerenciamento de consentimento.
Para colocar o código no cabeçalho de todo o site:
-
No painel lateral, clique em SEO & Settings.
-
Clique em HTML do cabeçalho.
-
HTML de cabeçalho. Adicione conteúdo ao campo da seção principal.
-
HTML de extremidade do corpo. Adicione HTML/Javascript personalizado logo antes da tag de fechamento do elemento <body> para cada página do site.
-
-
Cole seu código e salve.
É comum que os códigos de rastreamento de pixels desapareçam quando colocados no cabeçalho. A seção principal <head> não aceita nenhum código que seja <img>, <iframe> e muito mais. Normalmente, são necessários apenas < link >, < script > e < meta >.
Se você precisar colar um código que não está sendo salvo na seção de cabeçalho, cole-o no cabeçalho ou no body-end.html. Para fazer isso, siga as etapas na seção Código personalizado após a tag de abertura do corpo deste artigo.
No momento, não temos nenhum recurso para inserir código diretamente logo após a tag de abertura do body. No entanto, você pode colar o código diretamente no arquivo body-end.html. Há duas formas de fazer isso: no modo desenvolvedor e nas configurações.
Para colar o código diretamente no arquivo body-end.html no modo desenvolvedor:
-
Clique no ícone do Modo Desenvolvedor ( ) na barra
superior.
-
Clique em HTML do site/CSS para expandir a seleção.
-
Clique em body-end.html.
-
Cole o seu código até a última linha aqui.
-
Clique em Salvar e Concluir.
Para colar o código diretamente no arquivo body-end.html nas configurações:
Muitos elementos, inclusive linhas, colunas e widget oferecem a possibilidade de acessar seu HTML/CSS.
Se você estiver no Editor Clássico usando o modo flexível ou no Editor 2.0, poderá editar o CSS dos contêineres flexíveis (seção, coluna, coluna interna e grade avançada). Se você estiver no Editor 2.0, também poderá editar o CSS dos cabeçalhos e rodapés.
Para adicionar qualquer código a qualquer elemento ou widget:
-
Clique com o botão direito do mouse no widget ou elemento para abrir o menu de contexto. Se você estiver no modo flexível no Editor Clássico ou no Editor 2.0, clique para selecionar o contêiner flexível, o cabeçalho ou o rodapé.
-
Clique em Editar HTML/CSS. Se você estiver no modo flexível no Editor Clássico ou no Editor 2.0, clique no ícone de três pontos no menu flutuante e selecione Editar CSS.
-
Edite ou adicione códigos aqui, conforme necessário.
-
Clique em Atualizar.
As alterações podem não ser refletidas em seu navegador até que você o atualize.
O mecanismo de atualização de estilo atual não suporta CSS nas regras. Se você quiser usar CSS em regras no Modo Flex ou no Editor 2.0, precisará adicioná-las por meio do modo desenvolvedor, que pode ser acessado clicando no ícone do modo desenvolvedor na barra de navegação superior.
As seguintes regras de at são suportadas somente no modo de desenvolvedor:
-
@import: Usado para importar folhas de estilo externas.
-
@media: Define regras de estilo para diferentes tipos de mídia/dispositivos.
-
@font -face: permite que fontes personalizadas sejam carregadas e usadas.
-
@supports: aplica estilos com base no suporte a recursos.
-
@keyframes: Define animações.
-
@page: Usado em mídia paginada, como impressão.
-
@namespace: declara um namespace para documentos XML.
-
@charset: especifica a codificação de caracteres.
-
@counter -style: define estilos de contador personalizados.
-
@document: (Obsoleto) Estilos aplicados a URLs específicos.
-
@layer: Usado em CSS Cascade Layers.
-
@property: define propriedades personalizadas com tipos e valores iniciais específicos.
Para adicionar um código de rastreamento a um formulário de contato:
-
Navegue até a página em que seu formulário de contato está.
-
Clique no formulário de contato para abrir as opções.
-
Clique em Enviar.
-
Clique em Rastreamento.
-
Cole seu código de acompanhamento de conversões aqui.
A seguir estão as diretrizes recomendadas a serem seguidas ao trabalhar com código personalizado e o Modo Desenvolvedor.
Diretrizes gerais
-
Sempre crie um backup do seu site antes de adicionar um código personalizado.
-
Ao trabalhar com código personalizado, sempre use seu editor neste link: http://my.duda.co?nossl
-
Você pode visualizar o código fora de um iframe alterando o link do editor de https://my.duda.co/home/ed/site/xxxxx/page para https://my.duda.co/site/xxxxx/page?preview=true
-
Antes de colocar o código no cabeçalho, teste primeiro em um site de teste separado. Você pode fazer isso criando uma cópia do seu site para testar o código personalizado.
-
Para o código que precisa ser colocado em uma página, crie uma página de teste e coloque o código nela.
-
O Preview usa HTTPS, enquanto seu site ativo pode não usar. Isso geralmente quebra o código personalizado.
-
Lembre-se de permanecer dentro das colunas. Nossos sites responsivos são baseados em uma estrutura de linha-coluna. Isso quer dizer que cada linha contém colunas que, em última análise, mantêm o conteúdo. Ao adicionar ou editar seu próprio HTML, tenha certeza de que ele se encontra dentro de uma coluna.
Diretrizes específicas do Modo Desenvolvedor
-
Lembre-se de permanecer dentro das colunas. Nossos sites responsivos são baseados em uma estrutura de linha-coluna. Isso quer dizer que cada linha contém colunas que, em última análise, mantêm o conteúdo. Ao adicionar ou editar seu próprio HTML, tenha certeza de que ele se encontra dentro de uma coluna.
-
Deixe as classes no lugar. O Editor se baseia nas várias classes que são adicionadas aos elementos. Se você encontrar uma classe existente (geralmente começa com dm), não mexa nela. Se você remover classes, o site poderá não ter a mesma quando você for visualizá-lo.
-
Observe os tamanhos das classes. Colunas têm um valor de tamanho que é adicionado como uma classe, como large-6 ou small-12. Isso determina o tamanho das colunas dentro dessa linha. Você deve deixá-las como estão, pois elas são o núcleo do dimensionamento da linha nos diferentes dispositivos.
-
Evite editar extensões, se possível. No HTML, você já verá espaços reservados de elementos na página. Se você puder, evite editá-los, especialmente os valores de dados contidos neles. A edição desses itens pode quebrar o widget quando o senhor voltar ao editor.
Se você adicionou ao seu site um código personalizado que afeta o desempenho ou impede a edição, é mais provável que o código não esteja sendo formatado corretamente ou não seja compatível com HTTPS.
Cuidado
O suporte da Duda não pode solucionar problemas de código personalizado.
-
O código personalizado é muito imprevisível. Há muitos fatores que explicam por que seu código personalizado pode não estar funcionando com nossa plataforma. Se precisar de ajuda para fazer o código personalizado funcionar em seu site, talvez valha a pena contratar um especialista da Duda para ajudá-lo a fazer seu código funcionar em seu site.
-
Os aplicativos de gerenciamento de consentimento não conseguem impedir que o código seja executado antes do consentimento quando o código é colocado no cabeçalho HTML. Isso ocorre porque o Duda otimiza a estrutura e a ordem de carregamento do conteúdo, com base nas melhores práticas de desempenho do site. Colocamos scripts e banners CMP na parte inferior da página, a fim de melhorar o desempenho do conteúdo principal. Por isso, é recomendável colocar o código na extremidade do corpo ao usar um aplicativo de gerenciamento de consentimento.
A seguir estão as soluções de solução de problemas que você pode encontrar ao trabalhar com código personalizado.
Restaure um backup do seu site até um ponto antes de o código personalizado ser adicionado (mesmo que você não tenha criado um backup, o editor cria um para você quando você publica ou entra no modo de desenvolvedor).
Para restaurar um backup:
A seguir estão as mensagens de erro específicas e o que elas significam:
-
ID_DUPLICADO. Cada elemento deve ter um ID exclusivo. -
LOCALIZAÇÃO INVÁLIDA DO ELEMENTO. Todos os elementos devem estar em uma coluna que deve estar em uma linha. -
PROPORÇÃO_RUIM. As colunas em uma linha devem somar até 12. -
CLASSES_PARA_ELEMENTO INVÁLIDA. Uma classe foi adicionada a um elemento inválido.
Se você tem um código que não está funcionando no site, provavelmente esse código não está formatado corretamente ou não está atuando como HTTPS.
Se você tiver algum link no seu código (http:// ou //) e seu site estiver usando HTTPS ou você estiver na visualização, será necessário alterá-lo para https://. A razão para isso é que o código não HTTPS não funcionará em uma conexão usando HTTPS (visualização do site, editor, etc.).
Se você não conseguir acessar o editor quando o site for carregado inicialmente, tente acessar o editor em uma nova página inserindo um URL diferente no link do editor, como https://my.Duda.co/home/site/XXXXXXX/about. Ao chegar lá, você pode excluir e adicionar novamente a página que está causando problemas ou acessar o modo de desenvolvedor para corrigir o problema no código do site.
Ou, se o editor estiver quebrado, tente forçar a abertura do editor usando o atalho de teclado do inspetor de elementos. Para Mac, o atalho é Command+Option+C. Para PC, o atalho é Ctrl+Alt+C
A otimização da velocidade da página afeta a forma como determinados scripts são executados. Executamos a otimização do PageSpeed na maioria das páginas, o que pode causar problemas com seu código personalizado.
Para determinar se seu código personalizado está sendo afetado por um problema de velocidade de página:
-
Duplique a página com seus scripts.
-
Altere a URL para " testing_scripts. "
-
Publique e depois verifique a página em seu site ativo.
-
Se seu código funcionar nessa página, entre em contato com o suporte para desativar a otimização da velocidade da página do seu site.
Se estiver usando um script, certifique-se de que ele esteja sendo executado de forma assíncrona. Não é garantido, mas às vezes isso pode resolver o problema com scripts que não estão sendo executados corretamente no navegador.
Para ativar a assincronização em scripts, altere seu código fazendo o seguinte:
-
Código antigo:
< script src= " https://example.com/script.js" ></script> -
Novo código:
< script src= " https://example.com/script.js" async defer ></script>