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:

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:

1. Acesse as Configurações: Clique na engrenagem das seções, linhas, colunas, ou da maioria dos elementos que deseja ajustar.
   ​

2. Ajustes de Visibilidade: No menu de configurações, vá para a aba 'Ajustes'.
   ​

3. 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.
   ​

4. 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.

6. Importante: Garanta a consistência em todas as versões (Desktop, Tablet e Mobile)!

📝É fundamental construir uma versão sólida da sua página para todas as dimensões de tela: desktop, tablet e mobile.

🚨 Embora muitos usuários foquem no desktop e mobile, a versão tablet não deve ser negligenciada. Dispositivos móveis com telas maiores, como tablets ou celulares posicionados na horizontal, podem usar a versão tablet como referência.

❗ Se essa versão estiver incompleta — por exemplo, sem um formulário, botão ou outro elemento essencial presente nas versões desktop e mobile — isso pode impactar negativamente a experiência do usuário e até prejudicar a conversão da página.

💡 Dica: Revise sua página em todas as visualizações antes de publicá-la para garantir uma experiência completa e consistente!

Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!