# Plantillas

La arquitectura base y la apariencia son aspectos esenciales de un sitio. En la sección de Plantillas, puedes ajustar las plantillas base, así como el JavaScript y CSS globales y modificar la estructura según sea necesario.

Cuando creas un sitio, se completa con plantillas distintas para generar el tema Minimal y puedes empezar a crear tu canal digital en él. Puedes también crear snippets de código HTML, JS y CSS para extender la funcionalidad de tu sitio.

En la sección de plantillas, el menú principal se oculta para optimizar el área de trabajo. En la parte superior izquierda, encuentras el nombre de la sección y el estado actual de la publicación:

  • Publicado: Hay una versión publicada y que la versión editable es idéntica.
  • Cambios pendientes: Existe una versión publicada, pero hay modificaciones pendientes de publicar en tu versión editable.
  • En revisión: La revisión en equipo está activada y se ha enviado a revisión la versión editable.
  • Aprobado: La revisión en equipo está activada y las condiciones de revisión del elemento se han cumplido. En este estado, la plantilla está lista para ser publicada.

En la parte superior derecha, puedes ver la última fecha de publicación e íconos con las acciones disponibles:

Vista previa: Da click en este ícono para abrir una nueva pestaña con la vista previa de las plantillas. Aquí puedes visualizar todos los cambios en tus plantillas, como si estuvieran publicados.

Atención

Puedes previsualizar los cambios como usuario sin sesión o usuario con sesión activa de Modyo. Para esto, recomendamos iniciar o cerrar la sesión de Modyo en el sitio antes de entrar al modo vista previa, dado que si se inicia o cierra sesión dentro del modo vista previa. Esto se debe a que iniciar o cerrar sesión dentro del modo vista previa puede generar errores de seguridad como x-frame-options o mixed-content, dependiendo de la configuración de dominios personalizados y SSL del sitio.

Diferencias: Compara los cambios entre múltiples versiones de tus plantillas. Por defecto, Modyo compara la versión publicada con la versión editable. Usa los selectores de versiones para comparar con versiones de respaldo.

Tip

Cada vez que publicas una versión, la versión que estaba publicada pasa a ser una versión de respaldo. Por defecto, se guardan hasta 20 respaldos, permitiéndote comparar, restaurar y hacer rollback a las últimas 20 versiones

Para más información sobre el versionamiento, consulta la sección de versionado.

Buscar en plantillas: Despliega una barra lateral con un buscador de texto que explora todas las plantillas editables.

Ver actividad: Despliega una barra lateral que muestra el historial de actividad y donde puedes leer y escribir comentarios. Haz click en ver detalle para mostrar la información completa de cualquier registro de actividad.

Más acciones: Este ícono te permite archivar o borrar una plantilla.

La última opción en la bara superior muestra las acciones principales que puedes llevar a cabo:

  • Guardar: Guarda todos los cambios de todas las plantillas.
  • Enviar a revisión: Cambia el estado de las plantillas a "Esperando revisión". En este estado puedes seguir haciendo modificaciones, pero cada cambio será notificado por correo a los revisores asignados.
  • Forzar publicación: Solo disponible para administradores del sitio, permite publicar inmediatamente una plantilla, incluso si está esperando revisión
  • Rechazar: Vuelve al estado "En edición" y notifica a los revisores que el elemento fue rechazado.
  • Publicar: Una vez que la plantilla ha sido aprobada, puedes enviarla a publicar.

En el área de trabajo principal, hay dos secciones:

  • El área de edición: El hacer click en una plantilla del listado del área de selección del lado derecho abrirá la plantilla en el área central con un editor de texto. Si abres múltiples plantillas, abrirán como pestañas en el área de trabajo.
  • El área de selección de plantillas: Selecciona la pestaña de vistas o snippets, según requieras.

# Layouts

Modyo ofrece tres layouts predefinidos:

  • Home: Exclusivamente para la página principal del sitio.
  • Base: Todas las páginas, excepto la de inicio, usan este layout.
  • Error: Empleado en las vistas de error (404, 401), presentando un diseño limpio.

Para crear un nuevo layout:

  1. En la sección de Plantillas da click en la pestaña Vistas
  2. Da click en el botón + junto a Layouts.
  3. Agrega la Ruta y haz clic en Añadir.

Esto te permite definir una nueva estructura base para usar en las páginas.

Puedes usar como base este código que contiene todo lo necesario para que tus páginas usen los elementos del sitio, como el encabezado, pie de página, service worker y la configuración de Google Tag Manager. También puedes modificar el código, según requieras.

{% html5 %}
<head>
  {% snippet 'shared/general/head' %}
</head>

{% body %}
{% snippet 'shared/general/body_tag_manager' %}
{% snippet 'shared/general/header' %}

{{ site.breadcrumb }}
<div id="main-layout">
{{ content_for_layout }}
</div>

<script>{% snippet "shared/serviceworker/register_js" %}</script>
{% snippet 'shared/general/footer' %}

{% endbody %}
{% endhtml5 %}

Para aplicar un layout nuevo a una página, sigue estos pasos:

  1. Ve a la sección Páginas
  2. Selecciona la pestaña Propiedades.
  3. Elige el layout que deseas usar en tu página.
  4. Envía a revisión o publica tu layout, según el caso.

# Errores en Vistas

En la sección de vistas puedes personalizar cuatro tipos de errores:

  • Deshabilitado: Se muestra cuando el sitio al que intentas acceder está deshabilitado.
  • 404: Si en la configuración de restricciones del sitio decides mostrar el 404 en lugar de redireccionar a la página de inicio, se muestra este error al ingresar a una URL no definida.
  • Privacy: Se muestra cuando no tienes permisos para acceder al sitio o a una de sus páginas.
  • Template: Visible cuando la página cargada tiene un error de sintaxis de Liquid. Es poco probable que veas esta vista, debido a que a partir de Modyo 8.1 la plataforma realiza una verificación de la sintaxis antes de guardar y publicar cambios en Plantillas.

# CSS y JavaScript

Crea vistas personalizadas de CSS y JavaScript para importar tus librerías a Modyo Platform. Para ello, sigue estos pasos:

  1. En la sección de Plantillas da click en la pestaña Vistas.
  2. Dirígete a la sección CSS o JavaScript, debajo de la sección de Layout.
  3. Da click en el botón **+**correspondiente.
  4. Agrega la Ruta y haz click en Añadir.
  5. Una vez que hayas terminado de editar la Hoja de Estilo o Javascript, debes incluirla en tu layout. Para ello, puedes usar los siguientes filtros de Liquid:
  • asset_url: Para definir el tipo de archivo
  • stylesheet_tag: Genera un tag para incluir la vista de CSS.
  • script_tag: Genera un tag