A maioria dos links de texto faz uma coisa no hover: mudar de cor. O Widget Links Criativos Elementor from Master Addons oferece muito mais para você brincar: colchetes que deslizam em torno das palavras, um preenchimento que varre o texto, um flip (Pro) 3 D e 22 efeitos de hover no total, você pode soltar em qualquer link sem abrir um arquivo CSS.
Abaixo, adicionaremos o widget, passaremos por todos os controles de Conteúdo, cobriremos as opções de Estilo e executaremos a lista de efeitos As capturas de tela do editor vêm a cada passo Primeiro, aqui está onde o widget fica no painel.
O que o widget Creative Links faz #
Ele pega um link simples em linha e o faz se mover. O Widget de botões criativos estilos um botão sólido e acolchoado Creative Links é a versão de link de texto: um “Leia mais”, uma chamada à ação no estilo nav ou uma única frase que você deseja destacar dentro de uma frase A animação dispara no hover, e você escolhe de um dropdown.
Você também obtém um ícone opcional, um rótulo alternativo que alguns efeitos revelam, controles de alinhamento e uma guia Estilo com tipografia, borda e um conjunto de opções de cores construídas em torno das animações do link Está no plugin gratuito Master Addons com 10 efeitos, e Master Addons Pro desbloqueia os outros 12. o completo widgets e extensões a lista tem o resto.
Em vez disso, veja-o antes de ler cada configuração? aqui está o widget em ação.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo para ele? comece com o guia instalação.
- Uma página ou modelo aberto no editor Elementor.
Como adicionar o widget Links criativos #
Esta parte é rápida:
- Abra uma página com o Elementor e clique no ícone do painel do widget (a grade) no canto superior esquerdo.
- Tipo Links Criativos na caixa de pesquisa ou role para baixo até o Adições Mestres categoria.
- Arraste o Links Criativos widget na tela.
Ele cai com o espaço reservado “Click Here” text, pronto para você editar.
Configurações de conteúdo explicadas #
Selecione o link e abra o Conteúdo guia. É aqui que você define o texto, o efeito e para onde o link aponta.
Efeitos #
O Efeitos dropdown é toda a razão para usar este widget Escolha um e o link anima no hover A lista tem 22 opções Dez são gratuitas e doze precisam Pro:
Grátis: Suportes, slide de linha inferior, aumento de borda inferior, deslizamento de 2a borda para cima, preenchimento de texto, três pontos, redução de escala, aumento de movimento, efeito 21 e efeito 22.
Pró: Efeito 3 D, Slide In, Border Slide Down, Border Translate, 2 o Texto e Fronteira, Revelar Push Out, Círculo, Border Switch, Fall Down, Cross, 3 D Slide e 3 D Slide Down.
Os nomes não dão muito, então passe o link na visualização ao vivo para ver o que cada um faz Os colchetes e o preenchimento de texto funcionam bem na cópia do corpo As opções 3 D (Pro) são títulos mais altos e ajustados ou um link de herói.
Alinhamento de itens, alinhamento de links e alinhamento de texto anterior #
Alinhamento de itens posiciona todo o widget (Esquerda, Centro, Direita). Alinhamento de link e Voltar Alinhamento de Texto manipule o texto do link e o rótulo alternativo que alguns efeitos trazem Todos os três são responsivos, para que você possa configurá-los por dispositivo com o alternador.
Texto de link e texto de link alternativo #
O Texto de link é o rótulo visível, digamos “Click Here” Texto de link alternativo (“Go!” nas capturas de tela) é o segundo rótulo que troca em Reveal Push Out, Move Up, Cross, 3 D Slide, e 3 D Slide Down Mantenha-o curto, uma vez que só obtém o espaço que a animação deixa para trás.
Espaçamento de Ícones e Ícones #
Você pode sentar um ícone ao lado do texto e definir a lacuna com Espaçamento Ícone. Master Addons agrupa oito prêmios bibliotecas ícone, então há muito o que escolher dentro do Elementor.
URL do link #
Deixe o destino entrar URL do link. O ícone de engrenagem ao lado contém as opções usuais: abra em uma nova guia, adicione nofollow Para um link no local, cole qualquer página do seu próprio site.
Configurações de estilo explicadas #
Mudar para o Estilo aba e abrir Estilos de link. É assim que o link fica antes e depois da animação.
- Largura e Tamanho do ícone: dimensione a caixa de links e o ícone por conta própria.
- Tipografia: família de fontes, tamanho, peso e espaçamento entre letras para a etiqueta.
- Link Preenchimento: espaçamento dentro da área de link Também dá algum espaço de efeitos para animar.
- Tipo de borda, largura, cor e raio: uma borda ao redor da caixa de link As linhas móveis em efeitos como Bottom Line Slide vêm das cores Before e After BG, não desta borda.
- Sombra Caixa: profundidade na caixa de link, se você quiser.
Cores normais e Hover #
Os controles de cores se dividem em Normal e Pairar estados. Ao lado do habitual Cor do texto e Cor de fundo, você verá Cor BG frontal, Antes BG Cor, e Após BG Cor. Essas camadas extras são o que os efeitos de slide e preenchimento animam, então defina-as quando quiser controlar a cor que mostra a animação intermediária.
Vendo um efeito em ação #
Aqui está o efeito Brackets na tela Passe o link e um colchete desliza em cada lado, então “Clique Aqui” lê como “[Clique Aqui ]” Todo efeito se comporta assim na visualização ao vivo, o que facilita a tentativa de alguns antes de você se comprometer.
Dicas para usar Links Criativos #
- Combine o efeito com o local. Sutis como Preenchimento de Texto ou Slide de Linha Inferior ficam bem nos parágrafos Salve Slide 3 D e Cruz (ambos Pro) para títulos e áreas de herói.
- Assista as cores BG. Os fundos Front, Before e After podem eliminar seu texto no meio da animação, portanto, verifique se o link permanece legível durante todo o efeito.
- Mantenha o rótulo alternativo curto. Um longo texto de link alternativo fica apertado no espaço que a animação deixa.
- Não se esqueça do toque. O Hover não dispara em um telefone, então o estado de repouso tem que parecer acabado por conta própria.
Precisa de um botão sólido completo em vez de um link de texto? é o Widget de botões criativos. Quer um título, descrição e botão juntos? Olhe para o Widget de chamada para ação.
Perguntas frequentes #
O que é o widget Elementor Creative Links?
É um widget Master Addons que adiciona links de texto animados ao Elementor Em vez de uma mudança de cor simples, os links obtêm efeitos de hover como Brackets, Preenchimento de Texto e (com Pro) Circle e 3 D Slide, todos definidos a partir de um dropdown sem CSS personalizado.
Quantos efeitos de link estão incluídos?
O widget tem 22 efeitos Dez são gratuitos, incluindo Brackets, Bottom Line Slide, Preenchimento de Texto, Três Pontos e Mover-se Doze precisam de Pro, incluindo Efeito 3 D, Slide In, Circle, Border Switch, Cross e Slide 3 D. Você visualiza cada um ao vivo no editor Elementor antes de publicar.
O widget Creative Links é gratuito?
Sim. Creative Links faz parte do plugin gratuito Master Addons for Elementor com 10 efeitos Master Addons Pro adiciona os outros 12 efeitos Veja o página preços para a comparação completa.
Qual é a diferença entre Links Criativos e Botões Criativos?
Links Criativos anima links de texto em linha, como um “Leia mais” ou uma frase em uma fraseOs botões criativos estilizam um botão sólido e acolchoado Escolha Links para chamadas à ação no estilo de texto e Botões para as no estilo de bloco.
Os efeitos de hover do link funcionam no celular?
Os efeitos de hover precisam de um mouse, para que não sejam acionados em telas sensíveis ao toque Projete o estado de repouso para parecer completo, e o link ainda funciona e lê bem em telefones e tablets.
Embrulhando #
O Widget Links Criativos Elementor dá o seu movimento de links de texto: 22 efeitos de hover (10 livres), um ícone, e controles de cores para as camadas de animação, sem código Escolha um efeito, definir as cores, e seus links parar apenas sentado lá A partir daqui, o resto do Biblioteca de widgets Master Addons vale a pena dar uma olhada.
