Para saber mais sobre o tema do site, visite a Duda University
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:
-
No painel esquerdo, clique em 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.
-
-
O senhor pode alterar a fonte, a gramatura, o tamanho (para desktop/tablet e celular, separadamente), a cor, o formato da fonte, a direção, a altura da linha, o espaçamento entre letras e definir todas as letras maiúsculas.
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:
-
No painel lateral, clique em Tema e, em seguida, 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 atualmente 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:
-
No painel lateral, clique em Tema e, em seguida, clique em Texto. Expanda a seção de texto que usa a fonte personalizada. Ao lado da lista de fontes, clique no ícone Adicionar &
-
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 permissões no tema do site automaticamente e podem editar, ver e usar as cores do tema. Membros da equipe e clientes sem permissões de tema do site podem ver e usar as cores de tema, mas não podem editar.
Para configurar as cores do tema:
-
No painel lateral, clique em Tema e 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.
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:
-
No painel lateral, clique em Tema e 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.
Para mudar o nome das cores do tema:
-
No painel lateral, clique em Tema e depois em Cores.
-
hover sobre o nome da cor desejada e clique no ícone de lápis. (
-
Digite um novo nome.
O novo nome é salvo automaticamente e aparecerá ao se passar o cursor sobre a cor no seletor de cores.
O senhor pode desconectar qualquer widget conectado a cores de temas individuais.
O senhor pode desconectar qualquer widget conectado a cores de temas individuais.
-
No painel lateral, clique em Tema.
-
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:
-
No painel esquerdo, clique em Tema e, em seguida, 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:
-
No painel esquerdo, clique em Tema e, em seguida, 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 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:
-
No painel esquerdo, clique em Tema e, em seguida, 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.