📱Footer mobile

Installation

Sous le pied de page, ajouter un bloc HTML en “Pleine largeur”. Remplacez :

  • +33122334455 par le numĂ©ro de tĂ©lĂ©phone de contact

  • /contact par le slug de la page Contact si ce dernier est diffĂ©rent

  • https://www.google.com/maps/xxxxxxxx par l’URL de la fiche d’enseigne sur Google Maps

Code source

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  
  <style>
        .fa-sticky {
            color: white;
            font-size: 20px;
        }
        
        .mobile-sticky-conntainer {
            background-color: #4dbff3;
            margin-left: -10px;
            padding-top: 5%;
            padding-bottom: 5%;
            z-index: 100;
        }
        
        div.mobile-sticky-conntainer {
          position: fixed !important;
          bottom: 0 !important;
        }
        
        @media screen and (min-width: 500px) {
            .mobile-sticky-conntainer { 
                display: none;
            }
        }
  </style>
  
<div class="container-fluid text-center mobile-sticky-conntainer">
    <div class="row">
        <div class="col">
            <a href="tel:+33122334455" target="_blank">
                <i class="fa-sticky fa-solid fa-phone"></i>
            </a>
        </div>
    
        <div class="col">
            <a href="https://www.google.com/maps/xxxxxxxx" target="_blank">
                <i class="fa-sticky fa-solid fa-location-dot"></i>
            </a>
        </div>
        
        <div class="col">
            <a href="/contact" target="_blank">
                <i class="fa-sticky fa-solid fa-envelope"></i>
            </a>
        </div>
    </div>
</div>

Last updated