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çãoMargem | 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.
Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!