Principal Construtor de Sites/Builder Como Funcionam as Configurações de Seção/Container na Rockty 🎥 (Como Funciona o Construtor)

Como Funcionam as Configurações de Seção/Container na Rockty 🎥 (Como Funciona o Construtor)

Última atualização em Jan 16, 2025

Introdução

No construtor de sites da Rockty, as configurações de seção/container são essenciais para personalizar e otimizar suas páginas. Este tutorial irá guiá-lo através das principais configurações, incluindo ajustes de visibilidade, estilo, e opções avançadas, como animações e eventos. Com essas ferramentas, você poderá ajustar seu layout com precisão, duplicar seções, e adicionar novas com facilidade.

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

1. Excluindo uma Seção

Para excluir uma seção, clique no ícone de lixeira no canto superior direito da seção que deseja remover.

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 seção.

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

  • Visibilidade: Permite ocultar ou mostrar a seção em dispositivos específicos (Desktop, Tablet, Mobile). Para ocultar ou mostrar, basta clicar no ícone correspondente ao dispositivo.

  • ID do Container/Seção: Permite definir um ID (nome) para a seção, útil para links de âncora que direcionam para partes específicas da página. 💡 Saiba mais sobre esse recurso aqui.

  • Fixar Conteúdo: Mantém a seção fixa no topo ou no rodapé enquanto o visitante rola a página (ativo apenas na página publicada).

  • Centralizar: As seções são centralizadas por padrão. Para um layout fluido, desative a opção "Centralizado".

  • Margem e Espaçamento Interno: Ajuste as margens e espaçamentos internos da seção manualmente ou usando as barras de controle. 📌 Evite margens negativas para evitar conflitos de layout.
    ​

Estilo

  • Cor de Fundo: Configure a cor de fundo usando a paleta de cores ou inserindo um código HEX. Cores em gradiente também podem ser aplicadas.

  • Imagem de Fundo: Insira uma imagem de fundo que preencha toda a seção, escolhendo da biblioteca de imagens da Rockty ou carregando do seu dispositivo.

  • Borda, Sombra e Radial: Adicione bordas, sombras ou efeitos radiais à seção. Ajuste a cor, tamanho, deslocamento e desfoque conforme necessário.
    ​

Avançado

  • Eventos que Disparam Ações: Configure eventos como "Página Visitada", "Webinar Iniciado", ou "Oferta Ativada" para disparar ações como mostrar/esconder elementos ou atrasar a exibição da seção.
    ​
    📌 ​Para mais detalhes consulte o tutorial dedicado sobre como configurar os eventos de controle avançados.
    ​

  • Efeitos de Movimento – Animação: Adicione animações aos elementos com opções como "Uma vez", "Infinito", "Ao entrar na página", ou "Ao passar o mouse". Ajuste a duração e o atraso das animações conforme desejado.
    ​

  • CSS Classes: Insira CSS personalizado para estilizar a seção através de códigos no elemento de Script. 💡 Para mais detalhes, consulte o tutorial dedicado a CSS Classes na Rockty.
    ​

3. Duplicando uma Seção

Para duplicar uma seção, clique no ícone de duplicação no canto superior direito da seção. A nova seção será duplicada abaixo.

4. Biblioteca de Blocos/Containers

Acesse a biblioteca de blocos/containers clicando nos ícones de disquete no canto superior direito ou na seta para baixo no canto inferior central.

💡 Dica: ​Para saber mais, veja nosso tutorial sobre como usar a biblioteca de blocos para aumentar sua produtividade.

5. Adicionando uma Nova Seção/Container

Para adicionar uma nova seção, clique no ícone de “+” no canto inferior central. Se estiver iniciando uma página em branco, clique em “Adicionar Seção” e selecione o número de colunas desejado (de 1 a 6). Modelos salvos também podem ser carregados da biblioteca de blocos.
​

6. Movimentando Seções/Containers na Página

Para mover uma seção para cima ou para baixo, clique nos ícones de seta (cima/baixo) na seção que deseja reposicionar.

Conclusão

Agora que você conhece as principais configurações de seções e containers na Rockty, aproveite para experimentar e ajustar suas páginas conforme suas necessidades. Explore e personalize suas páginas para criar uma experiência única para seus visitantes!

Dicas Adicionais

  • Estruture a Página com Seções: Divida a página em seções para organizar o conteúdo de forma clara e temática, facilitando a navegação e a compreensão.

  • Ajuste a Altura das Seções: Defina a altura das seções conforme o conteúdo inserido, ajustando para manter um espaçamento adequado e evitar grandes espaços em branco.

  • Adicione Fundos às Seções: Utilize cores, gradientes ou imagens de fundo nas seções para criar contraste visual e destacar áreas importantes do site.

  • Centralize o Conteúdo: Aproveite as opções de alinhamento para centralizar ou distribuir os elementos dentro da seção, garantindo um design equilibrado.

  • Crie Seções Responsivas: Teste as seções em dispositivos diferentes e ajuste-as para garantir que o conteúdo esteja sempre visível e acessível em telas menores.

  • Use Seções para Agrupar Conteúdos Relacionados: Organize conteúdos semelhantes em uma única seção para que os usuários possam consumir informações de forma mais fluida.

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

  • Quer melhorar a performance da sua página? Confira nosso tutorial sobre Como Otimizar Imagens no Construtor de Páginas da Rockty! Aprenda a usar formatos recomendados, técnicas de compressão e ajustes para responsividade, garantindo imagens otimizadas para todas as versões da sua página.

Precisa de Ajuda?

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