O editor é flexível, pois permite que você modifique o código existente ou adicione o seu próprio. Isso permite ampliar a funcionalidade da plataforma e fornecer 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 os dois.
Nota
-
código personalizado que deve ser visível no site deve ser adicionado usando um widget HTML. O código personalizado que não está visível geralmente 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.
-
Você não pode carregar ou executar arquivos PHP. Linguagens do lado do servidor, como PHP, não são suportadas, pois a plataforma não fornece execução do lado do servidor ou acesso ao sistema de
O Modo Desenvolvedor oferece acesso para editar e alterar o HTML e o CSS do seu site. Adicionar código personalizado permite uma personalização avançada que não é possível com o editor de arrastar e soltar; no entanto, isso só deve ser realizado por usuários avançados com um sólido conhecimento do código de desenvolvimento web
Para acessar o Modo Desenvolvedor, clique para abrir o menu de hambúrguer no editor e selecione Modo de desenvolvimento.
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 você colocar o widget HTML em qualquer outro lugar, ele aparecerá somente no corpo
Para adicionar um widget HTML:
-
Pesquisar por HTML, arraste e solte o widget em 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
It is common for pixel tracking codes to disappear when placed in the header. The head section <head> does not accept any code that is <img>, <iframe>, and more. It normally only takes <link>, <script>, and <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 Código personalizado após a abertura da etiqueta corporal seção deste artigo.
Atualmente, não temos um recurso para colocar o código diretamente após a abertura da tag corporal. No entanto, você pode colar o código diretamente no arquivo body-end.html. Há duas maneiras de fazer isso, no modo de desenvolvedor ou nas configurações.
Para colar o código diretamente no arquivo body-end.html no modo de desenvolvedor:
-
Clique para abrir o menu de hambúrguer no editor e selecione Modo de desenvolvimento.
-
CliqueHTML do site/CSSpara expandir a seleção.
-
Cliquebody-end.html.
-
Cole seu código na última linha aqui.
-
Clique Salvar e Feito.
Para colar o código diretamente no arquivo body-end.html nas configurações:
Muitos elementos, incluindo linhas, colunas e widgets, oferecem a capacidade de acessar seu HTML/CSS.
Se você estiver no Editor Clássico usando o modo flexível ou no Editor 2.0:
-
Você pode editar o CSS dos contêineres flexíveis (seção, coluna, coluna interna e grade avançada). Se você estiver no Editor 2.0: Você também pode editar o CSS dos cabeçalhos e rodapés.
-
O painel de design pode não refletir todas as alterações de código personalizado. Isso pode causar diferenças de estilo entre o painel de design e os elementos embutidos
Para adicionar qualquer código a qualquer elemento ou widget:
-
No editor Clássico, clique com o botão direito do mouse em seu 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é.
-
ClamberEditar 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 selecioneEditar CSS.
-
Edite ou adicione código aqui, conforme necessário.
-
Clique Atualizar.
Talvez seja necessário atualizar o navegador para ver a alteração.
O mecanismo de atualização de estilo atual não suporta CSS nas regras. Se você quiser usar CSS nas regras no Modo Flex ou no Editor 2.0, você precisa adicioná-los 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.
No Editor 2.0 e no modo flex: Você pode adicionar classes CSS aos elementos flexíveis (seção, coluna, coluna interna e grades avançadas). O uso de classes CSS pode economizar tempo ao estilizar elementos. Por exemplo, em vez de usar o painel de design para alterar o espaçamento e o tamanho de uma única coluna, você pode criar uma classe CSS e aplicar essas alterações de estilo a qualquer número de colunas
A mesma classe pode ser aplicada a vários elementos na mesma página e várias classes podem ser aplicadas ao mesmo elemento.
Nota
Você deve ter acesso ao modo de desenvolvedor para usar esse recurso.
Para adicionar ou editar uma classe CSS:
-
Selecione o elemento flexível desejado (seção, coluna, coluna interna ou grade avançada).
-
No menu flutuante ou no menu de contexto, selecione Adicionar nome de classe CSS.
-
Digite um novo nome de classe CSS ou selecione um nome de classe existente no menu suspenso. Você pode selecionar várias classes.
-
(Opcional) Se você ainda não adicionou a classe CSS ao código, clique em abra o modo Dev.
-
Clique Feito.
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.
-
CliqueSubmissão.
-
CliqueMonitoramento.
-
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 lá.
-
O Preview usa HTTPS, enquanto seu site ativo pode não usar. Isso geralmente quebra o código personalizado.
-
Certifique-se de ficar dentro das colunas. Nossos sites responsivos são baseados em uma estrutura de linhas e colunas. Isso significa que cada linha contém colunas que, em última análise, contêm o conteúdo. Ao adicionar ou editar seu próprio HTML, verifique se ele está dentro de uma coluna.
Diretrizes específicas do Modo Desenvolvedor
-
Certifique-se de ficar dentro das colunas. Nossos sites responsivos são baseados em uma estrutura de linhas e colunas. Isso significa que cada linha contém colunas que, em última análise, contêm o conteúdo. Ao adicionar ou editar seu próprio HTML, verifique se ele está dentro de uma coluna.
-
Deixe as aulas no lugar certo. O editor depende das muitas classes que são adicionadas aos elementos. Se você ver uma classe existente (geralmente começa com dm), deixe-a no lugar certo. Se você remover classes, o Site pode não ter a mesma aparência quando você for visualizá-lo.
-
Observe o tamanho das turmas. As colunas têm um valor de tamanho que é adicionado como uma classe, como larga-6 ou pequeno-12. Isso determina o tamanho das colunas dentro dessa linha. Você deve deixá-los no lugar certo, pois eles são a base do dimensionamento da linha em 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. Editá-los pode quebrar os widgets quando você voltar ao editor
Se você adicionou um código personalizado ao seu site que está afetando seu desempenho ou impedindo que você o edite, provavelmente é porque o código não está formatado corretamente ou não é compatível com HTTPS.
Cuidado
O suporte da Duda não pode solucionar problemas de código personalizado.
-
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 umEspecialista em Dudapara ajudar você a fazer seu código funcionar em seu site.
-
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 porqueDudaotimiza 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:
-
DUPLICATE_ID. Cada elemento deve ter um ID exclusivo. -
INVALID_ELEMENT_LOCATION. Todos os elementos devem estar em uma coluna que deve estar em uma linha. -
BAD_PROPORTION. As colunas em uma linha devem somar até 12. -
INVALID_CLASS_FOR_ELEMENT.Dudaa classe foi adicionada a um elemento inválido.
Se você tem um código que não está funcionando no site, provavelmente é porque o código não está formatado corretamente ou não é HTTPS.
Se você tiver algum link em seu código (http://ou//) e seu site estiver usando HTTPS ou você estiver na versão prévia, precisará alterá-lo para que seja https://. A razão para isso é que o código não HTTPS não funcionará em uma conexão carregada por 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 Comando+Opção+C. Para PC, o atalho Ctrl+Alt+C
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 o 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, você também pode tentar garantir que seu script seja executado de forma assíncrona — isso não é garantido, mas às vezes pode resolver o problema de scripts que não são executados corretamente no navegador.
Para ativar a assíncrona em scripts, altere seu código usando 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>