Estilo do bloco: CSS personalizado para ajustes avançados

No final da aba Estilo, o grupo Avançado tem o campo CSS personalizado. É para quem precisa de um acabamento que as opções prontas não oferecem: cantos redondos só em um bloco, uma sombra, um degradê de fundo, a cor de um título específico. Você não precisa saber programar, mas precisa copiar os exemplos com cuidado.

suaimobiliaria.realimob.com.br/painel/editor⤢

12

1. 1CSS personalizado: escreva suas regras aqui.
2. 2A ajuda explica a palavra selector.

A palavra mágica: selector

Dentro do campo, a palavra selector significa "este bloco". O editor troca por um identificador único do bloco, e assim nada vaza para os outros.

Exemplos para copiar

Cantos arredondados no bloco inteiro:

selector { border-radius: 20px; }

Sombra suave:

selector { box-shadow: 0 10px 30px rgba(0,0,0,.15); }

Título em outra cor:

selector h2 { color: #c2185b; }

Fundo em degradê:

selector { background: linear-gradient(135deg, #0f2a44, #2f6df6); }

Texto maior só neste bloco:

selector p { font-size: 1.2rem; }

suaimobiliaria.realimob.com.br/painel/editor⤢

12

1. 1Cole aqui um exemplo, como: selector { border-radius: 20px; }
2. 2A prévia mostra o efeito no bloco escolhido.

Se você escrever só as propriedades, sem a palavra selector, elas valem para o bloco inteiro. Exemplo: border-radius: 20px; funciona igual ao primeiro exemplo.

Regras e limites

• Até 5.000 caracteres por bloco.
• O campo é um editor de texto "de código": a tecla Tab insere dois espaços em vez de pular de campo.
• Por segurança, o sistema remove automaticamente o que é perigoso: qualquer sinal de <, importações externas (@import) e instruções que executam programas.
• O CSS aparece na prévia e vale no site depois de Publicar.
• Esse campo entra na cópia do estilo: Copiar estilo leva junto o CSS personalizado.

Passo a passo

1. Selecione o bloco e abra a aba Estilo.
2. Role até "Avançado".
3. Clique na caixa "CSS personalizado" e cole um dos exemplos.
4. Confira na prévia. Se nada mudar, veja se digitou selector exatamente assim, com as chaves { } e o ponto e vírgula no fim da linha.
5. Para desfazer, apague o texto do campo.

suaimobiliaria.realimob.com.br/painel/editor⤢

12

1. 1O CSS fica salvo como rascunho.
2. 2Publicar leva o CSS para o site.

Perguntas frequentes

Escrevi o CSS e nada mudou.

Confira chaves e ponto e vírgula. Em blocos com fundo definido na aba Estilo, a regra do CSS tem de ser mais específica; teste colocar !important no final do valor (por exemplo, color: #c2185b !important;).

Posso usar CSS para mudar o site inteiro?

O CSS do bloco vale só para ele. Para o site inteiro, use a aba Estilo do site, ou o campo de código personalizado em Configurações › Integrações (veja Código personalizado).

Veja também

Copiar e colar estilo · Código personalizado · Fundo e cor do texto