Lestis für Entwickler, Analytics & Marketing

Dieser Bereich richtet sich sowohl an Entwickler, die das Design per Code anpassen möchten, als auch an Nutzer, die eigenständig Werbekampagnen verwalten oder Web-Analytics integrieren möchten.

🎨

Custom Design

📈

Analytics & ADS

🍪

DSGVO-konform

Code-Block-Verwaltung

Benutzerdefiniertes CSS

Gib hier deine Design-Regeln ein. Dieser Block wird vor allen Skripten in den Head eingefügt.


                            <style>

                              .hero-custom { ... }

                            </style>

✔ Muss Tags enthalten <style>
✔ Ideal für Tailwind-Overrides

JS Global Head

Skripte, die sofort geladen werden. Ideal für externe Bibliotheken oder Analytics ohne Einwilligungspflicht.


                            <script>

                              // Globale Logik

                            </script>

✔ Erfordert Tags <script>
✔ Wird vor dem Body geladen

GDPR JS Widget

Der hier eingegebene Code wird erst nach der Zustimmung des Nutzers zu Cookies ausgeführt.


                            fbq('track', 'PageView');

                            gtag('event', 'conversion', {...});

                            chat.init();

❌ KEINE Tags einfügen<script>
✔ Ausführung in einer try/catch-Sandbox

Wie der Code ausgeführt wird

Custom CSS: Der CSS-Block wird zuletzt angewendet, um maximale Priorität zu gewährleisten.

JS Global Head: Wird als Letztes injiziert, um bei Bedarf mit anderen geladenen Skripten zu interagieren.

GDPR JS Widget:

Wird erst nach Klick auf "Akzeptieren und Widgets aktivieren" oder bei bereits vorliegender Einwilligung ausgeführt.

🚀 Jetzt ausprobieren!

Kopiere diese Beispiele in deine Backend-Blöcke, um das Design deiner Website sofort in eine "Luxury Gold"-Version zu verwandeln.

🎨 Einfügen in: Benutzerdefiniertes CSS

<style>
/* Importiert eine elegante Schriftart */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');

:root {
    --primary-gold: #d4af37;
    --dark-bg: #1a1a1a;
}

/* 1. Globale Stile und Schriftarten */
body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-extrabold {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.02em;
}

/* 2. Menü und Navigation */
header {
    background-color: var(--dark-bg) !important;
    border-bottom: 2px solid var(--primary-gold);
}
header nav a {
    font-family: 'Playfair Display', serif;
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}
header nav a:hover { color: var(--primary-gold) !important; }

/* 3. Schaltflächen und Oberfläche */
.bg-indigo-600 {
    background-color: var(--primary-gold) !important;
    border-radius: 0px !important; /* Klare Kanten */
    font-family: 'Playfair Display', serif;
    transition: all 0.3s ease;
}
.bg-indigo-600:hover {
    background-color: #b8962e !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 4. Abstände */
.container { padding-left: 2rem; padding-right: 2rem; }
main { gap: 4rem; }

/* 5. Animation des Felds mit dem Rabattcode */
#winner-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary-gold);
    color: black;
    padding: 15px 25px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    font-family: 'Playfair Display', serif;
}
</style>

⚡ Einfügen in: JS Global Head

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Zeigt das Feld mit dem Rabattcode WINNERS an
    if (!document.getElementById('winner-box')) {
        const winnerBox = document.createElement('div');
        winnerBox.id = 'winner-box';
        winnerBox.innerHTML = "\u003Csmall\u003E20 % RABATTCODE:\u003C\/small\u003E WINNERS";
        document.body.appendChild(winnerBox);

        setTimeout(() => {
            winnerBox.style.display = 'block';
            winnerBox.classList.add('animate-bounce');
        }, 1000);
    }
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Fügt einen Hinweis zur Anpassung in der Fußzeile hinzu
    console.log("Lestis Custom Mode Active!");
    const footerConcat = document.querySelector('footer p');
    footerConcat.innerHTML += " - \u003Cb\u003EMit Sorgfalt angepasst\u003C\/b\u003E";
  });
</script>

⚠️ Best Practices für Widgets

Füge externe Skripte in den globalen Block ein, wo das -Tag erforderlich ist, und verschiebe die Logik in den Block, der NUR DANN ausgeführt wird, wenn der Besucher Cookies akzeptiert hat, um rechtliche Probleme zu vermeiden.

Entwickler-FAQ

Kann ich serverseitigen Code ausführen?

Nein, der Code wird als String gespeichert und direkt in den Head deiner Website eingefügt.

Was passiert, wenn mein Skript einen Fehler verursacht?

Code, der bei Cookie-Zustimmung ausgeführt wird, ist in einen try-catch-Block eingebettet. Fehler werden in der Browser-Konsole protokolliert, ohne das Laden der Seite zu verhindern.

Lestis kann nicht alle Fehlerfälle überwachen: Das Einfügen von Code erfolgt auf eigene Gefahr des Website-Besitzers.

Unterstützt Lestis externe Skripte (src)?

Natürlich. Im Feld JS Head kannst du das klassische script-Tag einfügen <script src=".."></script>