Möchten Sie eine schwebende Schaltfläche mit Z-Index auf Elementor erstellen?
Im Webdesign sind Sichtbarkeit und Zugänglichkeit entscheidend für maximale Nutzerinteraktion. Ein schwebender Button ist ein Feature, das die Aufmerksamkeit auf sich zieht und die Interaktion auf Ihrer Website erleichtert.
Mit dem Z-Index in Elementor können Sie dafür sorgen, dass diese Schaltfläche immer über anderen Elementen angezeigt wird und so sichergestellt wird, dass sie für Ihre Besucher leicht zugänglich ist, unabhängig vom Scrollen der Seite.
Dieser Artikel führt Sie durch den Prozess der Erstellung eines schwebenden Buttons mit Z-Index in Elementor. Wir erklären Ihnen die notwendigen Schritte zum Hinzufügen eines Buttons, zur korrekten Positionierung und zur Konfiguration seines Z-Index, sodass er immer sichtbar ist.
Unabhängig davon, ob Sie eine Call-to-Action-Schaltfläche, eine Schaltfläche „Zurück zum Anfang“ oder ein anderes interaktives Element hinzufügen möchten, können Sie es mit dieser Methode effektiv integrieren, ohne dass Code erforderlich ist.
Wenn Sie sehen möchten, was wir Ihnen heute zeigen wollen, schauen Sie sich das Video unten an.
Inhaltsverzeichnis
Warum eine schwebende Schaltfläche erstellen?
1. Erhöhte Sichtbarkeit Schwebende Schaltflächen bleiben unabhängig vom Scrollen der Seite sichtbar. Durch die Verwendung schwebender Schaltflächen stellen Sie sicher, dass wichtige Handlungsaufforderungen, Kontaktformulare oder Navigationsoptionen für Ihre Besucher stets leicht zugänglich sind. Dies erhöht die Wahrscheinlichkeit, dass sie im optimalen Moment mit Ihrer Website interagieren.
2. Verbesserte Benutzererfahrung : Eine schwebende Schaltfläche verbessert das Benutzererlebnis, indem sie schnellen Zugriff auf wichtige Funktionen ermöglicht, ohne dass Besucher suchen oder auf der Seite nach unten scrollen müssen. Dazu können Kontaktschaltflächen, Schaltflächen „Zurück zum Anfang“ oder Sonderangebote gehören. Indem Sie die Navigation vereinfachen, wird die Nutzung Ihrer Website intuitiver und angenehmer.
3. Erhöhte Conversion-Rate Schwebende Schaltflächen ziehen die Aufmerksamkeit auf sich und regen Besucher zum Handeln an, z. B. zum Ausfüllen eines Formulars oder zum Kauf eines Produkts. Durch die strategische Platzierung von Schaltflächen mit hohem Z-Index maximieren Sie deren Sichtbarkeit und Effektivität, was Ihre Conversion-Raten deutlich steigern kann.
4. Flexibilität bei der Positionierung Schwebende Schaltflächen bieten maximale Flexibilität bei der Positionierung. Sie können sie an beliebiger Stelle auf der Seite platzieren, beispielsweise unten rechts für eine Live-Chat-Schaltfläche oder oben rechts für eine „Zurück nach oben“-Schaltfläche. Dank dieser Anpassungsfähigkeit können Sie optimal auf die Bedürfnisse Ihrer Website und Ihrer Zielgruppe eingehen.
5. Anpassungsfähigkeit an Marketinganforderungen : Durch die Verwendung schwebender Schaltflächen können Sie Marketingelemente wie Werbeaktionen oder Newsletter-Anmeldungen einfach direkt in das Benutzererlebnis integrieren. Schwebende Schaltflächen erregen die Aufmerksamkeit der Besucher, ohne deren Navigation zu unterbrechen. Dies ist ideal, um Sonderangebote zu bewerben oder Kontaktinformationen zu sammeln.
6. Verbesserte Zugänglichkeit Schwebende Schaltflächen ermöglichen es Nutzern, wichtige Funktionen auch dann zu nutzen, wenn sie sich am unteren Seitenrand befinden. Dies ist besonders nützlich für Websites mit langen Inhaltsseiten, auf denen Nutzer möglicherweise schnell zum Seitenanfang zurückkehren oder auf Informationen zugreifen müssen.
7. Erstellen eines zusammenhängenden Designs : Durch die Integration schwebender Schaltflächen in Ihr Design können Sie die visuelle und funktionale Konsistenz auf allen Seiten Ihrer Website aufrechterhalten. Die Verwendung derselben schwebenden Schaltflächen mit einheitlichen Stilen trägt zur Stärkung Ihrer Markenidentität und zur Verbesserung des gesamten Benutzererlebnisses bei.
Zusammenfassend lässt sich sagen, dass die Erstellung einer schwebenden Schaltfläche eine hervorragende Möglichkeit ist, sicherzustellen, dass wichtige Elemente Ihrer Website sichtbar und zugänglich bleiben.
Aber zuerst finden Sie heraus: So installieren Sie Elementor auf WordPress
So erstellen Sie eine schwebende Schaltfläche mit Z-Index in Elementor
Das Erstellen eines schwebenden Buttons mit dem Z-Index in Elementor ist eine einfache und effektive Methode, um sicherzustellen, dass bestimmte Elemente Ihrer Website auch beim Scrollen auf der Seite für die Benutzer sichtbar und zugänglich bleiben.
Hier finden Sie eine Schritt-für-Schritt-Anleitung zum Hinzufügen einer schwebenden Schaltfläche mithilfe der Z-Index-Einstellungen, damit sie über allen anderen Elementen angezeigt wird.
Schritt 1: Fügen Sie eine neue Schaltfläche hinzu
1. Öffnen Sie Elementor
- Gehen Sie zu der Seite oder dem Artikel, dem Sie den schwebenden Button hinzufügen möchten.
- Klicken Sie auf „Mit Elementor bearbeiten“, um den visuellen Editor Elementor zu öffnen.
2. Fügen Sie das Schaltflächen-Widget hinzu
- Suchen Sie im Widget-Bereich auf der linken Seite nach dem Widget „Schaltfläche“.
- Ziehen Sie dieses Widget in den gewünschten Abschnitt Ihrer Seite.
3. Passen Sie die Schaltfläche an
- Im linken Bereich können Sie den Schaltflächentext anpassen, z. B. „Kontaktieren Sie uns"Oder"Holen Sie sich eine Demo".
- Ändern Sie die Farbe, die Typografie und die Ränder im "Design„damit sich der Button perfekt in Ihr Design einfügt.“
Siehe auch: Elementor: Wir stellen den besten WordPress Page Builder vor
Schritt 2: Schwebende Positionierung anwenden
1. Positionierung konfigurieren
- Klicken Sie im linken Bereich auf die Registerkarte „Erweitert“.
- Wählen Sie unter „Position“ je nach gewünschtem Effekt „Fixiert“ oder „Absolut“. Die Position „Fixiert“ wird häufig für schwebende Schaltflächen verwendet, da diese so auch beim Scrollen der Seite an ihrer Position bleiben.
2. Position festlegen
- Verwenden Sie die Positionierungsoptionen, um die Schaltfläche an der gewünschten Stelle auf der Seite zu platzieren. Beispielsweise können Sie sie mit den folgenden Einstellungen in der unteren rechten Ecke platzieren:
- Niedrig - Offset : 20px
- Droite - Lücke : 20px
- Passen Sie diese Einstellungen nach Bedarf an, sodass die Schaltfläche deutlich sichtbar ist.
Schritt 3: Z-Index konfigurieren
1. Den Z-Index verstehen
- Der Z-Index ist eine CSS-Eigenschaft, die bestimmt, welches Element über anderen Elementen angezeigt wird. Je höher der Wert, desto stärker hebt sich das Element von den anderen ab.
2. Wenden Sie den Z-Index auf die Schaltfläche an
- Suchen Sie im Menüpunkt „Erweitert“ den Abschnitt „Benutzerdefiniertes CSS“.
- Fügen Sie den folgenden CSS-Code hinzu, um einen hohen Z-Index festzulegen:cssCode kopieren
z-index: 9999; - Dieser Wert stellt sicher, dass Ihre schwebende Schaltfläche immer über anderen Elementen auf der Seite sichtbar ist.
Schritt 4: Testen und anpassen
1. Funktionalität prüfen
- Zeigen Sie eine Vorschau Ihrer Seite an, um zu überprüfen, ob die schwebende Schaltfläche ordnungsgemäß funktioniert und beim Scrollen sichtbar bleibt.
- Testen Sie die Schaltfläche auf verschiedenen Geräten, um sicherzustellen, dass sie richtig positioniert und auf allen Bildschirmen sichtbar ist.
2. Bei Bedarf anpassen
- Wenn die Schaltfläche schwer zu sehen oder zu verwenden ist, kehren Sie zu den Stil- und Positionierungseinstellungen zurück.
- Passen Sie die Farbe, die Ränder oder den Z-Index an, um die Sichtbarkeit und Zugänglichkeit der Schaltfläche zu verbessern.
3. Drehen Sie bei Bedarf den Knopf
Manchmal müssen Sie Ihren schwebenden Button drehen, damit er perfekt in Ihr Design passt.
- Unter der Registerkarte fortgeschritten, Greife auf ... zu CSS-Klassen Von dem Block Layout, dann schreibe
rotateInnerhalb.
Siehe auch: Elementor: Wir stellen den besten WordPress Page Builder vor
- Gehe zum Block Benutzerdefinierte CSS , und fügen Sie dann den folgenden Code in das Feld ein:
.rotate.rotate
{transform: rotate(90deg);}
Remarque : Wenn Sie den Block nicht sehen Benutzerdefinierte CSSDas bedeutet, Sie nutzen die kostenlose Version. Sie müssen auf die Vollversion upgraden. Pro-Version von Elementor um diese Funktion zu nutzen.
Lesen Sie auch: Elementor: So migrieren Sie eine WordPress-Website
Falls eine Fehlausrichtung vorliegt, gehen Sie zur Positionierung und passen Sie die Abstände so an, dass sie Ihren Wünschen entsprechen.
Sie könnten diese Schaltfläche auch beim Überfahren mit der Maus animieren.
- In der Registerkarte fortgeschritten Gehe zum Block Transformator
- Klicken Sie auf die Schaltfläche „Beim Hover“.
- Ändern Sie den Offset, indem Sie auf den Stift klicken
- Ändern Sie den Versatz
Die Schaltfläche bewegt sich beim Schweben wie gewünscht.
Es gibt mehrere Wege, um in Elementor ein bestimmtes Ziel zu erreichen. Für schwebende Schaltflächen stehen Ihnen zwei Optionen zur Verfügung. Hier haben wir nur eine Methode behandelt; die andere wird in einem separaten Tutorial erklärt.
Lesen Sie auch: Elementor: So migrieren Sie eine WordPress-Website
Wenn Sie mehr Gestaltungsmöglichkeiten wünschen, ist die Erstellung eines schwebenden Aktionsbuttons mithilfe des Popup-Builders eine bessere Alternative, da Sie Optionen haben, um sowohl den Button als auch sein Verhalten anzupassen, wie z. B. die Schließen-Schaltfläche, die Dauer, die Ein- oder Austrittsanimation usw.
Sie haben diese Aufgabe soeben problemlos erledigt. Sehen Sie sich einfach Ihre Tablet- und Smartphone-Arbeit an und versuchen Sie, die Ränder so zu ändern, dass sie zu jedem Gerät passen.
FAQ
Warum erscheint meine schwebende Schaltfläche nicht über anderen Elementen?
Stellen Sie sicher, dass der Z-Index richtig konfiguriert ist und stellen Sie sicher, dass keine anderen Elemente auf der Seite einen höheren Z-Index haben.
Ist der schwebende Button mit Mobilgeräten kompatibel?
Ja, schwebende Schaltflächen funktionieren gut auf Mobilgeräten, wenn Sie die Positionierung und Gestaltung für kleinere Bildschirme anpassen.
Kann ich Animationen auf meiner schwebenden Schaltfläche verwenden?
Absolut. Sie können über die Styling-Optionen von Elementor Animationen hinzufügen, um die Schaltfläche attraktiver zu gestalten.
Wie kann ich die schwebende Schaltfläche so anpassen, dass sie den Inhalt nicht beeinträchtigt?
Verwenden Sie die Rand- und Polsteroptionen in Elementor, um den Abstand um die Schaltfläche so anzupassen, dass wichtige Inhalte nicht verdeckt werden.
Holen Sie sich jetzt Elementor Pro!
Fazit
Mit einem schwebenden Button und Z-Index in Elementor lässt sich die Nutzerinteraktion auf Ihrer Website grundlegend verändern. Dieser Button-Typ, der unabhängig vom Scrollen sichtbar bleibt, eignet sich ideal, um wichtige Handlungsaufforderungen, Kontaktformulare oder andere wichtige Elemente hervorzuheben. Dank der Funktionen von Elementor können Sie die Positionierung des Buttons ganz einfach anpassen und den Z-Index so einstellen, dass er sich optimal vom restlichen Inhalt abhebt.
Wenn Sie die beschriebenen Schritte befolgen, können Sie eine effektive schwebende Schaltfläche implementieren, ohne dass Programmierkenntnisse erforderlich sind. Testen Sie Ihre Schaltfläche unbedingt auf verschiedenen Geräten, um ihre Sichtbarkeit und Wirkung zu überprüfen. Mit einem gut gestalteten Floating-Button optimieren Sie das Benutzererlebnis und erhöhen die Interaktionen auf Ihrer Website.
Warten Sie nicht länger, um die Interaktion auf Ihrer Website zu verbessern. Erstellen Sie jetzt einen schwebenden Button mit Elementor und sehen Sie, wie er die Besucherinteraktion steigern kann.
Wenn dieser Artikel für Sie hilfreich war, Zögern Sie nicht, es mit Ihren Kollegen zu teilen und uns Ihr Feedback zu geben! Sie können sich aber auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.