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 3 D e uma dúzia de outros efeitos de hover que 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á na coleção gratuita de Master Addons, então ele é executado em qualquer site Elementor 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 passa por 20 opções:
Suportes, Efeito 3 D, Deslizamento da linha inferior, Ampliação da borda inferior, Deslize para dentro, Deslize da borda para baixo, Deslize da 2a borda para cima, Tradutor da borda, 2o texto e borda, Revelar empurre para fora, Preenchimento de texto, Círculo, Três pontos, Interruptor de borda, Escala para baixo, Cair, Mover para cima, Cruzar, Deslize 3 D, Deslize para baixo e mais alguns.
Os nomes não dão muito, então passe o mouse no 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 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 os efeitos que revelam um. Mantenha-o curto, pois só consegue 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: muitos efeitos andam em uma borda (suportes, deslizamento de fronteira e o resto), então estes contam mais aqui do que em um link normal.
- 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 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, Círculo e Slide 3 D, todos definidos a partir de um dropdown sem CSS personalizado.
Quantos efeitos de link estão incluídos?
O widget inclui mais de 20 efeitos, incluindo Brackets, Efeito 3 D, Deslizamento de Linha Inferior, Deslizamento, Preenchimento de Texto, Círculo, Três Pontos, Interruptor de Fronteira, Cruz e Deslizamento 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 Os planos Pro adicionam mais widgets e extensões 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 Elementor Creative Links dá aos seus links de texto movimento real: mais de 20 efeitos de hover, um ícone e controles de cores sintonizados nas animações, nenhum deles exigindo código Escolha um efeito, defina as cores e seus links parem de ficar ali sentados A partir daqui, o resto do Biblioteca de widgets Master Addons vale a pena dar uma olhada.
