Principal Construtor de Sites/Builder
⚙️

Construtor de Sites/Builder

Como Funciona, Recursos e Ferramentas, Elementos, Responsividade, Configurações, Otimização de Desempenho
Por Suporte Rockty
• 49 artigos

Como funciona o Construtor de Sites da Rockty 🎥

Introdução Aprenda os fundamentos essenciais do construtor de sites (site builder) da Rockty e comece a criar qualquer tipo de landing page que você imaginar. Depois de entender como o construtor de sites da Rockty funciona, você terá a liberdade de construir qualquer página que desejar. A lógica é simples: os elementos (como vídeos, textos, imagens, e botões) são inseridos dentro de colunas, que estão dentro de linhas, e estas, por sua vez, estão dentro de seções, também chamadas de containers. Guarde essa estrutura e você será capaz de criar qualquer coisa com a Rockty! 📺 Assista ao vídeo abaixo para uma demonstração prática, ou continue lendo para mais detalhes sobre como funciona o construtor de sites da Rockty. https://www.youtube.com/watch?v=AUd6G1G2eEk Estrutura Básica do Construtor de Sites Seções / Containers Toda página criada na Rockty começa com uma seção, ou container, que é o maior bloco de construção e é delimitado na tela pela cor verde clara/água. As seções servem como o contêiner principal para todos os outros elementos da página. ​ Linhas Dentro das seções, você adiciona linhas, que são delimitadas pela cor azul. As linhas ajudam a organizar o layout geral da página e são necessárias para definir onde as colunas serão inseridas. ​ Colunas Dentro das linhas, você encontra as colunas, que são delimitadas pela cor laranja. Cada linha pode conter uma ou mais colunas, e as colunas são essenciais para definir a disposição dos elementos na página. Importante: Linhas e colunas são elementos interdependentes. Sempre que adicionar uma nova linha, você precisará definir a quantidade de colunas. Se desejar uma linha simples, basta adicionar uma única coluna. Tenha em mente que, se todas as colunas de uma linha forem excluídas, a linha também será removida. ​ Elementos Finalmente, é dentro das colunas que você coloca os elementos, que são os componentes funcionais da página, como textos, imagens, vídeos, e botões. Esses elementos são destacados pela cor verde. ​ ​ Exemplo Prático No exemplo abaixo, temos uma seção (verde clara) que contém: - Uma primeira linha (azul) com uma única coluna, dentro da qual há um elemento de imagem (verde), como um logotipo. - Abaixo, há uma segunda linha (azul) com duas colunas: - A coluna da esquerda contém um elemento de imagem (verde) para exibir um ebook. - A coluna da direita possui dois elementos: um parágrafo de texto (verde) e, logo abaixo, um botão (verde). ​ 💡 Dica: Essa estrutura básica segue a sequência: Seções > Linhas > Colunas > Elementos. Memorizar essa ordem ajudará você a usar a Rockty em todo o seu potencial para criar páginas impressionantes. Conclusão Com a Rockty, você pode criar as páginas mais rápidas do mundo para qualquer funil de vendas, de forma simples e rápida, mesmo sem conhecimento técnico em programação. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Jan 16, 2025

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

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. https://www.youtube.com/watch?v=s6ZXEk7G-1A 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!

Última atualização em Jan 16, 2025

Como funcionam as configurações de Linhas e Colunas na Rockty 🎥 (Como Funciona o Construtor) -

Introdução No construtor de sites da Rockty, entender como ajustar linhas e colunas é essencial para criar layouts flexíveis e personalizados. Este tutorial irá guiá-lo através das principais funções de configuração, incluindo ajustes de visibilidade, estilo e animações, além de mostrar como adicionar, remover, duplicar e movimentar linhas e colunas para otimizar seu design. 📺 Assista ao vídeo abaixo para uma demonstração prática sobre como funciona o construtor de sites da Rockty. https://www.youtube.com/watch?v=s6ZXEk7G-1A 1. Excluindo uma Linha ou Coluna Para excluir uma linha (azul) ou coluna (laranja), clique no ícone de lixeira localizado no canto superior direito da linha ou coluna selecionada. ​ Atenção: Ao excluir uma linha, todas as colunas inseridas nela também serão removidas. ​ 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 linha ou coluna selecionada. O painel de edição será exibido, permitindo ajustar diferentes propriedades conforme veremos a seguir: Ajustes - Visibilidade (Linha): Configure a visibilidade da linha e suas colunas para diferentes dispositivos (Desktop, Tablet, Mobile) clicando no botão correspondente. Para tornar a linha visível novamente, clique no botão do dispositivo onde foi ocultada. ​ Posição - Margem | Espaçamento Interno: Ajuste a margem superior e o espaçamento interno (superior, inferior, esquerdo, direito) inserindo valores manualmente ou ajustando a barra. Evite margens negativas para evitar conflitos de layout. ​ Estilo - Cor de Fundo: Configure a cor de fundo da linha e/ou coluna usando a paleta de cores ou o código HEX. É possível aplicar um gradiente definindo a orientação da cor. - Imagem de Fundo: Adicione uma imagem de fundo clicando em "imagem" abaixo do título. Selecione uma imagem da biblioteca da Rockty ou faça upload do seu dispositivo. - Borda | Sombra | Radial: Configure borda, sombra ou efeito radial ativando as respectivas opções e ajustando cor, tamanho, deslocamento e esfumaçamento. ​ Avançado - Efeitos de Movimento – Animação: Selecione um efeito de animação para a linha e/ou coluna. Configure o comportamento da animação, como "Uma vez" ou "Infinito", e a ativação "Animação de entrada" ou "Ao passar o mouse". Ajuste a duração e o atraso conforme necessário. - CSS Classes: Configure CSS para a linha e/ou coluna inserindo um nome para a classe CSS e aplicando o código através do elemento de Script. Para mais detalhes, consulte nosso tutorial dedicado a CSS Classes: Como Funciona a Configuração CSS Classes na Rockty. ​ 3. Duplicando uma Linha Para duplicar uma linha, clique no ícone de duplicar ao lado da engrenagem no canto superior direito da linha. Uma nova linha será criada abaixo da linha selecionada. ​ 4. Adicionando uma Nova Linha/Coluna Clique no ícone de + (azul para adicionar uma linha e laranja para adicionar uma coluna) para inserir uma nova linha ou coluna. A nova linha será adicionada abaixo da atual e a nova coluna será inserida ao lado direito. ​ 5. Movimentar Linhas e Colunas - Linhas (Azul): Para mover uma linha para cima ou para baixo, use os ícones de seta. ​ - Colunas (Laranja): Para mover uma coluna para a esquerda ou direita, clique nos ícones < ou >. Também é possível ajustar a largura da coluna clicando no ícone ↔ e arrastando o cursor para a posição desejada. 💡 Dica: Para uma explicação mais detalhada sobre como trabalhar com colunas, acesse nosso tutorial dedicado: Trabalhando com Colunas no Construtor da Rockty. Conclusão Agora que você entende como ajustar, duplicar e movimentar linhas e colunas na Rockty, experimente essas configurações para personalizar seu layout conforme suas necessidades. Explore as opções e aproveite ao máximo as funcionalidades do construtor de sites! ​ Dicas Adicionais - Organize o Layout com Linhas e Colunas: Utilize linhas para dividir o conteúdo horizontalmente e colunas para segmentá-lo dentro de cada linha, facilitando a criação de um layout claro e responsivo. - Teste a Responsividade: Verifique como o layout se adapta em diferentes dispositivos, ajustando as proporções de colunas para garantir uma boa experiência tanto em desktops quanto em dispositivos móveis. - Ajustes Personalizados para Cada Dispositivo: Explore as opções de visibilidade de linhas e colunas por dispositivo, ocultando ou customizando para versões específicas de desktop, tablet e mobile. - Use Alinhamento e Espaçamento: Ajuste as configurações para garantir o espaçamento adequado entre elementos dentro das colunas, evitando sobreposição e mantendo o layout limpo. - Combine Colunas de Diferentes Tamanhos: Experimente variar a quantidade e o tamanho das colunas em cada linha para destacar conteúdos e criar um design dinâmico. - Personalize o Fundo das Linhas e Colunas: Aplique diferentes cores, gradientes ou imagens de fundo nas linhas e colunas para criar seções visuais distintas e chamar a atenção para conteúdos específicos. - 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. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar 🎥 (Como Funciona o Construtor) -

Introdução Neste tutorial, você aprenderá como gerenciar elementos em sua página na Rockty, uma plataforma poderosa para criar e editar páginas com facilidade. Vamos abordar como adicionar, excluir, duplicar, movimentar e acessar as configurações gerais dos elementos, para que você possa personalizar sua página de forma eficiente. 1. Adicionando um Novo Elemento Para adicionar um novo elemento à sua página, siga um destes métodos: - Se já houver elementos na página: Clique no ícone em formato de + na parte inferior do elemento selecionado (verde), conforme indicado na imagem abaixo: ​ - Se estiver começando a construir uma seção: Clique em 'ADICIONAR ELEMENTO', como mostrado na imagem abaixo: Observação: No canto esquerdo da tela, será exibida uma lista com todos os elementos disponíveis para adicionar. 📺 Assista ao vídeo abaixo para uma demonstração prática sobre os Elementos disponíveis no construtor de sites da Rockty. https://www.youtube.com/watch?v=OXaJPb1qsYQ Você pode filtrar os elementos clicando em “Tudo” para ver todos os tipos ou selecionar categorias específicas, como: - Texto: Título, Subtítulo e Parágrafo. ​ - Formulário: Botão, Form e LGPD. ​ - Conteúdo: Imagens, Vídeos, Áudios, etc. ​ - Lançamento: Blog de Lançamento e CPL. ​ - Checkout: Checkout, Detalhes do Produto, Resumo da Compra e Upsell. ​ Filtrando os elementos clicando em “Tudo”, disponibilizamos ao final da lista, os elementos de conversão. ​ E os elementos de código. Com eles é possível inserir códigos externos nas páginas da Rockty. ​ 2. Acessando as Configurações do Elemento Para acessar as configurações de um elemento (ajustes, posição, estilo, avançado, etc.), clique no ícone em formato de engrenagem do elemento selecionado (verde) ou clique com o botão direito do mouse sobre o elemento. ​ 🚨 Atenção: Para saber mais sobre as configurações de cada elemento disponivel no construtor da Rockty, consulte nossos tutoriais dedicados aqui. 3. Excluindo um Elemento Para excluir um elemento, clique no ícone em formato de lixeira no canto superior direito do elemento selecionado (verde). ​ 4. Duplicando um Elemento Para duplicar um elemento, clique no ícone de duplicar no canto superior direito do elemento selecionado (verde). O elemento será duplicado abaixo. ​ 5. Movendo um Elemento na Página – Drag & Drop: Para mover um elemento na página, utilize a funcionalidade de Drag & Drop (clicar e arrastar). Clique no ícone de setas cruzadas e arraste o elemento para o local desejado até que uma linha verde escura apareça, indicando que o elemento pode ser solto nesse local. ​ Conclusão Com esses passos, você pode gerenciar seus elementos na Rockty com facilidade. Explore e aproveite ao máximo as ferramentas oferecidas para criar páginas impressionantes e funcionais. Dicas - Ajuste o Layout com Drag and Drop: Reorganize os elementos facilmente arrastando-os para novas posições dentro das seções ou colunas, garantindo que o layout seja intuitivo e dinâmico. - Teste a Aparência Durante a Edição: Após ajustar um elemento, veja a página publicada para garantir que ele está posicionado corretamente e que as configurações atendem ao design desejado. - Mantenha o Layout Limpo: Exclua elementos desnecessários ou duplique elementos já configurados para otimizar o tempo e manter a página organizada. - Acesse Tutoriais Específicos: Para mais detalhes sobre como usar cada tipo de elemento, acesse os tutoriais específicos disponíveis em Elementos. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Nov 28, 2024

Como Funciona o Menu de Topo no Construtor da Rockty | Salvar, Publicar, Preview e Mais 🎥 (Como Funciona o Construtor) -

Introdução O menu de topo é uma ferramenta essencial dentro do construtor da Rockty. Ele fornece acesso rápido a funções importantes que facilitam a criação e gerenciamento de suas páginas. Vamos explorar como salvar, publicar, abrir em nova janela, copiar a URL, acessar o preview das suas páginas e alternar entre versões responsivas. Siga este guia para otimizar o seu fluxo de trabalho e obter o máximo do seu construtor de páginas. ​ 1. Versões Responsivas Para visualizar e editar suas páginas em diferentes dispositivos, use os ícones de Visão de PC, Visão de Tablet e Visão de Celular. Essas opções permitem ajustar o layout conforme necessário para garantir uma ótima experiência em qualquer dispositivo. 💡 ​Dica: Consulte nosso tutorial sobre Responsividade aqui para mais detalhes. 2. Configurações Para entender completamente as opções disponíveis em Configurações, acesse nosso tutorial dedicado neste link. ​ 3. Ver Clique em ‘Ver’ para acessar uma pré-visualização da página sem as linhas de edição do construtor. Note que elementos interativos ou gerados por script podem não funcionar no Preview; para testar funcionalidades, publique a página. ​ 4. Salvar O recurso ‘Salvar’ preserva a versão atual da sua página. Isso permite retornar a pontos específicos do seu trabalho. 💡 ​Dica: Para detalhes sobre como utilizar o Histórico, consulte este tutorial. 5. Publicar Clique em ‘Publicar’ para salvar e tornar sua página acessível na Internet. Após a publicação, duas janelas aparecerão: uma confirmando o salvamento e outra com a URL gerada. Se a página for definida como padrão, uma janela adicional exibirá a URL raiz. 💡 ​Dica: Caso esteja usando domínio/subdomínio próprio, certifique-se de que esteja corretamente configurado e apontado para a Rockty. Para mais informações sobre configuração de domínio e página padrão, veja este tutorial. Para aprender a despublicar uma página, confira este guia. 📺 Assista ao vídeo abaixo para uma demonstração prática sobre como publicar páginas na Rockty. https://www.youtube.com/watch?v=InDqbOkHoAI 6. Copiar URL Utilize a opção ‘Copiar URL’ para copiar o link da página e compartilhá-lo facilmente. 7. Abrir em Nova Janela Clique em ‘Abrir nova janela’ para visualizar a versão publicada da página em uma nova janela do navegador. 💡 Dica: Garanta que seu domínio/subdomínio esteja configurado corretamente para que a página abra sem problemas. 8. Sair do Construtor Para sair do construtor, clique no ícone em formato de X. Lembre-se de salvar as alterações feitas antes de sair para evitar a perda de trabalho. ​ Conclusão O menu de topo do construtor da Rockty oferece ferramentas poderosas para gerenciar e otimizar suas páginas. Usando essas funções corretamente, você pode garantir que suas páginas estejam sempre atualizadas e funcionando conforme o esperado. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Nov 28, 2024

Como funciona o botão direito do mouse no construtor da Rockty - (Como Funciona o Construtor)

Introdução Este tutorial irá guiá-lo através de uma funcionalidade básica do construtor da Rockty, focando na edição e gestão de seções, linhas, colunas e elementos em suas páginas usando o botão direito do mouse. 📍 Selecionar um Componente Clique com o botão direito do mouse sobre a seção, linha, coluna, ou elemento que você deseja editar. Isso exibirá as opções de edição disponíveis para o componente selecionado conforme indicado na imagem a seguir: ✏️ Editando um Componente Após selecionar o componente, você verá um menu com as seguintes opções: ​ - 🖊️ Editar - 🔄 Duplicar - 📋 Copiar - 📌 Colar - 🎨 Colar estilo - 💾 Salvar como modelo - ❌ Deletar ​ ✨ Editar (Ajustes, Posição, Estilo e Configurações Avançadas) Clique em "Editar" no menu. O painel de edição será exibido, permitindo ajustar diferentes propriedades: ​ - 📍 Posição: Ajuste o alinhamento e o espaçamento do componente. - 🎨 Estilo: Modifique cores, fontes, bordas, e outros estilos visuais. - ⚙️ Ajustes: Configure parâmetros adicionais de acordo com o elemento selecionado para edição. - 🌀 Configurações Avançadas: Acesse opções adicionais como animações e efeitos. ​ Para obter mais informações sobre como editar seções, linhas, colunas e elementos, consulte nossos tutoriais detalhados nos links abaixo: ​ - 🖼️ Seções: Como funcionam as configurações de seção na Rockty - 📐 Linhas: Como funcionam as configurações de linhas e colunas na Rockty - 📊 Colunas: Trabalhando com colunas no construtor da Rockty - 🔧 Elementos: Tutoriais sobre elementos ​ 🔄 Duplicar Clique em "Duplicar" para criar uma cópia exata do componente. A duplicata será inserida imediatamente abaixo do original, permitindo que você edite a cópia sem alterar o componente original. 📋 Copiar Clique em "Copiar" para copiar o componente selecionado para a área de transferência. O componente será armazenado temporariamente e poderá ser colado em outra parte da página. 📌 Colar Clique em "Colar" para adicionar a cópia do componente em uma nova posição na página. O componente copiado será inserido onde o cursor está localizado. 🎨 Colar Apenas o Estilo Clique em "Colar apenas o estilo" para copiar apenas as configurações de estilo do componente. O estilo será aplicado ao componente selecionado sem alterar seu conteúdo. 💾 Salvar Como Modelo Clique em "Salvar como modelo" para armazenar o conteúdo da seção selecionada na Biblioteca de Blocos da Rockty. ❌ Deletar Clique em "Deletar" para remover o componente da página. Tenha certeza de que deseja deletar o componente, pois esta ação não pode ser desfeita. 💡 Dicas Adicionais - 📚 Utilize a biblioteca de blocos: Armazene seções frequentemente usadas na biblioteca para facilitar a criação de novas páginas. - 🔄 Faça backups: Antes de fazer alterações significativas, considere salvar uma cópia da página atual. 🆘 Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Jan 22, 2025

Como funciona a responsividade dentro do Construtor da Rockty 🎥 (Responsividade)

Introdução à Responsividade na Rockty Em alguns construtores de páginas, você precisa criar versões separadas para PC/Desktop, Tablet e Celular, o que triplica o trabalho. Na Rockty, o processo é simplificado: você constrói a página apenas uma vez, e essa estrutura é automaticamente aplicada a todas as versões responsivas (PC, Tablet, e Celular). Isso inclui seções, linhas/colunas e elementos. 📺 Assista ao vídeo abaixo para uma demonstração prática: https://www.youtube.com/watch?v=OmO_PFZFzrE 1. Estrutura de Página Única Na Rockty, a estrutura básica da página é preservada em todas as versões. Isso significa que você não precisa reconstruir a página para cada dispositivo, apenas ajustar as configurações específicas para as versões responsivas. 💡 Dica: Recomendamos começar a construção pela versão PC/Desktop. À medida que você adiciona elementos, eles são "herdados" para as versões Tablet e Celular na seguinte sequência: Desktop > Tablet > Celular. Assim, ajustes feitos em uma versão são automaticamente aplicados nas seguintes, facilitando o gerenciamento das suas páginas. 2. Importante: Elementos Estruturais Entender como os elementos estruturais funcionam é essencial para a responsividade na Rockty. Elementos estruturais como linhas, colunas e títulos são compartilhados entre todas as versões. Se você adicionar ou remover um desses elementos na versão Desktop, a mudança se refletirá automaticamente nas versões Tablet e Celular. ​📌 Exemplo: Se um título for deletado na versão Desktop, ele também será removido das versões Tablet e Celular. ​📝 Resumo: Alterações na estrutura são aplicadas em todas as versões da página. 3. Estilização Personalizada por Versão Embora a estrutura básica seja compartilhada, você pode personalizar a aparência de elementos em cada versão. Por exemplo, um título pode ter um tamanho maior e ser azul na versão Desktop, enquanto na versão Celular pode ser menor e vermelho. A estrutura do título permanece, mas a estilização é adaptada para cada dispositivo. ​ 📌 Este é o ponto-chave da responsividade na Rockty: a estrutura é consistente, mas a estilização pode (e deve) ser individualizada para cada versão. As imagens abaixo ilustram as diferentes versões da mesma página: ​ PC/Desktop Tablet Celular 4. Controle de Visibilidade Para ter mais liberdade na criação de suas páginas em diferentes versões (PC/Desktop, Tablet e Celular), a Rockty oferece um recurso de Visibilidade. Esse recurso permite definir quais elementos (seções, linhas, colunas, etc.) serão visíveis ou ocultos em cada versão da página. ​ 5. Como usar o recurso de Visibilidade: 1. Acesse as Configurações: Clique na engrenagem das seções, linhas, colunas, ou da maioria dos elementos que deseja ajustar. ​ 2. Ajustes de Visibilidade: No menu de configurações, vá para a aba 'Ajustes'. ​ 3. Defina a Visibilidade: Clique nos ícones que representam cada versão da página (Desktop, Tablet, Celular) para definir se o elemento será visível ou oculto na versão escolhida. ​ 4. Remover Ocultação: Para tornar o elemento visível novamente em uma versão específica, basta clicar novamente no ícone correspondente. 📌 Nota: Esse recurso é extremamente útil para personalizar a experiência do usuário em diferentes dispositivos, permitindo que você adapte o conteúdo exibido de acordo com o contexto e as necessidades de cada versão da página. 6. Importante: Garanta a consistência em todas as versões (Desktop, Tablet e Mobile)! 📝É fundamental construir uma versão sólida da sua página para todas as dimensões de tela: desktop, tablet e mobile. 🚨 Embora muitos usuários foquem no desktop e mobile, a versão tablet não deve ser negligenciada. Dispositivos móveis com telas maiores, como tablets ou celulares posicionados na horizontal, podem usar a versão tablet como referência. ❗ Se essa versão estiver incompleta — por exemplo, sem um formulário, botão ou outro elemento essencial presente nas versões desktop e mobile — isso pode impactar negativamente a experiência do usuário e até prejudicar a conversão da página. 💡 Dica: Revise sua página em todas as visualizações antes de publicá-la para garantir uma experiência completa e consistente! Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Jan 17, 2025

Como Funciona o Menu “Configurações” da Página Dentro do Construtor da Rockty 🎥 (Configurações)

Introdução Neste tutorial, você vai aprender a utilizar o menu “Configurações” no construtor da Rockty para ajustar diversos aspectos das suas páginas, como SEO, Open Graph, Pixel do Facebook, Google Tag, Favicon, Fontes, Cores e Imagens de fundo. 📺 Assista ao vídeo abaixo para uma demonstração prática sobre cada configuração. https://www.youtube.com/watch?v=E2pHfuNhVSI 1. Acessando as Configurações Para acessar as configurações de uma página na Rockty, siga estes passos: 1. Acesse o funil desejado e abra a página no construtor. 2. No topo do construtor, clique no menu ‘Configurações’. 3. As opções disponíveis incluem SEO, Facebook (Open Graph), Pixels, Geral e Histórico. - Você pode navegar entre as diferentes configurações clicando nos ícones representados no canto direito da tela. ​ 2. Configurações de SEO SEO é um conjunto de técnicas que visa otimizar sua página para os motores de busca, como o Google. Na Rockty, essas configurações são fáceis de aplicar e ajudam a aumentar a visibilidade da sua página. ​ 1. Título da Página Defina um título relevante para sua página. Esse título é crucial para a otimização nos motores de busca. ​ 2. Descrição da Página Escreva uma descrição atraente e informativa que será exibida nos resultados de pesquisa. ​ 3. Palavras-Chave Adicione palavras-chave relevantes, separadas por vírgula, para ajudar sua página a ser encontrada nas buscas. ​ 4. Salvar Configurações Clique no botão ‘Salvar’ para aplicar as alterações. 💡 Aperfeiçoe seu SEO! Acesse nosso tutorial Guia de SEO no Construtor de Páginas da Rockty e descubra dicas e orientações para otimizar o Título, Descrição e Palavras-Chave da sua página. Melhore sua indexação no Google e atraia mais visitantes para seu site!" 3. Configurações do Facebook (Open Graph) As configurações do Open Graph definem como a sua página será exibida quando compartilhada no Facebook ou em outras redes sociais. Para configurar corretamente, siga os passos abaixo: ​ 1. Título do Post Insira o título que aparecerá quando a página for compartilhada. Esse título deve ser relevante e informativo. ​ 2. Descrição do Post Crie uma descrição cativante que aumente o interesse dos usuários em clicar no link compartilhado. A descrição deve ser breve, atraente e descrever de forma clara o conteúdo da página. ​ 3. Imagem Escolha uma imagem relevante para ser exibida ao compartilhar a página. A imagem serve como uma miniatura visual e deve ter uma boa relação com o conteúdo da página. A imagem deve ter pelo menos 1200x630 pixels para garantir boa exibição nas redes sociais e no WhatsApp. ​ 4. Salvar Configurações Depois de configurar o título, descrição, subir a imagem e adicionar o script, clique no botão ‘Salvar’ para aplicar todas as alterações feitas. ​ 5. Testar as Configurações do Open Graph Para verificar se as configurações do Open Graph estão funcionando corretamente, você pode usar a ferramenta Debug Tool do Facebook. ​ - Insira a URL da sua página no campo indicado e clique em ‘Depurar’. - Isso ajudará a garantir que as informações corretas estão sendo carregadas quando a página é compartilhada. 4. Configurações de Pixels ​1. Pixel do Facebook / Eventos Insira o ID do Pixel do Facebook e configure eventos padrão de forma simples. Para configurar a API de conversões do Facebook, ative o botão “integrar” e insira a identificação do Pixel e selecione os eventos desejados. 💡 Dica: Consulte nossos guias de integração da API de conversões do Facebook aqui para mais detalhes. 2. Google Analytics ID/Google Tag Manager: ​ Ative o botão “Integrar” e insira apenas o ID do Google Analytics (ex.: UA-XXXXXXXXX-X) e insira apenas o ID do Google Tag Manager (ex.: GTM-XXXXXXX).. Não é necessário inserir o código completo. ❗ Atenção: Certifique-se de inserir apenas os IDs nos campos indicados, sem adicionar os códigos completos fornecidos pelo Google. 3. Salvar Configurações Clique no botão ‘Salvar’ para aplicar as alterações. 5. Configurações Gerais ​1. Rockty Badge Habilite ou desabilite o selo da Rockty e defina sua posição na página. ​ 2. Idioma Selecione o idioma desejado para elementos automáticos da Rockty, como o elemento 'Contador'. ​ 3. Favicon Um termo derivado da abreviação em inglês das palavras ‘favorite’ e ‘icon’, que significam ícone favorito. Quando você abre algum site na internet, a aba superior mostra o título daquela página e, do lado esquerdo, é possível visualizar um ícone que pode variar de acordo com o que está aberto. A configuração do Favicon é muito importante pois é uma forma de representar a sua marca com uma imagem e transmitir mais profissionalismo em sua estrutura. Para configurar o Favicon na sua página, clique na imagem abaixo do título ‘Ícone Favicon da Página’ para ter acesso a biblioteca de imagens da Rockty onde conseguirá subir a imagem desejada salva no seu dispositivo. 📺 Assista ao vídeo abaixo para uma demonstração prática sobre como configurar o Favicon na sua página. https://www.youtube.com/watch?v=BZXUbkjWoO8 4. Cor de Fundo Escolha uma cor ou gradiente para o fundo da página utilizando a paleta de cores ou o código HEX. ​ 5. Imagem de Fundo Adicione uma imagem que ocupará toda a dimensão da sua página. Basta clicar na imagem abaixo do título “imagem” para ter acesso à biblioteca de imagens da Rockty ou subir uma imagem do seu dispositivo. ​ 6. Fontes Defina uma fonte padrão para todo o texto da sua página. Para personalizar textos específicos, ajuste as configurações no menu lateral esquerdo. ​ 7. Salvar Configurações Clique no botão ‘Salvar’ para aplicar as alterações. 6. Histórico No histórico, você pode restaurar até as últimas 10 versões salvas da sua página. Esse recurso é útil para reverter alterações indesejadas. ​ 1. Restaurar Versões Para restaurar uma versão anterior, clique no botão ‘Voltar’. 💡 Dica: Sempre salve manualmente após fazer alterações para manter um histórico organizado e evitar a perda de dados importantes. 7. Conclusão O menu “Configurações” da Rockty oferece uma série de ferramentas para personalizar e otimizar suas páginas de forma prática e eficiente. Ao seguir estas etapas, você garantirá que suas páginas estejam bem configuradas para SEO, redes sociais, análise de dados, e que ofereçam uma experiência visual agradável e profissional. 8. Dicas Gerais para Configurações no Construtor da Rockty 1. Revise as Configurações de SEO Regularmente: As configurações de SEO são essenciais para o desempenho da sua página nos mecanismos de busca. Revise periodicamente o título, descrição e palavras-chave para garantir que estão atualizados e alinhados com o conteúdo da página. 2. 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. 3. Teste as Configurações do Open Graph: Após configurar o Open Graph, utilize a ferramenta Facebook Debugger para verificar como sua página será exibida quando compartilhada nas redes sociais. Isso ajuda a garantir que as informações configuradas estão sendo corretamente lidas pelas plataformas. 4. Salve e Revise Frequentemente: Sempre que fizer alterações significativas nas configurações, salve e revise o comportamento da página publicada. Isso ajuda a identificar rapidamente qualquer ajuste necessário. 5. Utilize o Histórico para Recuperar Versões: Se você cometeu um erro ou deseja retornar a uma versão anterior da sua página, use a funcionalidade de Histórico para recuperar as últimas versões salvas. 6. Mantenha as Tags e Scripts Atualizados: Ao utilizar tags de rastreamento como Google Analytics ou Facebook Pixel, certifique-se de que os IDs e configurações estão atualizados e correspondem às suas contas de anúncios e análise. 7. Consulte os Tutoriais da Rockty: Sempre que tiver dúvidas sobre como configurar um elemento específico, acesse os tutoriais disponíveis na central de ajuda da Rockty. Eles fornecem instruções detalhadas e exemplos visuais para facilitar o processo. Precisa de Ajuda?​ Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Nov 28, 2024

Guia Rápido: Como configurar a prévia da URL para redes sociais com Open Graph na Rockty (Configurações)

Introdução: Quando você compartilha um link nas redes sociais como Facebook, WhatsApp ou LinkedIn, uma prévia do conteúdo é exibida. Isso inclui o título, descrição e uma imagem associada ao link. Na Rockty, essas informações são configuradas usando o Open Graph, um protocolo que garante que sua página seja exibida de maneira visualmente atraente ao ser compartilhada. Neste guia rápido, você aprenderá a configurar a prévia da URL de forma fácil, personalizando as opções diretamente no construtor ou via script. Acessando as Configurações do Open Graph: 1. Acesse o funil desejado e abra a página no construtor. 2. No topo do construtor, clique no menu ‘Configurações’. 3. Escolha a opção ‘Facebook (Open Graph)’. Aqui você poderá configurar as informações de título, descrição e imagem que serão exibidas quando a página for compartilhada. ​ Como Preencher as Configurações: - Título do Post: Insira o título que será exibido na prévia. Esse título deve ser cativante e descrever claramente o conteúdo da página. ​ - Descrição do Post: Escreva uma breve descrição que incentive os usuários a clicarem. Destaque o valor da página em poucas palavras. ​ - Imagem: Selecione uma imagem representativa. A imagem deve ter pelo menos 1200x630 pixels para garantir boa exibição nas redes sociais e no WhatsApp. ​ - Salvar Configurações Depois de configurar o título, descrição e imagem, clique no botão ‘Salvar’ para aplicar todas as alterações feitas. Inserindo as Informações via Script (Opcional): Você também pode optar por inserir as informações manualmente através de um script. Use o seguinte código no elemento de script, no header da página: ​ <meta property="og:title" content="Título da Página"/> <meta property="og:description" content="Descrição da Página"/> <meta property="og:image" content="URL da Imagem"/> <meta property="og:url" content="URL da Página"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="Nome do Site"/> - og:title > Defina o título que aparecerá na prévia. - og:description > Insira uma descrição envolvente da página. - og:image > Forneça a URL da imagem (recomenda-se formato WebP e tamanho de 1200x630 pixels). - og:url > Adicione a URL da página que está sendo compartilhada. - og:type > Para páginas normais, use "website". - og:site_name > O nome do site ou marca que está sendo promovida. ​ 💡 Dica: Para saber como inserir scripts no construtor da Rockty, veja este tutorial detalhado. Como Obter a URL da Imagem no Construtor Rockty (Opcional): Se você optar por usar o script, precisará da URL exata da imagem que deseja exibir na prévia. Veja como obter essa URL: 1. Acesse a biblioteca de imagens no construtor da Rockty. 2. Selecione a imagem que deseja configurar no Open Graph. 3. Clique com o botão direito do mouse sobre a imagem e escolha a opção “Copiar endereço da imagem”. ​ 4. Use o endereço copiado para preencher o código de script do Open Graph, conforme o exemplo abaixo: <meta property="og:image" content="https://rockfunnelsliveincluster.blob.core.windows.net/tenants/vhihTqHPmESwVD4xA4aa3A/images/3wm5p4c3N0auygoxQTq18w.webp"/> 📌 Observação: Não exclua a imagem da galeria da Rockty, pois ela precisa continuar nos servidores para que seja exibida corretamente quando a página for compartilhada. Testando as Configurações Após definir as informações do Open Graph, você pode verificar se estão funcionando corretamente utilizando a ferramenta Facebook Debug Tool. Siga os passos abaixo: 1. Publique a sua página na Rockty. 2. Acesse Debug Tool do Facebook. 3. Insira a URL da sua página e clique em ‘Depurar’. 4. Confira se a prévia aparece corretamente e, se necessário, force a atualização clicando em 'Extrair novamente'. ❗ Atenção: O WhatsApp pode levar mais tempo para exibir a prévia correta. Caso a prévia não apareça de imediato, aguarde alguns minutos ou tente compartilhar o link novamente. Conclusão: Com essas configurações, você garante que a sua página tenha uma boa apresentação visual quando for compartilhada em redes sociais. Não esqueça de ajustar a imagem de acordo com o tamanho recomendado para que ela seja aceita em todas as plataformas. Teste suas configurações no Debug Tool e garanta que os usuários vejam o melhor da sua página quando compartilharem o link! Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Nov 28, 2024

Como usar a Biblioteca de Blocos da Rockty para ganhar mais produtividade 🎥 (Recursos e Ferramentas do Construtor)

Introdução A Biblioteca de Blocos da Rockty é um recurso poderoso que permite salvar blocos inteiros (seções/containers) e reutilizá-los em qualquer página ou funil de vendas. Imagine poder replicar seu bloco de depoimentos, garantia ou topo de página favorito em outras páginas com apenas um clique. Este recurso não só economiza tempo, como também aumenta sua produtividade, seja você um empreendedor digital, agência de marketing ou freelancer. Neste tutorial, vamos explorar como salvar e reutilizar blocos utilizando a Biblioteca de Blocos da Rockty. 📺 Assista ao vídeo abaixo para uma demonstração prática, ou continue lendo para mais detalhes sobre como usar a Biblioteca de Blocos da Rockty. https://www.youtube.com/watch?v=T1Jtf22xRVA Passo a Passo para Usar a Biblioteca de Blocos 1. Salvar um Container/Seção Para salvar um container/seção, clique no ícone de disquete no canto superior direito da tela da seção/container que deseja salvar. Ao clicar, você será direcionado para a interface de salvamento na biblioteca, onde poderá configurar as opções de armazenamento. ​ 2. Definir Categoria para o Container/Seção Caso seja o primeiro acesso à biblioteca, digite o nome de uma nova categoria e pressione 'Enter'. Se já tiver categorias criadas, selecione a desejada e pressione 'Enter' para confirmar. ​ 3. Nomear o Container/Seção Em seguida, digite um nome único para o container/seção que deseja salvar. Após inserir o nome, pressione 'Enter'. É importante usar um nome exclusivo, pois ao usar um nome já existente, você irá sobrescrever o bloco salvo anteriormente. ​ 4. Salvar as Configurações Clique no botão ‘Salvar’ para finalizar o processo. Para fechar a janela, clique no ícone ‘X’ no canto superior direito. ​ 5. Acessar a Biblioteca de Blocos Para inserir um container/seção salvo, clique no ícone de download (seta para baixo) no local onde deseja adicionar o bloco. Este ícone de importação só aparece nas seções de cor verde água dentro da página. ​ 6. Inserir ou Deletar Blocos da Biblioteca Ao acessar a Biblioteca de Blocos, clique em ‘Meus Containers’ para visualizar suas categorias e blocos salvos, com informações de data e hora de criação. Utilize os filtros para facilitar a busca por categorias ou nomes específicos. ​ - Inserir: Para adicionar um bloco na página, clique no botão ‘Insert’. O bloco será inserido logo abaixo da seção onde você clicou no ícone de download. - Deletar: Para remover um bloco da biblioteca, clique no botão ‘Delete’. Para fechar a janela, clique no ícone ‘X’ no canto superior direito. ​ ​ Conclusão Com a Biblioteca de Blocos da Rockty, você ganha mais flexibilidade e rapidez ao criar páginas, permitindo que você reutilize blocos de forma eficiente. Siga os passos deste tutorial para economizar tempo e melhorar seu fluxo de trabalho. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 25, 2024

Como usar a Biblioteca de imagens da Rockty

Introdução Neste tutorial, você aprenderá a utilizar a Biblioteca de imagens da Rockty, uma ferramenta essencial para gerenciar e inserir imagens em suas páginas. Além de adicionar imagens diretamente do seu dispositivo, você também terá acesso a milhares de opções gratuitas dos bancos de imagens Pexels e Unsplash. Vamos explorar como organizar suas imagens em pastas personalizadas, filtrar buscas e inserir imagens com facilidade, tornando sua experiência no construtor de páginas ainda mais eficiente. Passo a Passo 1. Acessando a Biblioteca de Imagens Para adicionar imagens às suas páginas, você pode usar a Biblioteca de imagens da Rockty em diversos contextos, como no fundo de Seções, Linhas, Colunas, ou em elementos como Imagem, Carrossel, Galeria de Imagens, Card, Bullet Point e Flip Card. Nota: Este tutorial foca na utilização da biblioteca de imagens. Caso precise de orientações sobre como adicionar imagens usando esses componentes específicos, consulte os tutoriais dedicados a cada um dos componentes mencionados. Clique nos links acima para acessar os tutoriais relevantes. 2. Minhas Imagens Ao selecionar um componente para inserir uma imagem, você será direcionado para a tela "Minhas Imagens". Aqui, você verá duas pastas padrão: "Todos os Arquivos" e "Não Organizado". Nelas, serão exibidas as imagens que você já subiu para a plataforma. Você pode adicionar novas imagens de duas formas: - Clicando no botão "Selecionar Arquivo". - Arrastando imagens diretamente do seu dispositivo para o campo "Arraste suas imagens aqui". ​ 3. Criando e Organizando Pastas Para organizar melhor suas imagens, crie pastas personalizadas clicando em "+ Nova Pasta". Renomeie a pasta clicando sobre o título "Nova Pasta" e digitando o nome desejado. Para excluir, clique no ícone de lixeira. Imagens podem ser movidas para essas pastas ao usar o botão "+ Adicionar Imagem a Esta Pasta" ou arrastando diretamente. ​ 4. Gerenciando Imagens Ao passar o cursor sobre uma imagem na biblioteca, clique no ícone de três pontos para deletar ou mover a imagem para uma pasta específica. Se precisar localizar uma imagem rapidamente, utilize o campo de busca e filtre pelo formato do arquivo (PNG, WebP, etc.). ​ 5. Acessando o Banco de Imagens Além de suas imagens, você pode acessar um vasto banco de imagens gratuitas através das opções Pexels e Unsplash. Basta clicar em "Banco de Imagens" no topo da tela da Biblioteca de Imagens. Na tela de busca do banco de imagens, digite palavras-chave, preferencialmente em inglês, para obter melhores resultados. ​ É possível filtrar as imagens por orientação (retrato ou panorama) e cor predominante. Passe o mouse sobre uma imagem para visualizar uma prévia com o botão Preview ou insira diretamente na página com Insert. ​ 6. Finalizando Depois de inserir uma imagem, a biblioteca se fechará automaticamente, e você voltará para o construtor de páginas, onde a imagem estará posicionada no local selecionado. Se estiver apenas organizando as imagens, clique no X no canto superior direito para fechar a biblioteca. ​ Dicas Adicionais - Ao procurar imagens no Banco de Imagens, utilize termos em inglês para ampliar os resultados. - Organize suas imagens em pastas para facilitar a gestão dos arquivos. - 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. Conclusão A biblioteca de imagens da Rockty oferece uma maneira eficiente de gerenciar e adicionar imagens às suas páginas. Com a opção de criar pastas personalizadas e o acesso a bancos de imagens gratuitos, você tem flexibilidade para encontrar e organizar os melhores recursos visuais para seus projetos. Agora você está pronto para aproveitar ao máximo essa ferramenta! Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte! ​

Última atualização em Nov 28, 2024

Como usar a navegação por Breadcrumb na Rockty 🎥

Introdução Manter o controle sobre todos os componentes de suas páginas pode ser um desafio, especialmente quando se trabalha com estruturas complexas. O recurso de navegação por Breadcrumb na Rockty facilita essa tarefa, permitindo que você navegue facilmente entre os diferentes níveis de componentes em suas páginas. Neste tutorial, você aprenderá como usar o Breadcrumb para obter total controle sobre sua estrutura de páginas. 📺 Assista ao vídeo abaixo para uma demonstração prática, ou continue lendo para mais detalhes sobre como usar o Breadcrumb na Rockty. https://www.youtube.com/watch?v=Atp_6KrLXoI 1. O que é o Breadcrumb? O Breadcrumb é uma ferramenta essencial para navegar entre os níveis de componentes dentro do construtor da Rockty. Localizado no topo do menu lateral esquerdo, ele oferece uma visão clara da hierarquia de componentes na sua página. ​ 2. Hierarquia de Componentes A Rockty organiza seus componentes em uma hierarquia, onde: - Elementos (verde) estão contidos dentro de Colunas (laranja), - Colunas (laranja) estão contidas dentro de Linhas (azul), - Linhas (azul) estão contidas dentro de Containers/Seções (verde água). Por exemplo, para adicionar uma imagem à sua página, a estrutura mínima deve ser: - Container/Seção > Linha > Coluna > Elemento (imagem). 3. Como usar o Breadcrumb O Breadcrumb exibe o caminho hierárquico até o componente selecionado, facilitando a navegação e configuração: 1. Selecionando um Elemento Ao selecionar um Elemento (verde), o Breadcrumb mostra o caminho: ​Container/Seção > Linha > Coluna > Elemento ​ 2. Selecionando uma Coluna Ao selecionar uma Coluna (laranja), o Breadcrumb mostra: ​Container/Seção > Linha > Coluna ​ 3. Selecionando uma Linha Ao selecionar uma Linha (azul), o Breadcrumb mostra: ​Container/Seção > Linha ​ ​ O Breadcrumb pode exibir até quatro atalhos de navegação: - CON (Container/Seção) - LIN (Linha) - COL (Coluna) - ELEMENTO 💡 Dica Importante: Embora você possa acessar o Breadcrumb a partir de qualquer componente, é recomendável iniciar a navegação a partir dos elementos verdes. Isso garantirá que você sempre tenha acesso ao caminho completo da hierarquia. Conclusão O Breadcrumb é uma ferramenta poderosa para gerenciar e configurar a estrutura de suas páginas na Rockty. Usando esta funcionalidade, você poderá navegar de forma eficiente entre os diferentes níveis de componentes, garantindo um controle mais preciso sobre o design e o layout das suas páginas. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 19, 2024

Como configurar âncoras (rolar a página) na Rockty

Introdução Melhore a navegação em suas páginas com âncoras! Elas permitem que cliques em botões, imagens ou textos façam a página rolar até uma seção específica, destacando informações importantes como valores ou formulários de cadastro. Neste tutorial, vamos guiá-lo pelo processo de configuração de âncoras na Rockty. 📝 Passo a Passo para Configurar Âncoras 1️⃣ Identifique a Seção/Container 🔧 Passo 1: Acesse o ícone de engrenagem da seção/container onde deseja que a página role. 👉 Em "Ajustes", localize o campo "Id do Container" e atribua um nome único e descritivo para essa seção. Esse nome será usado para identificar o destino da âncora. 2️⃣ Configure a Âncora 🔧 Passo 2: Vá até o ícone de engrenagem ou clique com o botão direito no botão, texto ou imagem que deseja usar para rolar a página. 👉 Em "Ajustes", selecione "Configurar Ação" e escolha "Rolar a Página". 3️⃣ Selecione a Seção/Container 🔧 Passo 3: Após ativar a opção de "Rolar a Página", você verá uma lista com os nomes dos containers definidos. 👉 Escolha o nome que você atribuiu no primeiro passo para concluir a configuração. ​ ⚠️ Dicas e Alertas Importantes 📌 Posicionamento da Âncora: Para evitar problemas de navegação, certifique-se de que o botão, texto ou imagem configurado para rolar a página esteja em uma seção diferente daquela para a qual você está configurando a âncora. 💡 Dica Importante: Ao usar a ação de rolar, lembre-se que ela sempre leva o visitante ao início da seção/container selecionado. Se a informação que você deseja destacar está no meio ou final de uma seção extensa, o efeito pode não ser o desejado. Para garantir que o visitante veja exatamente o que você deseja, isole essa informação em uma seção separada. Dessa forma, a rolagem levará o visitante diretamente ao conteúdo certo! 🚀 Versão Publicada: Lembre-se de que a ação de rolar a página funcionará apenas na versão publicada da página. Conclusão Configurar âncoras na Rockty é uma excelente maneira de melhorar a experiência do usuário em suas páginas, facilitando a navegação entre seções importantes. Siga os passos descritos para configurar âncoras de forma eficaz. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, não hesite em entrar em contato com nosso suporte. Nossa equipe está sempre pronta para ajudar você a aproveitar ao máximo a Rockty!

Última atualização em Nov 19, 2024

Como Aplicar Delay (Atraso) em Seções nas Suas Páginas Construídas na Rockty

Introdução O recurso de delay (atraso) é uma estratégia poderosa de marketing! Ele permite que seções de uma página se tornem visíveis apenas após um tempo pré-definido. Isso é útil em várias situações, como exibir um botão de compra no momento exato em que um vídeo de vendas menciona a oferta. Neste tutorial, você aprenderá como aplicar delay em seções usando a Rockty, garantindo que o conteúdo certo apareça no momento ideal para seus visitantes. ⏳ Aplicando Delay em Seções Aplicar delay em seções é ideal para mostrar vários elementos ao mesmo tempo, como texto, imagens e botões, tudo dentro de um único container. Essa configuração permite atrasos de até 59 minutos, sendo perfeita para apresentações de conteúdo que necessitam de um tempo específico para serem exibidas. 🔧 Passo a Passo para Aplicar Delay em Seções: 1️⃣ Configurações da Seção: Clique na engrenagem da seção (container) que deseja aplicar o delay (atraso) para acessar as opções de configuração. 2️⃣ Opção Avançada: Selecione a aba ‘Avançado’. 3️⃣ Configurar Evento: Em eventos que disparam uma ação, clique no ícone com o símbolo “+” e selecione ‘Página visitada’. 4️⃣ Ação de Atraso: Clique em ‘Página visitada’ novamente e escolha a opção ‘Aguardar para aparecer’. 5️⃣ Definir Tempo de Delay: Insira o tempo desejado para o atraso (delay) usando as caixas de Minutos ‘M’ e Segundos ‘S’. Você pode inserir os valores manualmente ou ajustar usando as setas para cima e para baixo. 📌 Observação: O tempo máximo de delay (atraso) é de 59 minutos. 6️⃣ Salvar e Publicar: Após definir o tempo de atraso, clique para salvar e depois publique a página para que as configurações entrem em vigor. 📌 Nota: Se desejar aplicar o delay (atraso) em várias seções, repita os passos acima para cada seção. 🔔 Importante: O delay (atraso) configurado terá efeito apenas na página publicada e o tempo é contado a partir do acesso a página. 7️⃣ Remover Delay: Para remover o delay da seção, clique no ícone de lixeira ao lado do texto do evento de ‘Página visitada’. 💡 Dica para Aplicação de Delay em Seções: ✅ Isolar Elementos: Para evitar confusões e sobreposições, isole elementos que você deseja aplicar delay em seções separadas. Por exemplo, se você deseja aplicar delay em um botão e um texto, coloque-os em uma seção (container) separado do restante da página. Conclusão Aplicar delay em seções pode ser uma ferramenta poderosa para controlar a visibilidade de conteúdos importantes na sua página, aumentando a interação do usuário no momento certo. Experimente diferentes tempos de atraso para ver o que funciona melhor para o seu objetivo e lembre-se de testar na página publicada! 📝 🔍 Dicas Adicionais: - Teste na Página Publicada: Sempre verifique o comportamento do delay na versão publicada da página, pois as configurações de atraso só funcionam no ambiente ao vivo. - Evite Atrasos Excessivos: Aplique o delay com moderação para não causar frustração ao usuário ao aguardar muito tempo para ver um conteúdo importante. - Acompanhe o Impacto do Delay: Observe como a aplicação de delay afeta a experiência do usuário e o desempenho da página. Verifique se o atraso está contribuindo para os objetivos desejados, como maior engajamento ou melhor timing de apresentação de ofertas. - Use o Delay com Propósito: Utilize o atraso para destacar momentos importantes ou para criar uma experiência interativa mais envolvente. Evite usar o delay de forma excessiva, pois isso pode confundir os usuários ou tornar a navegação menos fluida. - Considere o Contexto do Usuário: Lembre-se de que o delay deve complementar a experiência do usuário, não sobrecarregá-la. Avalie como o atraso pode ser usado para melhorar a comunicação da mensagem e não apenas para adicionar um efeito visual. Precisa de Ajuda? 🤔 Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte! Estamos aqui para ajudar!

Última atualização em Nov 19, 2024

Como funciona a configuração CSS Classes na Rockty

Introdução Este tutorial oferece uma visão básica sobre como usar o recurso de CSS Classes nas opções avançadas de configuração da Rockty. Ideal para quem está começando a explorar personalizações com CSS, sem necessidade de conhecimentos avançados em programação. Para ajustes mais complexos, recomendamos consultar materiais adicionais ou nossa equipe de suporte. O que é o recurso 'CSS Classes' na Rockty? O recurso CSS Classes permite que você adicione atributos de classe aos elementos da sua página, possibilitando personalizações como estilização específica via scripts. Esse recurso está disponível na maioria dos elementos da Rockty, incluindo Seções, Linhas, e Colunas. Passo a Passo para Configurar CSS Classes 1. Acessando o Recurso de CSS Classes Para começar, acesse as configurações avançadas do componente onde deseja aplicar o CSS. Você pode aplicar CSS Classes em Seções, Linhas, Colunas ou na maioria dos elementos individuais. Nota: Neste tutorial, usaremos um exemplo de CSS para arredondar uma imagem, mostrando passo a passo como aplicar essa estilização. 1. Clique no ícone de engrenagem do componente selecionado para abrir as configurações. ​ 2. Acesse a aba "Avançado" e clique em "CSS Classes". 3. Digite um nome único e descritivo para a classe, e pressione "Enter" no seu teclado para salvar. ​ ❗ Importante: O nome da classe será usado posteriormente no script que definirá as estilizações desejadas para o elemento. 2. Adicionando um Elemento de Script Depois de configurar a Classe CSS, o próximo passo é adicionar um elemento de script na sua página: 1. No construtor, adicione o 'Elemento de Script' na página. ​ 2. Após adicionado, clique no código do script gerado automaticamente no topo da página para abrir a janela de edição. ​ ​💡 Dica: Se precisar de mais detalhes sobre como funciona o Elemento de Script na Rockty, confira nosso tutorial dedicado clicando aqui. ​ 3. Inserindo o Script no Componente Na janela de edição do script, você pode adicionar o código necessário para aplicar o estilo personalizado: - Insira o código CSS dentro da tag <style>. - Utilize o nome da classe que você configurou no passo anterior para direcionar o estilo ao elemento correto. Exemplo de Código: ​ <style> .imagem-arredondada img { border-radius: 100%; border: 20px solid red; } </style> - Para estilizações, insira o script no <head> da página, clicando na chave disponível. Isso garante que os estilos sejam aplicados antes do conteúdo visual ser exibido. - Para remover o script, clique no ícone de lixeira. - Para fechar a janela, clique no ícone "X". ​ 4. Finalizando as Configurações Após inserir o script, feche a janela do 'Elemento de Script' e publique a página para que as alterações sejam aplicadas. Lembre-se de que os efeitos do CSS Classes só serão visíveis na versão publicada da página. ​ Conclusão Este tutorial ofereceu uma introdução simples ao uso de CSS Classes na Rockty, ideal para iniciantes que desejam explorar personalizações básicas. Para configurações mais avançadas ou dúvidas adicionais, sinta-se à vontade para contatar nossa equipe de suporte. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Adicionando Efeitos de Hover aos Botões com CSS na Rockty

Introdução Neste tutorial, você aprenderá a adicionar efeitos de hover personalizados aos botões usando CSS no construtor da Rockty. Isso tornará seus botões mais interativos e visualmente atraentes, aprimorando a experiência do usuário. Passos para Adicionar Efeitos de Hover 🎨 Defina as Cores Iniciais do Botão 1️⃣ Selecione o botão que deseja personalizar. 2️⃣ Acesse a engrenagem do botão e vá para Estilo/Tipografia. 3️⃣ Defina a Cor de Fundo e a Cor do Texto conforme desejado. ❗ Observação: Essas serão as cores padrão do botão. ⚙️ Acesse as Configurações Avançadas do Botão 1️⃣ No seu construtor, selecione o botão que você deseja personalizar. 2️⃣ Vá para a aba Avançado nas configurações do botão. 🏷️ Crie e Aplique uma Classe CSS 1️⃣ No campo CSS Classes, insira o nome efeito-hover para a classe CSS. 📝 Adicione o Elemento Script à Sua Página Para adicionar um elemento Script à sua página, siga estas etapas: ​ 1️⃣ Adicione um novo elemento na sua página. 2️⃣ Selecione o elemento 'Script' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos ou sobre como funciona o elemento de Script, confira nossos tutoriais: - Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar - Como funciona o Elemento Script na Rockty 💻 Adicione o Código CSS Acesse o elemento de Script no topo da sua página para inserir o seguinte código CSS dentro da tag <style> no header, substituindo os valores HEX para corresponder às cores desejadas. <style> .efeito-hover { transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Efeito de transição suave */ } .efeito-hover:hover { background: #HEX_DO_FUNDO; /* Cor de fundo ao passar o mouse */ color: #HEX_DO_TEXTO; /* Cor do texto ao passar o mouse */ transform: scale(1.05); /* Leve aumento no tamanho do botão */ } </style> 🎨 Obtenção de Cores HEX - Paleta de Cores do Construtor: Utilize a paleta de cores disponível nas configurações do botão para selecionar e copiar o valor HEX diretamente. - Ferramentas Online: - Adobe Color: Crie e ajuste paletas de cores e obtenha valores HEX. - Coolors: Gere paletas de cores e copie os valores HEX das cores que você gosta. ✅ Publique e Teste o Efeito de Hover Feche o elemento de Script e publique a página. Acesse a página publicada para garantir que o efeito de hover está funcionando como esperado. Ajuste o código CSS conforme necessário para obter o efeito desejado. Conclusão Adicionar um efeito de hover pode melhorar a interatividade dos botões e a experiência do usuário. Explore as opções de personalização para encontrar o efeito que melhor se adapta ao design da sua página. 💡 Dicas Adicionais - Escolha Cores Contrastantes: Certifique-se de que as cores do efeito de hover contrastem com as cores padrão do botão para garantir que o efeito seja visível. - Use Efeitos Suaves: Transições suaves ajudam a criar uma experiência de usuário mais agradável. - Teste em Diferentes Dispositivos: Verifique como o efeito de hover aparece em diferentes tamanhos de tela e dispositivos para garantir a consistência. - Para Estilizações Avançadas, como aplicação de gradientes, entre em contato com nosso suporte para obter assistência personalizada. 📚 Tutoriais Relacionados - Como funciona o Elemento Botão na Rockty - Como funciona o Elemento Script na Rockty - Como funciona a configuração CSS Classes na Rockty 🤔 Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, não hesite em entrar em contato com nosso suporte. Nossa equipe está sempre pronta para ajudar você a aproveitar ao máximo a Rockty!

Última atualização em Nov 28, 2024

Como aplicar efeito de transparência em imagens de fundo na Rockty

Introdução Na Rockty, aplicar efeitos de transparência em imagens de fundo pode transformar o visual das suas páginas, sejam elas inteiras ou divididas em seções, linhas ou colunas específicas. Esse recurso ajuda a destacar textos e criar um design elegante e moderno. 💡 Dica: Caso tenha dúvidas sobre como inserir uma imagem no fundo da página, seções, linhas e colunas, acesse nossos tutoriais nos links a seguir para orientações iniciais: - Seções: Configurações de Seção - Linhas e Colunas: Configurações de Linhas e Colunas - Fundo da página: Inserir imagem no fundo da página Entendendo a Hierarquia de Camadas ❗ Importante: A aplicação do efeito de transparência deve ser feita sempre na camada superior ao local onde a imagem foi inserida, seguindo a ordem: Fundo da página > Seções > Linhas > Colunas 📝 Isso significa que: - Se a imagem foi inserida no fundo da página, o efeito pode ser aplicado em seções, linhas ou colunas. - Se a imagem foi inserida no fundo de uma seção, o efeito pode ser aplicado em linhas ou colunas. - Se a imagem foi inserida no fundo de uma linha, o efeito pode ser aplicado apenas na coluna. Passo a Passo: Aplicando o Efeito de Transparência 📌 Neste tutorial, usaremos como exemplo a aplicação do efeito em uma seção, considerando que a imagem foi inserida no fundo da página. Vale ressaltar que essa mesma lógica pode ser aplicada para configurar a transparência em linhas e colunas, conforme necessário, seguindo a hierarquia de camadas informada. Passo 1: Acesse as Configurações da Seção Primeiro, acesse a Engrenagem da seção onde deseja aplicar o efeito de transparência. Passo 2: Navegue até a Aba de Estilo Depois de acessar as configurações, vá para a aba Estilo. Passo 3: Selecione a Cor Clique no campo que representa a Cor para abrir a paleta de cores. Aqui, você pode selecionar a cor desejada ou inserir o código HEX da cor que deseja usar. ​ Passo 4: Ajuste a Transparência Após selecionar a cor, ajuste o nível de transparência usando a barra deslizante ou insira manualmente o valor desejado na caixa representada pela letra "A". ​ Passo 5: Aplicar Transparência com Cor Gradiente (Opcional) Se preferir, você também pode aplicar o efeito de transparência usando o recurso Cor Gradiente. Ative a chave correspondente, selecione uma orientação e ajuste a transparência das cores selecionadas. ​ Dicas e Exemplos Práticos 💡 Dica 1: Para melhorar a legibilidade do texto, uma transparência entre 20% e 40% é geralmente eficaz.​ 💡 Dica 2: Experimente diferentes combinações de cores e transparências para criar efeitos visuais únicos que combinam com o tema da sua página. Visualizando o Resultado Após aplicar o efeito, visualize a página para conferir como ficou. Você pode ajustar a transparência conforme necessário até atingir o visual desejado. Conclusão A aplicação de transparência em imagens de fundo é uma maneira eficaz de destacar elementos importantes na sua página, garantindo uma experiência visual agradável para os usuários. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Nov 28, 2024

Como Definir Conversões de Cliques de Botão pelo Google Tag Manager na Rockty

Introdução Em algumas campanhas, como aquelas focadas em negócios locais, pode ser necessário registrar conversões ou disparar eventos quando um usuário clica em um botão específico, como um botão de redirecionamento para o WhatsApp. Essa ação, conhecida como "clique de botão", pode ser uma métrica valiosa para medir o sucesso de suas campanhas. ​ Este tutorial irá guiá-lo passo a passo na configuração do Google Tag Manager para disparar eventos e conversões quando os visitantes clicam em botões específicos na sua página Rockty. Passo 1: Instalando o Google Tag Manager na Página 1. Acesse o construtor da Rockty e abra o menu superior: CONFIGURAÇÕES > PIXELS. 2. Habilite a chave do Google Tag Manager e insira a tag do seu container GTM (ex.: GTM-N9HMN7H). ​ Passo 2: Configurando o Google Tag Manager Agora que o Google Tag Manager está instalado na sua página, vamos configurar o que deve ser disparado (como tags, pixels ou eventos) e quando isso deve acontecer. Vamos usar como exemplo um evento do Pixel do Facebook (Initiate Checkout) que deve ser disparado ao clicar em um botão específico. ​ Configurando o que deve ser disparado (Tag) 1. Dentro do Google Tag Manager, clique na aba Tags e depois no botão Novo. ​ ​ 2. Defina um nome para sua tag e clique em Tag Configuration. ​ 3. Escolha o tipo de tag a ser disparada. Se o serviço não estiver listado (como o Pixel do Facebook), selecione HTML customizado e insira o código do evento desejado (ex.: código do evento de “InitiateCheckout” do Pixel do Facebook). ​ Passo 3: Configurando o Gatilho para Disparar a Tag Para que o evento seja disparado corretamente, precisamos configurar um gatilho que será ativado ao clicar em um botão específico. ​ Identificando o Botão na Rockty 1. No construtor da Rockty, selecione o botão desejado e clique na engrenagem para abrir o menu de configurações. 2. Navegue até a aba AVANÇADO > CSS CLASSES e defina uma classe CSS única para esse botão (ex.: cssgtm). ​ Configurando o Gatilho no Google Tag Manager 1. No Google Tag Manager, clique em Triggering (Gatilho) ao configurar a tag. ​ 2. Clique no botão de adicionar (+) e defina um nome para o gatilho. ​ 3. Em Trigger Configuration, selecione Click > All Elements > Some Clicks e depois a opção “Choose Built-In Variables” no menu dropdown para selecionar a variável desejada que irá identificar o botão único em nossa página. ​ 4. Escolha a variável Click Classes para identificar o botão único por meio da Classe CSS configurada (ex.: cssgtm). ​ 5. No dropdown de condições, mantenha contains e insira o valor da Classe CSS (cssgtm). Salve as configurações. ​ Publicando as Configurações Para aplicar as mudanças: 1. Clique no botão Submeter no Google Tag Manager. 2. Em seguida, clique em Publicar para enviar as configurações para os servidores do Google. Agora, sempre que um visitante clicar no botão específico configurado na Rockty, a tag ou evento será disparado. Conclusão Com essas etapas, você configurou com sucesso a medição de cliques de botão como conversões ou eventos pelo Google Tag Manager na Rockty. Esse exemplo ilustrou o uso do Pixel do Facebook, mas o Google Tag Manager é uma ferramenta poderosa e flexível para diversas integrações. Explore outras possibilidades para otimizar ainda mais suas campanhas. Dicas - Explore Outras Tags e Gatilhos: O Google Tag Manager suporta diversas integrações além do Pixel do Facebook, como tags do Google Analytics, Google Ads e muito mais. - Teste as Configurações: Antes de publicar suas páginas, teste as configurações para garantir que as conversões estão sendo registradas corretamente. - Mantenha as Tags Organizadas: Nomeie suas tags e gatilhos de forma clara para facilitar a manutenção e futuras edições. Recursos Adicionais Para aprofundar seu conhecimento e obter mais informações sobre como usar o Google Tag Manager, recomendamos consultar os seguintes recursos oficiais do Google: - O que é o Google Tag Manager?: Uma introdução completa ao Google Tag Manager e suas funcionalidades. - Criar uma nova tag: Passos detalhados para criar e configurar tags no Google Tag Manager. - Configurar um gatilho: Instruções sobre como configurar gatilhos para acionar tags no seu site. - Usar o modo de visualização e depuração: Como utilizar as ferramentas de depuração para testar suas tags antes da publicação. - Gerenciar contas e containers: Orientações sobre como gerenciar suas contas e containers no Google Tag Manager. Esses recursos ajudarão a expandir seu entendimento e a utilizar o Google Tag Manager de maneira mais eficaz. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte! ​

Última atualização em Nov 19, 2024

Como funcionam Elementos de Texto na Rockty

Introdução Neste tutorial, você aprenderá a utilizar e personalizar os elementos de texto (Título, Subtítulo e Parágrafo) na Rockty. Esses elementos compartilham ferramentas de edição semelhantes, permitindo que você ajuste e estilize seus textos para se alinharem perfeitamente ao design e à comunicação visual de suas páginas 1. Como adicionar Textos Para adicionar Textos à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Título', 'Subtítulo' ou 'Parágrafo' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Configurações do Elemento Para acessar as configurações de um elemento, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. Ajustes Ao acessar a engrenagem dos elementos de texto, você poderá definir ações específicas para o texto: - Configurar Ação: Escolha a ação que a imagem executará conforme necessário. ​ Posição Na aba de "Posição", você pode ajustar: - Posição e Largura: Defina onde o texto será exibido na página e ajuste sua largura. - Margem (Topo) e Espaçamento Interno: Ajuste as margens e o espaçamento interno (topo, baixo, esquerda, direita) para melhor posicionamento. 💡 Dica: Evite margens negativas, pois podem causar conflitos com outros elementos. Use-as com moderação e apenas se necessário. Estilo Personalize a aparência do seu texto com as opções disponíveis: - Cor do Texto: Selecione a cor da fonte através da paleta ou insira um código HEX. - Fontes: Escolha entre centenas de tipos de fontes para criar páginas únicas. - Estilo da Fonte: Ajuste o estilo do texto com opções como Light, Regular, Medium, Bold, e Black. - Tamanho da Fonte, Altura da Linha, Opacidade: Ajuste manualmente ou através de barras deslizantes. ​ Avançado Explore configurações avançadas para adicionar efeitos especiais e personalizações adicionais: - Efeitos de Movimento/Animação: Adicione animações aos textos. Escolha 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. - Pixel do Facebook / Google: Configure conversões do Pixel do Facebook ou Google em cliques de texto configurados como link. Para mais informações, acesse: - Conversões do Pixel do Facebook - Conversões de Cliques pelo Google Tag Manager ​ 3. Caixa de Edição de Texto Ao selecionar um texto na Rockty, você verá uma caixa de edição que permite: - Estilos de Texto: Negrito, Itálico, Sublinhado, Riscado. - Cores do Texto e Fundo: Escolha as cores utilizando a paleta ou insira o código HEX. - Inserir URLs: Para adicionar links ao texto, clique no ícone "#". 💡 Dica: A Caixa de Edição de Texto é ideal para destacar partes específicas do texto ou aplicar múltiplas cores e estilos em um único bloco de texto. Conclusão Com essas ferramentas, você pode facilmente ajustar e personalizar os elementos de texto na Rockty para atender às necessidades específicas da sua página. Explore cada opção de personalização e configure os textos de forma a criar uma hierarquia visual clara e um design coeso com o restante do layout. Dicas Adicionais - Mantenha a Hierarquia Visual: Utilize os títulos, subtítulos e parágrafos de forma hierárquica para guiar a leitura. O título deve ser o elemento mais destacado, seguido do subtítulo e, por fim, o parágrafo, que fornece detalhes adicionais. - Priorize a Clareza: Certifique-se de que os textos são simples e diretos. Uma linguagem clara facilita a comunicação e garante que os visitantes compreendam a mensagem de forma rápida. - Use Tipografia Consistente: Escolha uma tipografia que reflita o estilo da sua marca e seja fácil de ler. É importante manter a consistência nas fontes e tamanhos para criar uma experiência visual coesa. - Crie Chamadas para Ação Eficientes: Ao usar títulos e subtítulos, aproveite para incluir chamadas para ação que incentivem o visitante a realizar uma determinada ação, como "Saiba Mais", "Cadastre-se Agora", ou "Adquira Já". - Espaçamento Adequado: Deixe espaço suficiente entre os elementos de texto para melhorar a legibilidade. Um layout bem organizado faz com que o conteúdo pareça menos sobrecarregado e mais fácil de navegar. - Utilize Contrastes: Certifique-se de que o texto tem um bom contraste com o fundo da página. Textos claros em fundos escuros ou textos escuros em fundos claros ajudam a garantir a legibilidade, especialmente em dispositivos móveis. - Evite Blocos de Texto Longos: Divida o conteúdo em parágrafos curtos ou listas quando possível. Isso torna a leitura mais dinâmica e menos cansativa para o visitante. - Teste em Diferentes Dispositivos: Verifique se os textos estão legíveis e organizados tanto em desktops quanto em dispositivos móveis, garantindo uma experiência responsiva. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o Elemento Botão na Rockty

Introdução Os botões são elementos essenciais para guiar as ações dos usuários em suas páginas, seja para redirecionar para um link, submeter um formulário ou navegar entre páginas do funil. Neste tutorial, você aprenderá como configurar e estilizar botões na Rockty, aproveitando ao máximo suas funcionalidades para criar uma experiência de navegação mais fluida e atrativa. 1. Como adicionar um Botão Para adicionar um botão à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Botão' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento Para acessar as configurações de um botão, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. 3. Configurações do Botão Ajustes - Visibilidade Você pode definir em quais dispositivos o botão será exibido (Desktop, Tablet, Mobile) clicando nos ícones correspondentes. Para ocultar o botão em um dispositivo, clique no ícone; para reexibi-lo, clique novamente. - Texto do Botão Insira o texto desejado para exibir dentro do botão. - Configurar Ação Selecione a ação que o botão executará ao ser clicado: - Nenhuma ação: O botão não executará nenhuma ação. - Abrir link externo: Direcione o usuário para uma URL externa ao clicar no botão. - Rolar Página: Use o botão para rolar a página para uma seção específica configurada por ID (âncora). Para mais detalhes veja nosso tutorial sobre Como configurar âncoras (rolar a página) na Rockty - Submeter Formulário: Se você tiver um formulário na página, configure o botão para submeter os dados. Certifique-se de selecionar o formulário correto e definir o comportamento após a submissão. Para mais detalhes sobre a configuração de formulários, veja nosso tutorial sobre como Como Personalizar e Configurar Formulários na Rockty - Ir para página do funil: Escolha uma página do funil para direcionar o usuário ao clicar no botão. - Abrir Pop-up: Caso exista um pop-up configurado na página, essa opção permite definir o botão para abrir o pop-up específico ao ser clicado. Selecione o pop-up desejado a partir da lista disponível. Para mais detalhes veja nosso tutorial sobre como configurar pop-ups na Rockty. ​ Posição Ajuste a posição, tamanho, largura, margens e espaçamento interno do botão inserindo valores manualmente ou ajustando as barras de controle. 💡 Dica: Evite margens negativas para prevenir conflitos com outros elementos da página. Estilo - Cor do Botão: Configure a cor do botão usando a paleta de cores ou inserindo um código HEX. Para excluir uma cor, clique no ícone de lixeira. ​ - Borda, Radial e Sombra: Ative bordas, sombras e efeitos radiais, ajustando os parâmetros conforme necessário. ​ Tipografia - Fontes e Estilos: Escolha entre diversas fontes disponíveis e defina o estilo do texto (Light, Regular, Medium, Bold, Black). ​ - Cor do Texto: Defina a cor do texto do botão através da paleta de cores ou insira o código HEX desejado. Para excluir uma cor, clique no ícone de lixeira. ​ - Tamanho da Fonte: Ajuste o tamanho da fonte do texto do botão conforme preferir. ​ Avançado - Efeitos de Movimento e Animação: Adicione animações aos botões, como entrada, loop contínuo, ou ativação ao passar o mouse. Configure a duração, velocidade e atraso das animações conforme desejado. ​ - CSS Classes: Personalize ainda mais o botão aplicando CSS personalizado. Insira um nome para o CSS e utilize o elemento Script para referenciar e aplicar o código CSS. Para mais detalhes, consulte nosso tutorial sobre configuração CSS Classes. ​ - Pixel do Facebook / Google: Configure conversões de cliques no botão para Pixel do Facebook ou Google Tag Manager. Veja nossos tutoriais sobre configuração do Pixel do Facebook e Google Tag Manager. ​ Conclusão Configurar botões na Rockty é uma tarefa simples, mas essencial para direcionar o fluxo de navegação e interações do usuário em suas páginas. Utilize as configurações e personalizações disponíveis para criar botões que se destaquem e ofereçam uma experiência de navegação otimizada e intuitiva. Dicas Adicionais 1. Crie CTAs (Call-to-Action) Claros: O texto do botão deve ser direto e chamar o usuário para uma ação específica, como "Saiba Mais", "Comprar Agora" ou "Assinar". Evite textos vagos para garantir que o usuário entenda o próximo passo. 2. Escolha Cores de Destaque: Use cores contrastantes para o botão, de forma que ele se destaque no design da página, mas mantenha harmonia com a paleta de cores geral. Isso pode aumentar a taxa de cliques. 3. Tamanho e Espaçamento Adequados: Garanta que o botão tenha um tamanho adequado para ser facilmente clicado, especialmente em dispositivos móveis. Certifique-se também de que há espaço suficiente ao redor do botão para evitar cliques acidentais. 4. Use Links Externos ou Âncoras: Aproveite as funcionalidades do botão para redirecionar usuários a links externos, âncoras dentro da página ou mesmo iniciar uma ação específica, como abrir o WhatsApp. 5. Acessibilidade: Lembre-se de que botões devem ser acessíveis a todos. Certifique-se de que o contraste de cores atenda às diretrizes de acessibilidade e que o botão seja facilmente navegável para usuários de teclado. 6. Efeitos de Hover com CSS: Para criar efeitos de hover personalizados para seus botões, consulte nosso tutorial detalhado sobre como configurar efeitos de hover usando CSS. Veja o tutorial aqui. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte! ​

Última atualização em Nov 28, 2024

Como funciona o Elemento de Formulários (Form) na Rockty

Introdução Formulários são elementos essenciais para coletar informações dos visitantes em suas páginas na Rockty. Neste tutorial, vamos mostrar como você pode estilizar e configurar formulários, desde ajustes básicos até personalizações avançadas. 1. Como adicionar Formulários: Para adicionar Formulários à sua página na Rockty, siga estes passos: A. Adicione um novo elemento em sua página. B. Selecione o elemento 'Form' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Configurações do Formulário: Para acessar as configurações de um elemento, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. 3. Ajustes A. Visibilidade: Configure a visibilidade do formulário para Desktop, Tablet e Mobile. Clique no ícone correspondente para ocultar ou mostrar o formulário em cada dispositivo. Para reexibir um formulário oculto, clique novamente no ícone do dispositivo desejado. B. Nome: Cada formulário deve ter um nome único. 🚨 Nota: Isso é crucial para o formulário funcionar corretamente, quando houver múltiplos formulários na mesma página ou se houver diferentes formulários em cada versão da página (desktop, tablet, mobile) devido ao uso do recurso de visibilidade. C. Integração: Escolha entre várias opções de integração que disponibilizamos. Acesse nossos tutoriais específicos para cada integração clicando aqui. 📌 Importante: Para que o formulário funcione corretamente, é necessário integrar com alguma das opções disponibilizadas. D. Esconder Campos Ocultos em Modo de Edição: Essa configuração permite que você edite o layout e outros campos do formulário com mais facilidade, sem a interferência visual dos campos ocultos (quando houver). ​ 4. Configuração dos Campos A. Campos: Adicione e configure os campos do seu formulário. Cada campo deve ser previamente criado na sua ferramenta de e-mail marketing para garantir que os dados sejam capturados corretamente. ​ B. Tipo: Selecione o tipo de campo (e-mail, texto, telefone, etc.) conforme configurado na sua plataforma de e-mail marketing. ​ C. Nome: Mapeie o campo ao nome correspondente na sua ferramenta de e-mail marketing. 📌 Nota: Isso é crucial para que o formulário funcione corretamente. D. Texto de Exibição e Descrição: Adicione textos descritivos acima e dentro dos campos do formulário. ​ E. É Requerido: Marque a opção se o preenchimento do campo for obrigatório. ​ Botão de Submissão (Submit Button): O botão de submeter é gerado automaticamente quando um formulário é adicionado à página. Além de configurar o texto do botão, você pode definir a ação a ser tomada após a submissão do formulário. As opções são: ​ A. Nenhuma Ação: O formulário será submetido sem redirecionamento. ​ B. Abrir Link Externo: Insira uma URL para direcionar o usuário após a submissão do formulário. - Opções de Parâmetros de URL: - Repassar Parâmetros: Repassa parâmetros capturados (como UTM) para a próxima página. - Pré-popular Campos: Preenche automaticamente os campos em uma página de checkout, facilitando para o usuário não precisar preencher os mesmos dados novamente. ​ 📌 Para detalhes sobre como configurar parâmetros de UTM e campos ocultos na Rockty, consulte nosso tutorial clicando aqui. C. Ir para Página no Funil: Selecione uma página do funil para redirecionar o usuário após a submissão. ​ Opções de Parâmetros de URL: - Repassar Parâmetros: Repassa parâmetros capturados (como UTM) para a próxima página. - Pré-popular Campos: Preenche automaticamente os campos em uma página de checkout. ​ 📌 Para detalhes sobre como configurar parâmetros de UTM e campos ocultos na Rockty, consulte nosso tutorial clicando aqui. D. Fechar Pop-up: Se o formulário estiver em um pop-up, selecione esta opção para fechá-lo após a submissão e continuar na página. 💡 ​Dica: Essas opções permitem que você configure a ação desejada após a submissão do formulário, melhorando a experiência do usuário e a integração com outras páginas ou ferramentas. 5. Estilização do Formulário 📌 Observação: Todas as opções de estilização a seguir são válidas tanto para o formulário quanto para o botão de submeter, mas cada um deve ser configurado separadamente. A. Cor de Fundo: Escolha a cor de fundo ou configure um gradiente. B. Borda, Sombra e Radial: Adicione bordas, sombras e efeitos radiais. ​ C. Tipografia: Ajuste a fonte, tamanho e cor do texto dentro dos campos e do botão. ​ D. Posição: Ajuste a posição, largura, altura, margem e espaçamento interno do formulário e do botão de submeter. ​ 🚨 ​Importante: Lembre-se de fazer essas edições de forma individual para o formulário e para o botão. 6. Configurações Avançadas A. Efeitos de Movimento – Animação: Adicione animações aos formulários e botões, configurando o comportamento, ativação, duração e atraso da animação. ​ B. CSS Classes: Configure CSS personalizado para o formulário. Para mais informações sobre CSS Classes, consulte nosso tutorial dedicado aqui. ​ 7. Edição e Adição de Campos Use os ícones na linha vermelha visível ao passar o mouse sobre os campos e botões para: - Lixeira: Remover campos ou botões. - Engrenagem: Acessar configurações detalhadas dos campos e botões. - Setas: Mover os campos e botões para cima ou para baixo. - +: Adicionar novos campos ou parâmetros ao formulário. ​ Conclusão Agora você sabe como configurar e estilizar formulários na Rockty. Desde ajustes básicos até personalizações avançadas, você tem as ferramentas necessárias para criar formulários que atendem às suas necessidades. Dicas Adicionais - Verifique os Campos Obrigatórios: Certifique-se de marcar corretamente os campos obrigatórios para evitar que os usuários enviem formulários incompletos. - Teste o Formulário: Sempre teste o formulário em diferentes dispositivos e navegadores para garantir que ele funcione corretamente em todos os cenários. - Otimização para Dispositivos Móveis: Verifique se o formulário é responsivo e acessível em dispositivos móveis, considerando o layout e a usabilidade. - Considere a Experiência do Usuário: Mantenha o formulário simples e direto, evitando campos desnecessários que possam desmotivar o usuário a completá-lo. - Integração com Ferramentas Externas: Garanta que a integração com a ferramenta de gestão de dados externa esteja configurada corretamente para que os dados sejam capturados e processados de maneira adequada. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Jan 17, 2025

Como funciona o elemento LGPD na Rockty

Introdução A Lei Geral de Proteção de Dados Pessoais (LGPD) estabelece diretrizes obrigatórias para a coleta, processamento e armazenamento de dados pessoais no Brasil. Inspirada na GDPR da União Europeia, a LGPD visa garantir a privacidade dos brasileiros e evitar problemas comerciais relacionados ao uso indevido, comercialização e vazamento de dados. É importante que suas páginas apresentem de forma clara e visível as políticas de privacidade, permitindo aos visitantes a escolha de aceitar ou não o uso de dados pessoais. 1. Como adicionar o elemento LGPD Para adicionar o elemento LGPD em suas páginas na Rockty: 1. Adicione um novo elemento à sua página. 2. Selecione o elemento LGPD na lista que aparece no menu lateral esquerdo. ​ Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Configurações do Elemento LGPD Após adicionar o elemento LGPD: - Uma mensagem no topo central da tela informará que a página possui um modal LGPD (identificado por uma barra cinza com texto verde). Para editar, clique em “LGPD”. ​ - No rodapé da página, o modal LGPD será exibido com um texto padrão, um botão e um ícone de 'X', todos editáveis. ​ Para excluir o modal LGPD: Clique no ícone em formato de lixeira. ​ Para fechar o modal LGPD no construtor: Clique no ícone de 'X' com fundo preto. ​ 3. Recomendações de Uso É recomendado que suas páginas contenham as políticas de privacidade em um local de fácil visualização para o usuário. 4. Exemplo de Política de Privacidade Política de Privacidade ​ Para visualizar alguns dos nossos conteúdos é necessário fornecer seu e-mail, mas em hipótese alguma essa informação será repassada a terceiros ou utilizada de forma indevida. Informamos também que ao acessar nossas páginas seu endereço IP será gravado e que utilizamos cookies para otimização da sua experiência de navegação de acordo com nossos objetivos comerciais e de conteúdo. Ao prosseguir, você estará de acordo com essa política. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Imagem na Rockty

Introdução As imagens são elementos visuais essenciais para a composição de páginas na web, ajudando a capturar a atenção dos visitantes e a comunicar mensagens de forma mais impactante. Na Rockty, o elemento Imagem permite que você adicione, configure e estilize imagens de maneira simples e flexível, personalizando sua aparência e comportamento de acordo com suas necessidades. 1. Como adicionar o elemento Imagem Para adicionar uma imagem à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Imagem' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como acessar as configurações do Elemento Para acessar as configurações de uma imagem, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. 3. Configurações do Elemento Imagem Ajustes - Visibilidade: Configure a visibilidade da imagem para diferentes dispositivos (Desktop, Tablet e Mobile). Para ocultar ou exibir a imagem em determinado dispositivo, clique no ícone correspondente. Clique novamente para reverter a ação. - Configurar Ação: Escolha a ação que a imagem executará conforme necessário. - Preenchimento do Objeto: Selecione como deseja que a imagem se ajuste ao espaço disponível (preencher completamente, manter proporções, etc.), evitando distorções. ​ Posição Configure a posição da imagem (esquerda, centro, direita), dimensões (tamanho), e margens (topo e esquerda). Para ajustes finos, insira valores manualmente ou utilize as barras de ajuste. 💡 Dica: Evite usar margens negativas, pois isso pode causar conflitos com outros elementos da página. Use com moderação se necessário. Estilo - Imagem: Para alterar a imagem, clique em "Alterar Imagem" e selecione uma da biblioteca de imagens da Rockty ou faça o upload de uma nova imagem do seu dispositivo. Para excluir uma imagem, clique no ícone de lixeira. ​ 💡 Dica: Para obter mais detalhes sobre como usar a Biblioteca de Imagens da Rockty, acesse nosso tutorial completo aqui. ​ - Borda, Radial e Opacidade: Ative essas opções para personalizar bordas, aplicar efeitos de arredondamento (radial), e ajustar a opacidade da imagem. Ajustes podem ser feitos manualmente ou com o auxílio de barras deslizantes. ​ Avançado - Alt SEO: Adicione texto alternativo à imagem para melhorar a acessibilidade e otimização de SEO, especialmente para visitantes que utilizam leitores de tela. - Efeitos de Movimento e Animação: Configure animações para as imagens. Escolha um efeito, ajuste o comportamento (uma vez ou infinito), defina a ativação (ao entrar na página ou ao passar o mouse), e personalize a duração e atraso da animação. - CSS Classes: Insira classes CSS para aplicar estilos personalizados às imagens através de códigos no elemento Script. Para mais detalhes, consulte nosso tutorial sobre CSS Classes. - Pixel do Facebook / Google: Configure o rastreamento de conversões do Pixel do Facebook ou Google em cliques de imagem, utilizando nossos tutoriais para orientações detalhadas: - Configuração de conversões do Pixel do Facebook. - Configuração de conversões pelo Google Tag Manager. ​ ​ Conclusão O elemento Imagem da Rockty oferece uma ampla gama de personalizações que ajudam a aprimorar a aparência e funcionalidade das suas páginas. Explore as configurações para tirar o máximo proveito desse recurso, desde simples ajustes visuais até integrações avançadas com SEO e ferramentas de marketing. Dicas Adicionais - Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens. - 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!

Última atualização em Nov 28, 2024

Como funciona o elemento Carrossel na Rockty

Introdução O elemento Carrossel na Rockty é uma ótima ferramenta para adicionar várias imagens que podem se movimentar automaticamente ou de forma manual ao clicar nas setas do carrossel. Ele permite uma navegação visual atrativa e dinâmica, sendo ideal para exibir portfólios, depoimentos e outros conteúdos visuais. 1. Como adicionar o Carrossel Para adicionar o Carrossel à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Carrossel' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como acessar as configurações do elemento Para acessar as configurações de um elemento, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. ​ 3. Configurações do Carrossel Visibilidade Você pode definir a visibilidade do carrossel em diferentes dispositivos (Desktop, Tablet, Mobile). Para isso, clique no ícone correspondente ao dispositivo desejado para ocultar ou mostrar o elemento. Para reexibir o carrossel, clique novamente no ícone. ​ Imagens Para adicionar imagens ao carrossel: - Selecione uma imagem do carrossel e clique em "Alterar Imagem" para acessar a Biblioteca de Imagens da Rockty ou fazer o upload de uma nova imagem. - Para duplicar uma imagem, clique no ícone de duplicar. Para remover, clique no ícone 'x'. - Para adicionar uma nova imagem ao carrossel, clique em "+ Adicionar Item". - É possível definir um preenchimento para a imagem em "Preenchimento do Objeto" e configurar ações de clique em "Configurar Ação". ​ Número de carrosséis Defina quantos carrosséis deseja inserir no mesmo elemento (de 1 a 5). Essa configuração pode variar para cada versão da página (Desktop, Tablet, Mobile). ​ Passar slides automaticamente Ative essa opção para que os slides passem automaticamente e configure o intervalo de tempo (3, 5, 7, 10 ou 15 segundos). ​ Setas dentro do carrossel Escolha se deseja que as setas para navegação manual (<>), estejam dentro ou fora do carrossel. ​ Expandir imagem ao clicar Permite que ao clicar em uma imagem, ela seja expandida, criando um efeito de zoom na página publicada. ​ Posição Configure a posição do carrossel ajustando: - Tamanho: Largura e altura. - Margens: Topo. - Espaçamento interno: Topo, baixo, esquerda e direita. Atenção: Evite usar margens negativas para não causar conflitos com outros elementos da página. Se necessário, use com moderação. ​ Estilo Borda Ative as bordas para o carrossel, definindo cor (via paleta ou código HEX), espessura, e estilo (Sólido, Pontilhado, Tracejado, Dupla). Radial Para adicionar cantos arredondados, ative o ajuste de Radial e defina os valores manualmente ou através de barras de ajuste. Ícones Altere as cores das setas e bolinhas do carrossel através da paleta de cores ou código HEX. ​ 4. Configurações Avançadas Efeitos de movimento – Animação Adicione efeitos de animação ao carrossel selecionando um dos efeitos disponíveis. Ajuste o comportamento (uma vez ou infinito), a ativação (na entrada da página ou ao passar o mouse), duração (normal, devagar, rápido) e o atraso de exibição. CSS Classes Adicione CSS ao carrossel para personalizações avançadas através do elemento Script. Insira o nome da classe e aplique os códigos CSS desejados. Conclusão O elemento Carrossel na Rockty oferece diversas possibilidades para tornar suas páginas mais dinâmicas e atrativas visualmente. Experimente as configurações de visibilidade, ações de clique e estilos para criar a melhor experiência para os visitantes do seu site. Dicas Adicionais - Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens. - Limite o número de imagens para garantir uma melhor performance e tempo de carregamento, tente não incluir muitas imagens no carrossel. Entre 5 a 7 imagens é o ideal para não sobrecarregar a página. - Mantenha a consistência visual, utilizando imagens com a mesma proporção (tamanho e formato) para evitar distorções e garantir que o carrossel tenha uma aparência consistente e profissional. - 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! ​

Última atualização em Nov 28, 2024

Como funciona o elemento de Áudio na Rockty

Introdução O elemento de áudio da Rockty 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, a criatividade é o 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, que inclui um botão para reproduzir o áudio, uma barra de progressão, controle de volume, opções de velocidade de reprodução e a possibilidade de download do arquivo de áudio ao clicar no ícone com três pontos. 1. Como adicionar Áudios Para adicionar áudios à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Áudio' na lista de opções disponíveis no menu lateral esquerdo. 3. Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. ​ 2. Como acessar as configurações do elemento Para acessar as configurações de um elemento, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. ​ 3. Configurações do Elemento de Áudio 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), você pode 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, clique no botão "Escolher Arquivo de Áudio" e selecione o arquivo desejado na área de trabalho do seu dispositivo. Os formatos compatíveis são MP3, OGG, AAC e WMA. Após a seleção, você poderá reproduzir o áudio, trocar ou excluir o arquivo usando os ícones correspondentes. ​ Posição Posição, Tamanho e Margem Nas configurações de posição, você pode ajustar a posição (esquerda, centro, direita), o tamanho e a margem (topo) do elemento, inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado. 💡 Dica: Evite margens negativas para prevenir conflitos com outros elementos da página Estilo Cor de Fundo Para inserir uma cor de fundo no elemento, clique no seletor de cor para escolher a cor desejada na paleta de cores ou insira o código HEX. Você também pode configurar um gradiente ativando a chave correspondente e definindo a 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 e Sombra Nas configurações de estilo, é possível adicionar borda, radial e sombra ao elemento. Para isso, ative a chave correspondente e defina a cor da borda ou sombra na paleta de cores ou pelo código HEX. Ajuste o tamanho da borda, a posição e o esfumaçamento da sombra conforme necessário. ​ Configurações Avançadas Efeitos de movimento – Animação Adicione efeitos de animação ao carrossel selecionando um dos efeitos disponíveis. Ajuste o comportamento (uma vez ou infinito), a ativação (na entrada da página ou ao passar o mouse), duração (normal, devagar, rápido) e o atraso de exibição. ​ CSS Classes Adicione CSS ao carrossel para personalizações avançadas através do elemento Script. Insira o nome da classe e aplique os códigos CSS desejados. Para mais detalhes, consulte o tutorial sobre Configuração de CSS Classes na Rockty. ​ Dicas Adicionais - Escolha o Formato Adequado: Utilize formatos compatíveis como MP3, OGG, AAC e WMA. O MP3 é amplamente suportado e geralmente uma boa escolha para a maioria dos navegadores e dispositivos. - Teste a Reprodução: Verifique a funcionalidade do áudio em diferentes navegadores e dispositivos para garantir que ele seja reproduzido corretamente. - Verifique a Qualidade: Certifique-se de que a qualidade do áudio seja adequada e clara. Arquivos de áudio de baixa qualidade podem afetar negativamente a experiência do usuário. - Considere a Experiência do Usuário: Evite adicionar áudio em excesso ou de maneira que possa distrair ou incomodar os usuários. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Vídeo na Rockty

Introdução O elemento Vídeo na Rockty permite que você adicione e configure vídeos de forma intuitiva em suas páginas, aprimorando o conteúdo visual e a interatividade do seu site. Este tutorial irá guiá-lo passo a passo pelas configurações básicas e avançadas do elemento Vídeo, abordando desde a adição do vídeo até ajustes de visibilidade, posição, estilo e efeitos de animação 1. Como Adicionar Vídeos Para adicionar vídeos à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento à sua página. 2. Selecione o elemento 'Vídeo' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar. 2. Como Acessar as Configurações do Elemento Para acessar as configurações de um vídeo, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração abordadas neste tutorial. 3. Configurações do Vídeo Ajustes - Visibilidade: Controle a visibilidade do vídeo em dispositivos Desktop, Tablet ou Mobile clicando nos ícones correspondentes. Clique novamente para reexibir o vídeo oculto. ​ - Posição: Ajuste a posição (esquerda, centro, direita), tamanho, opacidade e margem superior do vídeo. Evite usar margens negativas para não gerar conflitos com outros elementos da página. ​ - Embed: Insira a URL de compartilhamento do vídeo das plataformas compatíveis: Panda, Vimeo, Vturb, Wistia, e Youtube. ❗ Lembre-se que os vídeos só serão reproduzidos na página publicada. ​ 💡 Dica: Para aprender como inserir videos do Youtube Shorts, acesse o tutorial em Como Usar Vídeos do YouTube Shorts na Rockty. ​ - Mostrar Controles de Vídeo: Ative para exibir controles de rolagem, volume, legendas e configurações de tela no vídeo. ​ ​ Estilo - Borda e Radial: Ative para adicionar bordas ao vídeo, ajustando a cor e o tamanho conforme necessário. Para configurar o radial, ajuste os valores manualmente ou usando as barras deslizantes. ​ ​ Avançado - Efeitos de Movimento – Animação: Adicione animações ao vídeo, como efeitos de entrada ou ao passar o mouse. Configure o comportamento (uma vez ou infinito), ativação e duração (normal, devagar, rápido). ​ - CSS Classes: Adicione estilos personalizados utilizando CSS. Insira um nome para o CSS e aplique o estilo desejado através do elemento de Script. Para mais informações, consulte nosso tutorial sobre CSS Classes. ​ Conclusão Configurar vídeos na Rockty é fácil e permite uma série de personalizações para otimizar a experiência do usuário em suas páginas. Explore as opções de ajustes, estilo e configurações avançadas para tirar o máximo proveito dos seus vídeos. Dicas Adicionais - Escolha a Plataforma Adequada: Utilize plataformas compatíveis como Panda, Vimeo, Vturb, Wistia e YouTube, conforme suas necessidades e preferências. Cada uma oferece características específicas, como privacidade e personalização. - Configuração de Reprodução: Configure opções como reprodução automática e controles de vídeo com cuidado. A reprodução automática pode ser irritante para alguns usuários, e os controles devem ser claros e acessíveis. - Incorporação de Legendagem e Transcrições: Adicione legendas ou transcrições se o vídeo contiver informações importantes. Isso melhora a acessibilidade e ajuda a alcançar um público mais amplo. - Design e Layout: Ajuste o design e o layout do vídeo para garantir que ele se encaixe bem no seu design de página. Certifique-se de que o vídeo não sobrecarregue o conteúdo ao redor. - Atenção à Qualidade do Vídeo: Verifique a qualidade do vídeo antes de publicá-lo. Imagens desfocadas ou de baixa qualidade podem prejudicar a experiência do usuário e a percepção da sua página. - Cuidado com o Número de Vídeos: Evite carregar muitos vídeos em uma única página, pois isso pode impactar negativamente o desempenho da página, aumentando o tempo de carregamento e potencialmente afetando a experiência do usuário. - Call-to-Action: Se o vídeo tiver um propósito específico, como promover um produto ou serviço, considere adicionar um call-to-action (CTA) no final do vídeo para orientar os usuários sobre o próximo passo. - Verifique as Configurações de Privacidade do Vídeo: Antes de adicionar um vídeo à sua página, certifique-se de que ele está configurado para ser público ou visível para todos que acessarem o link. Vídeos configurados como privados ou não listados em plataformas como YouTube, Vimeo e outras não serão carregados corretamente e podem não aparecer para os visitantes da sua página. - Teste o Vídeo Após a Integração: Sempre faça um teste após integrar o vídeo na sua página para garantir que ele está carregando e exibindo corretamente. Isso pode ajudar a identificar problemas com as configurações de privacidade ou outros problemas técnicos. - Consulte a Documentação da Plataforma de Vídeo: Se tiver dúvidas sobre as configurações de privacidade do vídeo, consulte a documentação da plataforma de vídeo que você está utilizando (como YouTube, Vimeo, etc.) para orientações sobre como ajustar essas configurações. - Inserindo Vídeos de outras Plataformas de Vídeo: Se precisar inserir vídeos de outras plataformas, utilize o elemento ‘embed’ por código. Veja como em nosso tutorial sobre o elemento Embed. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Menu na Rockty

Introdução Os menus são essenciais para a navegação e organização do conteúdo em suas páginas. Na Rockty, configurar um menu é um processo simples e personalizável, permitindo que você crie menus que se adaptem perfeitamente ao design do seu site. Este tutorial vai guiá-lo por todas as etapas de configuração do elemento Menu, abordando desde ajustes básicos até configurações avançadas. 1. Como Adicionar Menus Para adicionar um menu à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Menu' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento Para acessar as configurações de um menu, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial. ​ 3. Configurações do Menu Ajustes - Visibilidade: Controle a visibilidade do menu em dispositivos Desktop, Tablet ou Mobile clicando nos ícones correspondentes. Para reexibir um menu oculto, clique novamente no ícone do dispositivo desejado. ​ - Inserir e Gerenciar Itens do Menu: 1. Para editar o texto de um item, clique em "Item 01", "Item 02", "Item 03" ou “New item” e personalize conforme desejado. 2. Para configurar ações dos itens, clique no ícone de link ao lado de cada item e escolha uma das opções conforme necessário. 3. Para excluir um item, clique no ícone de lixeira. 4. Para adicionar um novo item, clique no botão "+". 5. Ative ou desative o estilo de menu hambúrguer "☰" para a versão mobile conforme necessário. ​ Posição Ao configurar o menu no seu construtor de páginas, você pode ajustar a posição e a direção para atender melhor ao layout desejado. ​ Configurações Principais - Posição: Defina o alinhamento do menu para a esquerda, centro ou direita, de acordo com o design da página. - Direção: Escolha entre uma disposição horizontal ou vertical para o menu. - Margens e Espaçamentos Internos: Ajuste as margens e espaçamentos internos manualmente ou utilizando as barras deslizantes para obter o posicionamento ideal. - Evite margens negativas para prevenir conflitos com outros elementos da página. 💡 Dica para Mobile: Caso você opte por não usar o menu do tipo hambúrguer "☰" no mobile, considere configurar a "Direção" do menu como "Vertical". Essa configuração geralmente proporciona uma navegação mais intuitiva e responsiva em dispositivos móveis, aproveitando melhor o formato da tela. Estilo e Tipografia - Estilo: Ative ou desative bordas de contorno nos itens do menu. - Cor do Texto: Escolha a cor da fonte através da paleta de cores ou insira o código HEX. Para excluir uma cor, clique no ícone de lixeira. - Fontes: Selecione entre centenas de tipos de fontes disponíveis para personalizar o menu. - Tamanho da Fonte: Ajuste o tamanho manualmente ou use a barra deslizante. ​ Avançado - Efeitos de Movimento – Animação: Adicione animações ao menu selecionando um efeito da lista. como efeitos de entrada ou ao passar o mouse. Configure o comportamento (uma vez ou infinito), ativação e duração (normal, devagar, rápido). ​ - CSS Classes: Personalize o estilo do menu usando CSS. Insira um nome para o CSS e utilize o elemento de Script para aplicar o código correspondente. Para mais detalhes, consulte nosso tutorial sobre CSS Classes. ​ ​ Conclusão Configurar menus na Rockty é uma tarefa que permite grande flexibilidade e personalização para melhorar a navegação do seu site. Utilize as opções de ajustes, estilo e configurações avançadas para criar menus que atendam às suas necessidades específicas. Em caso de dúvidas, consulte nossos tutoriais adicionais para obter suporte detalhado. ​ Dicas Adicionais - Organize os Itens do Menu de Forma Clara: Certifique-se de que os itens do menu estão organizados de forma lógica e intuitiva. Agrupe itens relacionados e mantenha a estrutura do menu simples para facilitar a navegação. - Use Links Relevantes e Atualizados: Verifique se todos os links do menu estão corretos e levam os usuários às páginas ou seções apropriadas. Links quebrados ou desatualizados podem frustrar os visitantes e prejudicar a navegação. - Considere a Navegação Responsiva: Garanta que o menu seja responsivo e funcione bem em dispositivos móveis. - Personalize o Estilo do Menu: Aproveite as opções de personalização para ajustar a aparência do menu, como cores, fontes e espaçamento. Isso ajudará a garantir que o menu se integre bem com o design geral da sua página. - Utilize Animações e Efeitos com Moderação: Animações e efeitos visuais podem melhorar a experiência do usuário, mas evite exagerar. Mantenha as animações sutis para não distrair ou sobrecarregar os visitantes. - Inclua um Indicador de Navegação Ativa: Adicione um indicador visual para destacar o item do menu que está atualmente selecionado ou ativo. Isso ajuda os usuários a entenderem sua posição na navegação e facilita a orientação dentro do site. - Teste a Navegação do Menu: Sempre teste o menu em diferentes navegadores e dispositivos para garantir que ele funcione corretamente em todos os ambientes. Verifique a funcionalidade dos links e a usabilidade geral do menu. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Galeria de Imagens na Rockty

Introdução O elemento Galeria de Imagens da Rockty permite que você adicione várias imagens em sequência às suas páginas. Neste tutorial, vamos guiá-lo através das configurações e personalizações disponíveis para este elemento, garantindo que você possa utilizá-lo de maneira eficaz. 1. Como Adicionar uma Galeria de Imagens 1. Adicione um Novo Elemento: - Vá até sua página e adicione um novo elemento. - Selecione 'Galeria de Imagens' na lista de opções disponíveis no menu lateral esquerdo. - Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. ​ 2. Acessando as Configurações do Elemento: - Clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso permitirá acessar todas as configurações detalhadas neste tutorial. ​ 2. Configurações da Galeria de Imagens 1. Configurações das Imagens (Linha Vermelha) - Excluir Imagem: Clique no ícone de lixeira para deletar uma imagem específica. - Configurações da Imagem: Clique no ícone de engrenagem para acessar: - Ajustes: Configure o preenchimento da imagem na galeria usando os ícones disponíveis. ​ - Estilo: Clique em ‘Alterar Imagem’ para escolher uma imagem da biblioteca Rockty ou fazer o upload do seu dispositivo. ​ - Adicionar Nova Imagem: Clique no ícone vermelho em formato de + para adicionar uma nova imagem à galeria. 🚨 Importante: Imagens devem ser alteradas ou excluídas individualmente. Uma barra de rolagem horizontal será habilitada se houver muitas imagens. 2. Configurações da Galeria (Linha Verde) - Ajustes: - Visibilidade: Configure a visibilidade da galeria em dispositivos Desktop, Tablet e Mobile clicando nos ícones correspondentes. Para reexibir um elemento oculto, clique novamente no ícone do dispositivo. ​ - Posição: - Ajuste a margem (topo e espaço) inserindo um valor manualmente ou ajustando a barra. Evite usar margens negativas excessivas para evitar conflitos com outros elementos. ​ - Estilo: - Borda: Ative a borda e ajuste sua cor, tamanho e radial. Use a paleta de cores ou insira o código HEX desejado. - Tamanho e Opacidade: Configure o tamanho da galeria e a opacidade usando valores manuais ou a barra. ​ - Avançado: - Efeitos de Movimento – Animação: Selecione e configure animações para o elemento, definindo comportamento, ativação, duração e atraso. Para excluir uma animação, clique no ícone de lixeira ao lado do nome da animação. ​ ​ Conclusão Agora que você conhece as principais configurações e opções de personalização da Galeria de Imagens na Rockty, você pode adicionar e ajustar imagens de forma eficaz para melhorar o design de suas páginas. Explore as configurações para adaptar a galeria às suas necessidades específicas. Dicas Adicionais - Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens. - Certifique-se de que a galeria seja responsiva. Verifique se o layout da galeria se ajusta bem a diferentes dispositivos (desktop, tablet e mobile), garantindo uma boa experiência de usuário em qualquer tela. - Evite excesso de imagens, não sobrecarregue a galeria com muitas imagens. Escolha as mais relevantes e evite criar uma experiência visual confusa ou cansativa. - 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!

Última atualização em Nov 28, 2024

Como funciona o elemento Card na Rockty

Introdução O elemento Card da Rockty é uma solução ideal para situações onde colunas não são suficientes. Ele permite exibir múltiplos cartões (cards) com espaçamentos, bordas e sombras configuráveis. O Card é versátil e facilita a organização visual de conteúdos em sua página. 1. Informações Importantes sobre o Elemento Card Configuração Padrão do Card: Por padrão, o Card é gerado com um elemento de imagem, um título e um parágrafo. Estes elementos podem ser editados clicando nos ícones de engrenagem correspondentes. É possível adicionar outros tipos de elementos ao Card ou excluir os que não são necessários. ​ ​🚨 Atenção: Não utilize os elementos de Lançamento, Formulário, Carrossel, Galeria de Imagens, Bullet Point e FAQ dentro de um Card, pois eles não são compatíveis com este elemento. 2. Como Adicionar um Card 1. Adicione um Novo Elemento: - Vá até sua página e adicione um novo elemento. - Selecione 'Card' na lista de opções disponíveis no menu lateral esquerdo. - Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. ​ 2. Acessando as Configurações do Card: - Clique no ícone de engrenagem do Card para abrir as opções de configuração que serão detalhadas a seguir. 3. Configurações do Elemento Card 1. Ajustes - Visibilidade: - Configure a visibilidade do Card para Desktop, Tablet e Mobile clicando nos ícones correspondentes. Para reexibir um elemento oculto, clique novamente no ícone do dispositivo. - Adicionar ou Excluir Cards: - Por padrão, o Card é gerado com 3 cartões. Você pode excluir um cartão clicando no ícone de lixeira ou adicionar mais cartões clicando no ícone +. ​ 2. Posição - Configurações Gerais: - Ajuste a largura, espaço entre os cartões, posição, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita) inserindo valores manuais ou ajustando a barra. - Separador: - Adicione uma imagem para separar os cartões clicando em “imagem” para acessar a biblioteca de imagens ou fazer o upload. Para excluir a imagem, clique no ícone de lixeira. 💡 Dica: Evite margens negativas excessivas para prevenir conflitos com outros elementos da página. 3. Estilo - Cor de Fundo: - Configure a cor de fundo do Card usando a paleta de cores ou inserindo o código HEX. Também é possível definir um gradiente de cor e sua orientação. Para remover a cor, clique no ícone de lixeira. - Imagem de Fundo: - Insira uma imagem de fundo clicando em “Alterar Imagem” para escolher uma da biblioteca ou fazer o upload. Para excluir a imagem, clique no ícone de lixeira. - Borda | Radial | Sombra: - Configure a borda e a sombra do Card ativando as opções e ajustando a cor, tamanho, deslocamento e esfumaçamento. Para a configuração radial, ajuste os valores conforme necessário. ​ ​ 4. Avançado - Efeitos de Movimento – Animação: - Selecione um efeito de animação da lista e ajuste seu comportamento (Uma vez ou Infinito), ativação (Animação de entrada ou Ao passar o mouse), duração (normal, devagar, rápido) e atraso (até 1000 segundos). Para remover uma animação, clique no ícone de lixeira. ​ - CSS Classes: - Configure classes CSS para o elemento inserindo um nome no campo “Insira ou Selecione” e utilize o elemento de Script para aplicar o código CSS relacionado. ​ Conclusão Agora que você conhece as configurações e opções de personalização do elemento Card, pode criar layouts visuais eficientes e adaptáveis para suas páginas Rockty. Explore as opções para adaptar os cartões às suas necessidades específicas e melhorar a apresentação do seu conteúdo. Dicas Adicionais - Utilize o espaço entre os cartões para criar uma aparência limpa e organizada. - Experimente diferentes configurações de borda e sombra para destacar os cartões. - Use as animações para adicionar dinamismo à interação com os cartões. - Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens. - 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. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Bullet Point na Rockty

Introdução O elemento Bullet Point é ideal para destacar pontos importantes e organizar informações de forma visualmente atraente. Diferente de um texto comum, ele permite a adição de uma imagem ou ícone ao lado do texto, ambos totalmente editáveis. Isso proporciona uma maneira eficiente de apresentar listas, informações resumidas ou chamadas de atenção, facilitando a compreensão do conteúdo pelos usuários. 1. Como Adicionar um Bullet Point ​Adicione um Novo Elemento: 1. Vá até sua página e adicione um novo elemento. 2. Selecione 'Bullet Point' na lista de opções disponíveis no menu lateral esquerdo. 3. Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. Acessando as Configurações do Bullet Point: 1. Clique no ícone de engrenagem do Bullet Point ou clique com o botão direito do mouse sobre o elemento para abrir as opções de configuração que serão detalhadas a seguir. 2. Introdução ao Bullet Point Por padrão, o Bullet Point inclui uma imagem e um texto ao lado, ambos editáveis. Para editar o texto, selecione-o e faça as alterações desejadas. ​ A Caixa de Edição de Texto permite ajustar estilos como Negrito, Itálico, Sublinhado e Riscado, além de alterar cores de texto e fundo utilizando a paleta de cores ou códigos HEX. Para adicionar uma URL ao texto, clique no ícone de link (#) e insira a URL desejada. 💡 Dica: A Caixa de Edição de Texto é útil para personalizar partes específicas do texto, enquanto o menu lateral esquerdo aplica configurações a todo o texto de uma vez. 3. Configurações do Bullet Point Posição - Configure a posição (esquerda, centro, direita) do elemento, a posição da imagem (esquerda ou direita do texto), margem (topo) e espaçamento interno (topo, baixo, direita, esquerda). Evite margens negativas para prevenir conflitos com outros elementos da página. ​ Estilo - Imagem: Clique em “Alterar Imagem” para escolher uma nova imagem da biblioteca da Rockty ou fazer o upload de uma do seu dispositivo. - Tamanho e Posição da Imagem: Ajuste o tamanho e a posição da imagem inserindo valores manualmente ou usando a barra de ajuste. ​ Tipografia - Fontes: Escolha entre centenas de tipos de fontes. - Estilo: Selecione o estilo da fonte, como Light, Regular, Medium, Bold ou Black. - Cor do Texto: Defina a cor da fonte usando a paleta de cores ou códigos HEX. Para remover uma cor, clique no ícone de lixeira. - Tamanho da Fonte e Altura da Linha: Ajuste o tamanho da fonte e a altura da linha inserindo valores manualmente ou ajustando a barra. ​ ​ Avançado - Efeitos de Movimento – Animação: Escolha e configure efeitos de animação. Defina o comportamento (Uma vez ou Infinito), ativação (Animação de entrada ou Ao passar o mouse), duração e atraso da animação. - CSS Classes: Para aplicar estilos personalizados via CSS, insira um nome para a CSS no campo “Insira ou Selecione” e use o elemento de Script para aplicar o código CSS correspondente. ​ Conclusão Os bullet points são uma ferramenta poderosa para organizar informações de forma clara e concisa. Eles ajudam a destacar pontos importantes e facilitam a leitura em páginas densas em conteúdo. Ao seguir as melhores práticas de design e otimização, você pode garantir que seus bullet points contribuam para uma experiência visualmente atraente e informativa, deixando sua página mais dinâmica e fácil de navegar. Dicas Adicionais - Utilize a Caixa de Edição de Texto para destacar partes específicas do texto. - Verifique a compatibilidade da imagem com o design geral da sua página. - Mantenha o texto conciso: Bullet points são melhores usados para apresentar informações breves e diretas. Evite longas descrições e foque em frases curtas e objetivas. - Escolha ícones apropriados para os Bullet Points. Utilize ícones que se alinhem ao tema ou estilo visual da página. Ícones coerentes ajudam a reforçar a mensagem e tornam o design mais atrativo. - Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens. - 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. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Social na Rockty

Introdução O elemento Social permite que você adicione ícones de redes sociais em suas páginas para facilitar o acesso ao seu conteúdo nas principais plataformas, como Facebook, YouTube, Instagram, Twitter, TikTok e LinkedIn. Este tutorial irá guiá-lo através dos passos necessários para configurar e personalizar esse elemento, garantindo que você possa aproveitar ao máximo suas funcionalidades. 1. Como Adicionar o Elemento Social Para adicionar um elemento Social à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Social' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento Para acessar as configurações do elemento Social, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos a seguir. ​ 3. Configurações do Elemento Social Ajustes - Visibilidade: Configure a visibilidade do elemento em diferentes dispositivos clicando nos ícones “Desktop | Tablet | Mobile”. Para ocultar ou mostrar o elemento, clique no ícone correspondente. - Posição: Ajuste a posição do elemento (esquerda, centro, direita) clicando nos ícones de posição. - Margem (topo): Ajuste a margem superior inserindo um valor manualmente ou ajustando a barra. - Configuração das Redes Sociais: Ative a chave correspondente à rede social que deseja compartilhar e insira a URL do seu perfil. O logo da rede social será exibido na sua página e, ao clicar, será direcionado para a URL inserida. Para desativar, clique novamente na chave correspondente. ​ Estilo - Cor: Configure a cor dos logos das redes sociais utilizando a paleta de cores ou o código HEX da cor desejada. Para apagar uma cor, clique no ícone de lixeira. ​ ​ Avançado - Efeitos de Movimento – Animação: Adicione animações ao elemento selecionando um efeito da lista. Configure o comportamento da animação (Uma vez ou Infinito), a ativação (Animação de entrada ou Ao passar o mouse), a duração (normal, devagar ou rápido) e o atraso (até 1000 segundos). - CSS Classes: Configure CSS para o elemento, inserindo um nome no campo “Insira ou Selecione” e utilizando o elemento de Script para aplicar o código CSS. ​ Conclusão O elemento Social é uma ferramenta eficaz para integrar suas redes sociais às suas páginas, tornando o compartilhamento de conteúdo mais acessível para seus visitantes. Ao configurar e personalizar este elemento, você melhora a visibilidade e a interação com seu público. Dicas Adicionais - Use cores e animações de forma moderada para garantir que os ícones de redes sociais sejam visíveis e atraentes, mas não distraiam do conteúdo principal. - Mantenha as URLs de suas redes sociais atualizadas para assegurar que os links direcionem corretamente os visitantes para seus perfis. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como Funciona o Elemento de Comentários do Facebook e DISQUS na Rockty

Introdução Os elementos de comentários do Facebook e DISQUS oferecem maneiras eficazes de adicionar seções de comentários às suas páginas na Rockty. Esses elementos permitem que você receba feedback e interaja com seus visitantes diretamente nas suas páginas, facilitando a comunicação e aumentando o engajamento. Este tutorial irá guiá-lo através do processo de configuração e personalização desses elementos. 1. Como Adicionar o Elemento de Comentários Para adicionar um elemento de comentários à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Comentários' e escolha entre Facebook ou DISQUS na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento Para acessar as configurações do elemento de comentários, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso permitirá ajustar as configurações conforme descrito a seguir. ​ 3. Configurações do Elemento Facebook Ajustes - Visibilidade: Configure a visibilidade do elemento em diferentes dispositivos clicando nos ícones “Desktop | Tablet | Mobile”. Clique no ícone correspondente para ocultar ou mostrar o elemento em cada dispositivo. ​ - Facebook App ID: Insira o Facebook App ID para moderar os comentários. Esse ID identifica um aplicativo do Facebook. Para mais detalhes, visite ajuda do Facebook. ​ - URL para Comentar: Insira a URL da página criada na Rockty onde você deseja centralizar os comentários. Utilize a mesma URL em todas as páginas se quiser agrupar comentários. URLs devem começar com https:// para moderação; URLs sem validação também são aceitas. ​ - Tema: Selecione entre os temas ‘Light’ ou ‘Dark’ para o elemento. ​ - Número de Comentários: Defina a quantidade de comentários a serem exibidos na tela inicial: ‘5’, ‘10’, ‘20’ ou ‘50’. ​ - Idioma: Escolha o idioma do elemento entre ‘Português’, ‘Inglês’ ou ‘Espanhol’. ​ - Ordenar Por: Filtre os comentários por ‘mais recente’, ‘mais antigo’ ou ‘mais comentado’. ​ Avançado - Efeitos de Movimento – Animação: Adicione animações ao elemento selecionando um efeito e configurando o comportamento (Uma vez ou Infinito), a ativação (Animação de entrada ou Ao passar o mouse), a duração e o atraso. Para excluir uma animação, clique no ícone de lixeira. ​ - CSS Classes: Insira um nome para o CSS no campo “Insira ou Selecione” e utilize o elemento de Script para aplicar o código CSS desejado. ​ ​ 4. Configurações do Elemento DISQUS Ajustes - Visibilidade: Configure a visibilidade do elemento em diferentes dispositivos clicando nos ícones “Desktop | Tablet | Mobile”. Clique no ícone correspondente para ocultar ou mostrar o elemento em cada dispositivo. ​ - Disqus Shortname: Insira o Disqus shortname, um identificador único gerado pelo Disqus. Para detalhes sobre como obter o seu, consulte ajuda do Disqus. ​ - URL para Comentar: Insira a URL da sua página, que deve ser a mesma do elemento DISQUS e começar com https://. O elemento DISQUS é visível apenas em páginas publicadas. ​ Avançado - Efeitos de Movimento – Animação: Configure animações selecionando um efeito e ajustando o comportamento, ativação, duração e atraso. Para excluir uma animação, clique no ícone de lixeira. ​ - CSS Classes: Insira um nome para o CSS no campo “Insira ou Selecione” e utilize o elemento de Script para aplicar o código CSS desejado. ​ Conclusão Os elementos de comentários do Facebook e DISQUS são ferramentas valiosas para aumentar a interação e o engajamento em suas páginas. Com as configurações adequadas, você pode personalizar a aparência e a funcionalidade desses elementos para atender às suas necessidades. Dicas Adicionais - Mantenha as URLs para comentários consistentes para garantir que os comentários sejam centralizados corretamente. - Personalize o tema e a quantidade de comentários exibidos para adequar o visual e a funcionalidade ao estilo da sua página. ​ Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento FAQ na Rockty

Introdução O elemento FAQ, sigla para "Frequently Asked Questions" (Perguntas Frequentes), é uma ferramenta útil para esclarecer dúvidas comuns dos seus clientes, oferecendo um modelo de autoatendimento. Neste tutorial, você aprenderá a adicionar e configurar o elemento FAQ em suas páginas na Rockty. 1. Como Adicionar o Elemento FAQ Para adicionar um elemento FAQ à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'FAQ' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento FAQ Para acessar as configurações do elemento FAQ, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso permitirá que você ajuste todas as configurações disponíveis para o FAQ. 3. Configurações do Elemento FAQ O FAQ é dividido em duas seções principais: a linha vermelha e a linha verde. 4. Configurações da Linha Vermelha A linha vermelha representa cada pergunta e resposta individualmente. - Editar Pergunta e Resposta: Clique nos textos padrão "FAQ" e "Resposta" para editá-los conforme desejado. - Adicionar ou Excluir Linhas: Use o ícone de lixeira para excluir uma linha e o ícone de mais (+) para adicionar novas perguntas e respostas. ​ - Configurações: Clique na engrenagem para acessar as seguintes opções: - Ajustes - Configurar ação: Escolha a ação que o elemento deve executar, como abrir um link externo ou rolar a página. ​ - Posição: Ajuste a posição, largura, margem e espaçamento interno do elemento. ​ ​ - Estilo: Modifique a cor do texto, fontes, estilo da fonte, tamanho, altura da linha e opacidade. ​ - Avançado - Efeitos de movimento – Animação: Adicione e configure animações para o elemento, incluindo comportamento, ativação, duração e atraso. - CSS Classes: Configure classes CSS para aplicar estilos adicionais através do código. Para mais detalhes, consulte nosso tutorial sobre configuração CSS Classes. - Pixel do Facebook / Google: Configure conversões de cliques no botão para Pixel do Facebook ou Google Tag Manager. ​ 5. Configurações da Linha Verde A linha verde representa as configurações gerais do elemento FAQ. - Ajustes - Visibilidade: Defina a visibilidade do elemento em diferentes dispositivos (Desktop, Tablet, Mobile). - Posição: Ajuste a posição geral do elemento na página. - Inverter: Altere a direção da seta que revela as respostas. - Esconder separador: Oculte as linhas separadoras entre perguntas e respostas. - Ícone | Largura | Margem | Espaçamento Interno: Ajuste o tamanho dos ícones, largura, margens e espaçamentos internos. ​ ​ - Estilo - Separador | Ícone: Configure as cores dos separadores e ícones. ​ ​ ​ - Avançado - Efeitos de movimento – Animação: Configure animações e efeitos para o elemento FAQ. - CSS Classes: Configure classes CSS para aplicar estilos personalizados. Para mais detalhes sobre o uso de CSS Classes, acesse nosso tutorial sobre CSS Classes. ​ Conclusão O elemento FAQ é uma maneira eficaz de oferecer respostas rápidas e facilitar o autoatendimento dos seus visitantes. Ajuste as configurações conforme suas necessidades para personalizar a aparência e o funcionamento do FAQ na sua página. Dicas Adicionais - Seja claro e objetivo: Formule perguntas e respostas de maneira clara e direta. Use uma linguagem simples para garantir que todas as informações sejam facilmente compreendidas pelos visitantes. - Atualize regularmente: Revise e atualize suas FAQs periodicamente para garantir que as informações estejam sempre precisas e relevantes. - Inclua links relevantes: Adicione links para tutoriais, artigos ou páginas relevantes dentro das respostas para fornecer mais detalhes e ajudar os usuários a encontrarem mais informações. - Responda perguntas frequentes: Concentre-se nas perguntas mais comuns que seus visitantes costumam fazer. Isso garante que o FAQ seja realmente útil. - Mantenha a experiência do usuário em mente: Teste o FAQ em diferentes dispositivos e tamanhos de tela para garantir que ele seja fácil de navegar e ler em qualquer situação. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Ícone na Rockty

Introdução O elemento Ícone permite adicionar ícones gráficos às suas páginas, oferecendo uma maneira visualmente atraente de destacar informações importantes. Neste tutorial, você aprenderá como adicionar e configurar ícones em suas páginas na Rockty. 1. Como Adicionar um Ícone Para adicionar um ícone à sua página na Rockty, siga estes passos: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Ícone' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento Ícone Para acessar as configurações do elemento Ícone, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento. Isso permitirá que você ajuste as configurações disponíveis para o ícone. 3. Configurações do Elemento Ícone Ajustes - Visibilidade: Configure a visibilidade do elemento clicando no ícone correspondente a cada versão (Desktop, Tablet, Mobile). Clique novamente para reexibir o elemento em dispositivos específicos. - Ícone: Selecione o ícone desejado na biblioteca da Rockty. Use o campo de busca no topo da biblioteca para encontrar ícones por palavras-chave. Clique no ícone para adicioná-lo à página. - Configurar Ação: Escolha a ação que o ícone executará conforme necessário. ​ Posição - Configurações: Ajuste a posição (esquerda, centro, direita), tamanho, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita). Use valores manuais ou ajuste a barra conforme necessário. ​ - 💡 Dica: Evite margens negativas para evitar conflitos com outros elementos na página. ​ Estilo - Cor | Opacidade: Configure as cores dos ícones usando a paleta de cores ou inserindo o código HEX. Ajuste a opacidade manualmente ou com a barra de ajuste. Dependendo do ícone, você pode configurar cores diferentes para contornos e preenchimentos. ​ ​ ​ Avançado - Alt SEO: Adicione um texto alternativo para o ícone, útil para acessibilidade e caso a imagem não carregue. - Efeitos de movimento – Animação: Adicione e configure animações para o elemento, incluindo comportamento, ativação, duração e atraso. - CSS Classes: Configure classes CSS para aplicar estilos adicionais através do código. Para mais detalhes, consulte nosso tutorial sobre configuração CSS Classes. - Pixel do Facebook / Google: Configure conversões de cliques para Pixel do Facebook ou Google Tag Manager. ​ Conclusão O elemento Ícone é uma excelente ferramenta para adicionar elementos visuais em suas páginas, facilitando a comunicação visual com seus visitantes. Personalize as configurações conforme suas necessidades para criar um design atraente e funcional. Dicas Adicionais - Escolha ícones que complementem seu conteúdo e ajudem na comunicação da mensagem. - Teste diferentes animações e efeitos para encontrar a melhor combinação para seu design. - Verifique a visibilidade em diferentes dispositivos para garantir uma apresentação adequada em todas as plataformas. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Nov 28, 2024

Como funciona o elemento Flip Card na Rockty

Introdução O Flip Card é um elemento interativo que alterna automaticamente entre frente e verso, adicionando dinamismo às suas páginas. Ele é composto por uma parte frontal e uma traseira, onde é possível personalizar imagens, textos e ações, oferecendo uma experiência visual rica para os visitantes do seu site. 1. Como Adicionar o Elemento Flip Card Para adicionar um Flip Card à sua página na Rockty, siga estes passos: - Adicione um novo elemento em sua página. - Selecione o elemento 'Flip Card' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Flip Card Para acessar as configurações do Flip Card, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso permitirá que você ajuste todas as configurações disponíveis. ​ 3. Configurações do Flip Card Ajustes Nas configurações de Ajustes, é possível definir a visibilidade do Flip Card para diferentes dispositivos (Desktop, Tablet, Mobile). Basta clicar nos ícones dos dispositivos para ocultar ou exibir o Flip Card conforme desejado. ​ Frente Para ajustar a frente do Flip Card, clique em "Frente" nas configurações. Você poderá: - Imagem: Adicionar ou remover uma imagem usando a biblioteca de imagens da Rockty ou carregando uma do seu dispositivo. - Título e Descrição: Personalizar o título e a descrição que aparecem na frente do Flip Card. ​ Verso Para ajustar o verso do Flip Card, clique em "Verso" nas configurações. As opções incluem: - Título e Descrição: Personalizar o título e a descrição. - Texto do Botão: Inserir o texto para o botão que aparece no verso. - Configurar Ação do Botão: Definir ações como abrir links, rolar página, submeter formulários, entre outros. ​ Posição Nas configurações de Posição, você pode ajustar: - Geral: Configurar largura, altura e margens. - Frente/Verso: Ajustar o espaçamento interno, com a opção de ajustar todos os lados ao mesmo tempo clicando no ícone de cadeado. 💡 Dica: Evite margens negativas para não causar conflitos visuais com outros elementos da página. Estilo As configurações de Estilo permitem personalizar: - Frente e Verso: Cor de fundo (incluindo gradiente), imagem de fundo, e ajustes detalhados para imagens, títulos e descrições. - Botão: Personalizar cor, tamanho, bordas, fontes e outros detalhes visuais do botão no verso do Flip Card. ​ Avançado Na seção Avançado, você pode: - Animações: Configurar o tipo de animação e direção do efeito. - Efeito 3D: Ativar ou desativar o efeito 3D do Flip Card. - CSS Classes: Aplicar estilos personalizados utilizando CSS Classes em conjunto com o elemento de Script. Para mais detalhes sobre CSS Classes, confira nosso tutorial dedicado. ​ Conclusão O Flip Card é uma excelente opção para adicionar interatividade e dinamismo às suas páginas na Rockty. Com suas diversas opções de personalização, é possível ajustar cada detalhe da frente e do verso para criar uma experiência única para seus visitantes. Dicas Adicionais - Experimente diferentes combinações de estilos e animações para encontrar a configuração que melhor se adapta ao seu design. Explore as configurações de visibilidade para otimizar a exibição do Flip Card em diferentes dispositivos. - Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens. - 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 Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte! ​

Última atualização em Nov 28, 2024

Como Usar o Elemento Separador na Rockty

Introdução O elemento Separador é uma ferramenta essencial para organizar e estruturar sua página na Rockty. Ele permite separar seções, linhas e elementos, melhorando a legibilidade e o design da sua página. Neste tutorial, vamos mostrar como adicionar, configurar e personalizar o Separador para atender às suas necessidades. 1. Como Adicionar o Elemento Separador Para adicionar um elemento Separador à sua página na Rockty, siga estes passos: - Adicione um novo elemento em sua página. - Selecione o elemento Separador na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Como Acessar as Configurações do Elemento Para acessar as configurações do elemento Separador, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos a seguir. 3. Configurações do Elemento Separador O Separador pode ser personalizado através de três abas de configuração: Ajustes, Estilo e Avançado. Veja abaixo as opções disponíveis em cada uma delas: 🛠 Ajustes - Posição: Defina onde o separador será exibido (esquerda, centralizado ou direita). - Estilo: Escolha o tipo de linha do separador: sólido, tracejado ou pontilhado. - Largura: Ajuste a largura do separador usando a barra de controle ou inserindo valores manualmente na caixa. 🎨 Estilo - Cor: Personalize a cor do separador utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Pare remover uma cor, clique no ícone de lixeira. - Peso: Ajuste a espessura do separador usando a barra de controle ou inserindo valores manualmente. - Espaçamento: Configure o espaçamento acima e abaixo do separador, definindo a distância entre ele e outros elementos da página. 🔧 Avançado - CSS Classes: Personalize ainda mais o Separador aplicando CSS personalizado. Insira um nome para o CSS e utilize o elemento Script para referenciar e aplicar o código CSS. Para mais detalhes, consulte nosso tutorial sobre configuração CSS Classes. 💡 Dicas de Uso ✔ Use o Separador para dividir conteúdo e melhorar a organização visual da sua página. ✔ Experimente diferentes cores e estilos para harmonizar o design do seu site. ✔ Ajuste a largura e peso para criar separadores mais sutis ou marcantes conforme a necessidade. ✔ Utilize espaçamentos adequados para que o separador não fique muito próximo de outros elementos. Conclusão O Separador é um elemento simples, mas poderoso, que pode fazer toda a diferença na organização da sua página. Com as opções de personalização da Rockty, você pode adaptá-lo à identidade visual do seu site, garantindo uma experiência mais fluida e profissional para os visitantes. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!

Última atualização em Jan 30, 2025

Como funciona o elemento Contador na Rockty

Introdução O elemento Contador é um recurso poderoso para criar um senso de urgência em suas páginas, ajudando a aumentar as conversões. Sendo ideal para campanhas de tempo limitado, promoções e eventos. Vamos explorar como configurá-lo para maximizar seus resultados. 1. Como Adicionar o Contador Para adicionar o contador na sua página, siga os passos abaixo: 1. Adicione um novo elemento em sua página. 2. Selecione o elemento 'Contador' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. ​ 2. Como Configurar o Contador Depois de adicionar o contador, clique no ícone de engrenagem para acessar as configurações ou clique com o botão direito do mouse sobre o elemento. Abaixo estão as principais opções disponíveis: ​ ​ 3. Configurações do Contador Ajustes - Visibilidade: Defina em quais dispositivos (Desktop, Tablet, Mobile) o contador será visível. Para ocultar ou mostrar o elemento, clique no ícone correspondente ao dispositivo desejado. ​ - Configurar Ação: Escolha a ação que contador executará conforme necessário. - Data Futura: Configure uma data específica (dia/mês/ano) para uma contagem regressiva até essa data. ​ - Data Fixa: Defina a contagem regressiva com base em dias, horas, minutos e segundos, conforme necessário. ​ - Data: Defina a contagem regressiva baseada em uma data e horário. ​ - Mostrar dias, horas, minutos, segundos, rótulo: Habilite/Desabilite as chaves para exibir ou ocultar as informações. ​ ​ ​ Posição Ajuste as propriedades de posição do contador, incluindo alinhamento (esquerda, centro, direita), tamanho, margens (topo) e espaçamento interno. Atenção: Evite margens negativas, pois podem causar conflitos visuais na página. ​ ​ ​ Estilo - Background: Adicione uma cor de fundo ao contador usando a paleta de cores ou inserindo um código HEX. Para remover, clique no ícone de lixeira. - Borda, Radial e Sombra: Configure bordas e sombras ativando as chaves correspondentes e ajustando as cores e tamanhos. Para excluir as cores, use o ícone de lixeira. ​ ​ Tipografia - Fontes: Escolha entre centenas de fontes disponíveis para personalizar os números e textos do contador. - Estilo do Número: Altere a cor e o tamanho dos números usando a paleta de cores ou código HEX, e ajuste o tamanho conforme necessário. - Estilo do Texto: Modifique a cor e o tamanho do texto, utilizando as opções disponíveis para personalização. ​ Avançado - Efeitos de Movimento e Animação: Adicione animações ao contador, como animação ao entrar na página ou ao passar o mouse. Defina a duração (normal, devagar, rápido) e o atraso para a exibição. - CSS Classes: Para customizações avançadas, adicione classes CSS e aplique estilos através do elemento Script. Para mais detalhes, acesse nosso tutorial de CSS Classes. ​ Conclusão O elemento Contador na Rockty é uma ferramenta eficiente para criar urgência em suas páginas. Ao configurar corretamente as ações, estilos e animações, você pode maximizar o impacto desse recurso. Experimente diferentes configurações para encontrar a melhor abordagem para o seu público. ​ Se precisar de mais assistência ou tiver dúvidas, não hesite em contatar nossa equipe de Suporte. Explore e aproveite ao máximo as ferramentas oferecidas para criar páginas impressionantes e funcionais. Dicas Adicionais - Defina o propósito claramente: Determine o objetivo do contador. Se for uma contagem regressiva para um evento específico, como uma promoção ou lançamento, certifique-se de que isso esteja claramente comunicado aos usuários. - Escolha o formato adequado: Decida se o contador será regressivo, fixo ou de data futura e selecione o formato que melhor se adapta ao seu objetivo. Exemplo: contagem regressiva para um evento, um contador de data fixa ou um timer de prazo. - Configuração de data e hora: Ao configurar a data e a hora, garanta que estejam corretas e ajustadas ao fuso horário do público-alvo, se necessário. - Adicione uma mensagem clara: Inclua uma mensagem ou descrição próxima ao contador para explicar o que a contagem representa e por que é relevante para o usuário. Isso ajuda a evitar confusão. - Utilize design chamativo, mas não exagerado: O contador deve ser visualmente atraente e destacar-se na página, mas sem ser excessivamente chamativo. Use cores e fontes que se alinhem ao design geral da página. - Verifique a responsividade: Teste o contador em diferentes dispositivos e tamanhos de tela para garantir que ele se ajuste corretamente e permaneça legível. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

Principais Configurações do Blog de Lançamento e CPL na Rockty

Introdução Neste tutorial, você aprenderá a configurar as principais funcionalidades do Blog de Lançamento e CPL na Rockty. A nova estrutura facilita a criação de páginas de lançamento, permitindo que todo o conteúdo seja controlado em uma única URL. Agora, é possível organizar todas as suas aulas ou vídeos de CPL (Conteúdo Pré-Lançamento) sem a necessidade de páginas separadas. O foco será nas principais configurações para deixar sua página pronta para uso. Passo 1: Adicionando o Blog de Lançamento e o CPL 1. Adicione o elemento "Blog de Lançamento" na sua página de lançamento. Este será o componente principal que controla a distribuição do seu conteúdo. ​ 2. Adicione o elemento "CPL" à página, que contém os blocos de vídeo, texto e ícones sociais. O Blog de Lançamento e o CPL devem trabalhar juntos para que a funcionalidade seja ativada corretamente. ​💡 Dica: Se você utilizar um de nossos templates de páginas de lançamento, os elementos 'Blog de Lançamento' e 'CPL' já estarão incluídos por padrão, facilitando ainda mais o processo." 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. Passo 2: Configurando o Blog de Lançamento 1. Clique na engrenagem verde no canto do Blog de Lançamento para acessar as configurações gerais. ​ 2. Defina como as aulas serão distribuídas: - Programado: Escolha as datas e horários para liberar cada aula automaticamente. - Manual: Configure a chave manual de liberação para liberar as aulas individualmente. ​ Passo 3: Configurando Cada CPL 1. Para cada aula/CPL, acesse a engrenagem vermelha e faça os ajustes individuais: ​ - Liberação Programada: Defina data e hora para liberar automaticamente. ​ - Liberação Manual: Utilize a chave para liberar o conteúdo manualmente. ​ 2. Defina o ID do CPL, que será o final da URL para cada aula. Este ID pode ser personalizado e determinará o link exato para cada aula. ​ Exemplo de URL: Se sua URL principal for meudominio.com.br/lancamento, as URLs das aulas serão: - meudominio.com.br/lancamento?id=aula-01 - meudominio.com.br/lancamento?id=aula-02 - meudominio.com.br/lancamento?id=aula-03 💡 Dica: Sempre que você divulgar a URL principal sem um ID, seus visitantes serão direcionados para a última aula liberada. Passo 4: Usando o Link do CPL 1. Cada aula/CPL possui um campo chamado "Link do CPL", que permite copiar rapidamente a URL completa da aula. Basta clicar no ícone verde ao lado do campo, e o link será copiado para sua área de transferência. ​ Passo 5: Configurando o Conteúdo de Cada Aula Agora que você já adicionou e configurou o elemento Blog de Lançamento e as principais configurações do CPL, vamos entender como configurar o conteúdo de cada aula de forma individual. ​ Ao selecionar uma aula no Blog de Lançamento, o elemento CPL correspondente a essa aula será automaticamente ativado na mesma página. Isso significa que, ao clicar em uma aula específica, como "Aula 1", o conteúdo que você configurar no CPL (vídeo, textos, etc.) será relacionado exclusivamente àquela aula. ​ Exemplo Prático: 1. Selecionando a Aula 1: Quando você clicar na Aula 1 no Blog de Lançamento, o CPL ativo na página será o da Aula 1. Você poderá configurar o vídeo, textos e outros elementos relacionados à Aula 1. Veja na imagem abaixo como, ao selecionar a Aula 1, o conteúdo exibido no CPL será referente à essa aula. ​ 2. Selecionando a Aula 2: Se você clicar na Aula 2 no Blog de Lançamento, o CPL abaixo será atualizado para a Aula 2, permitindo que você personalize o vídeo, textos e outros conteúdos desta aula. A configuração do CPL muda automaticamente com base na aula selecionada. ​ Dessa forma, todo o conteúdo das suas aulas fica centralizado em uma única página, mas a navegação e a personalização para cada aula ficam claras e organizadas. Lembre-se, os dois elementos (Blog de Lançamento e CPL) trabalham juntos, e ao selecionar cada aula no Blog de Lançamento, o conteúdo correspondente será exibido no CPL da mesma página. ​ Isso permite que você finalize todas as configurações de uma vez, sem precisar criar ou gerenciar múltiplas páginas. Ao concluir as configurações de todas as aulas, basta publicar a página e controlar o acesso usando os IDs específicos de cada aula ou a URL principal para redirecionar para a última aula liberada. Conclusão Agora que você configurou todas as aulas e CPLs na mesma página, basta publicar a página e utilizar os IDs específicos para direcionar os visitantes para cada aula ou deixar que eles acessem a última aula liberada. 💡 Dica: Para acessar configurações adicionais e personalizar ainda mais seu Blog de Lançamento e CPL, como ajustes de estilização, posicionamento e configurações avançadas, acesse nosso tutorial: Configurações Adicionais do Blog de Lançamento e CPL na Rockty. Dicas Adicionais 1. Organização da URL: Personalize o ID de cada aula para criar URLs fáceis de lembrar, como "aula-01", "aula-02". Isso facilita o compartilhamento com seu público. 2. Teste de URLs: Sempre teste as URLs geradas para cada aula antes de divulgar. Isso garante que seus leads serão direcionados ao conteúdo correto. 3. Integração com Remarketing: Use as URLs específicas de cada aula para criar públicos de remarketing em suas campanhas, ajudando a segmentar sua audiência com precisão. 4. Testes de Visualização: Após configurar todas as aulas, visualize sua página como visitante para garantir que o conteúdo e a navegação estejam funcionando corretamente. 5. Chaves Manuais: Utilize a liberação manual se precisar ajustar o conteúdo ou timing de última hora, sem comprometer o cronograma já programado. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

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

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!

Última atualização em Jan 30, 2025

Como criar Pop-ups na Rockty 🎥

Introdução Os pop-ups são ferramentas poderosas para aumentar a conversão em sites e landing pages, sem comprometer a experiência do usuário. Eles permitem que você utilize estratégias como “micro comprometimento”, onde os visitantes interagem com um elemento antes de se comprometerem totalmente, como preencher um formulário. Neste tutorial, vamos guiá-lo sobre como adicionar, configurar e personalizar pop-ups na Rockty, para que você possa aproveitar ao máximo essa funcionalidade. 1. Passo a Passo para Criar Pop-ups 1. Adicionando um Pop-up: - Para adicionar um pop-up em suas páginas, insira um novo elemento e selecione o tipo de pop-up que deseja utilizar. ​ ​ 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. ​ 2. Editando o Pop-up: - Após adicionar o pop-up, uma mensagem aparecerá no topo da tela informando que a página possui um pop-up, especificando o tipo (barra cinza com texto verde neon). Para editar, clique no texto verde com o código ou nome do pop-up. ​ ​ 3. Configurações Gerais: - Você pode fechar, excluir ou acessar as configurações gerais do pop-up usando os ícones de X, lixeira, e engrenagem, respectivamente. - Os pop-ups seguem a mesma estrutura de construção de uma página: Seção/Container > Linhas/Colunas > Elementos. ​ 2. Tipos de Pop-ups na Rockty Pop-up Tradicional: Exibido na tela quando acionado por uma ação, como um clique em botão, imagem ou texto. 📺 Assista ao vídeo abaixo para uma demonstração prática sobre como configurar o Pop-up Tradicional: https://www.youtube.com/watch?v=7Cn_Cg97rYI Pop-up de Saída: Aparece quando o usuário tenta sair da página, ideal para capturar uma última conversão. 🚨 Importante: Esse tipo de pop-up funciona apenas em desktops, não sendo exibido em dispositivos móveis como tablets e celulares. Pop-up de Congelamento: É disparado após um tempo determinado, interrompendo a navegação até que o usuário interaja com o pop-up. ​ 💡 Dica: Lembre-se que as ações dos pop-ups (como abrir ao clicar em botões) funcionam apenas em páginas publicadas. 3. Configurações Comuns para Todos os Tipos de Pop-up - Ajustes: Defina um identificador para o pop-up, configure a possibilidade do usuário fechar o pop-up, ajuste o tamanho e o espaçamento interno, e defina a posição na tela. ​ - Estilo: Personalize a cor de fundo, insira imagens, ajuste bordas, radiais e sombras para dar o estilo desejado ao pop-up. ​ ​ - Avançado: Adicione efeitos de movimento, como animações e CSS Classes, para tornar o pop-up mais dinâmico e alinhado ao design da página. ​ Conclusão Os pop-ups são uma excelente maneira de capturar a atenção dos usuários e aumentar a conversão em suas páginas. Com as diversas opções de configuração na Rockty, você pode personalizar completamente seus pop-ups para se alinhar ao objetivo do seu site. Explore as diferentes funcionalidades e ajuste as configurações para obter os melhores resultados! Dicas Adicionais 1. Timing e Contexto: Utilize pop-ups de forma estratégica, evitando interromper a navegação logo ao entrar na página. Considere usar pop-ups de congelamento apenas após o visitante demonstrar interesse no conteúdo. 2. Segmentação: Personalize os pop-ups para diferentes públicos com base no comportamento do usuário, como páginas visitadas ou tempo de permanência, para tornar a mensagem mais relevante. 3. Design Responsivo: Certifique-se de que os pop-ups são responsivos e funcionam bem em todos os dispositivos, ajustando tamanhos e posicionamento para telas menores. 4. CTA Claro e Direto: Os botões de chamada para ação (CTA) devem ser claros e atraentes, incentivando o usuário a realizar a ação desejada sem confusão. 5. Evite Pop-ups em Excesso: Use pop-ups com moderação para não sobrecarregar o usuário, o que pode resultar em uma experiência negativa e aumento na taxa de rejeição. 6. Teste A/B: Realize testes A/B para descobrir quais tipos de pop-ups, mensagens e tempos de exibição geram melhores resultados, ajustando conforme necessário. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

Como funciona o elemento Script na Rockty

Introdução O elemento Script na Rockty permite que você adicione códigos personalizados às suas páginas. Isso é útil para várias finalidades, como: - Marcar conversões (como pixels e tags de rastreamento); - Gerar animações; - Incluir formulários e outros elementos externos; - Estilizar elementos; - Incorporar mapas de calor, entre outros. ​ 1. Como Adicionar um Elemento Script Para adicionar um elemento Script à sua página, siga estas etapas: 1. Adicione um novo elemento na sua página. 2. Selecione o elemento 'Script' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Passo a Passo para adicionar um código usando o Elemento Script 1. Acessando o elemento Script Após adicionar o elemento Script à sua página, uma mensagem aparecerá no topo central da tela, indicando que a página possui o elemento Script. A mensagem será exibida em uma barra cinza com texto verde neon, conforme indicado na imagem a seguir: ​ 2. Inserir o Código Clique no texto verde que aparece na mensagem. Isso abrirá uma janela onde você poderá inserir o código desejado. ​ 3. Escolher a Localização do Código Na janela de inserção do elemento Script, você deve selecionar onde o código será inserido: no Body do HTML ou no Header do HTML. A escolha da localização pode afetar como e quando o código é carregado e executado. ​ Body do HTML - O que é: Esta é a parte principal da página onde o conteúdo visível (como textos, imagens e outros elementos) é exibido. - Quando usar: Escolha o Body para códigos que precisam ser carregados após o carregamento do conteúdo da página. Isso é útil para scripts que adicionam ou manipulam elementos visuais ou interativos depois que a página já está visível para o usuário. Por exemplo, códigos de rastreamento que coletam dados sobre interações do usuário geralmente são colocados aqui para garantir que a página já tenha sido carregada. ​ Header do HTML - O que é: Esta é a parte do código HTML que vem antes do conteúdo visível da página. O Header é usado para incluir meta-informações, links para estilos e scripts que precisam ser carregados antes do conteúdo da página. - Quando usar: Escolha o Header para códigos que devem ser carregados e executados antes que o conteúdo da página seja exibido. Isso é útil para scripts que configuram a página ou fazem ajustes importantes logo no início do carregamento. Por exemplo, códigos para rastreamento de conversões ou bibliotecas de scripts que devem estar prontos antes que qualquer interação do usuário ocorra. ​ 4. Excluir o Elemento Script Se precisar remover o elemento Script, clique no ícone de lixeira. ​ 5. Fechar a janela Após adicionar e configurar o código no elemento Script, clique no ícone em formato de X para fechar a janela. Não se esqueça de salvar e publicar a página para garantir que as alterações sejam aplicadas corretamente. ​ Conclusão O elemento Script oferece flexibilidade para integrar recursos externos em suas páginas na Rockty. Sempre teste o comportamento dos códigos inseridos na página publicada para garantir compatibilidade e funcionalidade desejada. Dicas Adicionais para Uso do Elemento Script Teste Sempre na Página Publicada: Nem todos os códigos se comportam da mesma forma no ambiente de edição e na página publicada. Sempre teste o funcionamento do código após publicar a página para garantir que tudo está funcionando conforme o esperado. Verifique a Compatibilidade do Código: A Rockty oferece suporte a scripts nas linguagens HTML, CSS e JavaScript. No entanto, alguns códigos podem não ser compatíveis com a estrutura da Rockty ou podem afetar o desempenho da página. Antes de publicar, faça testes para verificar se o código não está causando lentidão ou outros problemas. Mantenha o Código Limpo e Simples: Evite adicionar códigos muito extensos ou complexos no elemento Script, pois isso pode impactar a performance da página. Sempre prefira códigos otimizados e necessários. Use de Forma Moderada: Inserir muitos elementos Script em uma mesma página pode sobrecarregar o carregamento da página, especialmente se os códigos forem pesados ou envolverem múltiplas chamadas externas. Use com moderação para manter uma boa experiência do usuário. Segurança do Código: Certifique-se de que o código que você está inserindo é de uma fonte confiável. Códigos maliciosos podem comprometer a segurança do seu site e dos dados dos usuários. Considere Alternativas Nativas: Sempre que possível, prefira usar funcionalidades nativas da Rockty em vez de códigos externos. Isso garante maior compatibilidade e menor risco de problemas de desempenho ou segurança. Atualize e Monitore Regularmente: Códigos de terceiros podem mudar ou expirar. Monitore regularmente os scripts em sua página para garantir que eles ainda funcionam como esperado. Considere a Responsividade: Lembre-se de testar o comportamento do código inserido em diferentes dispositivos (desktop, tablet, mobile) para garantir que ele seja responsivo e se adapte bem a todas as telas. Boas Práticas: Para saber mais sobre as boas práticas na inserção de scripts para integração com Meta Pixel, Google Tag Manager (GTM), Google Analytics, LinkedIn e TikTok, consulte nosso tutorial completo aqui. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte! ​ ​

Última atualização em Jan 30, 2025

Como funciona o elemento Embed na Rockty

Introdução O elemento Embed permite a inserção de códigos externos (como scripts) diretamente em suas páginas na Rockty, possibilitando a adição de funcionalidades que não estão disponíveis nativamente. Você pode, por exemplo, integrar vídeos, botões, animações, formulários, mapas, entre outros. 1. Como Adicionar um Elemento Embed Para adicionar um elemento Embed à sua página, siga estas etapas: 1. Adicione um novo elemento na sua página. 2. Selecione o elemento 'Embed' na lista de opções disponíveis no menu lateral esquerdo. 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Inserindo o Código no Elemento Embed Após adicionar o elemento Embed à sua página, siga os passos abaixo para inserir o código: 1. Clique no elemento Embed para abrir a janela de inserção de código, como mostrado na imagem abaixo. ​ 2. Insira o código desejado na área especificada. 3. Para fechar a janela sem excluir o elemento, clique no ícone em formato de "X". 4. Caso queira excluir o elemento Embed, clique no ícone de lixeira. 5. Após inserção do código, feche a janela e salve/publique a página para concluir. ​ ❗ Importante: O elemento que você inserir por código ficará visível apenas na página publicada. 3. Configurações do Elemento Embed Para acessar as configurações do elemento Embed, clique na engrenagem do elemento. As configurações disponíveis são: ​ Ajustes - Visibilidade: Configure a visibilidade do elemento para diferentes dispositivos (Desktop, Tablet, Mobile). Para ocultar ou mostrar o elemento, clique no ícone do dispositivo desejado. Para reverter, clique novamente no ícone. ​ - Posição | Margem | Espaçamento Interno: Ajuste a posição (esquerda, centro, direita), margem (topo) e espaçamento interno (topo, baixo, esquerda, direita) do elemento. Insira valores manualmente ou ajuste as barras de controle. ​ 💡 Dica: Evite usar margens negativas, pois podem causar conflitos com outros elementos da página. ​ Avançado - Efeitos de Movimento - Animação: Adicione animações ao elemento. Escolha um efeito da lista e configure o comportamento (exibir uma vez ou em loop), ativação (ao entrar na página ou ao passar o mouse) e duração (normal, devagar ou rápido). Para remover a animação, clique na lixeira ao lado do nome da animação. - CSS Classes: Utilize CSS Classes para aplicar estilos personalizados ao elemento. Insira um nome para a classe no campo "Insira ou Selecione" e utilize o elemento de Script para adicionar o código CSS relacionado. Para mais detalhes, confira nosso tutorial Como Funciona a Configuração CSS Classes na Rockty. ​ Conclusão O elemento Embed oferece flexibilidade para integrar recursos externos em suas páginas na Rockty. Sempre teste o comportamento dos códigos inseridos para garantir compatibilidade e funcionalidade desejada. Dicas Adicionais 1. Teste Sempre na Página Publicada: Nem todos os códigos externos se comportam da mesma forma no ambiente de edição e na página publicada. Sempre teste o funcionamento do código após publicar a página para garantir que tudo está funcionando conforme o esperado. 2. Verifique a Compatibilidade do Código: Alguns códigos externos podem não ser compatíveis com a estrutura da Rockty ou podem afetar o desempenho da página. Antes de publicar, faça testes para verificar se o código não está causando lentidão ou outros problemas. 3. Mantenha o Código Limpo e Simples: Evite adicionar códigos muito extensos ou complexos no elemento Embed, pois isso pode impactar a performance da página. Sempre prefira códigos otimizados e necessários. 4. Use de Forma Moderada: Inserir muitos elementos Embed em uma mesma página pode sobrecarregar o carregamento da página, especialmente se os códigos forem pesados ou envolverem múltiplas chamadas externas. Use com moderação para manter uma boa experiência do usuário. 5. Segurança do Código: Certifique-se de que o código que você está inserindo é de uma fonte confiável. Códigos maliciosos podem comprometer a segurança do seu site e dos dados dos usuários. 6. Considere Alternativas Nativas: Sempre que possível, prefira usar funcionalidades nativas da Rockty em vez de códigos externos. Isso garante maior compatibilidade e menor risco de problemas de desempenho ou segurança. 7. Atualize e Monitore Regularmente: Códigos de terceiros podem mudar ou expirar. Monitore regularmente os embeds em sua página para garantir que eles ainda funcionam como esperado. 8. Evite Margens Negativas e Ajustes Extremos: Quando posicionar o elemento Embed, evite usar margens negativas ou valores extremos que possam afetar o layout da página. Isso ajuda a prevenir conflitos de posicionamento com outros elementos. 9. Considere a Responsividade: Lembre-se de testar o comportamento do código inserido em diferentes dispositivos (desktop, tablet, mobile) para garantir que ele seja responsivo e se adapte bem a todas as telas. 10. Tutoriais Relacionados: Se você estiver interessado em aprender como inserir mapas ou formulários usando o elemento Embed, confira nossos tutoriais dedicados a esses recursos: - Como Inserir Mapas nas Suas Páginas - Como Inserir Formulários nas Suas Páginas usando o elemento Embed ​ Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

Como Inserir Mapas em Suas Páginas Construídas na Rockty (Elementos)

Introdução Mapas são uma ótima maneira de mostrar locais e direções diretamente em suas páginas. Com o Google Maps, você pode inserir mapas personalizados em suas páginas na Rockty de forma rápida e simples usando o elemento Embed. Neste tutorial, vamos guiá-lo por todas as etapas para obter o código do Google Maps e inseri-lo em sua página. 1. Passo a Passo: Como Obter o Código HTML do Google Maps 1. Acesse o Google Maps: Vá para Google Maps. 2. Busque o Local Desejado: Digite o endereço ou local que deseja exibir e clique na lupa para buscar. 3. Compartilhar o Mapa: Clique no botão "Compartilhar" ou "Share". 4. Obter o Código HTML: Selecione a opção "Embed a Map" (Incorporar um Mapa). 5. Escolher o Tamanho do Mapa: Selecione o tamanho desejado para o mapa (pequeno, médio, grande ou personalizado). 6. Copiar o Código: Clique em "Copy HTML" para copiar o código do mapa gerado. ​ 2. Inserindo o Mapa em Suas Páginas na Rockty 1. Adicionar o Elemento Embed: No construtor de páginas da Rockty, adicione o elemento Embed no local desejado da sua página. Esse elemento está no final da lista de elementos disponíveis. ​ 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. ​ 2. Inserir o Código do Mapa: Clique na área do elemento Embed recém-adicionado para abrir a janela de inserção de código. Cole o código HTML copiado do Google Maps. ​ ​ 3. Salvar e Publicar: Após inserir o código, clique no ícone em formato de X para fechar a janela. Não se esqueça de salvar a página e, se estiver pronto, publicar para que o mapa fique visível aos visitantes. ​ 4. Remover o Mapa: Caso precise remover o mapa, clique no ícone de lixeira no elemento Embed. ​ Conclusão Inserir mapas em suas páginas Rockty é um processo simples e que pode trazer grande valor ao seu site. 📌 Nota: Lembre-se de testar sempre na página publicada, pois o elemento Embed será visível apenas após a publicação. Dicas Adicionais - Teste Sempre na Página Publicada: Nem todos os códigos externos se comportam da mesma forma no ambiente de edição e na página publicada. Sempre teste o funcionamento do mapa após publicar a página. - Verifique a Compatibilidade do Código: Garanta que o código HTML do mapa funcione bem com a estrutura da Rockty, verificando se ele não afeta o desempenho da página. - Considere a Responsividade: Teste o mapa em diferentes dispositivos (desktop, tablet, mobile) para garantir que ele se adapta bem a todas as telas. - Saiba Mais Sobre o Elemento Embed: Se quiser aprender mais sobre como usar o elemento Embed, consulte nosso tutorial dedicado Como Funciona o Elemento Embed na Rockty. ​ Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

Como Inserir Vídeos do YouTube com Autoplay e Loop Usando o Elemento Embed na Rockty

Introdução Adicionar vídeos às suas páginas pode tornar seu conteúdo mais dinâmico e envolvente. Na Rockty, é fácil inserir vídeos do YouTube utilizando o elemento Embed. Neste tutorial, vamos orientá-lo a adicionar vídeos com o recurso de autoplay e também como configurar o vídeo para autoplay em loop. O embed já está otimizado para ser responsivo em telas menores, garantindo que seus vídeos tenham boa aparência em qualquer dispositivo. 1. Como Adicionar um Elemento Embed Para adicionar um elemento Embed à sua página, siga estas etapas: 1. Adicione um novo elemento na sua página. 2. Selecione o elemento 'Embed' na lista de opções disponíveis no menu lateral esquerdo. ​ 💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais. 2. Inserindo o Código do Vídeo Após adicionar o elemento Embed, siga os passos abaixo: - Clique na área do elemento Embed recém-adicionado para abrir a janela de inserção de código. ​ - Cole o código embed fornecido abaixo, substituindo SEU_VIDEO_ID pelo ID do vídeo que você deseja exibir conforme indicado no passo a passo a seguir: 3. Incorporando Vídeo do YouTube com Autoplay <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/SEU_VIDEO_ID?autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> Passo a passo: - Substitua SEU_VIDEO_ID pelo ID do vídeo que deseja exibir. O ID do vídeo é a parte final de um link do YouTube. Por exemplo, em uma URL como: https://www.youtube.com/watch?v=AUd6G1G2eEk 📌 O ID do vídeo é AUd6G1G2eEk - O parâmetro autoplay=1 faz com que o vídeo inicie automaticamente. - O parâmetro mute=1 é obrigatório para que o autoplay funcione corretamente na maioria dos navegadores. 4. Incorporando Vídeo do Youtube com Autoplay e Loop <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/SEU_VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=SEU_VIDEO_ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> Passo a passo: - Substitua SEU_VIDEO_ID pelo ID do vídeo. Por exemplo, em uma URL como: https://www.youtube.com/watch?v=AUd6G1G2eEk 📌 O ID do vídeo é AUd6G1G2eEk - O parâmetro autoplay=1 faz com que o vídeo inicie automaticamente. - O parâmetro mute=1 é obrigatório para que o autoplay funcione corretamente na maioria dos navegadores. - O parâmetro playlist=SEU_VIDEO_ID é necessário para que o loop funcione corretamente no YouTube. 5. Salvar e Publicar Após inserir o código: - Clique no ícone em formato de "X" para fechar a janela de inserção de código. - Não se esqueça de salvar a página. Quando estiver pronto, publique a página para que o vídeo fique visível aos visitantes. ​ 6. Remover o Vídeo Caso precise remover o vídeo: - Clique no ícone de lixeira no elemento Embed para excluí-lo. ​ Dicas Adicionais - O vídeo roda apenas na página publicada, portanto, teste a funcionalidade após a publicação. - O vídeo inicia mudo para que o recurso de autoplay funcione corretamente. Isso é obrigatório na maioria dos navegadores. - Evite o uso excessivo de elementos Embed na página, pois isso pode afetar o desempenho e a velocidade de carregamento da página. - Teste o comportamento do vídeo em diferentes dispositivos para garantir que ele se ajusta corretamente em todas as telas. - Você pode ajustar as dimensões da janela do vídeo alterando os valores de width e height no código embed. Conclusão Inserir vídeos do YouTube com autoplay e loop na Rockty é simples com o uso do elemento Embed. O código já está otimizado para dispositivos móveis, garantindo uma boa experiência em qualquer tela. Lembre-se de seguir as melhores práticas para não comprometer a usabilidade da sua página. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

Como Usar Vídeos do YouTube Shorts na Rockty

Introdução Os vídeos do YouTube Shorts se tornaram uma forma popular de compartilhar conteúdo curto e envolvente. No entanto, muitos usuários podem encontrar dificuldades ao tentar usar URLs de Shorts com o elemento de vídeo nativo na Rockty. Este tutorial irá esclarecer esse problema e oferecer uma solução prática para garantir que você possa usar vídeos do YouTube Shorts em suas páginas. Problema com URLs Quando você copia a URL de um vídeo do YouTube Shorts, como esta: ​ https://www.youtube.com/shorts/EKYuYO6Kjnz Ela não é compatível com o elemento de vídeo nativo da Rockty. Isso pode resultar em erros ou na incapacidade de reproduzir o vídeo em sua página. Solução Para utilizar vídeos do YouTube Shorts na Rockty, você pode simplesmente alterar a URL para o formato padrão do YouTube. Aqui está como fazer isso: 1. Identifique o ID do Vídeo: Na URL de Shorts, o ID do vídeo é a parte após a última barra. No exemplo acima, o ID é EKYuYO6Kjnz. 2. Altere a URL: Formate a URL para o seguinte padrão: ​ https://www.youtube.com/watch?v=EKYuYO6Kjnz 📌 Você deve substituir a parte EKYuYO6Kjnz na nova URL com o ID que você identificou. Ao usar esta nova URL, você pode inserir o vídeo no elemento de vídeo nativo da Rockty sem problemas: ​ Dicas Adicionais - Teste o Vídeo: Após inserir a nova URL, sempre teste o vídeo em sua página publicada para garantir que ele funcione corretamente. - Para Mais Informações: Se precisar de mais informações sobre como usar o elemento 'Vídeo', acesse o tutorial em Como funciona o elemento Vídeo na Rockty. Conclusão Agora você sabe como utilizar vídeos do YouTube Shorts na Rockty! Lembre-se de sempre alterar a URL para o formato compatível para garantir que seus vídeos sejam exibidos corretamente. Essa simples alteração pode fazer toda a diferença na apresentação do seu conteúdo. Precisa de Ajuda? Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Última atualização em Jan 30, 2025

Como Configurar um "Botão de Ligação" Usando o Botão Nativo, Imagens, Textos ou Bullet Point na Rockty

Introdução Em páginas voltadas para Negócios Locais, ter um “Botão de Ligação” facilita a interação com clientes, oferecendo um atalho direto para que eles entrem em contato. A Rockty permite que você configure esse botão de maneira simples, usando o botão nativo ou elementos como imagens e bullet points. Neste tutorial, você vai aprender como configurar o botão de ligação em dois formatos: 📌 Usando o Botão Nativo (válido também para Imagens e Textos) 📌 Usando o Elemento Bullet Point Vamos lá? 1️⃣ Usando o Botão Nativo para Direcionar para uma Ligação Se você deseja facilitar que seus visitantes façam uma ligação diretamente da sua página, pode configurar um botão nativo no construtor da Rockty com a função de 'ligação telefônica'. A mesma configuração pode ser aplicada para imagens nativas e textos. 👉 Siga os passos abaixo: 1. Acesse o botão nativo: Adicione ou selecione o botão que deseja usar para a ação de ligação (ou, se preferir, use uma imagem ou texto). 2. Clique na engrenagem: No canto superior do botão, clique no ícone de engrenagem para acessar as configurações. 3. Defina um texto para o botão: Em 'Ajustes', no campo de texto, insira o que deseja que apareça no botão, como "Ligue Agora", "Fale Conosco”, “Entre em Contato", etc. 4. Configure a ação para abrir um link externo: Nas configurações do botão, selecione a opção de ação para 'Abrir Link Externo'. 5. Insira o código de ligação: No campo de link, insira o código a seguir, substituindo o número pelo telefone desejado: tel:+5511999999999 ❗ Lembre-se de ajustar o número com o código de país, DDD e o telefone correto. ✅ Ao salvar essas configurações e publicar a página, o botão permitirá que os visitantes liguem diretamente para o número definido, especialmente quando acessarem a página por dispositivos móveis. 💡 Dica: Essas mesmas instruções podem ser usadas em imagens nativas ou textos. Basta seguir os mesmos passos e aplicar o link de telefone na imagem ou no texto. ​ Para mais detalhes sobre a configuração e estilização de botões, imagens ou textos, acesse nossos tutoriais completos nos links a seguir: ​ ​📌 Como funcionam Elementos de Texto na Rockty 📌 Como funciona o elemento Imagem na Rockty 📌 Como funciona o Elemento Botão na Rockty 2️⃣ Usando o Elemento Bullet Point com Ícone Você também pode adicionar um botão de ligação usando o elemento Bullet Point, que permite a combinação de ícones com texto. 👉 Siga os passos abaixo: 1. Adicione um elemento Bullet Point em sua página. 2. Insira o código de ligação na parte do texto do Bullet Point, substituindo pelo seu número de telefone e personalizando a mensagem conforme desejar: ​ ​**<a href="tel:+551199999999">Ligue Agora</a>** 🎨 Escolha um ícone de telefone para acompanhar o texto: ✅ Acesse sites como Icons8 ou Flaticon para fazer o download de um ícone gratuito de telefone. 📁 Carregue o ícone no construtor da Rockty e insira na parte da imagem do Bullet Point. 🖌️ Ajuste a cor e o tamanho do ícone e do texto para se alinhar com o design da sua página. ✅ Publique e teste a página para verificar se tudo está funcionando corretamente. 💡 Dica: Para mais detalhes sobre o elemento Bullet Point na Rockty, leia o tutorial completo. 3️⃣ Testando o Botão de Ligação 📱 Acesse a página publicada em um dispositivo móvel. 🖱️ Clique no botão de ligação e veja se ele redireciona corretamente para o aplicativo de chamadas. ✅ Verifique se o número de telefone inserido está correto. Conclusão Inserir um botão de ligação em páginas de negócios locais é uma excelente prática para facilitar o contato com clientes. O uso do botão nativo é o mais prático, mas imagens e textos também oferecem flexibilidade. O uso do bullet point com ícones proporciona uma abordagem criativa e diferenciada para sua página. Precisa de Ajuda? 🤔 Se tiver dúvidas ou precisar de suporte adicional, não hesite em entrar em contato com nosso suporte. Nossa equipe está sempre pronta para ajudar você a aproveitar ao máximo a Rockty!

Última atualização em Jan 30, 2025