How To - Sticky Corner Einbinden

Anleitung zum Hinzufügen einer Sticky Corner in den Forum-Tracking-Code

1. Logge dich in das Admin-Panel ein:
   
   • Öffne deinen Browser und gehe zu (Link nur für registrierte Nutzer sichtbar.).
   • Melde dich mit deinen Admin-Zugangsdaten an.
2. Gehe zum Bereich "Tracking-Code (Head)":
   
   • Dieser Bereich ist unter SEO-Einstellungen zu finden.
   • Setze ein Häkchen bei "Tracking-Code Verwenden".
3. Füge den HTML-Code für die Sticky Corner ein:
   
   • Kopiere den folgenden HTML-Code:
   HTML:

   <!-- Beispiel mit Font Awesome -->
   <div class="sticky-corner">
     <a href="/info/impressum.html" class="phone-link">
       <div class="icon-box">
         <i class="fas fa-phone-alt"></i>
       </div>
     </a>
     <a href="/info/kontaktiere-uns.html" class="chat-link">
       <div class="icon-box">
         <i class="fas fa-envelope"></i>
       </div>
     </a>
   </div>
   

   • Füge diesen HTML-Code in das Tracking-Code-Textfeld ein.
   • Wichtig: Damit die Icons korrekt angezeigt werden, muss auch der Fork Awesome-Code lokal eingebunden werden. Andernfalls funktionieren die Icons möglicherweise nicht richtig. Weitere Informationen zur korrekten Einbindung findest du in diesem Beitrag: (Link nur für registrierte Nutzer sichtbar.)
   • HTML:

     <link rel="stylesheet" href="/assets/css/fork-awesome.min.css">
     

4. Füge den CSS-Code im StyleEditor ein:
   
   • Gehe zum StyleEditor deines Forums, der normalerweise in den Design- oder Layout-Einstellungen zu finden ist.
   • Kopiere den folgenden CSS-Code:
   • Code:

     /* Sticky Corner by MyLuma Shop */
     /* Sticky Ecke */
     .sticky-corner {
       position: fixed;
       left: 20px; /* Abstand von der linken Seite */
       top: 50%; /* Mitte der Seite */
       transform: translateY(-50%); /* Vertikal mittig */
       z-index: 999; /* Sicherstellen, dass es oben bleibt */
     }
     
     .icon-box {
       width: 50px; /* Breite des Feldes */
       height: 50px; /* Höhe des Feldes */
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #fff; /* Weißer Hintergrund */
       border-radius: 8px; /* Abgerundete Ecken */
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für 3D-Effekt */
       margin-bottom: 10px; /* Abstand zwischen den Symbolen */
       transition: background-color 0.3s ease; /* Sanfte Übergänge */
     }
     
     .icon-box:hover {
       background-color: #FFFFFF; /* Hintergrundfarbe bei Hover */
     }
     
     .icon-box i {
       font-size: 24px; /* Größere Icons */
       color: #0E222D; /* Farbton für die Symbole */
       transition: color 0.3s ease;
     }
     
     .icon-box:hover i {
       color: #FF0F00; /* Farbänderung bei Hover */
     }
     
     a {
       text-decoration: none; /* Entfernen der Unterstreichung */
     }
     /* Sticky Ecke - nur für Desktops */
     .sticky-corner {
       position: fixed;
       left: 20px; /* Abstand von der linken Seite */
       top: 50%; /* Mitte der Seite */
       transform: translateY(-50%); /* Vertikal mittig */
       z-index: 999; /* Sicherstellen, dass es oben bleibt */
     }
     /* Sticky Corner Ausblenden von Mobilegeräten by MyLuma Shop */
     /* Verhindern, dass die Ecke auf Mobilgeräten angezeigt wird */
     @media (max-width: 768px) {
       .sticky-corner {
         display: none; /* Ausblenden der Ecke auf Geräten mit einer Breite von maximal 768px */
       }
     }
     
     

   • Füge diesen CSS-Code in den StyleEditor ein, um das Layout und das Verhalten der Sticky Corner zu definieren.
5. Speichern und Veröffentlichen:
   
   • Nachdem du den HTML- und CSS-Code eingefügt hast, speichere die Änderungen.
   • Überprüfe deine Webseite, um sicherzustellen, dass die Sticky Corner korrekt angezeigt wird.

Weitere Hinweise:

• Testen: Teste die Änderung auf verschiedenen Geräten, um sicherzustellen, dass die Sticky Corner nur auf Desktops angezeigt wird und auf mobilen Geräten verborgen bleibt.
• Anpassung der Symbole: Falls du eigene Symbole oder ein anderes Design verwenden möchtest, kannst du die HTML- und CSS-Codes entsprechend anpassen.

PS: Bedanken nicht vergessen

 

Super. Ja der Code kann beliebt ja abgeändert werden. Okay, erstmal Danke für dein Screen, gut diesen Fehler habe ich noch nicht gesehen, habe hier kein Mac zur Hand. Ich schau mir das mal an. Danke