PopUp hinzufügen

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