La plupart des liens texte font une chose sur le vol stationnaire : changer de couleur Le Widget Liens créatifs Elementor de Master Addons vous donne beaucoup plus à jouer avec, des crochets qui glissent autour des mots, un remplissage qui balaie le texte, un retournement 3 D, et une douzaine d'autres effets de survol que vous pouvez déposer sur n'importe quel lien sans ouvrir un fichier CSS.
Ci-dessous, nous allons ajouter le widget, passer par chaque contrôle de Contenu, couvrir les options Style, et courir vers le bas de la liste d'effet Les captures d'écran de l'éditeur viennent à chaque étape Tout d'abord, voici où le widget se trouve dans le panneau.
Ce que fait le widget Creative Links #
Il prend un lien simple en ligne et le fait bouger. Le Widget Boutons Créatifs stylise un bouton solide et rembourré Creative Links est la version text-link : une “Lire plus de”, un appel à l'action de style nav, ou une seule phrase que vous voulez ressortir à l'intérieur d'une phrase L'animation se déclenche en vol stationnaire, et vous la choisissez parmi une seule liste déroulante.
Vous obtenez également une icône optionnelle, une étiquette alternative que certains effets révèlent, des contrôles d'alignement et un onglet Style avec typographie, bordure et un ensemble d'options de couleurs construites autour des animations de liens. C'est dans la collection gratuite Master Addons, donc il fonctionne sur n'importe quel site Elementor. Le complet widgets et extensions la liste contient le reste.
Voyez-le plutôt avant de lire chaque paramètre ? voici le widget en action.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau à lui ? Commencez par le guide d'installation.
- Une page ou un modèle ouvert dans l'éditeur Elementor.
Comment ajouter le widget Creative Links #
Cette partie est rapide :
- Ouvrez une page avec Elementor et cliquez sur l'icône du panneau de widget (la grille) en haut à gauche.
- Type Liens Créatifs dans le champ de recherche, ou faites défiler vers le bas Additions maîtres catégorie.
- Faites glisser le Liens Créatifs widget sur la toile.
Il atterrit avec l'espace réservé “Click Here” text, prêt à être modifié.
Paramètres du contenu expliqués #
Sélectionnez le lien et ouvrez le Contenu onglet. C'est ici que vous définissez le texte, l'effet et où pointe le lien.
Effets #
Le Effets dropdown est toute la raison d'utiliser ce widget Choisissez-en un et le lien s'anime en vol stationnaire La liste passe devant 20 options :
Supports, effet 3 D, glissement de la ligne de fond, élargissement de la bordure inférieure, glissement vers l'intérieur, glissement de la frontière vers le bas, glissement de la 2 e bordure vers le haut, traduction de la frontière, 2 e texte et bordure, révélation du push out, remplissage de texte, cercle, trois points, changement de bordure, mise à l'échelle vers le bas, chute vers le bas, déplacement vers le haut, croix, diapositive 3 D, diapositive 3 D vers le bas, et quelques autres.
Les noms ne donnent pas grand-chose, alors passez le lien dans l'aperçu en direct pour voir ce que chacun fait Les supports et le remplissage de texte fonctionnent bien dans la copie corporelle Les options 3 D sont des titres plus bruyants et plus adaptés ou un lien de héros.
Alignement des éléments, alignement des liens et alignement du texte arrière #
Alignement d'éléments positionne l'ensemble du widget (Gauche, Centre, Droite). Alignement des liens et Alignement du texte arrière gérez le texte du lien et l'étiquette alternative apportée par certains effets. Tous les trois sont réactifs, vous pouvez donc les définir par appareil avec la bascule.
Texte de lien et texte de lien alternatif #
Le Lien Texte est l'étiquette visible, disons “Click Here” Le Texte de lien alternatif (“Go !” dans les captures d'écran) est la deuxième étiquette qui se remplace par les effets qui en révèlent un. Gardez-le court, car il ne reçoit que l'espace que l'animation laisse derrière elle.
Espacement des icônes et des icônes #
Vous pouvez installer une icône à côté du texte, puis définir l'écart avec Espacement des icônes. Master Addons regroupe huit primes bibliothèques d'icônes« , donc il y a beaucoup à choisir juste à l'intérieur d'Elementor ».
URL du lien #
Déposez la destination URL du lien. L'icône d'engrenage à côté contient les options habituelles : ouvrir dans un nouvel onglet, ajouter nofollow Pour un lien sur site, collez n'importe quelle page de votre propre site.
Paramètres de style expliqués #
Passer au Style onglet et ouvrez Styles de liens. Voici à quoi ressemble le lien avant et après l'animation.
- Largeur et Taille de l'icône: taillez la boîte de liens et l'icône par eux-mêmes.
- Typographie: famille de polices, taille, poids et espacement des lettres pour l'étiquette.
- Rembourrage de liens: espacement à l'intérieur de la zone de lien Cela donne également une certaine marge d'effets à animer.
- Type de bordure, largeur, couleur et rayon: beaucoup d'effets roulent sur une bordure (Brackets, Border Slide Down, et le reste), donc ceux-ci comptent plus ici que sur un lien normal.
- Ombre de boîte: profondeur sur la boîte de lien si vous le souhaitez.
Couleurs normales et Hover #
Les commandes de couleur se divisent en Normal et Survole états. Aux côtés de l’habituel Couleur du texte et Couleur d'arrière-plan, vous verrez Couleur BG avant, Avant BG Color, et Après BG Color. Ces couches supplémentaires sont ce entre quoi les effets de diapositive et de remplissage s'animent, alors définissez-les lorsque vous souhaitez contrôler la couleur qui apparaît à mi-animation.
Voir un effet en action #
Voici l'effet Brackets sur la toile Passez le lien et un crochet glisse de chaque côté, donc “Click Here” se lit comme “ [Click Here]” Chaque effet se comporte ainsi dans l'aperçu en direct, ce qui facilite l'essai de quelques-uns avant de vous engager.
Conseils pour utiliser Creative Links #
- Faites correspondre l'effet au spot. Les subtils comme le remplissage de texte ou la diapositive de la ligne de fond se trouvent bien dans les paragraphes. Enregistrez la diapositive et la croix 3D pour les titres et les zones de héros.
- Regardez les couleurs BG. Les arrière-plans avant, avant et après peuvent effacer votre texte en milieu d'animation, alors vérifiez que le lien reste lisible tout au long de l'effet.
- Gardez l'étiquette alternative courte. Un long texte de lien alternatif est exigu dans l’espace laissé par l’animation.
- N'oubliez pas le toucher. Hover ne tire pas sur un téléphone, donc l'état de repos doit avoir l'air terminé tout seul.
Besoin d'un bouton plein solide au lieu d'un lien texte ? c'est le Widget Boutons Créatifs. Vous voulez un titre, une description et un bouton ensemble ? Regardez le Widget Appel à l'action.
Foire aux questions #
Qu'est-ce que le widget Elementor Creative Links ?
C'est un widget Master Addons qui ajoute des liens de texte animé à Elementor Au lieu d'un changement de couleur simple, les liens obtiennent des effets de survol comme Brackets, Text Fill, Circle, et Slide 3 D, le tout défini à partir d'un dropdown sans CSS personnalisé.
Combien d'effets de lien sont inclus ?
Le widget comprend plus de 20 effets, dont Brackets, Effet 3 D, Glissière de la ligne de fond, Glisser vers l'intérieur, Remplir de texte, Cercle, Trois points, Interrupteur de bordure, Croix et Glissière 3 D. Vous prévisualisez chacun d'eux en direct dans l'éditeur Elementor avant de publier.
Le widget Creative Links est-il gratuit ?
Oui. Creative Links fait partie du plugin gratuit Master Addons for Elementor. Les plans Pro ajoutent plus de widgets et d'extensions. Voir le page de tarification pour la comparaison complète.
Quelle est la différence entre Creative Links et Creative Buttons ?
Creative Links anime des liens texte en ligne, comme une “Lire plus de” ou une phrase dans une phrase Les boutons créatifs stylisent un bouton solide et rembourré Choisissez Liens pour les appels à l'action de style texte et Boutons pour ceux de style bloc.
Les effets de survol de liaison fonctionnent-ils sur mobile ?
Les effets de survol ont besoin d'une souris, ils ne se déclenchent donc pas sur les écrans tactiles Concevez l'état de repos pour avoir l'air complet, et le lien fonctionne toujours et se lit bien sur les téléphones et les tablettes.
Envelopper #
Le widget Elementor Creative Links donne à vos liens texte un mouvement réel : plus de 20 effets de survol, une icône et des commandes de couleurs accordées aux animations, aucune ne nécessitant de code Choisissez un effet, définissez les couleurs et vos liens s'arrêtent juste là. D'ici, le reste du Bibliothèque de widgets Master Addons vaut le coup d'oeil.
