Kreative Links
Ein standardmäßiger blauer Unterstreichungslink macht seine Arbeit, vergisst aber, Eindruck zu machen Im heutigen Web ist jede Interaktion eine Chance, sich zu engagieren Master Addons Creative Links Element verwandelt gewöhnliche Textlinks in Miniaturkunstwerke Wählen Sie aus über 22 einzigartigen Hover-Effekten (von subtilen Unterstreichfolien bis hin zu dynamischen 3 D-Transformationen – und wenden Sie sie an jedem beliebigen Ort Ihrer Landingpage an. Stylen Sie jeden Teil des Effekts, steuern Sie das Symbol und erstellen Sie ein Mikroerlebnis, das das Klicken frisch und absichtlich wirken lässt.
Umfangreiche Bibliothek mit Hover-Effekten
Das ist das Herzstück des Elements Bewegen Sie sich über einfache Farbänderungen hinaus Wählen Sie aus einer kuratierten Liste anspruchsvoller Effekte, die beim Hover auslösen Möchten Sie eine klassische Bottom Line Slide? Eine verspielte Three Dots-Enthüllung? Ein dramatischer 3 D-Slide- oder Text-Fill-Effekt? Jeder Effekt wendet eine eindeutige CSS-Animation auf den Linktext und seine Pseudoelemente an und erzeugt so alles von eleganten bis hin zu fett gedruckten Interaktionen. Mit dieser Bibliothek können Sie Ihren Menüs, Ihrem Inhaltsverzeichnis oder Ihren Funktionslisten Persönlichkeit und Politur hinzufügen, ohne eine einzige Codezeile zu schreiben.
- 22+ Pre-Built-Effekte: Animationen wie Border Switch, Scale Down, Circle, Cross und Move Up sofort anwenden.
- Stilpalette: Von dezent (Bottom Border Enlarge) bis fett (3 D-Effekt, 2. Text und Border Reveal Push Out).
- Einfache Anwendung: Wählen Sie aus einem Dropdown eine komplexe Konfiguration aus, die zum Starten erforderlich ist.
Styling für alle Link-Staaten
Erzielen Sie ein pixelperfektes Design, indem Sie jede Komponente des Verbindungseffekts stylen Stellen Sie die Basis ein. Typografie, Link-Padding und Gesamtbreite. Tauchen Sie dann tief in das Zustandsstyling ein. Definieren Sie Textfarbe und Hintergrundfarbe sowohl für Normal als auch für Hover. Stylen Sie im Wesentlichen die farbigen Elemente, die in den Effekten verwendet werden: Span BG Color, Before BG Color und After BG Color. Diese steuern die Hintergründe der animierten Pseudoelemente, die Effekte wie Gleitlinien, gefüllte Hintergründe oder expandierende Kreise erzeugen. Fügen Sie Border Radius und Box Shadow hinzu, um den Look zu vervollständigen.
- Dual-State-Design: Kontrollieren Sie Farben und Hintergründe unabhängig für den Normal- und Hover-Zustand.
- Effektkomponenten-Styling: Stilisieren Sie direkt die Vorher-, Nachher- und Spannen-Hintergründe, die die Animationsvisualisierungen erstellen.
- Vollständige Typografiesteuerung: Wählen Sie Schriftart, Größe, Gewicht und Abstand für den Linktext.
- Form & Tiefe: Verwenden Sie Border Radius und Box Shadow, um den Behälter des Links aufzuweichen oder anzuheben.
Häufig gestellte Fragen für kreative Links
Was ist der Unterschied zwischen "Link Text" und "Alternativer Link Text"?
Der Link-Text ist das, was standardmäßig immer sichtbar ist (z. B. “Unsere Dienste”).Der Alternative Link-Text ist das, was während des Hover-Effekts erscheint oder interagiert. In Effekten wie “Text Fill” oder “Border Switch” könnte dieser alternative Text neben dem Originaltext einschlittern, ersetzen oder animieren, wodurch eine dynamische Änderung entsteht.
Kann ich diese kreativen Links als Hauptnavigation meiner Website verwenden?
Absolut! sie eignen sich perfekt für Headermenüs, vor allem für minimalistische oder kreative Seitendesigns, bei denen die Navigation selbst ein visuelles Feature sein soll, fügen Sie einfach jeden Menüpunkt als separaten “Artikel” im Inhaltsrepeater hinzu.
Wofür sind die "Before BG Color" und "After BG Color"?
Dies sind die geheimen Zutaten Die meisten fortgeschrittenen CSS-Hover-Effekte verwenden:: vorher und: nach Pseudoelementen, um die animierten Formen, Linien oder Hintergrundfüllungen zu erstellen. Mit diesen Farbsteuerungen können Sie diese versteckten Elemente direkt stylen, sodass Sie die Farben des Effekts an Ihre Marke anpassen können. Im Bottom Line Slide-Effekt steuert beispielsweise die After BG Color möglicherweise die Farbe der gleitenden Unterstreichung.
Funktionieren die Effekte auf mobilen (Touchscreen) Geräten?
Ja, sie sind voll funktionsfähig Auf Touch-Geräten wird der Hover-Effekt typischerweise beim ersten Tippen (dem “Hover” - Zustand) ausgelöst, und beim zweiten Tipp wird dem Link gefolgt Dies ist Standardverhalten für Hover-Effekte auf Mobilgeräten Sie erhalten das Animationsfeedback, bevor sich die Seite ändert.
Wie wähle ich den richtigen Effekt?
Berücksichtigen Sie die Persönlichkeit Ihrer Website:
- Professionell/Unternehmen: Verwenden Sie subtile Effekte wie Bottom Line Slide oder Border Translate.
- Kreativ/Portfolio: Gehen Sie für mutigere Effekte wie 3 D-Dia, Kreis oder Text Fill.
- Modern/Minimalistisch: Bottom Border Vergrößern oder Scale Down arbeiten wunderbar.
Vorschau ein paar – Der beste Effekt verbessert die Verbindung, ohne sich ablenkend zu fühlen.
Kann ich verschiedene Effekte auf verschiedene Links im selben Widget anwenden?
Die Screenshots zeigen einen globalen Effekt-Dropdown, der vorschlägt, dass alle Links in einer Widget-Instanz denselben gewählten Effekt haben Um unterschiedliche Effekte zu haben (z. B. ein Link mit einem Kreiseffekt, ein anderer mit einem Folieneffekt), müssten Sie wahrscheinlich mehrere separate Creative Link-Widgets platzieren.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
