Sitefinity How-tosLearn how to create templates and layouts

Skip Menu

How to buttons

Templates
Layouts

Templates

Create and Edit templates

A template is branded with the UTMB logo and has been designed to meet institutional brand standards. The front-end template framework is built using modern web standards and best practices including HTML5 semantic mark-up, mobile-first responsive design and special attention to accessibility requirements.

How to

Expand All Collapse All
  • Page & Template Sections

    Pages and templates are divided into these four main sections:

    Above Page Content

    • Directly below the top navigation and above the breadcrumbs
    • Expands the entire width of the screen
    • Common uses: alert, callout, wide images

    Feature Content

    • Below the above page content section
    • Expands the entire width of the screen
    • Common uses: Blog slider, feature boxes, wide images

    Body

    • The main body of the page
    • Expands the entire width of the screen
    • Common uses: Main content for the page or template

    Base Content

    • Below the body section, but above the footer
    • Expands the entire width of the screen
    • Common uses: this section is not commonly used

    screenshot of templates and pages sections

  • Create a Template
    1. Click the Design navigation menu item and then select Page Templates
      screenshot of templates in the navigation
    2. If the site is new, you will be provided with a 4x template that will be based on the "_UTMBWeb_4x_Hybrid" template. If the site is already established, you may see a list of templates. The default template may be based on the older 3x "UTMB_Master_MVC" template. Please email UTMBSitefinityManagement@UTMB.EDU to request for the 4x template to be added to your site. Your default template should remain as basic as possible. You can create templates that are based on the default template to customize them for specific needs.
      screenshot of an example of a list of templates
    3. Click the Create a template button
      screenshot of the template create button
    4. Add a template name. The template name should start with the website name.
      screenshot of template name field
    5. Click the Select another Template button to select the template that this template should be based on. All templates should be based on another template.
      screenshot of select another Template button
    6.  Select the base template and then click the Done button.
      screenshot of select a template screen
    7. Click the Create and go to add content button.
    8. Drag layout elements and/or content widgets onto the various sections.
    9. Click the Publish or Save Draft button when complete.

Related training videos

Sitefinity Core Videos

Expand All Collapse All

Always click the Publish, Save as Draft or Schedule when you are finished editing a template or page to save your work.

Layouts

Adding layouts to a page or template

Layouts help divide a page or template into sections. See examples of the Sitefinity layout options available to add to your site.

How to

Expand All Collapse All
  • Layout options
    1. On the right side menu, click the Layout tab, click the Grid widgets drop-down menu. In the future, the grid widgets will be the only available options for layouts, so avoid using any element listed under Single and Two Columns. 
      screenshot of layout options
    2. Grid layout options include:
      • Container: This will reduce the width of the content are to 1400 px. It is recommended to add a container to the body section of the default template.
      • Grids: Used to organize elements into columns.
      • Content accordions: This will expand content when you click on the accordion title. The accordion list layout is recommended instead of using this option. See more on how to create a list and how to add a list to a page.
      • Content tabs: This will divide content into tabs.
      • Section box: This will add a light gray section that extends the full width of the page.
  • Change the background color of a section box
    1. After you have added a section box, click the Edit button on the widget
      screenshot of edit button on section box
    2. Copy and paste the background-color CSS helper class into the SectionBoxWrapper field. Leave any predefined classes that are automatically generated. 
      screenshot of adding a red background CSS class
    3. Click the Save button.

Always click the Publish, Save as Draft or Schedule when you are finished editing a template or page to save your work.

 Learn how to create content

Learn how to create and edit pages 

Design, Tools & Training

Top