Lestis para Desarrolladores, Analytics y Marketing

Esta sección está dedicada tanto a desarrolladores que deseen personalizar el diseño mediante código, como a quienes busquen gestionar sus propias campañas publicitarias o integrar herramientas de web analytics.

🎨

Diseño Custom

📈

Analytics y ADS

🍪

Listo para RGPD

Gestión de bloques de código

CSS Personalizado

Introduce aquí tus reglas de estilo. Este bloque se inyecta en el Head antes de cualquier script.


                            <style>

                              .hero-custom { ... }

                            </style>

✔ Debe contener las etiquetas <style>
✔ Ideal para overrides de Tailwind

JS Global Head

Scripts cargados de inmediato. Ideal para librerías externas o analíticas que no requieren consentimiento.


                            <script>

                              // Global Logic

                            </script>

✔ Requiere etiquetas <script>
✔ Cargado antes del body

Widget JS (RGPD)

El código introducido aquí se ejecuta solo después de que el usuario acepte las cookies.


                            fbq('track', 'PageView');

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

                            chat.init();

❌ NO incluir etiquetas<script>
✔ Ejecutado en un sandbox try/catch

Cómo se ejecuta el código

CSS Personalizado: El bloque CSS se aplica al final para garantizar la máxima prioridad.

JS Global Head: Se inyecta al final para poder interactuar con otros scripts cargados si es necesario.

Widget JS (RGPD):

Se activa solo tras hacer clic en "Aceptar y Habilitar Widgets" o con consentimiento previo.

🚀 ¡Pruébalo ahora!

Copia y pega estos ejemplos en los bloques de tu panel de control para transformar instantáneamente tu sitio a una versión "Luxury Gold".

🎨 Pegar en: CSS Personalizado

<style>
/* Import di un font elegante */
@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. Global & Fonts */
body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-extrabold {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.02em;
}

/* 2. Menu & 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. Buttons & UI */
.bg-indigo-600 {
    background-color: var(--primary-gold) !important;
    border-radius: 0px !important; /* Look sharp */
    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. Spacing */
.container { padding-left: 2rem; padding-right: 2rem; }
main { gap: 4rem; }

/* 5. Winner Box Style */
#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>

⚡ Pegar en: JS Global Head

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // BOX "WINNERS"
    if (!document.getElementById('winner-box')) {
        const winnerBox = document.createElement('div');
        winnerBox.id = 'winner-box';
        winnerBox.innerHTML = '<small>20% DISCOUNT CODE:</small> WINNERS';
        document.body.appendChild(winnerBox);

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

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Lestis Custom Mode Active!");
    const footerConcat = document.querySelector('footer p');
    footerConcat.innerHTML += " - <b>Proudly Customized</b>";
  });
</script>

⚠️ Buenas prácticas para Widgets

Inserta los scripts externos en el bloque global donde se requiere la etiqueta y mueve la lógica al bloque que se ejecuta SI tu visitante ha aceptado las cookies, para evitar problemas legales.

Preguntas frecuentes para Devs

¿Puedo ejecutar código del lado del servidor?

No, el código se guarda como una cadena y se inyecta directamente en el head de tu sitio web.

¿Qué pasa si mi script da error?

El código vinculado al consentimiento de cookies está envuelto en un bloque try-catch. El error se registrará en la consola del navegador sin detener la carga del sitio.

Lestis no puede monitorizar todos los casos posibles: la inserción de código corre por cuenta y riesgo del propietario del sitio.

¿Soportáis scripts externos (src)?

Por supuesto. En el cuadro JS Head puedes insertar la etiqueta estándar <script src=".."></script>