Sticky Buttons
<link rel="stylesheet" href="font/css/font-awesome.min.css"> <!-- hier eigenen Pfad angeben -->
Hier nutze ich Font Awesome 4: Download
HTML
<div id="sticky"><div class="sticky-inner" id="s-date"><a href="">Termin vereinbaren</a></div>
<div class="sticky-inner" id="s-mail"><a href="mailto:info@mustermann.de">info@mustermann.de</a></div>
<div class="sticky-inner" id="s-tel"><a href="tel:90995678">90 99 56 78</a></div>
</div>
Vor dem schließenden Body-Tag
CSS
#sticky {position:fixed;
right:0px;
top:50%;
transform:translateY(-50%);
z-index:1000;
pointer-events:none;
}
.sticky-inner {
background:#1e73be;
margin-top:30px;
color:#fff;
padding: 16px 21px;
transform:translate(224px); /*anpassen*/
transition:transform 0.4s;
pointer-events:auto;
}
.sticky-inner a {
color:#fff;
font-size:18px;
}
.sticky-inner:first-child {
margin-top:0;
}
.sticky-inner::before {
display: inline-block;
font-style: normal;
font-variant: normal;
margin-right: 23px;
font-size:18px;
font-family: "FontAwesome";/*Wenn du Font Awesome 5 nutzt nehme das: font-family: "Font Awesome 5 Free";*/
font-weight: 900;
}
#s-date::before {
content: "\f271";
}
#s-mail::before {
content: "\f0e0";
}
#s-tel::before {
content: "\f095";
}
#s-date:hover {
transform:translate(18px); /*anpassen*/
}
#s-tel:hover {
transform:translate(84px); /*anpassen*/
}
#s-mail:hover {
transform:translate(0px); /*anpassen*/
}
Wordpress Variante 1
das oben genannte CSS muss auch eingefügt werdenInstalliere Simple Custom CSS and JS
Einstellungen JS
Füge den Code ein und passe ihn an
Wenn ihr das wie oben beschrieben über HTML eingebaut habt, braucht ihr den unten stehenden JS-Code nicht einfügen!
(function($) {
$("body").append('<div id="sticky"><div class="sticky-inner" id="s-date"><a href="">Termin vereinbaren</a></div><div class="sticky-inner" id="s-mail"><a href="mailto:info@mustermann.de">info@mustermann.de</a></div><div class="sticky-inner" id="s-tel"><a href="tel:90995678">90 99 56 78</a></div></div>');
})( jQuery );
Wordpress Variante 2
das oben genannte CSS muss auch eingefügt werdenFüge im Theme-Editor in der functions.php folgenden Code ein:
/* custom sticky widget */
function my_sticky_widget() {
register_sidebar(
array(
'name'=> __( 'Sticky Widget', 'sticky'),
'id' => 'sticky-widget',
'description' => __( 'Sticky Widget', 'Custom Widget' ),
'before_widget' => '<div class="custom-sticky-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'my_sticky_widget' );
/* custom sticky widget */
Füge in der footer.php vor dem schließenden body tag folgendes ein:
<?php if ( is_active_sidebar( 'sticky-widget') ) : ?> <?php dynamic_sidebar( 'sticky-widget' ); ?> <?php endif; ?>
Dann füge den Codeschnippsel als HTML ins Widget ein:
Installiere Font Awesome
