Modyo Docs

# Pages

Pages (or pages) are what allow you to create a structure for your site, where you can add unstructured content and customize the routes where that content is displayed.

You can create two types of pages, widgets or content. Widget pages are based on a modular scheme so you can create your custom site using HTML, JS, and CSS. You can drag and place different widgets that we offer or custom widgets created by your team.

Content pages are our solution for connecting Content modules with Channels. Here you can create the index containing the entries and the structure for all the entries using HTML, JS, CSS, and Liquid.

To edit a page, click on the edit icon or on the name of the page to go to the editing view.

In the edit view, you will see a bar across the top, a central grid in the middle, and a sidebar with tabs.

In the bar at the top, you can find different actions and information:

Title: Located in the upper left, and indicates the name of the page you are modifying. On the right side of the name, you can see the current state of the page. The state will either be "Draft", "Under review", "Approved", "Pending changes", or "Published". To learn more about these states, review the versioning and team review section.

Date of publication: If the page has been published, it will indicate the date of the last publication.

Preview: This icon allows you to open a new tab with Preview mode to view the changes that have been made to the page without having to publish it.

Attention

You can preview the pages as a user without a session or a user with a Modyo session. For this, it is recommended you open or close the Modyo session on the site before entering preview mode. This is because logging in or out of preview mode can result in security errors such as x-frame-options or mixed-content, depending on the site's custom domain and SSL settings.

Differences: By clicking on the differences icon, you access the differences view of the page, where you can select two versions to compare, allowing you to execute the actions reset and rollback

Tip

If your page is in a draft state, the difference icon will not appear, since there is nothing to compare the current editable version with. To learn more about the differences and supports, check out the versioning section

Activity: Displays a sidebar that shows the activity associated with the page, such as modifications, posts and comments. At the bottom of this bar, you can type associated comments. If the page is under review, all assigned reviewers will receive a notification with the comment.

Other actions:

  • Archive: If a page isn't published, this action allows you to archive it. When a page is archived, by default it doesn't appear in the page index, keeping the site structure clean.
  • Duplicate: This action allows you to copy the editable version of the page you're on. The copied version is in a draft state.

Attention

Once you complete the copy action, you'll be redirected to the new page, therefore it's important to save all changes before using this action to avoid losing important information.

# Create a page

To create a new page, follow these steps:

  1. From the Modyo Platform main menu, select Channels, and click Sites.
  2. Select the site you want to add a new page.
  3. Click Pages.
  4. Click + New Page.
  5. Select the type of page (Widget or Content) you want to create.
  6. Fill in the Layout Name, Path, if necessary select the parent layout, and press Create.
  7. Customize the page depending on the type: adding or editing widgets for Widget Page or editing the Index and Show for Content Page.
  8. Once finished, click Publish.

To learn about the types of widgets you can add, see Widgets

To learn more about content pages, see Content Page

Main action: The green button in the upper right. This button can take different forms:

  • Save: Allows you to save all changes made to the page.
  • Send to review: If Team Review is enabled, and all changes have been saved, this action will allow you to submit the page for review and assign reviewers.
  • Publish: If the page is approved, you can go to the joint publication view using this action.

Tip

  • If a page has a parent page, you can only publish it if the parent page is published.
  • If a page has children, you can only unpublish it if all of its child pages are unpublished.
  • If a page has children, you can only archive it if all of its child pages are archived.

Secondary Actions:

  • Force publish: If you are a site administrator, you have the option to publish pages at any time, including skipping the team review process.
  • Unpublish: If the page is published, you will see this action and can unpublish the page.

The central grid is where you can position your widgets. You can move widgets back and forth using the drag-and-drop functionality.

In the right side section there are three tabs:

  • Add Widgets: allows you to select widgets from a list and add them to the grid.
  • Edit Widget: allows you to change different properties and filters for each widget.
  • Properties: allows you to modify the name, excerpt, path, parent, privacy, grid layout, and meta tags of the page.

# 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 results in smaller 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 where the image you want to modify is located.
  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, through a ticket to Modyo (opens new window).

# Widget Page

Here you can customize your page using preset widgets from the following list:

  • HTML: Allows you to enter HTML and CSS code without validations. While markup, styling, and templating are allowed in HTML widgets, scripting is not. If you need to include Javascript, you should create a custom widget.
  • Rich text: Allows you to make use of a rich text editor, in which you can write and edit text and swap to a code view to check or modify the HTML directly.

Warning

The rich text widget has an automatic formatter, so the code you write in the code view may be affected.

  • Content List: Displays a list of Content entries using filters by space, type, language, tags, and category. To modify what these widgets look like, you must do so from the Widgets section in Templates.
  • Content featured: Displays a list of entries as “hero” images in a carousel.
  • Custom: Clicking this displays a list of all custom widgets that you have created and published in the Widget Builder.

Once you have selected a widget in the central section, the focus will go to the side tab, where you can find different configuration options for the widget and if you select a custom widget, you will find a link to go directly to its editing view in widget builder and the list of variables that the widget is using. If you want to overwrite the value of a particular variable for that instance of the widget on that page, you must select the checkbox to the left of the variable and change the value it takes.

# Settings

In this tab you will find options of common properties between all pages:

  • Name
  • Parent
  • Path
  • Excerpt
  • Grid
  • Privacy
  • Custom meta tags

Warning

Modyo has reserved paths for the pages, therefore you cannot use these as paths for your custom pages:

  • 404
  • 422
  • 500
  • admin
  • auth
  • crossdomain
  • dist
  • forms
  • javascript
  • login
  • logout
  • manifest
  • ping
  • preview
  • profile
  • robots
  • search
  • serviceworker
  • session
  • site_logout
  • sitemap
  • stylesheets
  • uploads
  • widget_manager

# Content Page

Displays the entries of your content types from a single page using content pages.

# Prerequisites

In order to display content on a site, you must meet certain conditions:

  • Have a space with at least one language (the same language as the site) and at least one Content Type. For more information, see Create a Space and Create a Type
  • Have entries published in the language of the site. For more information, see Entries and Locales

Tip

You can use any name you want for the views, regardless of the type or space you want to associate them with. Always keep in mind that entries will only be displayed if they have a published version in the language of the site where you are creating these views.

These pages are composed of two sections, Index and Show.

# Index

The index page will display the list of all entries in the content type. Here you can select the following options:

# Edit

  • Enable Entry Index: Disabled by default. The path it takes is the name given to the page when it was created. If this option is disabled, only Show pages will be accessible. Users attempting to access will be shown a 404 error.
  • Layout: The Layout template that is loaded for the Index.
  • Custom Meta Tag: Add custom meta tags to optimize index SEO. This meta tag will only be uploaded for the Index, not for the Show. You can also use Liquid to load dynamic meta tags.

# Show

The tab where you define what dynamic entries will look like. Here you can select the following options:

# Edit:

  • Layout: The Layout template that is loaded for the Show.
  • Custom Meta Tag: Add custom meta tags to optimize the SEO of the Show. This meta tag will only be uploaded for the Show, not for the Index. You can also use Liquid to load dynamic meta tags.

A basic example of Liquid+HTML code that you can use in Show is:

<div>
  <h1 class="title">{{ entry.name }}</h1>
  <time>{{ entry.published_at | format_date }}</time>
  <span class="url">
    <a href="{{request.url}}">{{request.url}}</a>
    </span>
</div>

<div>
  <div class="description">
    {{ entry.description }}
  </div>
</div>

This snippet takes entry.name, entry.published_at, request.url, and entry.description to generate a dynamic page depending on the entry you select.

Tip

To learn more about how to use Liquid, go to Liquid markup.

To learn what fields you can use with the entry drop, see Content Drops. You can complement it with the use of Content Filters.

# Settings

Displays the type of content and the space to which this page belongs to. You'll also have options to change the name, parent page, path, and excerpt.

Tip

If a custom domain is enabled, the URL is the same as the one in Site Settings > Domains.

In case it is not enabled, the URL will be in the form account_url/site_host.

The excerpt is added as part of the meta tags to improve SEO. This is possible for both page types and Templates. Inside the <head> a tag is added:

<meta name="description" content="{{ page.excerpt }}"/>

# Child routes delegation

Enable route delegation to allow absolute control over the sub-routes of the page through the JavaScript router.

# Privacy

"If you enable privacy on a page, a session will be required to view this page. In addition to privacy, you can also associate Segments, so that only users belonging to those segments will be able to access this page. Those who are not part of the selected segment group will be redirected to the previous page or the site's home page.

# Meta tags

Meta tags define the content of a page. Search engines rely on them to provide the user with a search list. In this section, you can add meta tags to pages and modify the value of existing meta tags, to enhance the page's SEO. With the tags added to the pages, you can decide whether to use the default value, overwrite the value available for the tag, or remove the tag from the page.

To access the list of meta tags on the page, you must use the {{ page.meta_tags }} Liquid drop. We recommend that you go through the example in the SEO section of the Template builder.

# Add a new meta tag

To add a new meta tag to your site, follow these steps:

  1. In Modyo Platform, from the main menu, expand Channels, and click on Sites.
  2. Click on your Site.
  3. Expand Site settings and click SEO.
  4. In the Custom Meta Tags section, click + New meta tag.

On the screen that appears, you can choose between different meta tags and assign them a value. This value can be dynamic if Liquid is used. If you activate the Replicate meta tag on pages option, a meta tag will be created in the Properties section of all your pages.

As part of the base Template, we include the seo Snippet which contains the information needed to print the values of the meta tags depending on whether it is a Site, a Page, or an Entry.

Tip

Please note that for the meta tags to take effect on your page, you must publish the changes.

For more information about how we use dynamic meta tags on sites, visit site settings, SEO section.

← Navigation →