Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderComo Funciona o Construtor
Como funcionam as configurações de Linhas e Colunas na Rockty 🎥
Como funcionam as configurações de Linhas e Colunas na Rockty 🎥

Saiba como fazer configurações avançadas, de ajuste e estilo, duplicar, movimentar, adicionar e excluir uma linha ou coluna.

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

Introdução

No construtor de sites da Rockty, entender como ajustar linhas e colunas é essencial para criar layouts flexíveis e personalizados. Este tutorial irá guiá-lo através das principais funções de configuração, incluindo ajustes de visibilidade, estilo e animações, além de mostrar como adicionar, remover, duplicar e movimentar linhas e colunas para otimizar seu design.

📺 Assista ao vídeo abaixo para uma demonstração prática sobre como funciona o construtor de sites da Rockty.


1. Excluindo uma Linha ou Coluna

Para excluir uma linha (azul) ou coluna (laranja), clique no ícone de lixeira localizado no canto superior direito da linha ou coluna selecionada.

Atenção: Ao excluir uma linha, todas as colunas inseridas nela também serão removidas.


2. Configurações de Ajustes, Estilo e Avançado

Para acessar as configurações de ajustes, estilo e avançado, clique no ícone de engrenagem no canto superior direito da linha ou coluna selecionada.


O painel de edição será exibido, permitindo ajustar diferentes propriedades conforme veremos a seguir:

Ajustes

  • Visibilidade (Linha): Configure a visibilidade da linha e suas colunas para diferentes dispositivos (Desktop, Tablet, Mobile) clicando no botão correspondente. Para tornar a linha visível novamente, clique no botão do dispositivo onde foi ocultada.


    Posição

  • Margem | Espaçamento Interno: Ajuste a margem superior e o espaçamento interno (superior, inferior, esquerdo, direito) inserindo valores manualmente ou ajustando a barra. Evite margens negativas para evitar conflitos de layout.

Estilo

  • Cor de Fundo: Configure a cor de fundo da linha e/ou coluna usando a paleta de cores ou o código HEX. É possível aplicar um gradiente definindo a orientação da cor.

  • Imagem de Fundo: Adicione uma imagem de fundo clicando em "imagem" abaixo do título. Selecione uma imagem da biblioteca da Rockty ou faça upload do seu dispositivo.

  • Borda | Sombra | Radial: Configure borda, sombra ou efeito radial ativando as respectivas opções e ajustando cor, tamanho, deslocamento e esfumaçamento.

Avançado

  • Efeitos de Movimento – Animação: Selecione um efeito de animação para a linha e/ou coluna. Configure o comportamento da animação, como "Uma vez" ou "Infinito", e a ativação "Animação de entrada" ou "Ao passar o mouse". Ajuste a duração e o atraso conforme necessário.

  • CSS Classes: Configure CSS para a linha e/ou coluna inserindo um nome para a classe CSS e aplicando o código através do elemento de Script. Para mais detalhes, consulte nosso tutorial dedicado a CSS Classes: Como Funciona a Configuração CSS Classes na Rockty.


3. Duplicando uma Linha

Para duplicar uma linha, clique no ícone de duplicar ao lado da engrenagem no canto superior direito da linha. Uma nova linha será criada abaixo da linha selecionada.


4. Adicionando uma Nova Linha/Coluna

Clique no ícone de + (azul para adicionar uma linha e laranja para adicionar uma coluna) para inserir uma nova linha ou coluna. A nova linha será adicionada abaixo da atual e a nova coluna será inserida ao lado direito.


5. Movimentar Linhas e Colunas

  • Linhas (Azul): Para mover uma linha para cima ou para baixo, use os ícones de seta.

  • Colunas (Laranja): Para mover uma coluna para a esquerda ou direita, clique nos ícones < ou >. Também é possível ajustar a largura da coluna clicando no ícone ↔ e arrastando o cursor para a posição desejada.

💡 Dica: Para uma explicação mais detalhada sobre como trabalhar com colunas, acesse nosso tutorial dedicado: Trabalhando com Colunas no Construtor da Rockty.


Conclusão

Agora que você entende como ajustar, duplicar e movimentar linhas e colunas na Rockty, experimente essas configurações para personalizar seu layout conforme suas necessidades. Explore as opções e aproveite ao máximo as funcionalidades do construtor de sites!


Dicas Adicionais

  • Organize o Layout com Linhas e Colunas: Utilize linhas para dividir o conteúdo horizontalmente e colunas para segmentá-lo dentro de cada linha, facilitando a criação de um layout claro e responsivo.

  • Teste a Responsividade: Verifique como o layout se adapta em diferentes dispositivos, ajustando as proporções de colunas para garantir uma boa experiência tanto em desktops quanto em dispositivos móveis.

  • Ajustes Personalizados para Cada Dispositivo: Explore as opções de visibilidade de linhas e colunas por dispositivo, ocultando ou customizando para versões específicas de desktop, tablet e mobile.

  • Use Alinhamento e Espaçamento: Ajuste as configurações para garantir o espaçamento adequado entre elementos dentro das colunas, evitando sobreposição e mantendo o layout limpo.

  • Combine Colunas de Diferentes Tamanhos: Experimente variar a quantidade e o tamanho das colunas em cada linha para destacar conteúdos e criar um design dinâmico.

  • Personalize o Fundo das Linhas e Colunas: Aplique diferentes cores, gradientes ou imagens de fundo nas linhas e colunas para criar seções visuais distintas e chamar a atenção para conteúdos específicos.

  • Use imagens otimizadas para garantir melhor performance nas suas páginas. Recomendamos o formato WebP, que oferece uma boa relação entre qualidade e tamanho do arquivo.

  • Para otimizar e converter suas imagens para WebP, você pode utilizar ferramentas como TinyPNG ou Squoosh, que são gratuitas e fáceis de usar.


Precisa de Ajuda?

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

Respondeu à sua pergunta?