Elemento de letreiro

O que é o Elemento de Destaque?

Elemento de letreiro é usado para criar o efeito de rolagem horizontal para uma linha que contém outros elementos.

Aqui estão algumas características principais do elemento Marquee que poderiam ter sido utilizadas para:

• Destaque Promoções e Ofertas Especiais: Sites de e-commerce podem ter usado o elemento Marquee para destacar promoções especiais, descontos ou ofertas por tempo limitado. O efeito de rolagem pode chamar a atenção para essas ofertas, tornando-as mais visíveis para os usuários que visitam o site.
• Parcerias de marca de exibição: Sites de e-commerce podem ter usado o elemento Marquee para exibir uma lista de rolagem de logotipos de parceiros. Isso pode exibir marcas relevantes e aumentar a credibilidade do site, construindo confiança com os usuários por meio de logotipos reconhecíveis.
• Rolagem de depoimentos de clientes: O elemento Marquee também poderia ter sido usado para destacar avaliações de clientes em rolagem. Essa exibição dinâmica pode destacar feedback positivo, aumentando a confiabilidade do site ao exibir experiências de clientes satisfeitos.
• Exibir chamada para ação: Em alguns casos, sites de e-commerce podem ter usado o elemento Marquee para exibir CTAs de rolagem. Isso pode chamar a atenção do usuário para ações importantes como "Inscreva-se agora" ou "Saiba mais", estimulando o engajamento e melhorando as taxas de conversão por meio de prompts claros e visíveis.

Como adicionar o elemento Marquee no GemPages v7

Etapa 1: Vou ao Editor GemPages V7 e encontre o elemento Marquee na barra de pesquisa.

Etapa 2: Arraste e solte o elemento na área desejada.

Observe que:

• Você pode adicionar qualquer elemento dentro de um letreiro exceto: Guias, Acordeão, Formulário de contato, Produto, Banner de herói, Lista de produtos, Lista de artigos e Carrossel.
• Evite colocar mais de 20 letreiros por página para evitar problemas de desempenho.
• Em conexões mais lentas, o tamanho do letreiro pode ser ajustado após o término do carregamento de imagens grandes.

Configurar a guia Configurações

gerenciamento de itens 

Na seção Gerenciamento de Itens, você pode:

• Reordenar itens: arraste para reorganizar.
• Duplicar item: clonar um item existente.
• Remover item: exclui um item indesejado.
• Adicionar item: cria um novo item de destaque.

Espaçamento de itens

Ajuste o espaço entre os itens usando o controle deslizante (padrão: 60px).

Estilo do item

1. Largura máxima: A largura máxima de um único item no letreiro — todos os itens no letreiro compartilharão a mesma largura máxima.

O valor máximo padrão da largura é Ajustar ao conteúdo, o que significa que a largura de cada item do Marquee se ajustará automaticamente ao conteúdo dentro dele.

Existem 3 opções de largura:

• Ajustar ao conteúdo: largura do item = largura do conteúdo interno.
• Com base na contagem de itens: largura do item = largura do letreiro / número de itens.
• Personalizado: define largura máxima fixa: o usuário pode inserir manualmente o valor de largura desejado em pixels.

2. Fundo: Aplique uma cor de fundo ou imagem.

3. Borda, canto, sombra: Personalize o formato e a profundidade de cada item.

separador

Ative/desative os separadores entre os itens para melhor distinção visual.

Efeito de letreiro

• Direção: define a direção da rolagem (esquerda ou direita).
• Parar ao passar o mouse: pausa a animação quando o usuário passa o mouse.
• Velocidade: ajuste a velocidade de rolagem.

Dimensões:

• Largura: Ajuste a largura da caixa de texto. O valor padrão da largura é 100%, o que significa que a caixa de texto será redimensionada automaticamente para corresponder à largura da tela.
• Altura: Ajuste a altura da caixa de texto. O valor padrão de altura é Automático, o que significa que a caixa de texto será redimensionada automaticamente para corresponder ao conteúdo interno.
• padding: Ajuste o espaço entre a borda e o conteúdo de cada item.

Contexto

Cor: Aplicar cor de fundo à seleção.

Shape

Configure bordas, cantos e sombras.

Alinhar

• O alinhamento será desativado quando a largura for 100%.
• Caso contrário, a opção de alinhamento padrão é alinhar ao centro.

Configurar a guia Avançado

Consulte Este artigo Para obter mais instruções sobre como configurar a guia Avançado do Elemento de Seleção.

Exibir em

Você pode decidir em quais dispositivos o elemento Marquee será exibido: Desktop, Tablet e Mobile. Basta alternar cada opção para mostrar ou ocultar o elemento em dispositivos específicos.

Espaçamento (px)

Ajusta a margem e acolchoamento valores em torno do elemento Marquee usando o modelo de caixa visual:

• Valores externos (superior, direita, inferior, esquerda) controle o margem (o espaço fora do elemento)
• Valores internos controlar o acolchoamento (o espaço dentro do contêiner do elemento)
• Clique na ícone de link no centro para sincronizar/desvincular valores.

Shape

Na seção Forma, você pode:

• Adicione uma borda ao elemento e selecione entre diferentes estilos (sólido, tracejado, pontilhado).
• Personalize o raio dos cantos: escolha entre cantos quadrados, arredondados ou em formato de pílula.
• Habilite uma sombra para ajudar o elemento a se destacar do fundo.

Posição

Altere o posicionamento do Marquee dentro de sua seção ou em relação a outros elementos, incluindo:

• Estático
• Parente
• absoluto
• Pegajoso
• Fixo

Opacidade

Ajuste o nível de transparência do elemento:

• 100% = totalmente visível
• 0% = totalmente transparente

Use o controle deslizante ou a caixa de entrada para ajustar a visibilidade. Útil ao sobrepor elementos ou criar efeitos visuais sutis.

Animação

Habilite esta opção para adicionar uma animação de entrada ou de foco ao elemento Marquee. Após a ativação, você pode personalizar o comportamento da animação com as seguintes opções:

• Quando aparecer/quando pairar: Escolha se a animação deve ser acionada quando o elemento aparece na tela ou quando um usuário passa o mouse sobre ele
• Tipos de animação: Você pode escolher entre vários estilos de animação: Nenhum, Deslizar, Zoom, Agitar
• Velocidade: Ajuste a velocidade da animação usando o controle deslizante. Movê-lo para a direita fará com que a animação seja reproduzida mais rapidamente.
• Mostre mais: Clique neste botão para acessar efeitos de animação adicionais (se disponíveis).
• Preview: Use o botão Visualizar para testar a aparência da animação diretamente no editor.
• Demora: Defina um atraso (em segundos) antes do início da animação. Isso é útil se você quiser escalonar animações em vários elementos.
• Facilitando: Escolha como a animação progride ao longo do tempo, as opções disponíveis incluem: Ease in out, Ease in, Ease out, Linear
• Preview: Clique na visualização botão para testar instantaneamente a animação no editor.

O uso excessivo pode afetar o desempenho e distrair os usuários.

Interação

Crie comportamentos personalizados para o seu elemento Marquee sem precisar programar. Clique Criar para abrir o painel Configurações de interação.

Você configurará:

• Trigger: Escolha quando a interação começa – Clique no elemento or Elemento Hover.
• Ação: Selecione um elemento de destino na página e defina o que acontece, incluindo alterar estilo de texto, mudar o conteúdo, mostrar/ocultar, or vá até.

Classe CSS

Insira nomes de classes CSS personalizados (separados por espaços) para aplicar suas próprias regras de estilo ao elemento. Isso é útil se você quiser adicionar estilos avançados por meio de CSS personalizado no seu tema ou dentro do Estilo Global do GemPages.

Perguntas frequentes sobre o elemento Marquee

1. Por que a velocidade de rolagem da minha faixa de texto é inconsistente em diferentes dispositivos?

Diferenças de velocidade podem ocorrer quando itens com muitas imagens carregam lentamente em determinadas redes. Assim que todas as imagens terminarem de carregar, o efeito de rolagem se estabiliza. Para evitar isso, otimize ou comprima imagens grandes.

2. O elemento Marquee pode deixar minha página mais lenta?

Sim, se você adicionar muitos itens ou aninhar várias legendas na mesma página. Recomendamos usar menos de 20 elementos de legenda por página para manter o desempenho e a fluidez da animação.

3. Por que meu letreiro muda de tamanho após o carregamento?

Isso acontece quando os itens contêm imagens grandes que terminam de carregar depois que a animação começa. O elemento recalcula seu tamanho assim que as imagens são totalmente carregadas. Usar imagens compactadas ou larguras de item fixas pode minimizar esses deslocamentos.

4. Posso fazer com que a seleção pause ao clicar em vez de ao passar o cursor sobre ela?

A opção integrada "Parar ao passar o mouse" pausa apenas quando o cursor está sobre o elemento. Se você precisar do comportamento de pausa ao clicar, pode simulá-lo usando Interações, alternando entre mostrar/ocultar o elemento ou mudando para uma versão sem animação.

5. Posso criar um Marquee Vertical no GemPages v7?

Atualmente, o elemento Marquee no GemPages v7 oferece suporte a rolagem apenas na horizontal (da esquerda para a direita ou da direita para a esquerda). Uma marquise com rolagem vertical (de cima para baixo ou de baixo para cima) é não suportado nativamente.

Se desejar criar um efeito visual semelhante, entre em contato com nossa equipe de suporte para obter mais instruções.

6. Como adiciono uma sombra ao elemento Marquee?

• Clique no elemento Letreiro no Editor.
• Vou ao Configurações aba.
• Abra o Shape seção.
• permitir ShadowEm seguida, ajuste o tipo de sombra, a cor, o desfoque, a distância e o tamanho conforme necessário.