Modo de Desenvolvedor

Visão Geral

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.

Guia

Há duas maneiras de acessar o Modo de Desenvolvedor. A maneira mais simples é clicar no botão Modo de Desenvolvedor no menu superior.

developermode1_en-US.png

Outra maneira é clicar com o botão direito do mouse em um widget e selecionar Editar HTML/CSS.

developermode2_en-US.png

Em seguida, clique no botão "Modo de Desenvolvedor" no canto inferior esquerdo.developermode3_en-US.png

Prossiga para fazer suas edições. Use os botões Salvar e Pré-Visualização para ver seu trabalho.developermode4_en-US.png

Use o recurso "Obter URL da Imagem" para obter o URL de uma imagem existente ou carregar uma nova imagem neste modo para que você possa inseri-la diretamente no HTML.developermode5_en-US.png

Considerações

  1. Permaneça dentro das colunas. Nossos sites responsivos são baseados em uma estrutura de linha-coluna. Isso significa que cada linha contém uma coluna, que, em última análise, carrega os widgets. Ao adicionar ou editar seu próprio HTML, verifique se ele se encontra dentro de uma coluna.
  2. 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 aparência durante a visualização.
  3. 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.
  4. Se possível, evite editar extensões. No HTML, você verá espaços reservados para elementos na página. Evite editá-los, especialmente os valores dos dados contidos neles. Editá-los pode danificar os elementos que voltarão para o site. 
  5. O backup d3 seu site é feito automaticamente quando você entra no Modo de Desenvolvedor.  Somente insira códigos se você souber o que está fazendo, e faça backup várias vezes. Não solucionamos problemas relacionados a código personalizado.

Erros

DUPLICATE_ID: cada elemento deve ter uma ID exclusiva.

INVALID_ELEMENT_LOCATION: todos os elementos devem estar em uma coluna que, por sua vez, deve estar em uma linha.

BAD_PROPORTION: deve haver até 12 colunas em uma linha.

INVALID_CLASS_FOR_ELEMENT: uma classe foi adicionada a um elemento inválido.

Perguntas Frequentes

Onde posso colocar meu código personalizado?

O código personalizado que ficará visível no site deve ser adicionado usando o widget HTML. Código personalizado normalmente não deve ser colocado no cabeçalho. Em geral, é sempre melhor seguir primeiro as instruções fornecidas pelo escritor do código antes de adicioná-lo a seu responsivo.