Templates
      Back to home
      1. Knowledge Base
      2. Templates

      Section Templates

      Add reusable sections that ensure design consistency and repeatability

      Section Template are a key concept in Nyla that enable you to have linked, consistent designs across your site as well as having reusable, fully composable templates you can reuse over and again.
      This article walks you through: 

      Introduction

      Section templates are fundamental to both the building and editing experience. Using them correctly can ensure that you take full advantage of platform capabilities and optimise for ease of use when editing your site. Therefore, in order to get the most out of Nyla, we recommend familiarising yourself with how templates work and why they are important. 
      Templates have two key modes for different use cases: 
      Quick Edit 

      Quick edit is the view that you see when you want to quickly dive into a template and change the content for only the place where you're using it.

      An example might be a "Hero" section template that you use on 10 different pages on your site. If you want to change the image on just the page you're editing, you would use quick edit and overrides to do that. 

      Quick edit mode enables site managers to build pages quickly and easily, and ensures that what you build looks great and fully on brand. When in Quick Edit, you only see Overrides in order to edit the content on the page you are building. 

      Template Edit 

      Edit mode is used when building or updating section template funtionality and design settings. 

      Templates enable Nyla builders and designers to create reusable sections that remain consistent in all places that they're used. You can set which parts of the template should be Overridable to dictate what should be editable by users.  

      Once you publish a template and add it to pages, you can then update it everywhere all at once by using edit mode. This means that this mode is incredibly powerful, but needs to be used carefully once your site is live. 

      When in Template edit mode, section templates follow the same Publish flow as a page or other Nyla entity. A section template can have a live and draft version, and to move your changes to your live site, you must queue and publish your section template.

      Create a Section Template

      To create a section template:
      1. Edit a section you want to turn into a template
      2. Click on Save as template on the section header
      3. Give the section template, choose at least one category, and press Create
       
      A section template can be created as from a blank section and then content can be added, or you can convert an existing section into a template.
       
      Create ST.png
      Once you have created a section template, you will be placed in the Edit mode of the section template. All changes you make to this edit template view will update across all instances of the section template.

      Edit a section template

      When editing a section template, any changes you make to the template can be saved and previewed as a draft (see Publish) before being queued and published to your live site.

      Edit template

      Changes to your section template will update in every instance the template is used. The exception to this is if you have existing Overrides. If the design of an override is changed, the overrides on other instances will remain.
      Edit.png
       
      To edit a section template:
      1. Click on the section you want to edit
      2. Click on Edit template

      Adding content

      Content added to a section template will be added to all instances of the template.

      Deleting content

      If you delete a content item from the main Section template, each corresponding content item in other instances will also be deleted (even if they’ve been overridden with unique content). This action cannot be undone. You can add new content items to the Section template.

      Exit the edit template view

      After you have made and saved (or discarded) changes, you can exit the Edit section template view by clicking on the ❌ on the top left of the header.

      Template settings

      You can change the section template settings by clicking on Settings while editing a template, or by clicking on the ⚙️ settings cog.
      While changing your template settings, you can change the Name, Categories, and delete the template.

      Using Overrides: Quick edit

      If a section template has Overrides, the quick edit view will allow you to quickly access and change these overrides. Examples of overrides might be the heading or image on an Image and Text Section.
      See Overrides for more information.
      Quick edit.png

      Adding section templates

      To add a section template to your page:
      1. Open the page you want to add the section and:
        1. Click on the ➕ button on the header
        2. Click the ➕ between sections on the main page
        3. Click on + Add a section at the bottom of the sections
      2. Choose the section you would like to add, or choose to Add a blank section
       
      Add section template.png
       

      Examples of use

      With no overrides

      Using a section template with no Overrides means that the design and content will remain the same anywhere the section is used.
      For example, if you wanted to have a brand promise that was consistent everywhere across your site, you could create a section that has no overrides.
      no override.png
      Any changes to the section template would update instance of the section template.
      No override changes.png

      With overrides

      Adding Overrides to a section allows you to maintain design while altering content.
      In the example below, we have created an image and text section that is full width, and using overrides allows it to have different content and titles on each instance.
      With overrides.png
      If you make design changes to the section template design, for example the image size or heading typography, the overrides will be maintained.
      With override changes.png

      With source

      A section template can be used as a powerful tool in Nyla when used together with Source and Properties
      In the example below, two pages using different page sources can use the same section template. This makes it easy to maintain design consistency on all product pages. The same concept can be applied to most page content below the fold.
      Most content on these sections does not need to be added as an override, as it is linked directly to the product the source is referencing.
      With source.png
       
      You can choose to set the source as an override, or set it to use a Page Source, automatically pulling the source depending on the page it is used on.

      Delete a section template

      To delete a section template:
      1. Add it to a page in Nyla
      2. Click on Edit template to Edit section template
      3. Open template settings by clicking on Settings or the settings cog ⚙️
      4. Click on Delete section template
      5. Confirm by entering the template name and clicking on Delete

      Unlink instance

      Unlinking an instance of a section template allows you to change the design while no longer affecting the section template it previously belonged to. Any overrides that existed will be copied to the new section content. This action cannot be undone.
      To unlink a section template instance:
      1. Click on Edit template to Edit section template
      2. Click on Unlink instance in the quick edit header

      Publish flow

      Section templates follow the same Publish flow as a page or other Nyla content. A section template can have a live and draft version, and to move your changes to your live site, you must queue and publish your section template.