Como criar uma marca de seleção de texto no WordPress 1

Como criar uma marca de seleção de texto no WordPress

O elemento text marquee pode ser uma adição bem-vinda à coleção de truques de qualquer designer de web. Ele adiciona algum movimento a uma página, evitando que ela fique completamente parada. Funciona bem com outros elementos, incluindo imagens, texto estático e botões. Finalmente, com o plugin certo, pode ser incrivelmente fácil adicionar e estilizar para combinar com o design do site.

Reunimos todas as melhores coisas sobre letreiros de texto – a versatilidade, a facilidade de uso e a aparência elegante – e trouxemos para você em um widget de letreiro digital simples. É um dos sessenta widgets que compõem o Qi Addons for Elementor, a maior coleção gratuita de widgets personalizados para o Elementor.

Embora você seja mais do que bem-vindo para explorar todos os incríveis widgets do plug-in, usaremos esta oportunidade para demonstrar algumas das coisas para as quais o widget Text Marquee pode ser usado. Esperançosamente, você deverá criar suas próprias marquises incríveis. Neste artigo, você lerá sobre:

Se preferir assistir a ler, aqui está um vídeo que cobre mais ou menos os mesmos pontos. Portanto, escolha seu meio e vamos lá!

Criação de um letreiro de texto no WordPress

Gif do letreiro de texto

Porque o widget só funciona com Elementor, primeiro certifique-se de instalar e ativar este popular construtor de páginas. Nosso Complementos Qi para Elementor O plugin funciona de forma igualmente incrível com a versão gratuita ou profissional do Elementor.

Depois de instalar e ativar os addons Elementor e Qi, navegue para um post ou uma página. Pode ser uma postagem ou página existente, ou você pode criar uma nova para brincar. Depois que a página ou postagem estiver aberta e você estiver editando com o Elementor, basta usar o menu do lado esquerdo para pesquisar o Texto Widget do Marquee. Arrastá-lo para a primeira seção gratuita nos ajudará a começar.

Adicionar widget de marcação de texto

Este será o campo onde mostraremos como fizemos um exemplo como o da página do addon.

Editando o Conteúdo do Marquee

Editar o conteúdo da marquise é bastante simples. O texto do letreiro é composto por várias seções – os itens que você poderá ver no menu do lado esquerdo. Se você quiser adicionar mais seções de texto, pressione o botão Adicionar item. Remover um item é tão simples quanto pressionar o botão marcado com “x” ao lado de cada item. Optamos por reduzir o número de itens para dois.

Itens do widget 2 do letreiro digital de texto

Para alterar o texto do item, basta clicar sobre ele. Você terá muitas opções para definir o estilo do texto no menu Estilo, mas, por enquanto, tudo o que você pode fazer aqui é alterar o que os itens dizem. Alteramos os nossos para “Rolagem automática”.

Texto Texto do item do letreiro

Agora que o conteúdo da marca de seleção está definido, podemos prosseguir para estilizá-la.

Estilo de letreiro

As opções de estilo são abertas com um seletor de cores, um local onde você pode escolher ou inserir um código hexadecimal para a cor desejada. Estamos muito mais interessados ​​nas opções de Tipografia, no entanto, é onde podemos escolher a fonte, tamanho, peso, estilo, bem como altura e espaçamento das linhas.

Guia de estilo do item do letreiro de texto

Alteramos várias opções lá. Trocamos a fonte para Montserrat, mudando o tamanho das letras para 160 pixels. Tornamos o título em negrito colocando a opção de peso em 700 e transformando-o em maiúsculas.

Tipografia Text Marquee

A próxima opção interessante é o efeito de traço de texto – mudamos para “sim”, tornando nosso texto um esboço. Isso abriu opções adicionais para alterar a cor do traço do texto – mudamos o nosso para #dbdbdb – e a largura do traço de texto, que não alteramos. A opção final permite que você altere o espaço entre os itens – nós mudamos o nosso para 30.

Efeito de toque de letreiro de texto

Aplicando os toques finais

O exemplo que criamos inclui uma sobreposição onde nosso texto de letreiro passa sob uma imagem e sobre algum texto. A marca de seleção em si é de largura total, não em caixa. Alteramos isso pressionando o botão Editar seção para a seção que contém o letreiro e configurando a largura do conteúdo como largura total nas opções de Layout.

Largura total da seção do Elementor

Quanto à imagem e ao texto, adicionamos uma seção de duas colunas, uma com o widget de título da seção e a outra com o widget de imagem. Em seguida, pegamos toda a seção e em suas opções avançadas definimos a margem superior para -90.

Margem Gif do letreiro de texto

Com isso, nosso trabalho estava feito – criamos o exemplo que nos propusemos a fazer.

Vamos encerrar!

O WordPress vem com infinitas opções de personalização graças aos criadores de páginas como Elementor e plug-ins como Qi Addons para Elementor. Mostramos como você pode criar uma grande marca de seleção de texto com alguns cliques – e até mesmo obtê-la em geral com uma imagem. Mas, sem dúvida, você encontrará uma maneira diferente de usar este widget e torná-lo verdadeiramente seu.

Apoie o nosso trabalho ❤️

Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.

Pagamento seguro no PayPal