Em caso de dúvidas sobre como adicionar um elemento, acesse nosso tutorial sobre como funciona as configurações gerais de elementos no link abaixo:

https://help.rockfunnels.com/pt-BR/articles/6004116-como-funcionam-as-configuracoes-gerais-de-elementos-no-rockfunnels

Esse tutorial irá abordar todas as configurações disponíveis dos elementos Blog de Lançamento e CPL. Caso seu objetivo nesse momento seja aprender as principais configurações do Blog de Lançamento e CPL em um tutorial expresso, acesse o link a seguir:
​
​https://help.rockfunnels.com/pt-BR/articles/6801939-como-funcionam-as-principais-configuracoes-do-blog-de-lancamento-e-cpl-no-rockfunnels
​

​

Na linha verde estão disponíveis os ajustes de posicionamento de tudo que está dentro do elemento Blog de Lançamento, como visibilidade do elemento, tipo de distribuição da liberação das aulas e efeitos de animação do elemento.
​
A linha verde possui 3 ícones distintos. O ícone de “clonar” para criar uma cópia do elemento de lançamento abaixo dele, o ícone de lixeira para “excluir” o elemento e o ícone de engrenagem que deve ser clicado para ter acesso as configurações gerais do elemento que veremos a seguir nesse tutorial:

Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

Direção
​
Em direção é possível definir a orientação dos elementos dentro do Blog de Lançamento entre Vertical e Horizontal ao clicar no ícone de seta, e em seguida clicar na opção desejada.
​
​

Distribuição

Em distribuição é possível definir o tipo de liberação das aulas entre Programação > onde poderá definir uma data e horário de liberação e Manual > onde poderá liberar a aula quando desejar ao clicar na chave de liberação.

Os tipos de liberação da aula ficarão disponíveis na engrenagem da linha vermelha que veremos mais adiante nesse tutorial.

Importante: Na linha verde será possível definir apenas o tipo de distribuição desejado.
​
​

Nas configurações de posição é possível configurar a margem (topo) e espaçamento interno (topo, baixo, direita, esquerda) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
​
​Comportamento:

Uma vez > o efeito de animação será apresentado apenas uma vez.

Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página.

Ativação:

Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
​
Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Na linha vermelha estão disponíveis a configuração para liberação de cada uma das aulas, ID da CPL, link do CPL e ajustes de posicionamento.

A linha vermelha possui 3 ícones distintos. A lixeira para “excluir” a aula selecionada, o ícone de + para incluir uma nova aula e o ícone de engrenagem para configurar a data de liberação das aulas, o posicionamento e a aba avançado conforme veremos a seguir nesse tutorial:

Quando definido a distribuição das aulas como ‘Programação’ na engrenagem da linha verde que vimos na etapa anterior nesse tutorial as configurações de ajustes terão as seguintes opções de configuração:
​
​Data de liberação

Em data de liberação você pode definir a data de liberação da aula ao clicar no ícone de calendário para que defina a data e horário de liberação conforme desejado.

Atenção: A data de liberação das aulas deve ser configurada individualmente através da engrenagem da linha vermelha que representa cada aula. Ou seja, cada aula deverá possuir sua própria configuração de data de liberação.
​
​ID do CPL
​
Em ID do CPL é possível definir o caminho da URL para que personalize a URL da aula conforme desejado.
​
​Link do CPL

Em Link do CPL é possível verificar como ficou a URL da CPL e copiar a URL ao clicar no ícone de copiar.
​
​

Quando definido a distribuição das aulas como ‘Manual’ na engrenagem da linha verde que vimos na etapa anterior nesse tutorial as configurações de ajustes terão as seguintes opções de configuração:
​
​Liberar Aula
​
Ao clicar na chave a frente do texto ’Liberar Aula’, a aula será liberada para acesso imediato, sem necessidade de definição de data e horário. Para desabilitar, basta clicar novamente na chave.

​ID do CPL
​
Em ID do CPL é possível definir o caminho da URL para que personalize a URL da aula conforme desejado.
​
​Link do CPL

Em Link do CPL é possível verificar como ficou a URL da CPL e copiar a URL ao clicar no ícone de copiar.
​

As configurações abaixo são comuns aos dois tipos de liberação das aulas:

​Posição

Nas configurações de posição é possível configurar o espaçamento interno (topo, baixo, direita, esquerda) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Na linha cinza estão disponíveis os ajustes de configurações dos elementos de imagem, título e subtítulo que estão contidos dentro da linha vermelha.

Ao passar o mouse sobre eles, será exibida uma linha tracejada na cor cinza. Basta clicar no ícone de engrenagem para acessar as configurações de cada elemento. No caso da imagem, basta clicar sobre ela para acessar tais configurações, conforme veremos a seguir nesse tutorial:

As configurações do elemento de imagem (linha cinza), são:

Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

Para ajustar o tipo de preenchimento do elemento, clique nos ícones que representam o tipo de preenchimento desejado.

Posição

Margem (topo, esquerda) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Estilo
​
Em estilo é possível definir as configurações da imagem quando a aula estiver publicada e quando não estiver publicada, para isso basta clicar nos textos ‘Publicado’ e ‘Não Publicado’ para ter acesso as possibilidades de configuração que veremos a seguir.

Imagem

Ao clicar em ‘Alterar Imagem’ terá acesso à biblioteca de imagens do RockFunnels ou poderá subir uma imagem do seu dispositivo.
​

Tamanho

Nas configurações de tamanho é possível definir o tamanho da imagem ao inserir um valor manualmente na caixa ou arrastando a barra conforme desejado.
​

Borda | Radial | Opacidade

Nas configurações de estilo é possível configurar borda na galeria. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor clique no ícone de lixeira na frente da cor selecionada.

Para ajustar o tamanho da borda, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado. Para ajustar todas as barras ao mesmo tempo, clique no ícone em formato de cadeado. Para desativar o efeito basta clicar no ícone novamente.

Ajuste a opacidade inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

As configurações dos elementos de texto título e subtítulo (linha cinza), são:

Posição

Nas configurações de posição é possível configurar a posição (esquerda, centro, justificado, direita) ao selecionar os ícones que representam a posição desejada, largura, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Estilo

Cor do texto > É possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para apagar uma cor, clique no ícone de lixeira dentro do campo ‘cor do texto’.

Fontes > Disponibilizamos centenas de tipos de fontes para você ter mais liberdade na criação do elemento.

Estilo > Em estilo é possível estilizar a fonte de acordo com o objetivo que deseja destacar no texto. As opções de estilo disponíveis são: Light, Regular, Medium, Bold e Black.

Tamanho da fonte | Altura da Linha| Opacidade > É possível ajustar inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Avançado

CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para adicionar o elemento CPL em suas páginas, é necessário primeiro adicionar o elemento Blog de Lançamento em suas páginas conforme vimos no inicio desse tutorial, pois o CPL depende do elemento Blog de Lançamento para funcionar corretamente.

Os elementos foram disponibilizados individualmente para que tenha mais liberdade na criação das suas páginas.

Por padrão o elemento CPL é dividido entre a linha verde e a vermelha.
​
Primeiro veremos as configurações da linha verde onde estão disponíveis os ajustes de posicionamento de tudo que está dentro do elemento CPL, visibilidade e efeitos de animação.

A linha verde possui 4 ícones distintos. O ícone de “clonar” para criar uma cópia do elemento de lançamento abaixo dele, o ícone de lixeira para “excluir” o elemento, o ícone para “adicionar” um novo elemento e o ícone de engrenagem para as configurações gerais do elemento que veremos a seguir nesse tutorial:

Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.
​
​

Direção
​
Em direção é possível definir a orientação dos elementos dentro do CPL entre Vertical e Horizontal ao clicar no ícone de seta, e em seguida clicar na opção desejada.
​
​

Posição

Nas configurações de posição é possível configurar a margem (topo) e espaçamento interno (topo, baixo, direita, esquerda) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
​
​Comportamento:

- Uma vez > o efeito de animação será apresentado apenas uma vez.

- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página.

Ativação:

- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
​
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

CSS Classes
​

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Agora veremos a Linha vermelha que por padrão é gerada com elementos de Vídeo, Social, Título e Parágrafo. A seguir veremos a particularidades e possibilidades de configuração de cada um dos elementos.
​

O elemento de Vídeo no CPL é fixo, ou seja, não pode ser excluído. Ao acessar a engrenagem conforme indicado na imagem abaixo, terá acesso as mesmas configurações do elemento de vídeo padrão do RockFunnels.
​
​Caso tenha dúvidas sobre como configurar um vídeo no RockFunnels, acesse nosso tutorial no link abaixo:
​
​https://help.rockfunnels.com/pt-BR/articles/6059502-como-funciona-o-elemento-video-no-rockfunnels
​
​

O elemento Social no CPL também é um conteúdo fixo, ou seja, não pode ser excluído, porém é possível controlar a sua visibilidade em todas as versões da página ao clicar no ícone de visibilidade. Ao acessar a engrenagem conforme indicado na imagem abaixo, terá acesso as mesmas configurações do elemento Social padrão do RockFunnels.
​
​Caso tenha dúvidas sobre como configurar o elemento Social no RockFunnels, acesse nosso tutorial no link abaixo:
​
​https://help.rockfunnels.com/pt-BR/articles/6060570-como-funciona-o-elemento-social-no-rockfunnels

Também por padrão o elemento CPL é disponibilizado com uma linha vermelha de conteúdo livre, ou seja, elementos podem ser excluídos conforme desejado e novos elementos podem ser adicionados nessa área, também, com exceção dos elementos listados a seguir:

Cadastro, Carrossel, Galeria de Imagens, Card, Bullet Point, FAQ, Blog de Lançamento e CPL.

Por padrão a linha de conteúdo livre é gerada com um elemento de título e parágrafo que compartilham as mesmas possibilidades de configuração dos elementos de texto padrão no RockFunnels.
​
​Caso tenha dúvidas sobre como configurar elementos de texto, acesse nosso tutorial no link abaixo:
​
​https://help.rockfunnels.com/pt-BR/articles/6004328-como-funcionam-os-elementos-de-texto-no-rockfunnels
​
​
​

Acesse a engrenagem da área de conteúdo livre para configurações gerais de tudo que está dentro da linha, como ajustes de posicionamento, estilo e animações conforme veremos a seguir:
​

Nas configurações de posição é possível configurar a margem (topo) e espaçamento interno (topo, baixo, direita, esquerda) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Borda | Sombra | Radial

Nas configurações de estilo é possível configurar borda ou sombra. Para isso basta ativar as respectivas chaves que será habilitada a possibilidade de inserir cor, ajustar o tamanho, deslocamento e esfumaçar.

Para ativar o radial basta ativar a respectiva chave e configurar os valores de radial conforme desejado.

Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
​
​Comportamento:

Uma vez > o efeito de animação será apresentado apenas uma vez.

Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página.

Ativação:

Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
​
Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
​
​https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels