Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderRecursos e Ferramentas do Construtor
Como funciona a configuração CSS Classes na Rockty
Como funciona a configuração CSS Classes na Rockty

Aprenda a utilizar o recurso de CSS Classes para personalizar suas páginas

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

Introdução

Este tutorial oferece uma visão básica sobre como usar o recurso de CSS Classes nas opções avançadas de configuração da Rockty. Ideal para quem está começando a explorar personalizações com CSS, sem necessidade de conhecimentos avançados em programação. Para ajustes mais complexos, recomendamos consultar materiais adicionais ou nossa equipe de suporte.

O que é o recurso 'CSS Classes' na Rockty?

O recurso CSS Classes permite que você adicione atributos de classe aos elementos da sua página, possibilitando personalizações como estilização específica via scripts. Esse recurso está disponível na maioria dos elementos da Rockty, incluindo Seções, Linhas, e Colunas.

Passo a Passo para Configurar CSS Classes

1. Acessando o Recurso de CSS Classes

Para começar, acesse as configurações avançadas do componente onde deseja aplicar o CSS. Você pode aplicar CSS Classes em Seções, Linhas, Colunas ou na maioria dos elementos individuais.

Nota: Neste tutorial, usaremos um exemplo de CSS para arredondar uma imagem, mostrando passo a passo como aplicar essa estilização.

  1. Clique no ícone de engrenagem do componente selecionado para abrir as configurações.
    ​

  2. Acesse a aba "Avançado" e clique em "CSS Classes".

  3. Digite um nome único e descritivo para a classe, e pressione "Enter" no seu teclado para salvar.
    ​

❗ Importante: O nome da classe será usado posteriormente no script que definirá as estilizações desejadas para o elemento.

2. Adicionando um Elemento de Script

Depois de configurar a Classe CSS, o próximo passo é adicionar um elemento de script na sua página:

  1. No construtor, adicione o 'Elemento de Script' na página.
    ​

  2. Após adicionado, clique no código do script gerado automaticamente no topo da página para abrir a janela de edição.
    ​


    ​💡 Dica: Se precisar de mais detalhes sobre como funciona o Elemento de Script na Rockty, confira nosso tutorial dedicado clicando aqui.
    ​

3. Inserindo o Script no Componente

Na janela de edição do script, você pode adicionar o código necessário para aplicar o estilo personalizado:

  • Insira o código CSS dentro da tag <style>.

  • Utilize o nome da classe que você configurou no passo anterior para direcionar o estilo ao elemento correto.

Exemplo de Código:
​

<style> .imagem-arredondada img { border-radius: 100%; border: 20px solid red; } </style>

  • Para estilizações, insira o script no <head> da página, clicando na chave disponível. Isso garante que os estilos sejam aplicados antes do conteúdo visual ser exibido.

  • Para remover o script, clique no ícone de lixeira.

  • Para fechar a janela, clique no ícone "X".
    ​

4. Finalizando as Configurações

Após inserir o script, feche a janela do 'Elemento de Script' e publique a página para que as alterações sejam aplicadas. Lembre-se de que os efeitos do CSS Classes só serão visíveis na versão publicada da página.
​

Conclusão

Este tutorial ofereceu uma introdução simples ao uso de CSS Classes na Rockty, ideal para iniciantes que desejam explorar personalizações básicas. Para configurações mais avançadas ou dúvidas adicionais, sinta-se à vontade para contatar nossa equipe de suporte.

Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!
​

Respondeu à sua pergunta?