PopUp hinzufügen

Support Wissensdatenbank

Du bist hier:
Print

Here we show you how to create a popup on a website with the SiteDesigner.

  1. Open the SiteDesigner.
  2. Now add a new element:
  3. Select HTML/JS code and drag it to a free text field at the bottom of your website.
  4. Now double-click on the newly added area and click on ‘Edit Code’ in the new window.
  5. Now enter the following code:

    [code lang=”php”]</pre>
    <pre><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;
    }
    #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></pre>
    <span style="font-family: Consolas, Monaco, monospace;">[/code]

     

    
    

    And this is what the result looks like:

     

    For professionals:
    If you want to change the color:
    Search for #808080 to change the text color
    Search for #A9A9A9 to change the color of the title bar

 

 

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?
Please submit the reason for your vote so that we can improve the article.
Brauchst du Hilfe?
Related Post