Passar para o conteúdo principal

Conheça o Editor da 46graus

Atualizado há mais de 2 meses

O Editor é uma das partes mais importantes do seu site. É usando ele que você transparece a personalidade do seu trabalho e deixa tudo mais bonito e atrativo. A ideia é simples: escolher cores e fontes que combinam com você e organizar os conteúdos cards. Tudo de forma simples e prática.


Menu lateral (navegação principal)

Este é o menu principal do Editor. Quando nenhum elemento está selecionado, ele funciona como um menu geral, com acesso a páginas e estilos do site. Ao selecionar um elemento na página (por exemplo, um card, imagem ou texto), o menu se adapta e mostra opções específicas para esse elemento.

O que você encontra por lá:

  • Estilos do site: acesso rápido a tema, cores, fontes, opções de botões e formas.

  • Ir para a página: Local onde você seleciona a página do site que quer editar.

  • Adicionar card: atalho principal para você adicionar cards na página.

💡 Dica

Use nomes claros para as suas páginas (ex.: Portfólio, Sobre, Contato).

Isso facilita a navegação dentro do Editor e ajuda na organização do site.


Estilos do site

Tudo o que define o visual global do seu site fica agrupado em Estilos do site: tema, cores, fontes e outras opções que se aplicam a todas as páginas.

Tema

O tema ajusta a base visual do site (variações de botões, cards, espaçamentos e cantos arredondados). Escolha um estilo que combine com seu trabalho e, se disponível, teste variações claro/escuro.

Como escolher: na menu lateral, acesse Estilos do site > Tema e selecione a opção desejada. A mudança vale para o site inteiro.

Cores

As cores definem clima e contraste. Você escolhe a cor principal (para destaques e botões), cores de fundo e texto, além de variações de apoio. Para aplicar em todo o site, é necessário escolher as cores de uma paleta. Você pode usar paletas prontas ou criar a sua própria — ela será usada em todo o site.

Como ajustar:

  1. Na menu lateral, clique em Estilo do Site > Cores.

  2. Escolha uma paleta sugerida ou crie a sua.

  3. Defina cor de fundo, cor de título, cor de texto e ações .

💡 Dica

A IA da 46graus ajusta automaticamente as cores da paleta para manter contraste e legibilidade em todo o site. As cores são adaptadas pela IA dentro da paleta escolhida.

Fontes

As fontes dão personalidade e melhoram a leitura. Em geral, combine uma fonte para títulos e outra para textos.

Como ajustar:

  1. Na menu lateral, vá em Estilos do Site > Fontes.

  2. Selecione a fonte dos títulos e a fonte dos textos.

  3. Escolha uma escala de tamanho das fontes no seu site.

💡 Dica

Combine uma fonte de destaque (para títulos) com uma fonte de leitura confortável (para textos). Menos contraste visual = leitura mais fluida.

Mais

Nesse botão, você encontra a largura do conteúdo do site, ajustes de botões, formas e cantos, bordas e sombras, além da opção de adicionar códigos personalizados na página.

  • Largura do conteúdo:
    A largura do conteúdo define quanto da tela o seu site ocupa. No Editor, você escolhe entre 85% ou 100% de largura. Mesmo em 100%, mantemos pequenas margens automáticas para que tudo fique bem ajustado e legível em diferentes telas.

  • Botões:
    Aqui você ajusta o arredondamento dos botões, define a família de fontes, escolhe se o texto usa apenas letras maiúsculas e ajusta o espaçamento.

  • Formas:
    Onde você ajuste o arrendomento de todas as formas utilizadas no site. o estilo de preenchimento e o estilo do ícone.

  • Menu:
    Onde você escolhe o estilo do menu do seu site. Adiciona conteúdo, faz ajustes e escolhe as cores.

  • Editar CSS/JS avançado:
    Espaço disponível para você adicionar códigos personalizados nas páginas do seu site.


Adicionar um card (conteúdo da página)

Os cards são blocos prontos de conteúdo, como galeria de fotos, cabeçalho com título, texto + imagem, depoimentos, lista de produtos e muito mais.

Como adicionar um card:

  1. Abra a página que deseja editar pela menu lateral.

  2. Clique em Adicionar card (na página ou na menu lateral).

  3. Escolha uma categoria (ex.: Galeria, Texto, Destaque, Produtos).

  4. Selecione um modelo de card.

  5. O card entra na página; ajuste textos, imagens e ordem.

💡 Dica

Mantenha uma hierarquia: comece com um card de capa (título + imagem), depois cards de destaque e, por fim, galerias ou listas.

Isso guia o olhar de quem visita.


Barra inferior (visualização e dispositivos)

Essa barra fica na parte inferior da tela, centralizada. Ela reúne atalhos para navegar e conferir a página enquanto você edita.

O que você encontra por lá:

  • Voltar ao Painel: retorna ao Painel 46graus.

  • Nome da página atual: mostra onde você está editando; o ponto verde indica que a página está online;

  • Configurações da página (engrenagem): abre opções específicas da página. (capa, título, status e mais)

  • Visualização por dispositivo: alterne entre mobile e desktop e ative a tela cheia para focar no layout.

💡 Dica

Ajuste tipografia e espaçamentos primeiro no mobile usando os botões de visualização. Assim você garante leitura confortável em telas menores.

⚠️ Atenção

As simulações de dispositivo são uma referência.

Pequenas variações podem ocorrer em aparelhos reais.


Fluxo recomendado para editar sua página

  1. Defina o visual: ajuste cores e fontes.

  2. Estruture a página: adicione cards principais (capa, destaques, galeria).

  3. Preencha o conteúdo: títulos, descrições e imagens otimizadas.

💡 Dica

Planeje cada página com um objetivo (ex.: apresentar portfólio, captar contato, vender). Isso ajuda a decidir quais cards usar e em que ordem.


Precisa de ajuda?

Se ficar com alguma dúvida, chame a gente no chat de atendimento. Estamos por aqui para ajudar você a deixar tudo redondo. 😊

Respondeu à sua pergunta?