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. The widget pages are based on a modular layout so you can create your custom site using HTML, JS, and CSS. You'll be able to drag and arrange 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, you must click the edit icon () or the page name to go to the edit 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 top bar, 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.

Publication date: On the right side of the top bar, if the page has been published, the date of the last publication will be indicated.

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

Attention

You can preview pages as a user without a session or with a Modyo session. For this, it is advised to log in or out of Modyo from your site before entering preview mode, because if you log out while in preview mode you might encounter security errors like x-frame-options or mixed-content, depending on your site's SSL and custom domain settings.

Differences : Clicking on the diff icon will take you to the diff view of the page which allows you to select two versions to compare, allowing you to execute the actions reset and rollback.

Tip

If your page is in "draft" status, the differences icon will not appear, since there is nothing to compare with the current editable version. To learn more about differences and backups, review the versioning section.

Activity : Clicking this icon displays a sidebar showing you the activity associated with the page, such as edits, posts, and comments. At the bottom of this bar, you can type associated comments. If the page is under review, everyone who is assigned as a reviewer will receive a notification with the comment.

Other actions :

• Archive : If a page is not published, this action allows you to archive it. When a page is archived, it will not appear in the page index and allows you to keep the site structure clean.
• Duplicate : This action allows you to copy the editable version of the page you are currently working on. The copied version starts in a draft state as if it were a newly created page.

Warning

Once the copy is complete, it takes you to the new page, it's important to save all changes before using this action so you don't lose 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, then you have the option to publish pages at any time, including skipping the team review process.
• Unpublish: If the page is published, then you will see this action and can unpublish the page.

The central grid is the place where you can position your widgets. You can move widgets back and forth using the drag-and-drop functionality by dragging them from the icon.

In the right side section you will find 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.

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 middle section, the focus will be shifted to the side tab, where you can find different widget configuration options and if you select a custom widget, you will find a link to go directly to its edit view in widget builder with a list of the 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 need to select the checkbox to the left of the variable and change the value.

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, so 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

Display 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 freely choose the name of each view, regardless of the space and content type you choose. You have to keep in mind that it is required to have an entry published in this site language in order to see content in 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, see Liquid markup

To learn what fields you can use with the entry drop, go to Content Drops.

Settings

Displays the type of content and the space to which this page belongs. You'll also have options to change the name, parent page, path, and an 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 the child routes delegation to allow the full control of the page routes from the Javascript router.

Privacy

If you enable the "Private" option on a page, then a user must be logged in with a session to view this page. Along with privacy, you can also associate Segments, so that only users belonging to specific user segments can access this page. Those who are not part of the group of selected targets will be redirected to the previous page or to the home page.

Meta tags

Meta tags define the content of a page and 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 enrich the SEO of the page. 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 Sites.
2. Click 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 have the option to 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 a 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.