23. März 2017

    Ausfahrbare, mitfliessende Kontaktbox mit Fontawesome-Icons

    Die am Seitenrand positionierten floatenden Kontaktbox ist von vielen Kunden gewünscht: Mit diesem Code-Snippet brauchst Du nur noch die Infos austauschen und ggf. die Hintergrundfarbe abändern!

    1. Zu allererst bindest Du die externe Datei von Fontawesome ein: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
    2. Einfach den untenstehenden HTML-Code in ein Widget im Footer platzieren (so ist es dann global auf allen Unterseiten zu sehen), die Adress- und Kontaktdaten anpassen.
    3. Um die Box auch zu gestalten und zu positionieren, fügst Du dann nur noch den CSS-Code in den Head-Bereich der Jimdo-Seite ein. 
     
˂div id="box"˃
    ˂strong˃˂i class="fa fa-info-circle"˃ ˂/i˃Kontakt˂/strong˃˂br /˃
    Einleitende Worte – unfassbar emotional.˂br /˃
    ˂br /˃
    ˂strong˃˂i class="fa fa-phone"˃ ˂/i˃040 123456˂/strong˃˂br /˃
    Mo.-Fr. 9.00 - 17.00 Uhr˂br /˃
    ˂a href="mailto:mail@kundenwebsite.xyz" title="mail@kundenwebsite.xyz"˃˂i class="fa fa-envelope-o"˃ ˂/i˃mail@kundenwebsite.xyz˂/a˃˂br /˃
˂/div˃
  

    /*Schrift*/

<script src="https://use.fontawesome.com/7b9240fefb.js" type="text/javascript"></script>

 


/* Hover Box */
#box {
    background: #D2104F;
    color: #fff;
    padding: 10px 30px 10px 40px;
    position: fixed;
    right: 0;
    top: 112px;
    z-index: 9999;
     right: 0;
    transform: translateX(298px);
        -webkit-transform: translateX(298px);
        -moz-transform: translateX(298px);
        -o-transform: translateX(298px);
        -ms-transform: translateX(298px);
        -webkit-transition: 0.5s ease-out;
        -moz-transition: 0.5s ease-out;
        -o-transition: 0.5s ease-out;
        transition: 0.5s ease-out;
}
#box a {color: #fff !important;}
#box a:hover {color: rgba(255,255,255,.7)!important;}

#box:hover {
  transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
}

  #box .fa {
    left: 13px;
    margin-top: 4px;
    position: absolute;
    font-size: 17px;
}

    Tags: css