Wie man in WordPress eine Schaltfläche “Sticky Call Now” erstellt

How to create a sticky call now button in WordPress

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 1234
24/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;}}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.