Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderResponsividade
Como funciona a responsividade dentro do Construtor da Rockty 🎥
Como funciona a responsividade dentro do Construtor da Rockty 🎥

Como funciona a responsividade e o controle de visibilidade dentro do construtor

Sinésio Alves avatar
Escrito por Sinésio Alves
Atualizado há mais de uma semana

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:

  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.


Precisa de Ajuda?

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


Respondeu à sua pergunta?