O painel Tema do site permite que você faça alterações que afetam todo o site. Você pode personalizar o texto, os botões, as imagens, o plano de fundo e os widgets de navegação do seu site no painel de design. Isso permite que você faça mudanças visuais abrangentes de forma rápida e eficiente, reduzindo o tempo de design e mantendo o estilo do seu site consistente em todas as páginas.
Para abrir o painel Tema do site, no painel lateral, clique em Tema. Quando o painel Tema do site é aberto, a tela é automaticamente minimizada para 50% de visualização, para que toda a tela fique visível ao ajustar as configurações do tema do site. Se você quiser retornar à visualização 100% em tela, clique no menu suspenso na barra superior e selecione 100%. A capacidade de aumentar ou diminuir o zoom também está disponível no modo de visualização.
Nota
-
As alterações que o senhor fizer em widget ou páginas específicas substituirão os temas definidos no painel Site Theme (Tema do site). Recomendamos que você escolha primeiro o tema do site e, em seguida, faça personalizações em partes do site que você deseja que se destaquem ou tenham uma aparência diferente das demais.
-
Até março de 2023, o Tema do Site se chamava Design Geral.
Esta seção controla o estilo do texto do site, além dos cabeçalhos de todos os tamanhos (H1 a H6). Mude o estilo e o visual do texto em todo o site. Você pode alterar o tipo e o tamanho da letra, além de configurar texto normal, links e títulos.
A alteração do tamanho da fonte, do estilo, da cor e de outras edições afetará os parágrafos futuros e outros tipos de texto, bem como o site widget atual conectado ao Site Text que não tenha sido alterado manualmente.
Para configurar o texto do tema:
-
Clique na seta ao lado de Texto.
-
Clique no tipo de texto desejado. As opções são:
-
DFLT. Isso definirá o tema para todo o texto em widget que não estiver atribuído a um título ou ao estilo de parágrafo, como a navegação widget. A cor do texto do link e o sublinhado também podem ser definidos aqui. Além disso, o senhor tem a opção de personalizar a aparência dos links para diferentes estados, incluindo o Default Link State, Link On-hover e Link Clicked.
-
PAR. Isso definirá o tema para o widget de texto.
-
Título e subtítulos H1-H6.
-
-
Você pode alterar o seguinte por tipo de texto:
-
Fonte
-
Tamanho da fonte. Isso é definido para desktop/tablet e celular, separadamente.
-
Texto em escala. (Somente Editor 2.0) Quando ativado, o texto é dimensionado com base na largura do contêiner pai. Isso pode ser útil se você não quiser uma quebra de linha em um título. widget com texto conectado ao tema herdarão essa configuração, porém a configuração pode ser substituída por widget.
-
Cor da fonte
-
Formato da fonte
-
Sentido do texto
-
Espessura da Fonte
-
Altura da Linha
-
Espaçamento entre letras
-
Tudo em maiúsculas
-
Sombra de texto
-
As alterações na área de texto do tema afeta todo o texto no site que não for substituído por alterações específicas e personalizadas no estilo. A edição manual em um elemento específico substitui o tema do site; nenhuma alteração feita no tema do site afetará o estilo desses elementos. Isso ocorre nas configurações de um determinado elemento do site; por exemplo, se você alterou apenas a cor do texto em um widget H1 específico na tela de desenho:
-
E, em seguida, alterou o tamanho da fonte do H1 no tema do site, o tamanho da fonte do H1 ainda será alterado no widget H1.
-
E depois alterou a cor do H1 no tema do site, o H1 que foi alterado não será atualizado com a mudança de cor.
Você pode atualizar o texto do tema nas configurações de texto clicando em Tema e selecionando Texto. Ou então, o senhor pode clicar em um widget de texto para abrir o menu de contexto, clicar no menu suspenso de seleção de título e selecionar Update theme (Atualizar tema). Isso abre as configurações de texto do tema, nas quais você pode fazer atualizações.
O editor apresenta uma variedade de fontes para seu uso. Defina uma fonte de texto do tema ou opte por diferenciar seu texto usando várias fontes diferentes em seu site. Para adicionar fontes personalizadas ao seu site, consulte Fontes personalizadas.
Para ver as fontes disponíveis e ver como elas se parecem:
-
Clique em Texto.
-
Selecione uma fonte no menu suspenso Fonte .
Você pode adicionar fontes personalizadas da biblioteca de fontes do Google ou fazer o upload de arquivos de fonte personalizados (TTF, OTF, EOT, WOFF2 ou WOFF). Para obter o melhor desempenho, é recomendável usar arquivos WOFF ou WOFF2 ao adicionar fontes personalizadas.
Nota
-
Se você tiver apenas um .otf ou .ttf recomendamos o uso de um site externo tool, como o FontSquirrel, para convertê-lo no formato necessário.
-
Para cumprir com o RGPD, as fontes personalizadas são carregadas da nossa CDN sem a necessidade de chamar a API do Google Fonts.
-
Se você salvar um site como modelo, ele incluirá todas as fontes personalizadas que foram adicionadas.
-
Se você redefinir um site, as fontes personalizadas serão removidas.
Para adicionar uma fonte personalizada:
-
Você pode adicionar fontes personalizadas a partir de qualquer um dos seguintes locais:
-
No painel lateral, clique em Tema e, em seguida, clique em Texto. Expanda a seção de texto desejada. Ao lado da lista de fontes, clique no ícone Adicionar &
Gerenciar fontes ( ).
-
No editor de design de um widget, para qualquer elemento de texto, clique no ícone Adicionar &
-
-
Selecione uma das seguintes opções:
-
Fontes do Google. Selecione uma fonte na lista de fontes do Google. A fonte aparece na lista de fontes adicionadas do Google abaixo. Para remover uma fonte, clique no X ao lado da fonte na lista. Observe que a lista já pode exibir fontes adicionadas ao modelo. É recomendável que você não remova as fontes do modelo.
-
Fontes personalizadas. Clique em Carregar fontes para fazer upload de um arquivo de fonte personalizado. Várias fontes podem ser selecionadas ao mesmo tempo. Para remover uma fonte, clique no X ao lado da fonte na lista.
-
-
Clique em Concluído.
A fonte é adicionada à lista de fontes em todo o site.
Nota
As fontes Adobe não aparecem na lista de fontes. Você precisa adicionar a família de fontes ao código.
Se você remover uma fonte que está sendo usada no site, o texto voltará a usar a fonte padrão. Você não pode remover nenhuma das fontes padrão.
Para remover fontes personalizadas de um site:
-
Clique em Texto. Expanda a seção de texto que usa a fonte personalizada. Ao lado da lista de fontes, clique em Adicionar e gerenciar fontes (
-
Clique no X ao lado da fonte na lista para removê-la do site.
Se você remover uma fonte do Google, deverá republicar o site para que a alteração entre em vigor. No entanto, se você remover uma fonte carregada, não será necessário republicá-la para que a alteração entre em vigor.
As cores permitem que o senhor defina uma paleta de cores e vincule as cores individuais a qualquer widget ou a todos os widgets com configurações de cores. A cor de qualquer elemento vinculado às cores do tema será atualizada automaticamente quando a cor vinculada for alterada nas configurações de cores do tema. Isso permite que você faça alterações de cor rapidamente, o que ajuda a reduzir o tempo de design e garante que o estilo do seu site seja consistente em todas as páginas.
Os proprietários da conta têm automaticamente permissões de editor e podem editar, visualizar e usar as cores do tema. Team Os membros e clientes que não têm permissões de Editor podem visualizar e usar as cores do tema, mas não podem editá-las.
Você pode configurar até 20 cores do tema.
Para configurar as cores do tema:
-
Selecione a seta ao lado de Cores.
-
Clique no ícone Mais ao lado de Primário ou em qualquer configuração que você precise definir.
-
Informe o valor HEX ou RGB da cor desejada; ou use a ferramenta para selecionar uma cor.
-
(Opcional) Você pode gerar cores a partir do seu logotipo. Clique para abrir a cor primária, abra a guia Marca e clique em + Adicionar logotipo (se você adicionou um logotipo às informações da sua empresa na Biblioteca de conteúdo, ele aparecerá aqui). Depois de adicionar seu logotipo, um conjunto de cores é gerado.
Se precisar remover ou substituir o logotipo, clique no ícone de três pontos ao lado do logotipo e selecione Remover ou Substituir imagem. Observe que você precisa da permissão da Content Library & Business Info para carregar, remover ou substituir o logotipo.
Repita essas etapas conforme necessário para cada cor do tema. Em seguida, o senhor precisa conectar as cores a widget em seu site.
Se o site ou modelo ainda não tiver cores conectadas, isso poderá ser feito automaticamente. O gerador automático de cores do tema escaneia seu site e detecta as cores usadas com mais frequência. Ele gera uma lista de cores para seleção e, uma vez selecionadas, essas cores se tornam as cores do tema e são conectadas ao site widget.
Para configurar automaticamente as cores do tema:
-
Selecione a seta ao lado de Cores.
-
Clique em Definir cores do tema.
-
Clique em Conectar para mim ou eu mesmo conectarei.
-
(Opcional) Se você selecionou Eu mesmo vou conectá-lo, clique no ícone Mais ao lado de cada cor no painel de design e selecione as cores individualmente.
-
Selecione quais das cores geradas usar.
-
Clique em Salvar & Connect Colors.
As cores serão preenchidas na seção "Cores" do painel "Tema do Site".
Para conectar um widget a uma cor de tema:
-
Clique em um widget para abrir o menu de configurações.
-
Abra as configurações de cores e selecione uma das cores do tema listadas no topo.
-
Repita para outros elementos.
-
(Opcional) Se você precisar editar uma das cores do tema, clique no ícone de lápis e as configurações de cores do tema serão abertas, onde você poderá editar a cor desejada.
Depois que um widget for conectado às cores do tema, ele será atualizado automaticamente quando a cor do tema vinculado for atualizada.
O senhor pode desconectar qualquer widget conectado a cores de temas individuais.
Para desconectar um widget:
-
Clique em Cores.
-
Clique no ícone de três pontos horizontais (
) ao lado do texto Cores e selecione Remover cores do tema.
-
Selecione as cores a serem removidas e clique em Remover cores selecionadas.
Esta seção permite definir o estilo do botão primário e secundário widget no seu site. Selecione um de nossos layouts de botão e defina o texto, a cor de fundo, a borda, o estado hover, os cantos e os estilos de sombra.
Para ocultar o botão Voltar ao topo no celular, ative a opção na seção Layout do site.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa .
Esta seção permite definir o tema para o design de linhas e colunas em termos de cor de fundo e espaçamento padrão. As edições que serão feitas em linhas ou colunas individuais substituirão as configurações de linha e coluna do tema.
Esta seção controla o estilo do fundo do site. Escolha entre uma cor ou uma imagem no fundo. Selecione uma imagem de plano de fundo da galeria de fotos ou carregue suas próprias imagens para adicionar um design exclusivo ao site. Alterações também afetam a visualização em desktop (computador) ou tablet.
Nota
Para obter informações sobre planos de fundo de elementos do site, consulte Planos de fundo de elementos.
Para personalizar o plano de fundo do seu site:
-
Clique na seta ao lado de Planos de fundo.
-
Clique em Plano de fundo padrão.
-
Clique na guia Cor ou Imagem , selecione uma cor para o plano de fundo do site ou faça o upload de uma imagem.
-
(Opcional) Clique no botão Não otimizar esta imagem para evitar a otimização (essa configuração aparecerá após a seleção de uma imagem).
Para personalizar o plano de fundo por página:
-
Clique na seta ao lado de Planos de fundo.
-
Clique em Plano de fundo por página.
-
Selecione uma página no menu suspenso e selecione imagem ou cor para a página específica.
-
(Opcional) Clique no botão Não otimizar esta imagem para evitar a otimização (essa configuração aparecerá após a seleção de uma imagem).
Nota
Essas informações são específicas do Editor 2.0, anteriormente conhecido como Editor All-Flex. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa .
No painel Tema , você pode ajustar o layout do seu site, incluindo a definição da largura da página e o espaçamento padrão entre seções, colunas e colunas internas.
Para acessar as configurações de layout do site:
-
Clique em Largura & Espaçamento.
-
Clique na seção desejada para expandi-la.
É possível definir a largura padrão da página para as seções não definidas como largura total (anteriormente chamada de "sangria total") no desktop. Ajustar a largura padrão da página pode ajudar a garantir a melhor legibilidade e o design do site para a forma como ele será exibido. Por exemplo, alguns sites são exibidos em uma tela de TV ou em telas maiores do que o computador médio desktop.
Para definir a largura de página padrão:
-
Clique em Largura & Espaçamento.
-
Clique para expandir a seção Largura da página.
-
Selecione 1200 px, 1440 px ou Personalizado. Se você selecionar Personalizado, use o controle deslizante para selecionar a largura do pixel ou inserir um valor no campo. O valor personalizado pode estar entre 960 px e 1920 px ou entre 50 vw e 100 vw.
Ative a opção " Largura total " se desejar que todas as novas seções tenham largura total por padrão.
Você pode definir o espaçamento padrão para novas seções em branco adicionadas ao seu site. Se desejar, você pode substituir o espaçamento da seção do tema no painel de design da seção.
Considerações importantes:
-
As seções adicionadas ao cabeçalho mantêm o espaçamento padrão do cabeçalho, independentemente do que esteja definido no espaçamento da seção do tema.
-
Observe que as seções criadas antes desta versão do recurso (5 de agosto de 2025) não herdam automaticamente o espaçamento entre seções, mas elas podem ser reconectadas abrindo o painel de design da seção e clicando em Redefinir o espaçamento do tema na gaveta Espaçamento entre seções.
Para definir o espaçamento entre seções:
-
Clique em Largura & Espaçamento.
-
Clique para expandir a seção Espaçamento entre seções.
-
Clique nas respectivas caixas para editar os valores de preenchimento. Os valores do preenchimento horizontal estão vinculados. Se você alterar um, o outro será atualizado automaticamente. Eles podem ser desvinculados clicando no ícone do link. Observe que o espaçamento entre seções é definido por ponto de interrupção.
Se necessário, clique em Redefinir preenchimento para redefinir todos os valores para zero.
Se você modificar o espaçamento de uma seção individual, ela substituirá as configurações do tema. Você pode redefini-la para as configurações de Espaçamento da Seção do tema abrindo o painel de design da seção e clicando em Redefinir para o espaçamento do tema na gaveta Espaçamento da Seção.
Você pode definir o espaçamento padrão para novas colunas em branco adicionadas ao seu site. Se desejar, você pode alterar o espaçamento da seção do tema no painel de design da coluna.
Para definir o espaçamento padrão entre colunas:
-
Clique em Largura & Espaçamento.
-
Clique para expandir a seção Espaçamento entre colunas .
-
Clique nas caixas correspondentes para editar os valores de preenchimento. Os valores de preenchimento vertical estão vinculados. Se você alterar um, o outro será atualizado automaticamente. É possível desvincular os links clicando no ícone de link.
Você pode definir o espaçamento padrão para novas colunas internas adicionadas ao seu site. Se desejar, você pode alterar o espaçamento da seção do tema no painel de design da coluna interna.
Para definir o espaçamento padrão para colunas internas:
-
Clique em Largura & Espaçamento.
-
Clique para expandir a seção Espaçamento entre colunas internas .
-
Clique nas caixas correspondentes para editar os valores de preenchimento. Os valores de preenchimento vertical estão vinculados. Se você alterar um, o outro será atualizado automaticamente. É possível desvincular os links clicando no ícone de link.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa .
Controle a navegação de layout do site no desktop, tablet e celular. Para a versão de desktop, você pode escolher duas larguras: 960 px ou 1200 px.
Alterar o layout de navegação muitas vezes afeta o comportamento do seu cabeçalho e às vezes de todo o site. Se o cabeçalho parecer incorreto após alterar o layout, experimente um layout diferente.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa .
O senhor pode alterar o layout do site para desktop para um layout de barra lateral. O layout de barra lateral exibe o cabeçalho na lateral do site (esquerda ou direita) e é um ótimo design tool para dar uma aparência exclusiva ao seu site. O cabeçalho da barra lateral também funciona como um cabeçalho fixo, de modo que sempre será exibido na tela, e o senhor também pode adicionar widget à barra lateral como qualquer outra linha.
Nota
-
Quando você muda de um layout de site tradicional para um layout de barra lateral, o cabeçalho mantém o logotipo e todos os widgets que você tinha serão removidos (semelhante a mudar o layout do cabeçalho no layout do cabeçalho superior). A cor de fundo será alterada de acordo com o layout selecionado.
-
O cabeçalho reduzido não está disponível para navegação na barra lateral. A barra lateral é sempre exibida no site, independentemente dos deslocamentos no site.
-
Em telas com menos de 1090 pixels de largura, o conteúdo da barra lateral ficará oculto, exceto a primeira imagem, e um ícone de menu expansível será exibido. Você pode personalizar a cor do botão ativador que aparece no editor de design.
Para alterar o layout do site para um layout de barra lateral:
-
Clique na seta ao lado de Layout do site.
-
Selecione o layout da barra lateral. O senhor pode adicionar linhas, arrastar e soltar widget no cabeçalho da barra lateral e personalizá-lo.
Para editar o design do cabeçalho da barra lateral, hover sobre a barra lateral e clique em Sidebar no canto superior direito. Você pode escolher um dos vários layouts de cabeçalho da barra lateral para aplicar ao seu site, exibi-lo no lado esquerdo ou direito da tela, definir sua largura e muito mais.