PopUp hinzufügen

Support Wissensdatenbank

Du bist hier:

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:
    </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;">

     

    
    

    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?
Brauchst du Hilfe?
Related Post