Modyo Docs

# Templates

The base architecture and appearance are essential aspects of a site. In the Templates section, you can adjust the base templates as well as the global JavaScript and CSS and modify the structure as needed.

When you create a site, it comes complete with different templates to generate the Minimal theme, and you can start creating your digital channel on it. You can also create HTML, JS and CSS code snippets to extend the functionality of your site.

In the templates section, the main menu is hidden to optimize the work area. At the top left, you'll find the name of the section and the current status of the post:

  • Published: There is a published version and the editable version is identical.
  • Pending changes: There is a published version, but there are changes pending publication in your editable version.
  • Under review: team review is active, and the editable version has been submitted for review.
  • Approved: team review is enabled and the item's review conditions have been met. In this state, the template is ready to be published.

At the top right, you can see the last date of publication and icons with the available actions:

Preview: Click on this icon to open a new tab with a preview of the templates. Here you can view all the changes to your templates, as if they were published.

Attention

You can preview the changes as a non-session user or a user with an active Modyo session. For this reason, we recommend starting or closing the Modyo session on the site before entering preview mode, given that if you start or close the session in preview mode. This is because logging in or logging out in preview mode can generate security errors such as x-frame-options or mixed-content, depending on the site's custom domain and SSL configuration.

Differences: Compare changes between multiple versions of your templates. By default, Modyo compares the published version with the editable version. Use the version selectors to compare with backup versions.

Tip

Every time you publish a version, the version that was published becomes a backup version. By default, up to 20 backups are saved, allowing you to compare, restore and roll back to the last 20 versions

For more information on versioning, refer to the section on versioning.

Search in templates: Display a sidebar with a text search engine that explores all the editable templates.

View activity: Display a sidebar that shows the activity history and, where you can read and write comments. Click on view detail to show the full information of any activity log.

More actions: This icon allows you to archive or delete a template.

The last option in the top bar shows the main actions you can perform:

  • Save: Save all changes to all templates.
  • Submit for review: Change the status of the templates to “Awaiting Review”. In this state, you can continue to make changes, but each change will be notified by email to the assigned reviewers.
  • Force publication: Only available to site administrators, allows you to immediately publish a template, even if it is awaiting review.
  • Reject: Returns to “In Edit” status and notifies reviewers that the item was rejected.
  • Publish: Once the template has been approved, you can send it to publication.

In the main work area, there are two sections:

  • The editing area: Clicking on a template from the list in the selection area on the right side will open the template in the central area with a text editor. If you open multiple templates, they will open as tabs in the workspace.
  • The template selection area: Select the views or snippets tab, as required.

# Layouts

Modyo offers three predefined layouts:

  • Home: Exclusively for the main page of the site.
  • Base: All pages, except the home page, use this layout.
  • Error: Used in error views (404, 401), showcasing a clean design.

To create a new layout:

  1. In the Templates section, click on the Views tab
  2. Click the + button next to Layouts.
  3. Add the Route and click Add.

This allows you to define a new base structure for use on pages.

You can use this code as a base that contains everything necessary for your pages to use the elements of the site, such as the header, footer, service worker and Google Tag Manager configuration. You can also modify the code as needed.

{% 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 %}

To apply a new layout to a page, follow these steps:

  1. Go to the Pages section
  2. Select the Properties tab.
  3. Choose the layout you want to use on your page.
  4. Submit for review or publish your layout, as required.

# Inserting an Image with Liquid

Modyo recommends using the Liquid tag and not the asset URL to insert images into your content. This allows you to resize or replace an image everywhere it's in use, and ensure that any changes are immediately reflected.

In addition, Modyo converts the image to webp format with lossless compression quality. This generates lighter images, with shorter load times, and without loss of quality.

# To get the Liquid code from an image:

  1. Click on the media icon above your work area
  2. Click on the image.
  3. Click on the copy icon, next to the Liquid tag in the image.

# To replace an image, follow these steps:

  1. Click on content.
  2. Select the space that the image that you want to modify is in.
  3. Click on media.
  4. Select the image you want to replace.
  5. Click on the upload image icon above the current image.
  6. Select the new image.
  7. Click on update information.

Tip

Your account's CDN needs to be in the cloud for changes to be reflected immediately, otherwise you'll need to request cache validation via a ticket to [Modyo] (https://support.modyo.com/hc/en-us).

# Errors in Views

In the views section, you can customize four types of errors:

  • Disabled: Displayed when the site you're trying to access is disabled.
  • 404: If in the site restrictions configuration you decide to show 404 instead of redirecting to the home page, this error appears when entering an undefined URL.
  • Privacy: Shown when you don't have permissions to access the site or one of its pages.
  • Template: Visible when the loaded page has a Liquid syntax error. It's unlikely that you'll see this view, as from Modyo 8.1 onwards, the platform performs a syntax check before saving and publishing changes to Templates.

# CSS and JavaScript

Create custom CSS and JavaScript views to import your libraries to Modyo Platform. To do this, follow these steps:

  1. In the Templates section, click on the Views tab.
  2. Go to the CSS or JavaScript section, under the Layout section.
  3. Click on the corresponding + button.
  4. Add the Route and click Add.
  5. Once you have finished editing the Style Sheet or Javascript, you must include it in your layout. To do this, you can use the following Liquid filters:
  • asset_url: To define the file type
  • stylesheet_tag: Generate a tag to include the CSS view.
  • script_tag: Generate a tag

← Expressions and Variables →