Principal Construtor de Sites/Builder Como Configurar Opções Adicionais do Blog de Lançamento e CPL na Rockty

Como Configurar Opções Adicionais do Blog de Lançamento e CPL na Rockty

Última atualização em Jan 30, 2025

Introdução

Este tutorial é dedicado às configurações adicionais do Blog de Lançamento e CPL (Conteúdo de Pré-Lançamento) na Rockty. Se você já conhece as principais configurações e deseja explorar ajustes focados em estilização, posicionamento e configurações avançadas para personalizar ainda mais suas páginas, este guia é para você.

💡 Dica: Para uma visão geral das principais configurações, consulte primeiro o tutorial Principais Configurações do Blog de Lançamento e CPL na Rockty.

Configurações Adicionais do Blog de Lançamento

1. Configurações da Linha Verde do Blog de Lançamento

Ajustes | Posição

  • Visibilidade: Configure a visibilidade do elemento para diferentes dispositivos (Desktop, Tablet, Mobile). Clique no ícone do dispositivo para ocultar ou mostrar o elemento conforme necessário.

  • Direção: Defina a orientação dos elementos entre Vertical e Horizontal clicando no ícone de seta e selecionando a opção desejada.

  • Posição: Ajuste a margem (topo) e o espaçamento interno (topo, baixo, direita, esquerda). Insira valores manualmente ou use a barra de ajuste. Atenção: Evite margens negativas excessivas para evitar conflitos com outros elementos.

Avançado

  • Efeitos de Movimento – Animação: Selecione e configure animações para o elemento. Defina o comportamento (única vez ou contínuo), ativação (entrada na página ou ao passar o mouse), duração (normal, devagar, rápido), e atraso.

  • CSS Classes: Utilize CSS para estilos avançados, inserindo um nome de classe e aplicando o código correspondente através do elemento Script. Para mais detalhes, confira nosso tutorial sobre CSS Classes na Rockty.
    ​

2. Configurações da Linha Vermelha do Blog de Lançamento

Ajustes

  • Data de Liberação: Configure a data e o horário para liberação de aulas (se a distribuição for Programação). Clique no ícone de calendário para definir.

  • ID do CPL: Defina o caminho da URL para personalizar a URL da aula.

  • Link do CPL: Verifique e copie a URL da CPL clicando no ícone de copiar.

  • Liberar Aula: Se a distribuição for Manual, use a chave para liberar a aula imediatamente.

Posição

  • Espaçamento Interno: Ajuste o espaçamento interno (topo, baixo, direita, esquerda) inserindo valores manualmente ou usando a barra de ajuste.
    ​
    🚨 Atenção: Evite margens negativas excessivas para prevenir conflitos com outros elementos da página.

Avançado

  • CSS Classes: Utilize CSS para estilos avançados, inserindo um nome de classe e aplicando o código correspondente através do elemento Script. Para mais detalhes, confira nosso tutorial sobre CSS Classes na Rockty.
    ​

3. Configurações da Linha Cinza do Blog de Lançamento

1. Configurações do Elemento de Imagem

  • Visibilidade: Configure a visibilidade para diferentes dispositivos.

  • Preenchimento do Objeto: Ajuste o tipo de preenchimento da imagem.

  • Posição: Defina margem e espaçamento interno.

  • Estilo: Configure a imagem, o tamanho, a borda, o efeito radial e a opacidade.

  • Publicado | Não publicado: Ajuste as configurações de estilo para as versões publicado e não publicado da aula.
    ​

2. Configurações dos Elementos de Texto (Título e Subtítulo)

  • Posição: Ajuste a posição, largura, margem e espaçamento interno do texto.

  • Estilo: Configure a cor do texto, fontes, estilo da fonte, tamanho da fonte, altura da linha e opacidade.

  • Avançado: Utilize CSS para estilos avançados, inserindo um nome de classe e aplicando o código correspondente através do elemento Script. **Para mais detalhes, confira nosso tutorial sobre CSS Classes na Rockty.
    ​

Configurações Adicionais do CPL (Conteúdo de Pré-Lançamento)

1. Configurações da Linha Verde do CPL

Ajustes | Posição

  • Visibilidade: Configure a visibilidade para diferentes dispositivos.

  • Direção: Defina a orientação dos elementos entre Vertical e Horizontal.

  • Posição: Ajuste margem e espaçamento interno.
    ​
    🚨 Atenção: Evite margens negativas excessivas para prevenir conflitos com outros elementos da página.

Avançado

  • Efeitos de Movimento – Animação: Configure animações com opções de comportamento, ativação, duração e atraso.

  • CSS Classes: Utilize CSS para estilos avançados, inserindo um nome de classe e aplicando o código correspondente através do elemento Script. **Para mais detalhes, confira nosso tutorial sobre CSS Classes na Rockty.
    ​

2. Configurações da Linha Vermelha do CPL

Vídeo

O elemento de vídeo dentro da CPL segue o mesmo padrão de configuração do elemento de vídeo da Rockty. Caso precise de mais detalhes sobre a configuração, consulte o tutorial em Como Funciona o Elemento Vídeo na Rockty.
​

Free Content (Conteúdo Livre)

Por padrão, a área de Free Content da CPL é gerada com elementos de Título e Parágrafo, que podem ser editados conforme o padrão comum de edição na Rockty. Na área de Free Content, você pode remover, duplicar e adicionar elementos, como botões e bullet points, para personalizar ainda mais o conteúdo.
​
​**Para orientações iniciais sobre a configuração de elementos, acesse nossos tutoriais na seção **Elementos.
​

  • Posição: Ajuste a posição, largura, margem e espaçamento interno da área de free content.

  • Estilo: Configure borda, sombra e radial para a area de free content.

  • Avançado: Selecione e configure animações. Utilize CSS para estilos avançados, inserindo um nome de classe e aplicando o código correspondente através do elemento Script. **Para mais detalhes, confira nosso tutorial sobre **CSS Classes na Rockty.

Social

O elemento Social dentro da CPL segue o mesmo padrão de configuração do elemento Social da Rockty. Caso precise de mais detalhes sobre a configuração, consulte o tutorial em Como funciona o elemento Social na Rockty.
​

Dicas Adicionais

  1. Teste as configurações em diferentes dispositivos: Após configurar as opções de visibilidade e posição dos elementos, não se esqueça de visualizar a página em dispositivos como desktop, tablet e mobile para garantir que a aparência esteja adequada em todos os tamanhos de tela.

  2. Evite margens negativas excessivas: Embora seja possível ajustar margens e espaçamentos, usar valores negativos elevados pode gerar conflitos entre os elementos da página, resultando em uma exibição incorreta.

  3. Aplique animações com moderação: As animações podem chamar a atenção para elementos importantes, mas evite sobrecarregar a página com muitos efeitos, pois isso pode afetar o tempo de carregamento e a experiência do usuário.

  4. Teste a interação dos elementos: Se você adicionar botões ou links, teste-os para garantir que estão funcionando corretamente e levando o usuário para a página ou ação desejada.

Precisa de Ajuda?

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