So erstellen Sie eine schwebende Schaltfläche in Elementor

Rifat Elementor Jul 29, 2022

Möchten Sie wissen, wie Sie mit dem Elementor-Seitenersteller ? eine schwebende Schaltfläche erstellen? Eine schwebende Schaltfläche ist eine Schaltfläche, die vor allen anderen Bildschirminformationen angezeigt wird. Die meisten Website-Besitzer integrieren eine umsetzbare Floating-Schaltfläche, die den Benutzer zu einem bestimmten Ziel führt, z. B. zum Abonnieren einer E-Mail-Liste oder zum Durchsuchen einer Shop-Seite. soziale Medien, unter anderem

Mit Elementor können Sie auf verschiedene Weise schnell einen schwebenden Button für Ihre Website erstellen. In diesem Tutorial zeigen wir Ihnen, wie Sie dies auf einfachste Weise tun können, indem Sie den Elementor-Seitenersteller verwenden.

Erstellen Sie einen schwebenden Button in Elementor

Hier richten wir den Z-Index ein, um unsere schwebende Schaltfläche zu erstellen. Mit der kostenlosen Version von Elementor können Sie eine schwebende Schaltfläche für eine bestimmte Seite erstellen, indem Sie diesem Verfahren folgen. Wenn Sie die Floating-Schaltfläche zu Ihrer gesamten Website hinzufügen möchten, müssen Sie die Schaltfläche jeder Seite manuell hinzufügen, wenn Sie die kostenlose Version von Elementor verwenden.

Öffnen Sie nun den Elementor-Editor und navigieren Sie zu der Seite, auf der Sie die schwebende Schaltfläche hinzufügen möchten. Sie haben die Möglichkeit, eine neue Seite zu erstellen oder eine bestehende zu bearbeiten. Um einen Abschnitt hinzuzufügen, klicken Sie auf das Symbol „+“ und wählen Sie das einspaltige Layout aus.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Fügen Sie das Schaltflächen-Widget aus dem Widget-Bereich zu Ihrer neu erstellten Spalte hinzu.

Sie müssen nun die Aktion der Schaltfläche auswählen. In diesem Fall verwenden wir die Schaltfläche, um zur URL der Shop-Seite zu navigieren. Gehen Sie dazu in das Linkfeld und fügen Sie den Link zur Seite hinzu. Die Schaltflächenposition kann mit der Ausrichtungsoption geändert werden. Machen Sie den Knopf so klein wie möglich.

Unsere Schaltfläche ist jetzt bereit zu schweben, wenn ein Benutzer die Seite nach unten scrollt. Gehen Sie dazu auf die Registerkarte Erweitert und wählen Sie die Option Layout. Legen Sie die Breite und Position auf Inline (Auto) fest. Sie müssen auch die horizontale und vertikale Ausrichtung sowie den Versatz konfigurieren.

Sie müssen jetzt den Z-Index angeben, damit die Schaltfläche immer schwebend ist. Füllen Sie den Z-Index-Slot mit 800 aus. Dadurch wird die Schaltfläche immer schweben.

Schlussansicht

So sieht unser endgültiges Design aus.

Einpacken

Die Floating Elementor Elements-Funktion hat unser Interesse geweckt. Es hilft bei der schnellen Lösung von Designproblemen. Wir glauben, dass es die gleiche Wirkung auf Sie haben wird. Wenn ja, teilen Sie Ihr Design bitte im Kommentarbereich mit. Wir möchten Ihre Arbeit auf der ganzen Welt verbreiten. Schauen Sie sich auch unsere anderen Elementor-Tutorials an.