Leia as perguntas frequentes
Novo
Suporte do Bitrix24
Inscrição e autorização
Como Começar?
Feed
Bate-papos e chamadas
Calendário
Bitrix24 Drive
E-mail
Grupos de trabalho
Tarefas e Projetos
CRM
CoPilot - IA no Bitrix24
Contact Center
Telefonia
CRM + Loja On-line
Sales Center (beta)
Análise CRM (beta)
Sales Intelligence (beta)
Criador de BI
Automação
Marketing
Bitrix24.Sites
Loja On-line (beta)
Gerenciamento do inventário
Empresa
Base de conhecimento
Videoconferências em HD
Processos de negócio
Robotic Process Automation (beta)
Market (Aplicativos)
Assinatura
Enterprise
Configurações
Meu perfil
Aplicativo desktop
Aplicativo móvel
Bitrix24 On-premise
Questões Gerais
Novidades do Helpdesk (arquivo)

Suporte Bitrix24

Estilos CSS personalizados para Sites e Loja On-line

Bitrix24.Sites suportam estilos CSS personalizados. Com a ajuda deles, você pode configurar a aparências dos elementos do site como quiser.

CSS permitem definir a aparência do site manualmente. Essa ferramenta exige certas habilidades na área de programação. Para saber mais, por favor, refira-se aos materiais didáticos disponíveis na Internet. Por exemplo, Um guia visual gratuito para CSS.

Cor dos elementos

Se você quiser atribuir suas cores corporativas aos elementos do site, você pode atribuí-las ao texto ou fundo dos elementos.

Criaremos um bloco com texto simples e atribuiremos outra cor ao texto.

Para fazê-lo, primeiro publique a página.

Abra a página publicada e chame o modo de código fonte da página (por exemplo, Ctrl + Shift + I no Google Chrome).

Para alterar a cor do texto, precisamos do ID e da classe do bloco.

Copie esses parâmetros e insira-os na seguinte expressão:

#block1496 .landing-block-node-title
{
color: #FFFFF0 ;
}
Se você não determinar o ID do bloco, as alterações serão aplicadas a todos os elementos da classe.

Para alterar a cor de fundo do elemento, copie a classe do bloco e insira-a na seguinte expressão:

#block1496 .block-27-one-col-fix-title-and-text-2 section
{
background-color: #008080 ;
}

A tag section serve para que as alterações sejam aplicadas ao fundo do bloco.

Vá para as Preferências da página:

Clique em Mais > HTML e CSS personalizados e insira os códigos CSS no campo correspondente:

Para visualizar as alterações feitas, recarregue a página publicada. Não é preciso publicar a página de novo.

Se as alterações não foram aplicadas, adicione a palavra-chave !important (por exemplo, color: #E9AD99 !important). Isso pode acontecer se você tentar atribuir um estilo personalizado a elementos, aos quais já foram aplicados estilos padrão do site.

Como ocultar um elemento do bloco?

Como um exemplo, ocultaremos os botões Order now no bloco de preços. Para ocultar um elemento do bloco, copie a classe dele.

Chame o modo de código fonte da página.

Não se esqueça de primeiro publicar a página.

Adicione a seguinte expressão às Preferências da página:

.landing-block-node-price-button
{
display: none ;
}

Salve as alterações e recarregue a página publicada. Todos os botões desta classe serão ocultadas.

Você pode adicionar estilos CSS personalizados na Bitrix24 On-premise, caso tenha a versão do módulo de Sites 18.5.8 ou superior. Verifique a versão antes de começar o trabalho e atualize seu Bitrix24 On-premise, se for preciso.
Essa informação foi útil?
Assistência de Especialistas em Integração
Não é o que estou procurando
Texto complexo e incompreensível
Informações estão desatualizadas
Explicação muito breve, preciso de mais informações
Não gosto de como esta ferramenta funciona
Ir ao Bitrix24
Não tem uma conta? Crie grátis