Cada Card do seu site tem os seus ajustes na barra de ferramentas do Editor, e é por ela que você muda o layout, as cores, o fundo, o título e o que aparece dentro do bloco. É o ajuste mais fino que existe: vale para aquele Card, sem mexer no resto do site.
O que aparece na barra de ferramentas muda de um Card para outro, e isso costuma parecer aleatório quando não é. Este artigo mostra os cinco grupos de ajuste, e principalmente por que uma opção aparece num Card e some no outro. Veja como fazer isso.
⚠️ Atenção!
Este passo a passo vale para a Nova 46graus,
o Painel que abre em app.46graus.com.
Na Versão Clássica as telas são outras.
Entenda onde mora cada ajuste
Antes dos botões, vale saber que o Editor tem quatro níveis, do mais amplo ao mais específico. Quase todo "mudei e não mudou onde eu queria" é ajuste feito no nível errado.
Estilo do site: vale para o site inteiro, e reúne a paleta de cores, as fontes, o tema e as animações.
Card: vale só para aquele bloco, e reúne o esquema de cor, o fundo, o layout, o espaçamento e o título.
Área do conteúdo: a coluna dentro do Card, quando o layout permite mexer nela.
Elemento: o texto, a imagem ou o botão que vive dentro do Card, cada um com os seus ajustes na barra de ferramentas.
A ligação mais importante entre eles é esta: o Card não inventa cor. Ele escolhe entre esquemas de cor que a plataforma gera a partir da paleta que você definiu em Estilo do site.
Abra a barra de ferramentas do Card
Acesse o Painel 46graus e escolha o site.
Abra o Editor do site.
Clique numa área vazia do Card que você quer mudar.
A barra de ferramentas passa a mostrar os ajustes daquele Card, em até cinco grupos: Alterar layout, Cores e fundo, Mostrar, Título do Card e Ações.
O Título do Card é o único que vai e vem: ele aparece na barra de ferramentas quando o título do Card está ligado, e some quando você desliga o título em Mostrar.
Os outros quatro estão sempre lá.
💡 Dica!
Clicar num texto ou numa imagem faz a barra de ferramentas
mostrar as opções daquele elemento, e não as do Card.
Se as opções não são as que você esperava, clique num espaço vazio do bloco.
Esse é o motivo número um de "não acho a opção de fundo": a barra de ferramentas está aberta, só que mostrando as opções do elemento.
Escolha as cores e o fundo
Clique em Cores e fundo para abrir os dois ajustes que mais mudam a cara do Card.
Cor do Card
A cor do Card vem de um esquema de cores do site, e não de um seletor livre. Os esquemas são combinações prontas de fundo, texto, título e ações, geradas a partir da sua paleta.
Você escolhe entre Esquema padrão, Destaque do esquema de cores e os Esquema de cores 1 a 4, conforme os que o seu site tem. A primeira opção da lista, riscada, é Remover esquema de cores.
Para uma cor que ainda não existe na lista, o caminho é outro: ela entra primeiro na paleta, em Estilo do site, e depois aparece como esquema para qualquer Card.
⚠️ Atenção!
Mexer na paleta repinta todos os Cards que usam esquema,
e não só o Card aberto.
É o ajuste de maior alcance do Editor.
Efeito de transição de cores
Com um esquema escolhido, aparece a chave Efeito de transição de cores. Ela não muda o Card: muda o resto da página. Ligada, o fundo da página e as cores do menu passam a acompanhar o esquema desse Card conforme o visitante rola até ele, e voltam ao anterior quando ele sai.
❗ Aviso:
A chave aparece só depois de você escolher um esquema em Cor do Card.
Sem esquema escolhido, ela some da tela.
Fundo
A seção Fundo tem uma fileira de botões com os tipos disponíveis, e o que aparece embaixo muda conforme o que você escolhe. É por isso que uma opção some quando você troca o tipo de fundo.
Cor sólida: nenhum ajuste extra, porque vale a cor do esquema.
Imagem: abre Ajustar imagem, Transparência, Desfoque e Suavizar base da imagem.
Vídeo: abre Personalizar vídeo, Transparência e Suavizar base da imagem.
O que cada ajuste faz:
Transparência decide quanto o fundo deixa a cor do Card aparecer por trás.
Desfoque borra o fundo, em seis níveis.
Suavizar base da imagem esmaece a parte de baixo do fundo, para o Card emendar melhor com o próximo. Apesar do nome, ela vale também para fundo em vídeo.
Ajustar imagem e Personalizar vídeo abrem uma tela à parte com os ajustes daquela mídia, incluindo os Efeitos de fundo.
❗ Aviso:
O desfoque existe só em fundo de imagem.
Em fundo de vídeo você tem a transparência e a suavização da base,
e a opção de desfoque nem aparece na tela.
Fundo em vídeo
O fundo em vídeo aceita as mesmas origens do Card de vídeo: arquivo enviado, link do YouTube ou do Vimeo, ou um vídeo que já está no site. A capa do fundo é a imagem que aparece enquanto o vídeo carrega.
Fundo é ambientação, então ele toca sozinho, sem som e em loop. Quem precisa de som usa um Card de vídeo em vez de fundo.
Para o vídeo que aparece dentro do Card, e não atrás dele, o bloco é outro.
Faça o fundo acompanhar a rolagem
Os Efeitos de fundo ficam na tela de ajustes da mídia: em Ajustar imagem, no fundo de imagem, e em Personalizar vídeo, no fundo de vídeo. Ali você decide como o fundo se comporta enquanto o visitante desce a página:
Nenhum: o fundo acompanha o Card, como o resto da página.
Fixo: o fundo fica parado no lugar enquanto o conteúdo passa por cima.
Parallax: o fundo se move em ritmo diferente do conteúdo, o que dá sensação de profundidade.
Num fundo em vídeo, o caminho é Cores e fundo, depois Personalizar vídeo, e ali os Efeitos de fundo. O Parallax faz o vídeo avançar conforme o visitante desce e voltar conforme ele sobe, no ritmo de quem navega.
⚠️ Atenção!
No fundo em vídeo, o Parallax existe só com arquivo enviado.
Fundo com link do YouTube ou do Vimeo toca sozinho,
sem essa opção.
💡 Dica!
Este é o único lugar do site em que enviar o arquivo rende mais que colar o link.
Em todo o resto, o link continua sendo o caminho mais leve,
porque não ocupa o armazenamento do seu site.
Ao escolher Parallax num vídeo, a plataforma prepara uma versão dele feita para avançar quadro a quadro. Esse preparo roda no seu próprio navegador e leva um tempo, com mensagens de progresso na tela. Deixe a janela aberta até elas sumirem: fechar a aba no meio interrompe o preparo, e ele recomeça do zero.
Se o preparo não terminar, a mensagem diz o motivo e o botão Preparar vídeo novamente recomeça. Os casos mais comuns são o vídeo ficar acima do limite de 30 MB depois de otimizado, o vídeo ter transparência, ou o navegador não dar conta. Nos dois primeiros, a saída é trocar o vídeo ou usar outro efeito.
Troque o layout do Card
O botão Alterar layout muda o arranjo do conteúdo dentro do Card. Cada clique propõe um layout diferente e a prévia muda na hora. A seta de voltar, ao lado, desfaz o último clique, e o botão de quadradinhos abre todos de uma vez para você escolher.
As opções que aparecem seguem uma regra: cada Card pertence a um conjunto de layouts com o mesmo conteúdo. Um Card de uma imagem e um texto troca por outros arranjos de uma imagem e um texto. Para um arranjo com mais imagens ou mais textos, o caminho é adicionar um Card de outra categoria.
Dentro de Alterar layout você também encontra:
Inverter conteúdo, que troca a ordem das colunas no computador e das linhas no celular.
Alinhamento, quando o layout tem alinhamento a oferecer.
Espaçamento entre Cards, que aproxima ou afasta o Card dos vizinhos. O ícone de corrente, ao lado, trava o espaçamento de cima junto com o de baixo.
Computador e celular são ajustes separados
O seletor de Dispositivo, dentro de Alterar layout, é mais do que uma prévia: espaçamento e alinhamento são gravados por dispositivo.
Espaçamento: separado, com um valor para computador e outro para celular.
Alinhamento: separado, da mesma forma.
Inverter conteúdo: uma chave só, com efeito diferente em cada tela.
Cores, fundo e título: valem para as duas telas.
💡 Dica!
Ficou colado ou muito espaçado só no celular?
Troque o dispositivo no Editor e ajuste de novo,
porque esse valor é guardado separado.
Escreva o título do Card
O grupo se chama Título do Card na barra de ferramentas, e abre os próprios ajustes: Texto, Estilo, Tamanho, Cor, Maiúsculas e Espaçamento do conteúdo.
O texto aceita até 3 linhas, de 45 caracteres cada. O tamanho se ajusta sozinho, e a regra explica a dúvida mais comum: a linha mais longa define o tamanho do título inteiro. Quanto mais texto nela, menor a fonte. Encurtar essa linha, ou distribuir o texto nas outras, aumenta o título.
Em Estilo você escolhe Esquerda, Centro ou Marquee, que faz o texto deslizar. A Cor vem dos quatro papéis do esquema escolhido: Título, Texto, Suavizar cor e Ações.
Alguns acabamentos aparecem só em certas combinações:
Sobrepor título põe o título por cima do conteúdo, e aparece nos espaçamentos mais fechados.
Efeito parallax move o título em ritmo diferente na rolagem, e existe no estilo Esquerda.
Recuo estilizado recua a linha mais curta para um visual editorial, e pede o estilo Esquerda com pelo menos 2 linhas.
❗ Aviso:
Esse grupo da Barra de Ferramentas só fica disponível
quando a opção título do card está ligada no grupo Mostrar.
Escolha o que aparece
O grupo Mostrar liga e desliga elementos do Card, com duas chaves:
Título do Card, sempre disponível. É por aqui que você esconde o título sem apagar o texto, e é ela que faz o grupo de edição do título sumir da barra de ferramentas.
Botões, que aparece nos Cards que têm botão.
Mova, duplique ou exclua o Card
O grupo Ações reúne o que fazer com o Card inteiro:
Mover para cima e Mover para baixo trocam o Card de posição na página.
Duplicar cria uma cópia completa logo abaixo, com o conteúdo e as mídias.
Excluir remove o Card inteiro.
⚠️ Atenção!
A exclusão acontece na hora, sem pedir confirmação,
essa é uma ação irreversível.
O Duplicar também é a forma de guardar um Card do jeito que você montou: a cópia carrega tudo, e serve de ponto de partida para o próximo.
❗ Aviso:
O último Card da página não pode ser excluído.
O botão fica apagado, e o Editor pede que você
adicione outro Card antes.
Quando a barra de ferramentas não mostra a opção
Se a opção que você procura sumiu, quase sempre é um destes motivos:
A barra de ferramentas não mostra as opções do Card: o clique pegou um elemento de dentro. Clique numa área vazia do Card.
O bloco não tem esses ajustes: é um card de sistema, como a galeria, a coleção, a lista de produtos, o detalhe do produto, a política e a confirmação de pedido. Esses seguem o Estilo do site e os ajustes do próprio elemento, na barra de ferramentas.
Falta o grupo Título do Card: o título está desligado em Mostrar. Ligue a chave e o grupo volta à barra de ferramentas.
Falta Alterar layout: aquele Card não pertence a um conjunto de layouts.
Falta Inverter conteúdo: o layout não tem colunas ou linhas para trocar.
Falta Alinhamento: o layout não oferece alinhamento.
Falta a chave Botões: o Card não tem nenhum botão.
Falta Desfoque: o fundo é vídeo ou cor sólida, e o desfoque é só de imagem.
Falta Efeito de transição de cores: nenhum esquema de cor está escolhido no Card.
Falta Recuo estilizado: o estilo do título não é Esquerda, ou o título tem só uma linha.
Some uma opção da área do conteúdo: ela existe no outro dispositivo, e o Editor avisa com Mude o dispositivo para editar.
Resolvendo dúvidas comuns
Quero pintar só um Card de uma cor que não está na lista. Como faço?
A cor entra primeiro na paleta do site, em Estilo do site, e depois aparece como esquema para qualquer Card. Vale saber que isso repinta todos os Cards que usam esquema.Sumiu o grupo Título do Card da barra de ferramentas. Como volto com ele?
Abra Mostrar e ligue a chave Título do Card. O grupo de edição do título volta a aparecer na barra de ferramentas.Mudei o espaçamento e no celular continua igual. O que houve?
O espaçamento é guardado por dispositivo. Dentro de Alterar layout, troque para a versão do celular e ajuste de novo.Excluí um Card sem querer. Dá para recuperar?
A exclusão é definitiva e o Editor não guarda histórico. Se o Card ainda existir em outra página, dá para duplicar de lá; fora isso, ele precisa ser montado de novo.Meu título ficou minúsculo. Como aumento?
O tamanho segue a linha mais longa do título: quanto mais texto nela, menor a fonte. Encurte essa linha ou distribua o texto nas outras, e o título cresce junto.Onde fica o botão de salvar as mudanças do Card?
O Editor salva sozinho, e a barra inferior mostra Salvando e depois Salvo. Se aparecer Salvo localmente ou um aviso de erro, vale recarregar a página e conferir se os ajustes ficaram.Quero repetir esse Card personalizado em outra página. Dá?
Dentro da mesma página, Duplicar resolve. Entre páginas, o Card é montado de novo.Personalizei um Card e quero o mesmo visual na minha galeria ou na Loja. Por que a barra de ferramentas não mostra esses ajustes?
Esses são cards de sistema. O visual deles vem do Estilo do site e dos ajustes do próprio elemento, como a barra de ferramentas da galeria ou a da lista de produtos.
Precisa de ajuda?
Com os Cards ajustados do seu jeito, o site passa a ter o ritmo e a identidade do seu trabalho, página por página. Se ficar com alguma dúvida, chame a gente no chat de atendimento. Estamos por aqui para ajudar você a deixar tudo redondo. 😊