Skip to main content
Design System

V4 Page Templates

On v4, there are four types of page templates that the users can choose. On the page creation of each page template, the user has options to display or not some extra sections, such as alert space and featured space, and which type of layout the first content section will have.

  • Homepage

    The homepage template has to be used as the option for the site's Homepage. This template has, as default, the Hero Space checked as visible, and, on the page creation, users have the option to select the layout of the First Section and the choice of display the Feature Space section. This template allows for a more custom-designed page. After the first section, the user can find the <!-- Start - Add Sections --> comment on the source code, where they can start to bring snippets from the Section Layout - v4 snippets list to build new sections on this page. The difference between this template and the Landing Page template is the size of the default Hero Space.

  • Landing Page

    This template can be used when the user is building a page that will hold more information than usual pages, and the content has to be divided into different sections. By default, this page has the Hero Space visible, and the user has the option to select the layout of the First Section and the choice of display the Feature Space section. As the Homepage template, in the source code of this template, users will build new sections for the page by using snippets from the Section Layout - v4 snippets list. This page will behave like the Home page, where users will find information and be redirected to other pages to learn more about the specific content.

  • Standard Page

    The Standard Page can be considered the simple text page template and will probably be the frequently used one. Users will choose the First Section layout option on the page creation - between Basic Full-Width and Secondary Navigation. There are also options to display a Callout, Hero Space, or Feature Space on the page. Different from the Homepage and Landing page templates, the Standard Page doesn't have the <!-- Start - Add Sections --> comment on the source code (after the first section - <main-content> ), but this doesn't mean that users cannot build new sections on this page template.

  • Column Page

    The Column Page template offers the user the option to create a page with the First Section layout with two, three, or four columns. By default, this page has the Hero Space visible, and the user can turn the Feature Space visible or not on the page creation box.

If you need a graphical reference to visualize the difference between the four template types, you can check it on this link.

Anatomy of a V4 page

The V4 templates are created based on the idea of sections. The default template already has different tags that will generate the sections; these are:

v4 page structure in detail

  • Alert Space

    To have this section displayed on the page, you need to select the Display Alert Space option on the Properties of the page. The tags presented in this section are alert-space-Multi edit and alert-space. The first tag is responsible for creating the Multi edit options of an alert (display icon, type of alert). The alert-space tag holds the alert title, text, and link. To change the content of the Alert, you will need to click on the Multi edit button on the right top once you are inside the edit page.

  • Hero Space

    By default, the Homepage and Landing page will have a hero space with a media option. You can change the type of hero space if you want; you need to replace all the content from the comment line Start - Hero Space to the comment line End- Hero Space. It's possible to find other Hero Space types into the Snippet list Hero Spaces – V4. If you don't need a hero space, you can deselect the Display Hero Space option on page creation, and it will not show up on the page. You need to go to the Multi edit page to edit the hero space.

  • Intro Section

    The Standard Page template have an <section-intro> tag that will hold some introductory content for the page. The mobile version of the page will display the secondary nav under the intro content of the page; because of that, have in mind that this section should not hold a big chunk of information. This space is dedicated only to giving our visitors a brief introduction to the page content. A good content idea for this section is a title and a copy text.

  • Main Content

    As the name suggested, here is where we should add the page's main content. On the V3, by default, we would have five main contents on the page template, and they would be displayed depending on the page type/options you selected. On V4, we only have one main-content tag, but the template supports as many as the main content tags you would like to add. The main contents will be separate sections with distinct subjects on the front end. You can add the sections pre-coded with the main contents by selecting the snippets from the Section V4 list. It would be best to keep in mind that we need a main-content open and close tag to show up on the front-end. One main content can have as many as editable regions you need. Editable areas limit parts of the content that can be editable, so it doesn't necessarily mean that we need a new section for every editable region.

  • Sidebar Content

    This section only gets to be displayed on the front-end if on page creation (or on page's properties) the First Section Layout selected has the Sidebar option on its title. The name of this tag is pretty straightforward, and it will divide the section content into two different size columns so we can add sidebar content. Some snippets also hold some sidebar structure if you need to add a section like this after the first section.

  • Row-Column

    This kind of section only exists on the Column Page Template. It creates the rows in a column that will display on the front-end. We have four column options, and we also have four row-column tags to hold content for each column.

  • Feature Space

    This last section of our template should hold the last piece of information that needs your visitors' extra attention. Like the Hero Space, this section is togglable, and edit it. You need to go to the Multi edit page. It's also possible to replace the line of codes from the Start – Feature Space to the line End – Feature Space to a different snippet you think would be a better design for this section.