Schwebende Share Button Leiste in deinen WordPress Posts einbinden

Change Custom Width Of Floating Bar
Eine goßartige Methode, mehr Interaktion zu deinen Blog Posts zu bekommen ist, wenn Menschen diese mühsahm erarbeiteten und zusammengestellten Artikel mit ihren Mitmenschen Teilen. Eine schwebende Leiste Am seitenrand macht es Deinen Nutzern einfach deinen Beiträgen mehr Leser zu verschaaffen.
In diesem Beitrag zeigen wir Dir, wie Du mit dem Elementor Theme Builder ganz einfach eine schwebende Leiste mit Buttons auf deiner Seite einbindest.
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Table of Contents
    Add a header to begin generating the table of contents

    Schwebende Social Share Buttons in Deinen Blog Posts – Ganz Ohne Coding

    Gerade neulich erzählte mir eine Bekannte, sie wolle Social Share Buttons auf Ihrer Seite integrieren, die Firma, die Ihre Webseite betreut, diese gegen mehrere Stunden Bezahlung integrieren.

    Klassisch gesehen ist so eine Änderung evtl. auch mit einem gewissen Zeitaufwand und Code-Implementierung verbunden.

    Elementor Page Builder, bzw. den Elementor Theme Builder, als Teil der Pro-Version. Diese Kombination aus unserem general purpose Theme und Elementor ermöglicht es uns fast alles umzusetzen, was unsere Kunden benötigen und das auch oft mit sehr geringem Zeitaufwand bei gleichbleibend hoher Flexibilität.

    Hier zeigen wir, wie schnell und einfach es sein kann, Social Share Möglichkeiten in deinen Blog Posts zu integrieren.


    Video in English!

    Warum überhaupt Social Share Buttons einbinden?

    Nun, egal, ob du regelmäßig oder sporadisch bloggst, oder Content als Marketing Strategie für dein Unternehmen nutzt, in jedem Fall steckt eine Menge Schweiß und Arbeit dahinter.

    Gut geschriebene Artikel sollen auch gelesen werden und gut bediente Leser teilen Artikel auch immer mit Personen, denen sie nahe stehen.

    Teilen kann zwar jeder auch durch kopieren der URL, gerade auf mobilen Plattformen bedeutet das mehrere Klicks, swipes oder was auch immer. Desto mehr Schritte, desto geringer die Wahrscheinlichkeit, dass ein Artikel auch geteilt wird.

    Warum es Deinen Besuchern unntig schwer machen kick-ass Artikel zu teilen?!?

    Also platzieren wir einfach die Möglichkeit des Teiles direkt in einem Artikel, so dass die Option immer erreichbar ist, auch ohne scrollen.

    Share Buttons ohne Plugins und ohne Coden

    Wie immer in Sachen WordPress, gibt es zu jedem Problem auch ein Plugin; selbst ohne jegliches Problem gibt es ein entsprechendes Plugin!
    Und so gibt es auch zahlreiche Angebote um dir Buttons einzubinden, die nichts weiter tun, als die aktuelle URL zu einer Social Media Seite zu leiten.
    Plugins installieren heißt aber auch immer zusätzlichen Code laden. Dabei ist man immer davon abhängig, ob der Anbieter auch alles sauber aufgebaut hat. Zudem müssen Updates auch regelmäßig Updates erhalten um kein Sicherheitsrisiko darzustellen.

    Es geht auch ganz ohne Coden!

    In den letzten Jahren hat sich einiges in Sachen WordPress getan. Mittlerweile benutzen wir verstärkt Elementor und gerade deren Theme Builder um Kunden Websites umzusetzen. Das geht auch in den meisten Fällen ganz ohne coden. Nicht jeder muss heute noch das Rad jedes mal neu erfinden!
    Und so greifen wir gerne auf die Vorleistungen in Sachen Code auf das zurück, was Elementor mitbringt und die gewonnene Zeit stecken wir dann lieber in Designs und andere Detailarbeiten.

    Auch die Share Buttons kommen von Haus mit Elementor und wer werden diese über den Theme Builder einem Template für Blog Posts zuweisen, ohne eine Zeile Code zu schreiben.

    Social Share Buttons Mit Elementor

    Kommen wir zum praktischen Teil und wie Du nun mit Elementor deine Social Share Buttons in deine Seite einbindest.
    Das Social Buttons Element ist auch in der Freien Version von Elementor verfügbar. Jedoch werden wir hier ein Template erstellen/anpassen, das sich auf all Deine Blog Posts bezieht. Dazu benötigst Du die Elementor Pro.

    Füge Das Social Buttons Element In Deinem Template Hinzu

    Nach dem Öffnen eines Page Templates oder Erstellen eines neuen Page Templates über elementor siehst du auf der linken Seite die ganzen Widgets und rechts die WYSIWYG Ansicht.

    In der Widget Bar findest du das Social Buttons Element.
    Füge dies hinzu, indem Du es per Drag&Drop auf eine Stelle im WYSIWYG Editor ziehst.
    Wo ist letzten Endes egal, da wir das Element neu positionieren werden.

    HAGER MEDIA elementor-social-buttons-1024x563 Schwebende Share Button Leiste in deinen Wordpress Posts einbinden How To's [de]  Wordpress Elementor

    Füge Soziale Netzwerke Hinzu Zu Denen Du Das Teilen Ermöglichen Möchtest

    In der Linken Spalte siehst du nun schon Vorschläge, in welche Netzwerke du teilen ermöglichen kannst. Diese kannst du ändern, oder löschen. Mit dem Hinzufügen Button lassen sich noch mehr Einträge erzeugen, welche du über das drop-down Menü dann zuweisen kannst.

    Wichtig bei der Auswahl der Netzwerke bzw. Buttons ist, dass Du die leiste nicht Überfüllen solltest. Eine zoll gepackte Leiste überfordert User visuell und regt nicht gerade zum Teilen deiner Seite bei.

    Überlege, auf welchen Netzwerken sich deine Leser wirklich aufhalten und ermögliche es Ihnen dort auch interessante Inhalte von deiner Seite zu teilen.

    HAGER MEDIA add-social-networks-to-share-to-1024x562 Schwebende Share Button Leiste in deinen Wordpress Posts einbinden How To's [de]  Wordpress Elementor

    Wandle Social Share Buttons in eine Schwebende Leiste um

    Um ein Element schwebend darzustellen, müssen wir es außerhalb der Hauptinhalte auf der Webseite platzieren. Dies tut man mit dem CSS Befehl ‘Position: fixed’. Die Einstellung dazu findest du bei Elementor unter dem Reiter Advanced und Positionierung. Du kannst nun das Element ein paar Pixel von der linken Seite positionieren und in der vertikalen 50% VH (view height). Das Widget wird so immer an der linken Bildschirmhälfte bei etwa 50% Höhe Der Ansicht plaziert. Und so ist es egal ob ein User scrollt oder die Bildschirmgröße verändert das Element wird immer links am Browser Fenster ausgerichtet und erscheint so als eine schwebende Leiste.

    HAGER MEDIA position-fixed-1024x786 Schwebende Share Button Leiste in deinen Wordpress Posts einbinden How To's [de]  Wordpress Elementor

    Style deine Social Share Button Leiste

    In den Standardeinstellungen kommt das Widget mit den üblichen Farben der jeweiligen Netzwerke. Es enthält auch die jeweiligen Icons der Netzwerke, jedoch nur diese die auch vorgegeben sind.

    Wir können jedoch das Element so designen, dass es zu dem Rest unserer Webseite passt und so unser Branding unterstützen kann. Im Reiter Styling auf der linken Seite, kannst du alle erdenklichen Design Einstellungen vornehmen wie etwa Farbe, Button Größe, Icon Größe, und vieles mehr.

    Dein eigenes Design hilft dir dabei dich von anderen Webseiten abzuheben und professionell aufzutreten.

    HAGER MEDIA style-social-media-share-bar-1024x666 Schwebende Share Button Leiste in deinen Wordpress Posts einbinden How To's [de]  Wordpress Elementor

    Ändere die Breite der Widget-Leiste

    Momentan siehst du noch, dass alle Buttons nebeneinander aufgereiht werden. Das ist natürlich nicht das was wir erreichen wollen. Indem wir dem Element eine feste breite geben können wir den Umbruch der Elemente Steuern. Du kannst diese Einstellung unter Advanced Positionierung vornehmen. Ändere dort die breite des Widgets auf die Größe der Buttons. So erreichst du, dass ein Umbruch nach jedem Element vollzogen wird und so alle Buttons untereinander aufgereiht werden.

    HAGER MEDIA change-custom-width-of-floating-bar-1024x551 Schwebende Share Button Leiste in deinen Wordpress Posts einbinden How To's [de]  Wordpress Elementor

    Speichere / Veröffentliche Deine Änderungen

    Wenn du nun mit dem Ergebnis zufrieden bist was du im Editor sehen kannst, speichere deine Änderungen in einem Template oder der entsprechenden Seite. Element oder gibt dir die Möglichkeit eine neue Vorlage zu erstellen oder wenn du an einem bestehenden Template die Social-Share Leiste eingefügt hast kannst du die Änderungen dort übernehmen lassen. Der Vorteil von Page Templates ist, dass du all deine Blog Beiträge Zur gleichen Zeit stylen kannst. Wenn du ein neues Template anlegst wirst du danach beim Veröffentlichen gefragt unter welchen Konditionen dieses Design Anwendung finden soll. Um auf allen Blog Beiträgen Anwendung zu finden, kannst du alle Posts auswählen und nach veröffentlichen werden die Änderungen sofort live geschaltet. Änderst du ein bestehendes Template, brauchst du nur auf Update zu drücken da die Konditionen schon hinterlegt sind.

    Nach dem Veröffentlichen der Vorlage kannst du ins Front End deiner Webseite springen, um zu schauen wie es sich dort verhält. Ich hoffe, du erreichst durch diese Leiste, dass deine Beiträge mehr geteilt werden. Nun liegt es an dir Inhalte und Beiträge zu erstellen die gerne geteilt werden und einen entsprechenden Mehrwert für deine Leser bieten. Manchmal tut es auch nicht weh, in dem ein oder anderen Beitrag, direkt zu Fragen ob deine Leser diesen teilen möchten. Diese Taktik solltest du mir doch auch mit Vorsicht genießen.

    Leave a Reply
    Sign up for our Newsletter
    Scroll to Top
    Get A FREE Site Audit Of Your Domain!
    Which industry does your company do business in
    Please describe your area of responsibility
    Have you previously had a site audit conducted by another company?
    Which goals are you aiming to achieve with your website over the next six months?
    HAGER MEDIA needs the contact information you provide to us to contact you about our products and services. You may unsubscribe from these communications at any time. For information on how to unsubscribe, as well as our privacy practices and commitment to protecting your privacy, please review our Privacy Policy.