O elemento de áudio do RockFunnels permite que, de forma simples, sejam inseridos arquivos de áudio em suas páginas.
Você pode usá-lo para depoimentos, mensagens personalizadas, instruções “faladas” em cada etapa do seu funil... enfim, sua criatividade é seu limite... use e abuse desse elemento para aumentar ainda mais suas conversões!
O elemento de áudio é disponibilizado nas páginas com as características de um player padrão, com um botão para reproduzir o áudio, uma barra de progressão, botão pra controlar o volume ou deixar o áudio mudo e a possibilidade de controlar a velocidade de reprodução ou fazer download do arquivo de áudio ao clicar no ícone com 3 pontos.
Acesse a engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos nesse tutorial.
Em caso de dúvidas sobre como adicionar um elemento de áudio em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
Ajustes
· 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.
· Escolher Arquivo de Áudio
Para adicionar um arquivo de áudio em suas páginas, clique no botão com o texto “Escolher Arquivo de Áudio” para ser direcionado a área de trabalho do seu dispositivo para que selecione o arquivo de áudio desejado.
Os formatos de arquivo compatíveis são: MP3, OGG, AAC, WMA.
Ao selecionar um arquivo de áudio, o arquivo será gerado com o seu respectivo nome e será disponibilizado a possiblidade de reproduzir o áudio ao clicar no ‘ícone de reprodução’, trocar o arquivo ao clicar no ‘ícone de troca’ ou excluir o arquivo ao clicar no ‘ícone de lixeira’.
Posição
· Posição | Tamanho | Margem
Nas configurações de posição é possível configurar a posição (esquerda, centro, direita), tamanho e margem (topo) do elemento, 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 de Fundo
Para inserir uma cor de fundo no elemento, clique no elemento de cor que então será habilitada a possibilidade de inserir a cor através da paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente ativando a respectiva chave, definindo uma orientação para a cor de fundo.
Para excluir uma cor, clique no ícone de lixeira.
Atenção: A cor configurada para o elemento de áudio será a mesma em todas as versões da página, não sendo possível alterar de forma individual em cada versão.
· Borda | Radial | Sombra
Nas configurações de estilo é possível configurar borda e sombra no elemento. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda ou da sombra através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor, clique no ícone de lixeira.
Para ajustar o tamanho da borda, deslocar o efeito da sombra ou esfumaçar, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado. Para excluir uma cor, clique no ícone de lixeira.
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.
Avançado
· 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 (loop).
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
