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