top_br
Efetuar login

Suporte Bitrix24

Estilos CSS personalizados para Sites e Loja On-line

Classificação:

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.
Isso ajudou Obrigado :) Isso não ajudou Desculpa :(
Você poderia nos dizer por que:
Não é o que estou procurando
É muito complicado

Não encontrou resposta a sua pergunta?

Envie sua pergunta para a equipe Bitrix24Care
Para ter o acesso ao suporte técnico de especialistas é preciso possuir a assinatura de um plano comercial, o serviço não é acessível para os usuários de contas gratuitas. As contas gratuitas são limitadas em recursos de auto-suporte, tais como manuais, artigos do helpdesk, vídeo titulares e webinares gratuitos. A assistência técnica, treinamentos, configurações,customatizações e outros serviços adicionais podem ser comprados diretamente de parceiros locais do Bitrix24