Introduction
Welcome to a new tutorial in the Modyo training series. This tutorial will focus on Modyo Channels where you'll create a custom view to display posts created in Modyo Content.
The link between Content and Channels is one of the most important functionalities when it comes to having dynamic and easy-to-manage sites. In the Content Creation Tutorial, you created the Space Bank, the Content Type Benefits and the Entries. You will now use this Type by adding the necessary fields to generate the details according to the Figma design.
In this tutorial we will continue to use the fictional brand “Dynamic Bank”, but now we focus on creating, previewing, and publishing a Benefits entry for the fictional brand “Dynamic Cine”.
Prerequisites
Completed the tutorials:
Familiarity with:
HTML
CSS
JS
Modyo's platform
Step 1: Add fields to the type “Benefits”
In the platform, select Content and click Spaces.
Click the Bank Space and select Types
Click the Benefits type.
In the content type screen, add the following fields:
Field | Name |
Multiline text | Short description |
Asset | Logo |
Multiline text | Description |
Multiline text | Commercial terms |
Multiline text | Validity |
Locations | Location |
Step 2: Create entry with new fields
After you have the type with the new fields, the next step is to publish content of this type. To create a new entry called Dynamic Cine, follow these steps:
In the side menu, select Entries.
Click + New Entry.
Select the Benefits type.
Fill in the Dynamic Cine name and dynamic-cine identifier.
Click Create.
On the Input fields screen, fill in the following values:
Field |
|
Short description | 40% off tickets every Friday. |
Logo |  |
Cover |  |
Description | Enjoy 40% off every Friday in tickets for the best movies in Dynamic Cinema, these benefits are exclusive to Dynamic Bank clients paying with your credit and debit cards. |
Commercial terms | Benefit valid for Dynamic Bank clients by paying with your credit or debit cards in tickets for Friday with a maximum of 9 tickets daily per client. |
Validity | January 1st to December 31st, 2021 |
Location | Santiago, Chile |
7. Click Save.
Step 3: Create “Benefits” Content Page
After creating the post with its content, you now have to create a Content Page within your site in order to generate dynamic pages connected to Content.
To create a Content Page, follow these steps:
In the side menu, select Channels, click Sites.
Select your site and click Pages.
Click on + New Page.
In the modal, select Content Page.
Select the space Bank and Type Benefits. Type the name of the page and its path.
Click Create.
To follow the Figma layout, paste the following HTML replacing the code that comes from the example:
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>
This Content Page is now connected to the Dynamic Bank Space. With it you can access the Entries' data from your Site using Liquid.
Now that we have our Space and Type associated with a Site, you can turn on Site Preview Mode. To access preview mode click on the “eye” icon in the top action bar:
Conclusion
Congratulations!
You have finished the third course of the Modyo tutorials series.
In this tutorial, you completed one of Modyo's main tools when it comes to maintaining your digital channels, adding a middle layer to view the work that went into Modyo Content, and generated a Dynamic Page connected to your Site in Modyo Channels.