Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Möchten Sie eine schwebende Schaltfläche mit Z-Index auf Elementor erstellen?

Wir sind sicher, dass Sie mit der Schaltfläche vertraut sind, die vor allen Bildschirminhalten erscheint und normalerweise eine kreisförmige Form und ein Symbol in der Mitte hat. Nun, das ist die schwebende Aktionstaste.

Die schwebende Aktionstaste kann eine Aktion auslösen oder Sie irgendwohin segeln lassen. B. Trigger für E-Mails, soziale Netzwerke, Weiterleitung von Besuchern zum Abonnieren eines Kanals und vieles mehr.

In Elementor gibt es zwei Methoden zum Erstellen einer schwebenden Aktionsschaltfläche. Sie lauten wie folgt:

  • Durch Setzen des Z-Index
  • Durch Erstellen eines Popup-Fensters -Popup-

In diesem Tutorial zeigen wir Ihnen nur, wie Sie eine schwebende Aktionsschaltfläche erstellen, indem Sie den Z-Index festlegen, und wir werden die Pro-Version verwenden, um dies zu erreichen.

Aber zuerst finden Sie heraus: So installieren Sie Elementor auf WordPress

So erstellen Sie die schwebende Aktionsschaltfläche in Elementor

Sie können die kostenlose Version von Elementor verwenden, um die schwebende Aktionsschaltfläche mit dieser Methode zu erstellen. Sie müssen die von Ihnen entworfene Schaltfläche jedoch auf jeder Seite einfügen, auf der die Schaltfläche auf Ihrer Website erscheinen soll.

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

Mit Elementor Pro, können Sie auch auf die Funktion zugreifen Benutzerdefinierte CSS, die wir in diesem Tutorial verwenden werden.

Gehen Sie zu Ihrem Elementor-Editor; Sie können Ihre bestehenden Inhalte (Seiten, Artikel usw.) ändern oder neue erstellen. In diesem Tutorial ändern wir eine Seite.

Erstellen Sie zunächst einen neuen Abschnitt mit einer einzelnen Spalte. Wählen Sie das Schaltflächen-Widget aus und ziehen Sie es per Drag-and-Drop aus dem Widget-Bereich in den Bearbeitungsbereich. Dann ändern Sie die Taste Text und Link. 

In diesem Tutorial verwenden wir die Schaltfläche als Auslöser, um Besucher dazu zu bringen, die Elementor-Website zu durchsuchen. Dann auf die Option Ausrichtung, setzen Sie es auf die Droite et, Ändern Sie schließlich die taille der Ein-Taste Sehr groß.

Erstellen Sie eine schwebende Schaltfläche mit Z-Index

Wie Sie im obigen GIF sehen können, ist diese Schaltfläche im Abschnitt stationär. Als nächstes bewegen wir es, während wir scrollen, während wir es in derselben Position halten.

Gehen Sie zur Registerkarte fortgeschritten. Im Parameter Layout, stellen Sie die Breite ein auf Inline (Auto), definiere das Position auf Fest, definieren horizontale Ausrichtung auf Droite und passen Sie es an Décalage wie gewünscht.

Erstellen Sie eine schwebende Schaltfläche mit Z-Index

Als nächstes werden wir die Grundlagen dieser Methode definieren. Im Feld Z-Index, geben Sie die Zahl 9999 ein Dadurch wird die Schaltfläche immer vorne (schwebend) angezeigt.

Erstellen Sie eine schwebende Schaltfläche mit Z-Index

Jetzt ist es an der Zeit, die schwebende Aktionstaste zu drehen. Immer unter dem Reiter fortgeschritten, Greife auf ... zu CSS-Klassen Von dem Block Layout, dann schreibe rotate Innerhalb.

Siehe auch: Elementor: Wir stellen den besten WordPress Page Builder vor

Gehe danach zum Block Benutzerdefinierte CSS , und fügen Sie dann den folgenden Code in das Feld ein:

.rotate.rotate
{transform: rotate(90deg);}

Sie können sehen, dass sich der Knopf gerade gedreht hat, aber es gibt eine seltsame Lücke zwischen den Seiten des Bildschirms. Also, lassen Sie es uns beheben, indem Sie die anpassen Décalage bis -92

Erstellen Sie eine schwebende Schaltfläche mit Z-Index

Zum Schluss machen wir noch eine letzte kleine Berührung für diese schwebende Aktionsschaltfläche. Greifen Sie auf den Block zu Transformator, wähle es aus ÜBERBLICK, Zugriff auf die Option Verschiebung und stellen Sie jede Option auf ein 7.

Erstellen Sie eine schwebende Schaltfläche mit Z-Index

Es gibt mehrere Möglichkeiten, um in Elementor eine bestimmte Sache zu erreichen. Wenn es um die schwebende Schaltfläche geht, gibt es zwei Optionen, die Sie verwenden können. Hier haben wir nur eine Methode behandelt, die andere Methode wird ein weiteres Tutorial sein.

Lesen Sie auch: Elementor: So migrieren Sie eine WordPress-Website

Wenn Sie mehr Stiloptionen wünschen, ist das Erstellen einer schwebenden Aktionsschaltfläche mit dem Popup-Builder eine bessere Alternative, da Sie Optionen zum Anpassen der Schaltfläche sowie des Verhaltens haben, wie z. B. die Schließzeit der Schaltfläche, die Dauer, die Eingangs- oder Ausgangsanimation 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.

Holen Sie sich jetzt Elementor Pro!

Fazit

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie einen Zoom-Effekt auf eine Profilkarte anwenden. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten 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.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...

0 Aktien
Aktie
tweet
Registrieren