Introducción
Bienvenido a un nuevo tutorial de la serie de entrenamiento de Modyo. Este tutorial se enfocará en Modyo Channels donde tu crearás una vista para poder desplegar entradas creadas en Modyo Content.
El enlace entre Content y Channels, es una de las funcionalidades más importantes a la hora de tener sitios dinámicos y fáciles de administrar. En el Tutorial de Creación de contenido, creaste el Espacio Bank, el Tipo de contenido Benefits y las Entradas. Ahora utilizarás este Tipo añadiendo los campos necesarios para generar los detalle según el diseño de Figma.
En este tutorial seguiremos usando la marca ficticia "Dynamic Bank", pero ahora nos enfocamos en crear, previsualizar, y publicar una entrada de tipo Benefits para la marca ficticia "Dynamic Cine".
Requisitos Previos
Completado los tutoriales:
Conocimientos de:
HTML
CSS
JS
La plataforma Modyo
Paso 1: Agregar campos al tipo "Benefits"
En la plataforma, haz click en Content, selecciona Espacios.
Haz click en el Espacio Bank y selecciona Tipos
Haz click en el tipo Benefits.
En la pantalla de tipo de contenido, agrega los siguientes campos:
Field | Name |
Multiline text | Short description |
Asset | Logo |
Multiline text | Description |
Multiline text | Commercial terms |
Multiline text | Validity |
Locations | Location |
Paso 2: Crear entrada con nuevos campos
Luego de tener el tipo con los nuevos campos, el siguiente paso es publicar contenido de este tipo. Para crear una nueva entrada llamada Dynamic Cine, sigue estos pasos:
En el menú lateral, selecciona Entradas.
Haz click en + Nueva Entrada.
Selecciona el tipo Benefits.
Llena el nombre Dynamic Cine e identificador dynamic-cine.
Haz click en Crear.
En la pantalla de campos de Entrada, llena los siguientes valores:
Field |
|
Short description | 40% de descuento en entradas todos los Viernes. |
Logo |  |
Cover |  |
Description | Disfruta todos los Viernes de un 40% en entradas para la mejor cartelera de Dynamic Cine, aprovecha este beneficios exclusivo para clientes Dynamic Bank pagando con tu Tarjetas de crédito o débito. |
Commercial terms | Beneficio válido para clientes Dynamic Bank al pagar con su Tarjetas de Crédito o Débito en entradas para el día Viernes con un máximo de 8 entradas diarias por cliente titular. |
Validity | Del 1 de Enero al 31 de Diciembre del 2021 |
Location | Santiago, Chile |
7. Haz click en Guardar.
Paso 3: Crear Página de Contenido "Benefits"
Después de crear la entrada con su contenido, ahora tienes que crear una Página de contenido dentro de tu sitio para así generar páginas dinámicas conectadas a Content.
Para crear una Página de contenido, sigue estos pasos:
En el menú lateral, selecciona Channels, haz click Sitios.
Selecciona tu sitio y haz click en Pages.
Haz click en + Nueva Página.
En el modal, selecciona la opción Página de Contenido.
Selecciona el espacio el Espacio Bank y Tipo Benefits. Define el nombre de la página y su ruta.
Presiona crear.
Para seguir el diseño Figma, pega el siguiente HTML remplazando el código que viene de ejemplo:
INDEX
<div class="mb-5" id="benefits"> <div class="container"> <div class="row"> {% for entry in entries %} <div class="col-12 col-md-6 col-lg-3 mb-4 pb-2 d-flex"> <a class="card shadow-sm w-100 text-decoration-none" href="{{ entry.meta.url }}" > <figure class="m-0"> <span class="badge_category bg-white text-primary d-inline-block text-uppercase px-3 py-1 rounded-sm small">{{ entry.meta.category}}</span> <img aria-hidden="true" src="{{ entry.fields['Cover'].url }}" alt="{{ entry.meta.title }}" class="w-100"/> </figure> <figcaption class="pt-4 px-4 pb-2"> <h4 class="h6 text-dark">{{ entry.meta.title }}</h4> <p class="text-muted">{{ entry.fields['Short description'] }}</p> </figcaption> </a> </div> {% endfor %} </div> </div> </div>SHOW
<div class="mb-5 mb-md-0 pb-5 pb-md-0" id="hero"> <div class="bg-dark mb-5 mb-md-0 pt-5 pb-0 py-md-5"> <div class="pattern_hero"></div> <div class="d-flex mb-0 my-md-5 hero_img"> <div class="row w-100 justify-content-end no-gutters"> <div class="col-10 col-md-7 wow slideInRight hero_img rounded-left" style="background-image: url({{ entry.fields['Cover'].url }})" ></div> </div> </div> <div class="hero_txt"> <div class="container"> <div class="row"> <div class="ml-3 ml-md-0 bg-info p-5 col-10 col-md-6 rounded text-white wow slideInLeft" > <span class="h6 badge_category bg-white text-primary d-inline-block text-uppercase px-3 py-1 rounded-sm" >{{ entry.meta.category}}</span > <h1 class="h2 font-weight-bold mb-2">{{ entry.meta.title }}</h1> <h3 class="h6 font-weight-bold mb-0"> {{ entry.fields['Short description'] }} </h3> </div> </div> </div> </div> </div> </div> <div class="container my-5 py-5"> <div class="row justify-content-between"> <div class="col-12 col-md-6"> <div class="col-7 d-flex-inline shadow-sm rounded px-5 py-4 mb-5"> <img src="{{ entry.fields['Logo'].url }}" alt="{{ entry.meta.title }}" class="w-100 my-2" /> </div> <div class="mb-4"> <h5 class="text-dark">Description</h5> <p class="text-muted">{{ entry.fields.Description }}</p> </div> <div class="mb-4"> <h5 class="text-dark">Validity</h5> <p class="text-muted">{{ entry.fields.Validity }}</p> </div> </div> <div class="col-12 col-md-5"> <div class="mb-4"> <h5 class="text-dark">Where</h5> {{entry.fields['Location'] | static_map: '800x400', 15, 'roadmap','https://cloud.modyocdn.com/uploads/5fc8b46c-1f64-404c-86a0-3db703f76398/original/pin_dynamic.png'}} </div> <div class="mb-4"> <h5 class="text-dark">Commercial terms</h5> <p class="text-muted">{{ entry.fields['Commercial terms'] }}</p> </div> </div> </div> </div> <div class="bg-light py-5" id="benefits"> <div class="container py-5"> <h3 class="text-dark text-center">Related benefits</h3> {% assign relateds = spaces['bank'].types['benefits'].entries | paginated: 5 %} <div class="py-5" id="productos"> <div class="row"> {% assign count = 0 %} {% for related in relateds %} {% if related.slug != entry.slug and 4 > count %} {% assign count = count | plus: 1 %} <div class="col-12 col-md-6 col-lg-3 mb-4 pb-2 d-flex"> <a class="card shadow-sm w-100 bg-white text-decoration-none rounded overflow-hidden" href="{{ related.meta.url }}"> <figure class="m-0"> <span class="badge_category bg-white text-primary d-inline-block text-uppercase px-3 py-1 rounded-sm small" >{{ related.meta.category}}</span > <img aria-hidden="true" src="{{ related.fields['Cover'].url }}" alt="{{ related.meta.title }}" class="w-100" /> </figure> <figcaption class="pt-4 px-4 pb-2"> <h4 class="h6 text-dark">{{ related.meta.title }}</h4> <p class="text-muted">{{ related.fields.Excerpt }}</p> </figcaption> </a> </div> {% endif %} {% endfor %} </div> </div> </div> </div> <style> .hero_img { height: 350px; } #hero .badge_category { position: absolute; top: 0; transform: translateY(-50%); } </style>Esta Página de Contenido ahora está conectada al Espacio de Dynamic Bank. Con ella puedes ingresar a los datos de la Entrada desde tu Sitio utilizando Liquid.
Ahora que ya tenemos nuestro Espacio y Tipo asociados a un Sitio, podrás activar Modo vista previa en un sitio. Para acceder al modo vista previa haz click en el ícono del "ojo" en la barra superior de acciones:
Conclusiones
¡Felicidades!
Haz finalizado el tercer curso de la serie de tutoriales de Modyo.
En este tutorial realizaste una de las principales herramientas que entrega Modyo a la hora de mantener tus canales digitales, agregaste una capa intermedia para poder visualizar el trabajo que se desarrolló en Modyo Content, y generaste una Página dinámicas conectada a tu Sitio en Modyo Channels.