Ajouter un Popup

Support Wissensdatenbank

Du bist hier:

Nous vous montrons ici comment créer une popup sur un site web avec SiteDesigner.

  1. ouvrir le SiteDesigner
  2. ajouter maintenant un nouvel élément :
  3. Sélectionnez le code HTML/JS et faites-le glisser vers un champ de texte libre au bas de votre site web.
  4. double-cliquez sur la zone nouvellement ajoutée et cliquez sur “Modifier le code” dans la nouvelle fenêtre.
  5. Entrez maintenant le code suivant :
    <style type="text/css">
      #fixedrightbottom{-webkit-box-shadow: 0px 0px 5px 1px rgba(128,128,128,1);-moz-box-shadow: 0px 0px 5px 1px rgba(128,128,128,1);box-shadow: 0px 0px 5px 1px rgba(128,128,128,1);position: fixed; right:25px;bottom:25px;width:30%;height:auto;color:#808080;background-color: white; z-index:999999999;}
      #fixedrightbottom_title {text-align:center;width:100%;line-height:60px;height:60px;color:white;background-color: #A9A9A9;}
      #fixedrightbottom_content {text-align:center;margin:20px;}\n    #fixedrightbottom_close {float:right; margin:0px 25px 0px 25px;}
      @media screen and (max-width: 1000px){
                #fixedrightbottom{width:90%; }
      }
    </style>
    <div id="fixedrightbottom">
      <div id="fixedrightbottom_title">
        <b>Bald Online-Termine buchen</b>
          <span id="fixedrightbottom_close" onclick="$(this).parent().parent().hide()">X</span>
      </div>
      <div id="fixedrightbottom_content">
            Ab dem 27. April ist unser Büro wieder geöffnet. Buchen Sie doch Ihren Termin gleich Online unter <a href="https://www.musterdomain.ch/kontakte">"Kontakte"</a>   
      
      </div>
    </div>
    
    
    

    Et voici à quoi ressemble le résultat :

     

    Pour les professionnels :
    Si vous voulez changer la couleur :
    Recherchez #808080 pour changer la couleur du texte
    Recherchez #A9A9A9 pour changer la couleur de la barre de titre

 

 

War dieser Artikel hilfreich?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Wie können wir diesen Artikel verbessern?
Brauchst du Hilfe?
Related Post