Com exceção dos elementos LGPD, Carrossel e Galeria de Imagens, o CSS Classes está disponivel nas configurações avançadas de todos os outros elementos do RockFunnels. O recurso também está disponivel em Seções, Linhas e Colunas.
O recurso é interessante, pois permite marcar elementos na página adicionando atributos de classes, para que através de scripts sejam aplicados recursos personalizados como estilização ou qualquer outro recurso de um script de terceiro.
1. O primeiro passo da configuração de CSS Classes é acessar a engrenagem da seção, linha, coluna ou elemento disponivel que deseja aplicar o recurso.
Observação: Nesse tutorial iremos usar como exemplo a configuração do CSS Classes em uma imagem.
2. Após acessar a engrenagem da seção, linha, coluna ou elemento:
Acesse a opção ‘Avançado’ > em seguida clique em ‘CSS Classes’ > digite um nome para a classe conforme desejado e pressione a tecla ‘Enter’ no teclado do seu dispositivo.
Após pressionar a tecla ‘Enter’ o nome ficará salvo no campo.
Importante: O nome deve ser criado para que use o como identificação da classe no script que irá inserir para definir a configuração de estilo desejada.
3. O próximo passo será adicionar um elemento de script na sua página.
4. Após adicionado, acesse-o ao clicar no código gerado automaticamente no topo da sua página.
5. Após clicar no código gerado automaticamente, será apresentado na tela uma janela onde poderá inserir o script para aplicar o recurso desejado no elemento, seção, linha ou coluna.
Lembrando que é necessário usar o nome dado para a classe conforme descrito no passo 2 desse tutorial.
No exemplo abaixo usamos um script com o objetivo de arredondar a imagem, veja que na linha 2 o nome dado para a classe no exemplo do segundo passo do tutorial está sendo chamado no script:
<style>
.imagem-arredondada img {
border-radius: 100%;
border: 20px red;
}
</style>
- É possível selecionar a inserção do script no body ou header ao clicar na chave disponivel.
- Para remover o elemento de script clique no ícone de lixeira.
- Para fechar a janela clique no ícone X.
Após finalizar, publique a página para salvar as alterações.
Importante: O recurso aplicado através do CSS Classes ficará visível apenas na página publicada, conforme imagem abaixo:
