Aparência do site: temas, cores, logo e letras
Como deixar o site com a cara da sua marca: escolher tema, subir a logo, definir cores e letras.
44 perguntas · Atualizado em
Nesta página
Temas e layouts prontos
Quantos temas o JornalBox tem?
São 10 temas: Jornalístico, Blogs, Notícias, Newspaper, Tabloide, Magazine, Editorial, Bold, Clássico e Podcast (TV e Rádio). Todos estão liberados, sem custo extra.
Cada tema tem prévia no modo claro e no escuro. Em Layout › Temas há um campo "Buscar tema…" e um contador mostrando quantos temas aparecem para o seu tipo de site.
Como troco o tema do meu site?
Entre em Layout › Temas, marque o tema que quer e clique em Salvar. O site passa a usar o novo desenho na hora, sem mexer nas suas matérias.
- No painel, abra Layout › Temas.
- Use as setas ou o campo "Buscar tema…" para achar o tema.
- Marque o tema.
- Clique em Salvar e abra o site para conferir.
Se o seu site ainda não tinha letras definidas, o sistema aplica as letras padrão do tema escolhido.
Trocar de tema apaga minhas matérias, logo ou cores?
Não. Trocar de tema muda só o desenho do site. Matérias, logo, cores, letras e seções continuam como você deixou.
A tela de tema grava apenas o tema escolhido. Se você tinha aplicado um layout pronto, ele deixa de ser o layout "ativo" quando você personaliza cores ou letras depois, e o site passa a contar como "Meu layout".
Posso ver um tema antes de trocar?
Sim. Em Layout › Temas cada cartão alterna sozinho a cada 2 segundos entre a imagem clara e a escura do tema, e tem um link "Demo" que abre um site de exemplo feito com ele.
Só alternam as duas imagens quando o tema tem versão escura. Nada muda no seu site até você marcar o tema e salvar.
Quais temas aparecem para o meu tipo de site?
Sites de blog e de portal veem os temas comuns. O tema Podcast (TV e Rádio) só aparece para sites do tipo Podcast.
O contador "N temas" da tela já mostra só os temas do seu tipo de site.
Qual tema o site novo usa?
Todo site novo nasce no tema Jornalístico. Se o tipo escolhido for Podcast, nasce no tema Podcast (TV e Rádio). Depois você troca quando quiser.
O site também nasce com as cores que você escolheu na criação, letra Inter nos títulos e no texto, uma logo provisória com o nome do site e banners de exemplo.
O que são os layouts prontos?
Layouts prontos aplicam de uma vez tema, cores, letras e seções da página inicial. Uns foram copiados dos sites de demonstração do JornalBox e outros foram feitos para os temas de notícias e blogs.
Ficam abaixo dos temas, em Layout › Temas. A lista mostra só os modelos do tema marcado ("N layouts deste tema"), e cada cartão exibe três bolinhas de cor e o par de letras. Não há layout pronto para o tema Podcast.
Como aplico um layout pronto e como volto ao que eu tinha?
Em Layout › Temas, escolha um modelo e confirme. Para voltar ao seu visual anterior, use o cartão "Meu layout".
- Abra Layout › Temas e role até "Layouts pré-definidos".
- Escolha o modelo e clique para usar.
- O site pergunta: "Aplicar este layout? Suas cores, fontes, tema e seções atuais serão substituídos (a logomarca e os anúncios não mudam)". Confirme.
- Aparece "Layout aplicado! Confira o seu site."
Ao aplicar o primeiro modelo, o sistema guarda o seu visual (tema, cores, letras e as chaves das seções). O cartão "Meu layout" restaura essa versão.
O layout pronto troca minha logo e meus banners?
Não. O layout pronto não mexe na logomarca, no ícone, nos anúncios nem nas categorias de Destaques e Populares. Ele troca tema, cores, letras e seções.
Posso usar um tema e mudar só as cores e as letras?
Pode. Escolha o tema e depois ajuste cores e letras nas abas Cores e Fontes. O tema fica, e o que você personalizou vale por cima dele.
Ao salvar cores ou letras, o selo do layout pronto aplicado antes some e o site passa a ser o "Meu layout".
Por que troquei o tema e as letras continuaram as mesmas?
Porque trocar de tema não troca as letras. Ao escolher outro tema, a tela avisa: "As letras do site continuam as mesmas. As do tema são..." e manda você a Layout › Fontes se quiser usar as do tema.
Se o site ainda não tem letras definidas, a tela diz "Este tema usa as letras..." e elas valem.
Site de Podcast (TV e Rádio)
O que é o site do tipo Podcast?
É um tipo de site que usa o tema Podcast (TV e Rádio) e tem um menu Podcast no painel para cadastrar canais de TV e de rádio e quatro banners. O tipo é escolhido na criação do site.
Logomarca e ícone
Como coloco a minha logo no site?
Abra Layout › Logomarca, envie a imagem em cada campo e clique em "Salvar logomarcas". São três envios independentes: logo para fundo claro, logo para fundo escuro e ícone da aba do navegador.
- Abra Layout › Logomarca.
- Clique na área ou arraste a imagem para o campo desejado.
- Confira a prévia.
- Clique em "Salvar logomarcas".
Você pode trocar só um dos três e deixar os outros como estão.
Qual o tamanho e o formato ideais da logo e do ícone?
A tela indica logomarca de 400×120 em PNG, SVG ou WebP, e ícone da aba de 32×32 em ICO ou PNG. A versão para fundo escuro segue a mesma medida da logo normal.
Para que serve a logo para fundo escuro?
Ela aparece no rodapé e quando o leitor liga o modo escuro. Suba uma versão que se leia sobre fundo escuro, por exemplo toda branca.
Nos temas com modo escuro, o site troca entre a logo clara e a escura sozinho.
Como removo a logo ou o ícone do site?
Em Layout › Logomarca, cada um dos três campos tem o botão "Remover logomarca" ou "Remover ícone". Clique e depois em "Salvar logomarcas". A marca some do site só depois de salvar.
Como mudo a altura da logo no cabeçalho?
A altura da logo vai de 16 a 140 px e é ajustada em Layout, no campo de altura da logomarca. O valor muda o tamanho da logo no topo do site.
Minha logo ficou sem o fundo branco. É normal?
É normal. Ao escolher a logo para fundo claro, o navegador apaga os pixels quase brancos e recorta a sobra em volta, deixando 10 px de margem. A tela mostra o nome do arquivo com "(N KB, recortada)".
O recorte vale só para a logo de fundo claro. A logo escura e o ícone não são recortados, e arquivos SVG também não. Nada é gravado até você clicar em "Salvar logomarcas".
Como gero uma logo com IA?
Em Layout › Logomarca, clique em "Gerar com IA", espere e confira as três prévias. A logo só vale depois de "Salvar logomarcas".
- Abra Layout › Logomarca.
- Clique em "Gerar com IA".
- Veja as prévias: logo colorida, versão escura e ícone.
- Se gostou, clique em "Salvar logomarcas". A tela avisa "Clique em 'Salvar logomarcas' para aplicar".
A logo colorida vai para o campo de fundo claro, junto com um ícone novo.
A logo escura gerada pela IA é outro desenho?
Não. A IA cria uma logo colorida. A versão para fundo escuro é essa mesma logo pintada toda de branco pelo navegador, como silhueta.
O que a IA usa para desenhar a minha logo?
O sistema monta o pedido com o nome do site, o assunto (categoria) e as cores do layout. O estilo nasce da cor principal: tons vibrantes viram "Vibrante, vermelho", verdes viram "Natural e sustentável" e azuis viram "Corporativo". Cinza e preto e branco viram "Minimalista".
Para a logo combinar com o que você imagina, ajuste as cores em Layout › Cores antes de gerar.
Quantas logos posso gerar com IA?
Até 2 por dia e 5 por mês em cada site. O limite vale por site, não pela conta toda. O contador do dia zera à meia-noite.
Por que o botão "Gerar com IA" não aparece?
O botão só aparece quando a IA de imagem está disponível no momento. Se ele sumiu, tente de novo mais tarde ou suba a sua própria logo em Layout › Logomarca.
Cores do site
Como mudo as cores do meu site?
Abra Layout › Cores, escolha a cor principal e ajuste as demais faixas do site. Uma prévia ao vivo mostra o resultado antes de você salvar.
- Abra Layout › Cores.
- Escolha a cor principal (uma das 8 prontas ou qualquer cor no seletor).
- Ajuste cor secundária, fundo e as faixas do topo, cabeçalho, menu e rodapé, se quiser.
- Olhe a prévia com o selo "Ao vivo".
- Salve.
Nada muda no site real até você salvar.
Quais partes do site posso pintar?
São 13 campos de cor: principal, secundária (botões e links), fundo do site e fundo e texto de cinco faixas: barra do topo, cabeçalho, menu, rodapé e a barra final do rodapé.
Como uso o código exato da cor da minha marca?
Ao lado de cada cor há um campo de texto. Digite o código no formato #RRGGBB (6 dígitos) e a bolinha acompanha. Também dá para clicar na bolinha e usar o seletor.
Digitei uma cor e ela não foi salva. Por quê?
Provavelmente o código está fora do formato. A cor precisa começar com # e ter dígitos hexadecimais (0 a 9 e A a F). Valores inválidos são descartados ao salvar.
Para a bolinha de prévia atualizar, use 6 dígitos, como #1D3557.
Que cores prontas existem para a cor principal?
Oito: Vermelho, Marinho, Verde, Laranja, Roxo, Petróleo, Vinho e Preto. A cor que o site usa agora aparece marcada.
Qual a diferença entre cor principal e cor secundária?
A cor principal é a cor de destaque da marca no site. A secundária é usada em botões e links. As duas são escolhidas já na criação do site e podem ser trocadas em Layout › Cores.
Como funciona o botão "Gerar paleta"?
A cada clique o sistema sorteia uma cor-base e monta uma combinação de cores que combinam entre si. Se não gostar, clique de novo ou use "Desfazer mudanças".
Ele escolhe entre cinco jeitos de montar o site: topo escuro, cabeçalho colorido, barra do topo colorida, tudo escuro ou tudo claro. Nada fica no site até você salvar.
Como desfaço as mudanças de cor que ainda não salvei?
Clique em "Desfazer mudanças" na tela de Cores. As cores voltam ao que estava salvo quando você abriu a página. Isso não restaura o padrão de fábrica.
O sistema muda as cores que eu escolhi?
Só quando o texto ficaria ilegível. Se o texto do topo, do cabeçalho, do menu ou do rodapé tiver pouco contraste com o fundo, o sistema clareia ou escurece o próprio texto, mantendo o tom da sua marca.
Também escolhe branco ou preto para o texto sobre a cor de destaque, conforme o contraste.
Fontes (letras)
Como troco a letra dos títulos e do texto?
Em Layout › Fontes você escolhe uma letra para os títulos e outra para o texto, entre as fontes do Google que a tela oferece. Uma prévia mostra "Título de Exemplo" e "Texto de exemplo para leitura".
A caixa "Fonte atual" mostra o que o site usa hoje, e a lista rola sozinha até a fonte escolhida.
Que espessuras de letra posso escolher?
Nos títulos: Normal (400), Média, Seminegrito, Negrito (700, o padrão), Extra ou Preta (900). No texto: Fina (300), Normal (400, o padrão), Média, Seminegrito ou Negrito (700).
Problemas e limites de aparência
Mudei o layout e o site não mudou. O que faço?
Confira se clicou em Salvar na tela em que mexeu. Cada salvamento de layout, anúncios, enquete e domínio limpa a memória temporária do site, e a mudança aparece em até alguns segundos.
Se ainda não aparecer, atualize a página do site no navegador.
Matérias com IA