So fügen Sie Sticky Buttons auf der WordPress-Website hinzu

Last updated 18. Oktober 2021

Inhalt

Fügen Sie Ihrer WordPress-Site klebrige Schaltflächen hinzu

Möchten Sie Ihrer WordPress-Site Sticky-Buttons hinzufügen? Durch die Verwendung von Sticky-Action-Buttons kann der Benutzer leicht Informationen zu der Website abrufen. Diese Informationen können Ihre E-Mail-Adresse, Telefonnummer, Standort auf einer Google-Karte, Links zu sozialen Netzwerken usw. sein. In diesem Artikel zeige ich Ihnen, wie Sie Ihrer WordPress-Website Sticky Buttons hinzufügen.

Sticky Action Buttons verhalten sich wie ein schwebendes Widget. Diese Tasten werden auch dann gesperrt, wenn der Benutzer nach oben oder unten scrollt. Es wird auf der Website gut aussehen und sie benutzerfreundlicher machen. Das Hinzufügen von Sticky Buttons hilft, die Conversions und das Besucherengagement zu verbessern.

Anfang

Es gibt 2 Möglichkeiten, Sticky Buttons in WordPress hinzuzufügen. Eine Möglichkeit besteht darin, den Code von Grund auf neu zu erstellen, und die andere besteht darin, ein Plugin zu verwenden. Für dieses Tutorial werde ich ein Plugin verwenden. Der Grund liegt auf der Hand, wenn wir ein gutes Plugin bekommen, das unsere kleine Aufgabe erledigen kann, warum dann Zeit damit verschwenden, es von Grund auf neu zu erstellen.

Es ist sinnvoll zu codieren, wenn Sie große und komplexe Funktionen erstellen möchten. In solchen Fällen sind Plugins möglicherweise nicht für Ihren Zweck geeignet und es ist am besten, sich nicht auf sie zu verlassen, da ihre Updates die Funktionalität beeinträchtigen können. Aber für kleinere Aufgaben wie diese (Sticky Buttons) kann man sich auf Plugins verlassen.

WP Sticky ist eines der effektivsten Plugins, um Ihrer Website klebrige Elemente hinzuzufügen. Es ist ein nettes kleines Plugin, mit dem Sie eine unbegrenzte Anzahl von Sticky-Elementen hinzufügen können, die mit allen Themen, Plugins und Seitenerstellern kompatibel sind, und der gesamte Vorgang kann in nur wenigen Minuten durchgeführt werden. Er betont die Einfachheit des Prozesses, daher besteht das gesamte Verfahren aus:

Benennen Sie Ihr Element
Verschieben und klicken Sie auf die Schaltfläche Element auswählen
Wählen Sie das gewünschte Element aus, das Sie kleben möchten
Klicken Sie auf "Änderungen speichern"

Und das war’s auch schon – das ausgewählte Element ist jetzt an Ihre Site angehängt. Es sind einige Einstellungen enthalten, sodass Sie mit der Deckkraft des Sticky-Elements herumspielen, einen Einblend- oder Slide-Down-Effekt auswählen, den Bildlaufbereich festlegen und vieles mehr. Darüber hinaus können Sie idealerweise verschiedene Einstellungen gemäß den Anforderungen Ihrer Website vornehmen – Sie können eine Einschränkung basierend auf einem bestimmten Kriterium hinzufügen, sodass das Element auf der ausgewählten nicht als klebrig angezeigt wird:

Seiten
Beiträge
Kategorien
Stichworte:
Oder Nachrichtentypen

Natürlich können Sie es überall optimieren oder es an einem der genannten verhindern, um die volle Kontrolle über das Plugin zu erhalten. Sind Sie besorgt darüber, wie sie auf verschiedenen Geräten angezeigt werden? Dies kann auch auf der Registerkarte Geräte konfiguriert werden, wo Sie die genaue Bildschirmgröße auswählen können, auf der Ihre Artikel als klebrig angezeigt werden. Sie können fast jedes Element auswählen, das Sie möchten, sei es ein Sticky-Header, ein Sticky-Menü, ein Widget, eine Navigation, ein Video … alles kann in wenigen Minuten eingerichtet werden und Sie können so viele erstellen, wie Sie möchten. Effektiv, elegant und so einfach wie möglich.

Außerdem gibt es andere Tools, mit denen Sie Sticky-Elemente auf Ihrer Website erstellen können. Installieren und aktivieren Sie gleichzeitig das Smart Floating Action Buttons – Buttonizer-Plugin. Im nächsten Abschnitt werden wir sehen, wie Sie dieses Plugin verwenden.

Fügen Sie Ihrer WordPress-Site klebrige Schaltflächen hinzu

Gehen Sie nach der Installation des Plugins in der Systemsteuerung zum Menü "Buttonizer". Dieses Plugin hat keine Seite mit Backend-Einstellungen. Stattdessen bietet es eine Schnittstelle, damit Sie die Auswirkungen der Änderungen sofort sehen können.

Das Plugin bietet über 25 Aktionen beim Klicken. Angenommen, Sie möchten aus einer Liste eine E-Mail, ein Telefon und eine Google Map zu Ihren Sticky Buttons auf einer Website hinzufügen.

Klicken Sie auf die Schaltfläche Hinzufügen und benennen Sie die Schaltfläche. Ich gebe dem Button den Namen "Telefon". Danach sehen Sie eine Schaltfläche im Frontend, wie unten gezeigt.

Da diese Schaltfläche für eine "Telefonnummer" vorgesehen ist, müssen wir sie konfigurieren. Klicken Sie neben TELEFON auf das Symbol Einstellungen. Das Optionsfeld zum Anpassen der Schaltfläche wird geöffnet.

Wählen Sie in der Dropdown-Liste Tastenaktion die Option Anrufaktion (Telefonnummer) aus. Fügen Sie Ihre Telefonnummer in das Textfeld ein.

Dann möchte ich ein Telefonsymbol für diese Schaltfläche festlegen. Dies kann in den Abschnitten STYLE >> ICON erfolgen. Klicken Sie unter dem ICON-Symbol auf SYMBOL AUSWÄHLEN. Es öffnet sich ein Popup-Fenster, in dem Sie ein Symbol aus der Font Awesome-Bibliothek auswählen.

Auf dieselbe Weise können wir der Site beliebig viele Schaltflächen hinzufügen. Wählen Sie für jede Schaltfläche die entsprechende Schaltflächenaktion aus und Sie erhalten verschiedene Optionen für die Schaltfläche.

Zum Schluss wollen wir noch die Position für die Sticky Buttons festlegen. Klicken Sie dazu auf das Symbol "Einstellungen" neben "NEUE GRUPPE".

Im Abschnitt Position erhalten Sie die Parameter zum Einstellen der Position der Schaltflächen. Ich möchte, dass es richtig und zentriert ist. Also setze ich unter "HORIZONTAL" "0%" und unter "VERTIKAL" den Mittelteil.

Buttonizer-Plugins bieten viele weitere Funktionen, mit denen Sie herumspielen und sich mit denen vertraut machen sollten. Das Plugin bietet Optionen für Schaltflächenfarbe, Schaltflächenanimation, Hintergrund, benutzerdefinierte Klassen, Gerätesichtbarkeit und mehr.

Mit den obigen Einstellungen werden die Sticky Buttons auf der Website angezeigt, wie im Screenshot unten gezeigt.

Ich hoffe, Sie haben herausgefunden, wie Sie Ihrer WordPress-Site Sticky Buttons hinzufügen können. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net