Saltar al contenido principal

Encabezado y pie de páginas públicas

Todas las páginas públicas comparten un encabezado (header) y un pie (footer). Aquí es donde va el logo, el menú de navegación, tus datos de contacto y los enlaces sociales.

Cómo se configura​

Las páginas del sitio público se generan con dos "partials" (fragmentos HTML) que puedes editar:

  • web/partials/header.php — encabezado.
  • web/partials/footer.php — pie.

El framework los crea automáticamente en la primera instalación con un contenido básico, y desde el CMS puedes editarlos.

Desde el CMS​

Ve a Páginas Web → Configuración → Encabezado y pie.

Verás dos editores tipo CodeMirror (con resaltado de sintaxis HTML):

  • Editor de header.
  • Editor de footer.

Puedes escribir cualquier HTML válido, más las etiquetas del framework ({{campo}}) si necesitas mostrar datos dinámicos.

Header típico​

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="/">
      <img src="/web/assets/logo.png" alt="Mi Empresa" height="40" />
    </a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="/">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="/productos">Productos</a></li>
        <li class="nav-item"><a class="nav-link" href="/nosotros">Nosotros</a></li>
        <li class="nav-item"><a class="nav-link" href="/contacto">Contacto</a></li>
      </ul>
    </div>
  </div>
</nav>
<footer class="bg-dark text-white py-5 mt-5">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h5>Mi Empresa</h5>
        <p>Descripción breve.</p>
      </div>
      <div class="col-md-4">
        <h5>Contacto</h5>
        <p>
          📧 hola@miempresa.com<br />
          📞 +56 9 1234 5678
        </p>
      </div>
      <div class="col-md-4">
        <h5>Síguenos</h5>
        <a href="https://instagram.com/miempresa" class="text-white me-2">Instagram</a>
        <a href="https://facebook.com/miempresa" class="text-white">Facebook</a>
      </div>
    </div>
    <hr />
    <p class="text-center mb-0">
      © 2026 Mi Empresa. Todos los derechos reservados.
    </p>
  </div>
</footer>

Sube tu logo desde el gestor de archivos del CMS y copia la URL. Úsala en el header:

<img src="/cms/views/assets/files/logo.png" alt="Mi Empresa" />

O, más limpio, guarda el logo en web/assets/ (carpeta pública del sitio):

<img src="/web/assets/logo.png" alt="Mi Empresa" />

CSS y JS globales del sitio público​

Si quieres agregar estilos o scripts globales (que apliquen a todas las páginas públicas), tienes dos opciones:

  1. En el propio header: agrega <link> a tu CSS y <script> a tu JS antes del cierre </head> o </body>.
  2. En archivos separados: coloca tu CSS en web/assets/styles.css y agrégalo al header con <link rel="stylesheet" href="/web/assets/styles.css">.

Cambios en vivo​

Al guardar el header o footer, todas las páginas del sitio público reflejan el cambio inmediatamente (a menos que tengas caché de página activo — en ese caso puede tardar unos minutos o hasta que se regenere).

Errores comunes​

  • Etiquetas HTML mal cerradas — el sitio puede verse roto.
  • Estilos que sobrescriben Bootstrap de forma agresiva y hacen ver el sitio raro.
  • JavaScript con errores — puede romper interacciones en todas las páginas.

Prueba tus cambios en un navegador antes de darlos por buenos. Si algo se rompe, revierte al backup automático (el framework guarda versiones anteriores).

¿Qué sigue?​