# Creación de una Página de Contenido

# 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".

The final product after this tutorial

Ver Figma del diseño

# Requisitos Previos

Completado los tutoriales:

Conocimientos de:

  • HTML
  • CSS
  • JS
  • La plataforma Modyo

# Paso 1: Agregar campos al tipo "Benefits"

  1. En la plataforma, haz click en Content, selecciona Espacios.
  2. Haz click en el Espacio Bank y selecciona Tipos
  3. Haz click en el tipo Benefits.
  4. 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:

  1. En el menú lateral, selecciona Entradas.
  2. Haz click en + Nueva Entrada.
  3. Selecciona el tipo Benefits.
  4. Llena el nombre Dynamic Cine e identificador dynamic-cine.
  5. Haz click en Crear.
  6. 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
  1. 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:

  1. En el menú lateral, selecciona Channels, haz click Sitios.
  2. Selecciona tu sitio y haz click en Pages.
  3. Haz click en + Nueva Página.
The content page window
  1. En el modal, selecciona la opción Página de Contenido.
  2. Selecciona el espacio el Espacio Bank y Tipo Benefits. Define el nombre de la página y su ruta.
  3. 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:

The final product after this tutorial in preview mode

# 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.

Last Updated: 14/9/2022,