PopUp hinzufügen

Support Wissensdatenbank

Du bist hier:
Print

Hier zeigen wir dir, wie du beim SiteDesigner auf einer Webseite ein PopUp erstellen kannst.

  1. Öffne den SiteDesigner.
  2. Füge nun ein neues Element hinzu:
  3. Wähle HTML/JS-Code aus und ziehe es auf ein freies Textfeld im untersten Bereich deiner Website.
  4. Doppelklicke nun auf den neu hinzugefügten Bereich und klicke im neuen Fenster auf ‘Code bearbeiten’.
  5. Trage nun folgenden Code ein:
    <style type="text/css"></pre>
    <pre> #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>
    
    

    Und so sieht dann das Resultat aus:

     

    Für Profis:
    Falls du die Farbe ändern möchtest:
    Suche nach #808080 um die Textfarbe zu ändern
    Suche nach #A9A9A9 um die Farbe der Titelleiste zu ändern

 

 

War dieser Artikel hilfreich?
2.5 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 100%
1 Stars 0%
Wie können wir diesen Artikel verbessern?
Please submit the reason for your vote so that we can improve the article.
Brauchst du Hilfe?
Related Post