Um ticker de notícias evita que uma página inicial ocupada se transforme em uma parede de anúncios Em vez de empilhar cada atualização, você executa os títulos mais recentes em uma única barra Widget Ticker de notícias em Complementos Mestres para Elementor constrói essa barra para você É um widget Pro com duas fontes de conteúdo (suas próprias postagens ou um feed RSS), três tipos de rolagem e estilo para o rótulo, conteúdo, miniaturas e setas.
Veja como configurar um Ticker de notícias do elementor, do painel de widgets até a página ao vivo.
O que o widget News Ticker faz #
O widget renderiza uma barra de anúncio compacta Uma etiqueta colorida à esquerda, o conteúdo rotativo no meio, setas opcionais à direita Os itens vêm de suas postagens no WordPress (ou qualquer outro tipo de postagem pública) ou de um feed RSS A barra pode deslizar horizontalmente como um clássico notícias de última hora, role verticalmente ou role sem parar como uma marquise.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo Se ainda não o instalou, siga o guia instalação.
- Uma licença Master Addons Pro, já que o News Ticker é um widget Pro, com o widget ativado no painel Master Addons.
- Opcional: um URL de feed RSS ou algumas postagens publicadas, se você quiser usá-las como fonte.
Adicione o widget à sua página #
Abrir o Editor elementor e pesquise no painel de widgets por “News Ticker.” Arraste os complementos mestres Ticker Notícias widget na seção onde você quer a barra Ele cai com um rótulo vermelho “BREAKING NEWS” e um único item rotativo para que você possa vê-lo funcionando imediatamente.
Escolha a fonte do ticker #
Na guia Conteúdo, o Notícias Tipo de Ticker dropdown decide de onde vêm os itens:
- Conteúdo: puxa postagens do seu próprio site Defina o tipo de postagem, categorias, tags, número de postagens e pedido no Postar consulta seção.
- Feed RSS: cole um URL de feed RSS e o widget extrai os itens mais recentes automaticamente.
A demonstração usa Conteúdo, então o ticker pega novas postagens sem que ninguém toque nele Se você estiver puxando manchetes externas, o RSS Feed é a configuração mais rápida Um heads-up no RSS: se o feed cair ou mudar sua estrutura, o ticker pode ficar vazio, então vale a pena verificar depois de apontá-lo para uma nova fonte.
Opções design #
O Opções Design seção controla como o ticker se parece e o que cada item mostra:
- Mostrar etiqueta? ligue ou desative a etiqueta esquerda.
- Etiqueta: o texto do rótulo. A demo muda “BREAKING NEWS” para “LATEST NEWS.”
- Tipo de notícia: mostrar o Título ou o Trecho de cada item.
- Mostrar miniatura: adicione uma pequena imagem ao lado de cada título.
- Destacar Palavras? enfatize palavras específicas no texto do ticker.
- Mostrar data: coloque a data de publicação ao lado do título Ele só aparece quando o Tipo de Notícias é Título.
- Altura: a altura da barra em pixels A demonstração leva isso de 50 a 85.
Ativar a miniatura deixa cair uma pequena imagem ao lado de cada item Isso torna a barra mais visual, o que ajuda em sites com muita mídia, onde uma barra de texto simples tende a ser ignorada.
Use o controle deslizante Altura para dimensionar a barra Aumente-a assim que ligar as miniaturas, caso contrário a imagem e o texto ficam apertados dentro do ticker.
Configurações animação #
O Animação a seção controla como o ticker se move:
- Tipo de rolagem: Rolo Horizontal, Vertical ou Horizontal Os slides horizontais um item de cada vez, o clássico ticker de notícias para site olhar. Vertical rola itens para cima, e Horizontal Scroll move-los sem parar como uma marquise.
- Reprodução automática: comece a girar com carga.
- Intervalo de reprodução automática: tempo entre os itens, 3000 milissegundos fora da caixa.
- Pausa no Hover: congele o ticker enquanto um visitante paira sobre ele.
- Velocidade de animação: quanto tempo cada transição leva, também 3000 milissegundos por padrão.
A ticker de notícias horizontal no Elementor funciona melhor como uma barra de anúncios no topo da página Mude para Vertical quando o ticker mora em uma barra lateral ou coluna estreita, onde uma rolagem horizontal ficaria sem espaço.
Setas navegação #
O Navegação seção adiciona setas anteriores e seguintes no lado direito da barra Alternar Mostrar Navegação? ligado ou desligado e defina o Tamanho Navegação em pixels A demonstração bate o tamanho de 14 para 21 para que as setas sejam mais fáceis de acertar, o que importa em telas sensíveis ao toque onde um alvo de 14 px é complicado.
As setas dão controle manual ao visitante, útil quando o ticker segura links para os quais alguém pode querer rolar de volta.
Estilo o rótulo #
No Estilo guia, o Etiqueta estilos de seção o emblema esquerdo:
- Cor do texto: cor do texto do rótulo.
- Antecedentes: cor de fundo do rótulo.
- Cor do ângulo da fita: o pequeno acento triangular que une o rótulo à área de conteúdo.
- Tipo de fronteira e raio de fronteira: contorno e arredondamento de canto para a etiqueta.
- Margem angular: espaçamento em torno do ângulo da fita.
- Tipografia: fonte, tamanho, peso e altura da linha para o texto do rótulo.
A demonstração arredonda os cantos superior esquerdo e inferior esquerdo em forma de comprimido, definindo o raio da borda do lado esquerdo para 50 pixels.
Estilize o conteúdo e a miniatura #
O Conteúdo a seção estiliza os títulos rotativos Você obtém a cor do texto, a cor do hover, o fundo, o tipo de borda e a tipografia. O Miniatura seção lida com a largura e forma da imagem, com opções Quadradas e Arredondadas.
Dê algum contraste à cor do hover para que os visitantes possam dizer que cada título é clicável A opção de forma permite que a miniatura corresponda a qualquer estilo de imagem que o resto do seu site já use.
Estilo as setas de navegação #
O Navegação a seção de estilo possui guias Normal e Hover Defina a cor do texto, a cor de fundo, o tipo de borda, o raio da borda, o preenchimento e o espaçamento para os botões de seta Dependendo do que você escolher, as setas se misturam ao ticker ou se destacam como controles óbvios.
O resultado na página ao vivo #
Na extremidade dianteira, o ticker aparece como uma barra limpa: etiqueta, miniatura, título rotativo e setas Ele começa a animar por conta própria e faz uma pausa no hover se você deixou essa opção ativada.
Casos de uso comum #
- Barras de notícias de última hora: execute atualizações urgentes na parte superior de um site de notícias ou revistas.
- Tickers de anúncio: vendas de superfície, eventos ou lançamentos sem consumir espaço de herói.
- Postagens recentes: use o tipo Conteúdo para mostrar os títulos mais recentes do blog em qualquer página.
- Agregadores RSS: puxe manchetes de fontes externas para um centro comunitário ou industrial.
- Tickers da barra lateral: mude para Rolagem vertical e solte o widget em uma coluna estreita.
Para um layout de blog mais completo, combine isso com o Widget blog. Para anúncios datados, dê uma olhada no Widget de linha do tempo.
Vídeo Tutorial #
Prefere assistir? este vídeo percorre o widget News Ticker desde o primeiro arrasto até a barra finalizada na página ao vivo:
Perguntas frequentes #
Posso adicionar um ticker de notícias no Elementor sem codificação?
Sim. arraste o widget Ticker de notícias Master Addons para o seu layout, escolha uma fonte e defina o design e a animação do painel Elementor. Nenhum código personalizado envolvido.
Quais fontes de conteúdo o widget News Ticker suporta?
Dois: Conteúdo, que extrai postagens, produtos ou outros tipos de postagem de seu próprio site, e Feed RSS, que mostra itens de um URL de feed externo.
O ticker pode rolar verticalmente?
Sim. Na seção Animação, defina Tipo de rolagem como Vertical Ele se encaixa em barras laterais ou colunas estreitas onde uma barra horizontal ficaria sem espaço.
Como mostro miniaturas de postagens no ticker?
Ative Mostrar miniatura na seção Opções de design. Em seguida, vá até a guia Estilo para definir a largura da miniatura e escolher Quadrado ou Arredondado.
Os visitantes podem pausar o ticker?
Sim. Ativar Pausa ao Passar o Passeio na seção Animação Os visitantes também podem passar por itens com as setas de navegação se Mostrar Navegação estiver ativado.
Embrulhando #
O widget News Ticker é uma maneira rápida de adicionar movimento e conteúdo fresco a uma página Elementor Com duas fontes de conteúdo, três tipos de rolagem e estilo para cada parte da barra, abrange qualquer coisa, desde notícias de última hora até suas últimas manchetes do blog Navegue pelo conjunto completo de Widgets e extensões Master Addons para ver o que mais vem com o plugin e veja o Página do widget do News Ticker para uma demonstração. News Ticker precisa Pro, então verifique o página preços para planos.
