Introdução à Responsividade na Rockty
Em alguns construtores de páginas, você precisa criar versões separadas para PC/Desktop, Tablet e Celular, o que triplica o trabalho. Na Rockty, o processo é simplificado: você constrói a página apenas uma vez, e essa estrutura é automaticamente aplicada a todas as versões responsivas (PC, Tablet, e Celular). Isso inclui seções, linhas/colunas e elementos.
📺 Assista ao vídeo abaixo para uma demonstração prática, ou continue lendo para mais detalhes sobre como a responsividade funciona na Rockty.
1. Estrutura de Página Única
Na Rockty, a estrutura básica da página é preservada em todas as versões. Isso significa que você não precisa reconstruir a página para cada dispositivo, apenas ajustar as configurações específicas para as versões responsivas.
💡 Dica: Recomendamos começar a construção pela versão PC/Desktop.
À medida que você adiciona elementos, eles são "herdados" para as versões Tablet e Celular na seguinte sequência: Desktop > Tablet > Celular. Assim, ajustes feitos em uma versão são automaticamente aplicados nas seguintes, facilitando o gerenciamento das suas páginas.
2. Importante: Elementos Estruturais
Entender como os elementos estruturais funcionam é essencial para a responsividade na Rockty. Elementos estruturais como linhas, colunas e títulos são compartilhados entre todas as versões. Se você adicionar ou remover um desses elementos na versão Desktop, a mudança se refletirá automaticamente nas versões Tablet e Celular.
📌 Exemplo: Se um título for deletado na versão Desktop, ele também será removido das versões Tablet e Celular.
📝 Resumo: Alterações na estrutura são aplicadas em todas as versões da página.
3. Estilização Personalizada por Versão
Embora a estrutura básica seja compartilhada, você pode personalizar a aparência de elementos em cada versão. Por exemplo, um título pode ter um tamanho maior e ser azul na versão Desktop, enquanto na versão Celular pode ser menor e vermelho. A estrutura do título permanece, mas a estilização é adaptada para cada dispositivo.
📌 Este é o ponto-chave da responsividade na Rockty: a estrutura é consistente, mas a estilização pode (e deve) ser individualizada para cada versão.
As imagens abaixo ilustram as diferentes versões da mesma página:
PC/Desktop
Tablet
Celular
4. Controle de Visibilidade
Para ter mais liberdade na criação de suas páginas em diferentes versões (PC/Desktop, Tablet e Celular), a Rockty oferece um recurso de Visibilidade. Esse recurso permite definir quais elementos (seções, linhas, colunas, etc.) serão visíveis ou ocultos em cada versão da página.
5. Como usar o recurso de Visibilidade:
Acesse as Configurações: Clique na engrenagem das seções, linhas, colunas, ou da maioria dos elementos que deseja ajustar.
Ajustes de Visibilidade: No menu de configurações, vá para a aba 'Ajustes'.
Defina a Visibilidade: Clique nos ícones que representam cada versão da página (Desktop, Tablet, Celular) para definir se o elemento será visível ou oculto na versão escolhida.
Remover Ocultação: Para tornar o elemento visível novamente em uma versão específica, basta clicar novamente no ícone correspondente.
📌 Nota: Esse recurso é extremamente útil para personalizar a experiência do usuário em diferentes dispositivos, permitindo que você adapte o conteúdo exibido de acordo com o contexto e as necessidades de cada versão da página.
Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!