Wenn Sie jetzt einen Sticky Call erstellen möchten Button in WordPress dann lesen Sie weiter.Ein “Jetzt anrufen”-Knopf kann Ihre Konvertierungen erhöhen oder Ihren Benutzern eine einfache und schnelle Möglichkeit zur Kontaktaufnahme mit Ihnen zeigen. Bei einem Bestattungsinstitut verwenden wir diese Schaltfläche, um sofortige Hilfe zu erhalten, wenn ein Todesfall eingetreten ist.Öffnen Sie zunächst Ihre Funktionen.php-Datei und fügen Sie dort den folgenden Code ein:
Funktion custom_load_font_awesome() { wp_enqueue_style( 'font-awesome-5', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/alle.min.css' );}add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
Dadurch wird sichergestellt, dass das Telefonsymbol für den Anruf jetzt angezeigt wird. Wir verwenden dafür großartige Schriftartsymbole.
Der HTML-Code des Call Now-Buttons
Als nächstes fügen Sie den html-Code hinzu, der in der Fußzeile Ihrer WordPress-Installation angezeigt wird. Wir verwenden hierfür den wp_footer-Hook, so dass das Skript ganz am Ende Ihrer Website gerendert wird. Dies vermeidet SEO-Probleme, da der Text jetzt vor dem Aufruf gerendert wird.Fahren Sie also fort und fügen Sie die nächsten Codezeilen hinzu, dh das Skelett ohne Styling des Flyout-Buttons:
Funktion we_sticky_call() {?>0591 123424/7-Unfall-Telefon
Make sure you replace the phone numbers with the one of yours.
Styling the Button
Of course the button needs some styling and should work on mobile devices right? So for the basic styling add the following lines of CSS to your styles.css file:
.we-sticky-call-container { background: #f39200; display: block; width: 50px; height: 50px; border-radius: 50%; position: fixed; bottom: 20%; left: 20px; text-align: center; line-height: 50px; color: #fff; z-index: 999;}.we-sticky-call-content { position: absolute; top: 0; left: 25px; width: 250px; padding-left: 25px; background: #f39200; height: 50px; z-index: -1; border-radius: 0 25px 25px 0; opacity: 0; transition: all 0.5s ease; font-size: 16px; line-height: 20px;}.we-sticky-call-title { margin-top: 5px;}.we-sticky-call-description {font-size: 12px;}.we-sticky-call-container:hover .we-sticky-call-content {opacity: 1;}
Now your button is styled and has some nice animations when hovering over the icon.So what about responsive? Additionally place the following CSS that will apply on mobile devices only:
@media (max-width: 768px) {.we-sticky-call-container { bottom: 0; width: 100%; border-radius: 0; left: 0;}.we-sticky-call-icon {display: none;}.we-sticky-call-content {opacity: 1;width: 100%;left: 0;padding-left: 0;}}
