Sitefinity How-tos

Learn how to add content to a page

Page Settings

Create and Edit settings of a Page

  • Create a new Page
    1. Click the Pages navigation menu item and then click the Create a page button.
      screenshot of create a page button
    2. Type the page name. The page name will autogenerate the URL. You can edit the autogenerated URL if needed.
      screenshot of page properties
    3. Select where to put the page
      • On top level: This will make it a parent page
      • Under parent page: This will make the page a subpage of a parent page
        screenshot of where to put the page settings
    4. In the Navigation options section make a selection
      • Show in Navigation:
        Select this checkbox to make the page show up in the automatically generated navigation widgets. If the Show in navigation checkbox is deselected, the page is not displayed in the automatically generated navigation, and it can be viewed only if linked or accessed directly. 
      • Make this a group page:
        Select this checkbox to specify that the page is a group page. Group pages serve as containers for other pages. Group pages do not have their own content. When a visitor opens a group page, it redirects to its first subpage (child).
      • Redirect to another page:
        Select this checkbox to specify that the page you are creating will not have its own content but will serve as a redirect page instead. Redirect pages serve as a placeholder in the sitemap, and redirect to another page from your website, or an external URL. To specify where your page redirects to, click  (Select page). On the next screen, select a page from your site or use the Web address tab to specify an external URL to redirect to. Once finished, click Done.
        screenshot showing page navigation options
    5. Click the Continue button
    6. Select a template
      screenshot of select a template
    7. You can now start adding content to the page.
  • Page title and properties
    1. Within the edit view of the page click the ellipsis symbol  on the upper right-hand corner.
      screenshot showing the elipsis symbol
    2. Select the Title & properties option
      select titles and properties
    3. You can modify these page settings:
      • Page title
      • Page URL
      • Select where to put the page
      • Select Navigation options
      • Add additional URLs: this will create redirect links to the page
        adjust page title and properties
  • Make a page a parent page or subpage
    1. Within the edit view of the page click the ellipsis symbol  on the upper right-hand corner.
      screenshot showing the elipsis symbol
    2. Select the Title & properties option
      select titles and properties
    3. In the Put this page... section:
      • On top level:
        This selection will make the page a parent page
      • Under parent page...:
        This selection will make the page a subpage page of the page selected (click the pencil   icon)
        screenshot of where to put the page settings
    4. Click the Save changes button when complete.
  • Page navigation settings (including redirects & group pages)
    1. Within the edit view of the page click the ellipsis symbol  on the upper right-hand corner.
      screenshot showing the elipsis symbol
    2. Select the Title & properties option
      select titles and properties
    3. In the Navigation options section make a selection:
      • Show in navigation:
        Select this checkbox to make the page show up in the automatically generated navigation widgets. If the Show in navigation checkbox is deselected, the page is not displayed in the automatically generated navigation, and it can be viewed only if linked or accessed directly. 
      • Make this a group page:
        Select this checkbox to specify that the page is a group page. Group pages serve as containers for other pages. Group pages do not have their own content. When a visitor opens a group page, it redirects to its first subpage (child).
      • Redirect to another page:
        Select this checkbox to specify that the page you are creating will not have its own content but will serve as a redirect page instead. Redirect pages serve as a placeholder in the sitemap, and redirect to another page from your website, or an external URL. To specify where your page redirects to, click   (Select page). On the next screen, select a page from your site or use the Web address tab to specify an external URL to redirect to. Once finished, click Done.
        screenshot showing page navigation options
    4. Click the Save changes button when complete.
  • Page URL settings
    1. Within the edit view of the page click the ellipsis symbol  on the upper right-hand corner.
      screenshot showing the elipsis symbol
    2. Select the Title & properties option
      select titles and properties
    3. The page title automatically populates the page URL
      • Type page name – enter the desired name of your page. The page name is used to identify your page in the Sitefinity CMS backend. It is displayed in the list of pages, different page selectors, navigation widgets and so on.
    4. In the URL section:
      This is the URL name of your page. As you type the page name, URL is automatically populated. Sitefinity uses this URL to dynamically build the full URL of the page, so it can be accessed by website visitors.
      • If you need to change the auto-generated URL name:
        • Click the Edit  (pencil icon) next to it. Type in the new URL name
        • DO NOT click the Edit Structure button to change the structure. This could cause issues with your page.
          adjust page title and properties
    5. Click the Save changes button when complete.
  • Additional URLs for pages (shortened links)
    1. Within the edit view of the page click the ellipsis symbol  on the upper right-hand corner.
      screenshot showing the elipsis symbol
    2. Select the Title & properties option
      select titles and properties
      • In the Additional URLs section:
        Configure additional URLs this page resolves on. The additional URLs resolve from the website root.
        • Add one URL per line. Add the URLs as relative URLs, (i.g. /contacts)
          adjust page title and properties
      • Click the Save changes button when complete.
    3. Page Search Engine Optimization - SEO

      The title tag and meta description (otherwise known as the "SEO title" and "SEO description") inform Google and other search engines about what the topic of your website is about. This information also shows up in the search results for users to see, and optimizing it can help them click through to your site.

      1. Within the edit view of the page click the ellipsis symbol  on the upper right-hand corner.
        screenshot showing the elipsis symbol
      2. Select the Title & properties option
        select titles and properties
      3. Under the Search engine optimization section update per the guidelines below:
        SEO in the page properties
        1. Title for search engine:
          This will autogenerate based on the page title. There is a 70 character limit.
          • Tips for title optimization:
            • Aim for titles that are 50-60 characters
            • Make your title tags unique on your website and on the SERP
            • Follow basic writing etiquette and be honest
            • Use keywords in your title tag (where appropriate)
        2. Description:
          There is a 150 character limit
          • Tips for description optimization:
            • Use active voice and make it actionable 
            • Include a call-to-action
            • Use your focus keyword
            • Make sure it matches the content of the page
        3. Keywords:
          • Under the Custom fields section add concise comma-separated values to the Keywords field.
            keywords field
      4. Click the Save changes button when complete.
    4. Index page for site search and search engines
      1. Within the edit view of the page, click the ellipsis symbol  on the upper right-hand corner.
        screenshot showing the elipsis symbol
      2. Select the Title & properties option
        select titles and properties
      3. Under the Advanced Options section:
        • Allow site search to index this page:
          This option is selected by default and you must deselect it, only if you do not want the internal site search to find your page in case, for instance, you have sensitive information on the page.
        • Allow external search engines to index this page:
          This option is selected by default and you must deselect it, only if you do not want search engines, such as Google, to find your page in case, for instance, you have sensitive information on the page.
          Screenshot of the page advanced settings for search indexing
    5. Set a page as a homepage

      On Pages page, the homepage of your website is represented by a home icon .

      To set a home page, follow the instructions below:

      1. In the navigation, click Pages.
        The pages management screen opens.
      2. Click Settings for pages button
      3. Click the Set homepage.
      4. In the pages selector, select the page you want to set as homepage.
      5. To save your selection, click Use selected button.

      The system sets the page as the website’s homepage and displays the icon above.

      NOTE: If you do not explicitly set a page as homepage, the first page you have created is automatically set as your homepage. You cannot set a group page as a homepage.

      IMPORTANT: You cannot delete the page set as homepage, unless it is the last page in the sitemap. To delete this page, set another page as homepage.

    6. Edit and save page content

      You can edit the content of a page, such as layout elements and widgets.

      1. To do this, on the Pages screen, perform one of the following:
        • Click the name of the page.
          NOTE: If the page you have clicked is a group page, the system opens the Page title and properties dialog, where you can edit the properties of the page.
        • Click the  (Actions) context menu of the respective page and click Content.
          The page opens in content editing mode. In content editing mode you can Design a layout template and Apply a template to a page.
          NOTE: A group page has no content and under Actions there is no Content link.
      2. When you are finished editing the page, perform one of the following:
        • Save as Draft
        • Publish
        • Schedule Publish

      NOTE: In page content editing mode, to see a preview of the page, click Preview button in the toolbar. The preview of the page is not a fully functioning page as it will appear on the live site. Use it to get an overall idea of how the page will look like. If you want to test how the page will look like and work of the live site, publish the page and click Live site in the upper-right corner of the screen. For example, if you use the preview mode, links to content items do not work.

    7. Delete pages

      To delete a page, perform one of the following:

      • On the Pages screen, select one or more pages to delete and from the Actions or Bulk Actions dropdown (depending on how many items you have selected), available in the upper left-hand side of the screen select Delete.
      • On the Pages page, click the   (Actions) link of the page you want to delete and click Delete.

      A dialog box appears where you must confirm the deletion.

      If you activated the Recycle bin module, the page is not permanently deleted, but moved to the Recycle bin. You can later restore or permanently delete the page from the recycle bin.

      IMPORTANT: You cannot delete a parent page. If you want to do this, you must first move or delete all of its children.

      IMPORTANT: If the page has translations, the system asks you, if you want to delete only the current translation of the page or all translations of this page.

    8. Apply page templates to pages

      You can base a page on a page template in one of the following ways:

      • When creating the page, you choose from the set of Sitefinity CMS page templates.
        NOTE: You can select from MVC only templates.
      • Change the template of a page later

      You change a template of a page in one of the following ways:

      • On Pages page, click the Actions link of the page, whose template you want to change, click Template.
      • In page content editing mode, click Layout in the toolbar and then click Select another Template button.
        1. Click one of the templates displayed.
          Both predefined and custom page templates are listed and you can further customize or change the layout template later.
          NOTE: MVC templates are designated with an MVC label.
        2. Click Done.
          The template is applied to the page.

      You can change between different templates of the same type. Placeholders with the same name or ID get the same widgets. If there is no such placeholder, new template widgets will be orphaned and you need to manually place them in another placeholder.

      IMPORTANT: If you want to change the existing page template of a page, the system replaces the old template with the new one. All modifications of layout and content are preserved, and the new layout is appended to the existing.

    Add Content

    Navigation

    • Add a Navigation widget to a page

      Within the edit view of a page, you can add the navigation widget to a page.

      1. On the right side menu, click the Content tab, click the Navigation drop-down menu and find the Navigation widget. Click, hold and drag the Navigation widget onto the desired part of the page, and then release the navigation widget Screenshot showing a navigation widget on a page
    • Select which pages to display as links in the navigation
      1. In the edit view of the page, click edit on the navigation widget. Screenshot of the edit button on the navigation menu
      2. To choose which pages to display as links in the navigation, select one of the following options:
        • Top-level pages (and their child-pages if the widget template allows this)
          The Navigation widget displays links to pages that are on top level in the pages' hierarchical structure and have no parent.
        • All pages under particular page
          The Navigation widget displays links to pages that are children of just one specific page.
          1. In the treeview, select the parent page and click Done selecting.
        • All pages under currently opened page
          The Navigation widget displays links to pages that are children of the currently opened page.
        • All sibling pages of currently opened page
          The Navigation widget displays links only to pages that are siblings of the currently opened page.
        • Custom selection of pages…
          The Navigation widget displays links only to specific pages you select.
          1. In the treeview, select the checkboxes next to the pages that you want to be part of the navigation.
          2. To add external pages:
            1. Click the External URLs tab
            2. Click the Add external URL button
            3. Enter the title to be displayed on the navigation and the full URL
          3. When finished, click Done selecting.
            Screenshot showing navigation display options
    • Select the depth of the navigation nodes
      1. In the edit view of the page, click edit on the navigation widget. Screenshot of the edit button on the navigation menu
      2. Under Levels to include, choose one of the following options:
        • All
          When you select a parent or a group page, the Navigation widget always displays its children pages as well.
        • Number
          The Navigation widget displays the children pages only up to a level of your choice. Choose a level from the Number dropdown menu. For example, if you select 2, the system displays only the top two levels of navigation - the top pages and their immediate children.
          Screenshot of levels to include drop down menu
    • Select the template you want to use for displaying navigation
      1. In the edit view of the page, click edit on the navigation widget. Screenshot of the edit button on the navigation menu
      2. From the Template dropdown menu, select the template you want to use for displaying navigation:
    • Add CSS classes to a navigation widget on a page
      1. In the edit view of the page, click edit on the navigation widget.
        Screenshot of the edit button on the navigation menu
      2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space.
        Screenshot or navigation css field

    Breadcrumb Navigation

    • Add a Breadcrumb widget to a page

      Within the edit view of a page, you can add the breadcrumb widget to a page.

      1. On the right side menu, click the Content tab, click the Navigation drop-down menu and find the Breadcrumb widget. Click, hold and drag the Breadcrumb widget onto the desired part of the page, and then release the widget
        Screenshot showing breadcrumb widget on a page
    • Breadcrumb setup

      In the edit view of the page, click edit on the breadcrumb widget.
      Screenshot showing the edit button

      1. Under What to include include in the breadcrumb, choose one of the following radio buttons:
        • Full path to the current page
          The system displays the full path to the current page, starting from the homepage.
        • Path starting from a specific page...
          The system displays the path from a selected page to the current page.

          Click Select page and select the page where you want the breadcrumb to begin from.

          NOTE: For the breadcrumb to fulfill its purpose, you should select a page that is the parent to the current page.

          Screenshot of What to include in the breadcrumb options
      2. Under Show…, choose one or more of the following options:
        • Home page link
          Displays the home page at the beginning of the breadcrumb.
        • Current page in the end of the breadcrumb
          This displays the current page as a link at the end of the breadcrumb.
        • Group pages in the breadcrumb
          A group page is a container for pages and does not have its own content. It redirects to its first child page.


          NOTE
          : For this option to function as intended, you must also have selected Current page in the end of the breadcrumb.
          Screenshot showing the breadcrumb show options

    Images

    • Add Image widget to a page

      Within the edit view of a page, you can add the image widget to a page.

      1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Image widget. Click, hold and drag the Image widget onto the desired part of the page, and then release the image widget
        screenshot of image widget on a page
    • Add an image using the Image widget
      1. After you have added the image widget to a page, click the Edit button on the widget
        screenshot of edit button on the image widget
      2. You can either upload an image from your computer or select a preloaded image. Review how to upload images to a gallery.
        • Upload an image from your computer
          1. Click the Upload image link in the upper-right-hand corner of the screen
            screenshot of upload image link
          2. Click the Select image from your computer link to select a photo or simply drag and drop an image.
            screenshot of select a photo screen
          3. Select where to store the uploaded image, add a meaningful title and alternative text and click the Upload button
            screenshot of image details
          4. You can adjust the title and alternative text if needed. Do not adjust the image size on this screen. All cropping and image optimization should be done before it is uploaded to Sitefinity. Click the Save button when complete.
            screenshot of image details

    Lists

    • Add CSS classes to a list widget on a page
      1. In the edit view of the page, click edit on the list widget.
        Screenshot showing the edit button on the list widget
      2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. List widget helper classes can be found on the Sitefinity Cheatsheet
        screenshot showing css classes field
    • Add List widget to a page

      Within the edit view of a page, you can add lists to a page. You must create a list first.

      1. On the right side menu, click the Content tab, click the Content drop-down menu and find the List widget. Click, hold and drag the List widget onto the desired part of the page, and then release the list widget
        screenshot of list widget on a page

       

    • Selecting a List widget template to be displayed on a page
      1. In the edit view of the page, click edit on the list widget.
        Screenshot showing the edit button on the list widget
      2. Click the List items drop-down menu under the Templates section
        screenshot showing the list widget templates
      3. Select the desired list widget template.
      4. Click the Save button when complete.

      List widget template examples:

      Accordion List | Anchor List | Expandable List | Expanded List | Link List | Link Card List | Panel List | Simple List | Tabs List

    • Filtering list items with Categories & Tags

      You must add categories or tags to a list item before you can apply them to the list widget.

      1. In the edit view of the page, click edit on the list widget.
        Screenshot showing the edit button on the list widget
      2.  Under the Filter list items by section click the words Categories to filter by categories or Tags to filter by tags.
        screenshot showing the categories and tags section
      3. Click the Select button
      4. Search for and select the desired category or tag name. You can select multiple categories and tags.
        screenshot of categories and tags search
      5. Click the Done selecting button.
      6. Click the Save button when complete.

    Blogs

    • Add Blog widget to a page

      Within the edit view of a page, you can add the blog post widget and display blog posts.

      1. On the right side menu, click the Content tab, click the Content drop down menu and find the Blog posts widget. Click, hold and drag the Blog post widget onto the desired part of the page, and then release the blog post widget.
      screenshot of blog post widget placement on a webpage.
    • Selecting which Blogs to display

      Within the edit view of a page, you can select which blog post(s) to display.

      1. After you have added the blog post widget to a page, click the Edit button on the widget
        screenshot showing edit button on blog post widget
      2. Under the Content tab, select which blog posts to display
        • From all blogs: This is the default setting. This will display all blog posts from all blogs on the website. 
        • From selected blogs only: you can specify which blogs to display
        • From currently open blog: do not use this setting
        • Selected blog posts: you can select one or more individual blog posts to display
          screenshot of which blog posts to display section
      3. Narrow selection further
        • All published blog posts: This is the default setting. This will display all published blog posts.
        • Selection of blog posts: you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the blog posts before you can add the filter to the blog post widget.
          screenshot of narrow selection section
      4. Click the Save button when finished.
    • Set the blog post paging & limit the number of items to display

      Within the edit view of a page, you can customize how blog posts display.

      1. After you have added the blog post widget to a page, click the Edit button on the widget
        screenshot showing edit button on blog post widget
      2. Under the List settings tab, select the paging and limit settings.
        • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
        • Use Limit: You can limit the number of items displayed.
        • No limit and paging: Shows all published items at once. This setting is not recommended.
          screenshot of blog post limit and paging settings
    • Sort blog posts on a page

      Within the edit view of a page, you can sort blog posts with these settings:

      1. After you have added the blog post widget to a page, click the Edit button on the widget
        screenshot showing edit button on blog post widget
      2. Under the List settings tab, select limit settings:
        • Last published on top: This is the default setting. Sorts the latest articles that have been published in descending order by date.
        • Last modified on top: Sorts the latest articles that have been edited and saved in descending order by date.
        • By Title (A-Z): Sorts by the title field of the blog post.
        • By Title (Z-A): Sorts by the title field of the blog post.
        • As set manually: Sorts by the the order of the blog posts in the blog. You can manually reorder blog posts.
        • As set in advanced mode: Do not use this setting
          screenshot showing sort section of blog post widget
    • Select the blog post list template (layout)

      Within the edit view of a page, you can customize how blog posts display.

      1. After you have added the blog post widget to a page, click the Edit button on the widget
        screenshot showing edit button on blog post widget
      2. Under the List settings tab, select the list template. Learn more about the available templates.
        screenshot of blog post templates

      • Add CSS classes to a blog widget

        Within the edit view of a page, you can customize the style of the blog posts with pre-written CSS classes.

        1. After you have added the blog post widget to a page, click the Edit button on the widget
          screenshot showing edit button on blog post widget
        2. Under the List settings tab, add CSS classes in the More options section.
          • Insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. View pre-written classes for each available template.
            screenshot showing blog post widget css field
      • Customize how the blog post article displays

        Within the edit view of a page, you can customize how blog post articles display and select the page that it opens in. You must create a separate page with the blog post widget on it first.

        1. After you have added the blog post widget to a page, click the Edit button on the widget
          screenshot showing edit button on blog post widget
        2. Under the Single item settings tab, select the page that the full article opens in.
          • Auto-generated page: This is the default setting and will open the article within the same page. This setting is not recommended.
          • Selected existing page: Select the article page with the blog post widget on it.
            screenshot of single item settings
        3. You can also add custom CSS classes to the article under the More options section. View the blog posts classes and examples

      News

      • Add News widget to a page

        Within the edit view of a page, you can add the news widget and display news posts.

        1. On the right side menu, click the Content tab, click the Content drop-down menu and find the News widget. Click, hold and drag the News widget onto the desired part of the page, and then release the news widget
          screenshot showing the news widget on the page
      • Selecting which News items to display

        Within the edit view of a page, you can select which news post(s) to display.

        1. After you have added the news widget to a page, click the Edit button on the widget
          screenshot of edit button on news widget
        2. Under the Content tab, select which news to display
          • All published news: This is the default setting. This will display all news. 
          • Selected news: you can specify which news items to display
          • Filtered news: you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the blog posts before you can add the filter to the blog post widget.
            screenshot of news post selection options
        3. Click the Save button when finished.
      • Customize News widget settings

        Within the edit view of a page, you can customize how news items display.

        1. After you have added the News widget to a page, click the Edit button on the widget
          screenshot of edit button on news widget
        2. Under the List settings tab, select the paging and limit settings.
          • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
          • Use Limit: You can limit the number of items displayed.
          • No limit and paging: Shows all published items at once. This setting is not recommended.
            screenshot of paging and limit settings
        3. You can sort news items with these settings:
          • Last published on top: This is the default setting. Sorts the latest articles that have been published in descending order by date.
          • Last modified on top: Sorts the latest articles that have been edited and saved in descending order by date.
          • By Title (A-Z): Sorts by the title field of the blog post.
          • By Title (Z-A): Sorts by the title field of the blog post.
          • As set manually: Sorts by the order of the blog posts in the blog. You can manually reorder blog posts.
          • As set in advanced mode: Do not use this setting.
            screenshot of sort setting
        4. Select the list template
          • News list: This is the default setting. Displays the news item title, date, time, author, summary, and featured image
          • News title date: Displays news item title, date, time, author, and featured image
          • News title date full content: Displays news item title, date, time, author, content, and featured image
          • News title date summary: Displays the news item title, date, time, author, summary, and featured image
          • News title only: Displays the news item title and featured image
          • News top five_01: See examples on the News widget page
          • News top five_01_small: See examples on the News widget page
          • News top five_02: See examples on the News widget page
          • News top five_02_small: See examples on the News widget page
          • News top five_03: See examples on the News widget page
          • News top five_03_small: See examples on the News widget page
            screenshot of list template options
        5. Add CSS classes
        6. Click the Save button with complete.
      • Customize how the news article displays

        Within the edit view of a page, you can customize how news articles display and select the page that it opens in. You must create a separate page with the news widget on it first.

        1. After you have added the news widget to a page, click the Edit button on the widget
          screenshot of edit button on news widget
        2. Under the Single item settings tab, select the page that the full article opens in.
          • Auto-generated page: This is the default setting and will open the article on the same page. This setting is not recommended.
          • Selected existing page: Select the article page with the news widget on it.
            screenshot of single item settings
        3. You can also add custom CSS classes to the article under the More options section. View the news widget classes and examples

      Events

      • Add Events widget to a page

        Within the edit view of a page, you can add the Events widget and display events on a page.

        1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Events widget. Click, hold and drag the Events widget onto the desired part of the page, and then release the events widget
          screenshot showing the events widget on a page
      • Selecting which Events to display

        Within the edit view of a page, you can select which event(s) to display.

        1. After you have added the event widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the Content tab, select which events to display
          • All Events: This is the default setting. This will display all events. 
          • Events by date:
            • upcoming events
            • current events
            • past events
          • Selected events: you can select one or more events to display
            screenshot showing the event selection options
        3. Narrow selection further
          • Calendar: If you have multiple, you can select one or more calendars
          • All published events: This is the default setting. This will display all published events.
          • Selection of events: you can add filters by specific calendars, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
            screenshot of event filters
        4. Click the Save button when finished.
      • Set the events paging & limit the number of items to display

        Within the edit view of a page, you can set the paging and limit the number of items that display.

        1. After you have added the events widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the List settings tab, select the paging and limit settings.
          • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
          • Use Limit: You can limit the number of items displayed.
          • No limit and paging: Shows all published items at once. This setting is not recommended.
            screenshot of paging options
      • Sort events that are displayed on a page

        Within the edit view of a page, you can sort events.

        1. After you have added the events widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the List settings tab, sort events with these settings:
          • Last published on top: Sorts the latest events that have been published in descending order by date.
          • Last modified on top: Sorts the latest events that have been edited and saved in descending order by date.
          • By Title (A-Z): Sorts by the title field of the event.
          • By Title (Z-A): Sorts by the title field of the event.
          • By Start date (oldest on top): This is the default setting. 
          • As set manually: Sorts by the order of the events in the events list. You can manually reorder events.
          • As set in advanced mode: Do not use this setting
            screenshot of sorting options
      • Add CSS classes to an events widget

        Within the edit view of a page, you can customize the style of events with pre-written CSS Classes.

        1. After you have added the events widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the List settings tab, you can add pre-written CSS classes:
          • Insert CSS classes in the CSS classes field under the More Options section. Multiple CSS classes can be added but must be separated by a space. View the events classes and examples.
            screenshot of css field
      • Customize how the event details display

        Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

        1. After you have added the Events widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the Single item settings tab, select the page that the event details open in.
          • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
          • Selected existing page: Select the page with the events widget on it.

          screenshot of Calendar single item settings
        3. You can also add CSS classes under more options section to customize the detail page.

      Calendar

      • Add Calendar widget to a page

        Within the edit view of a page, you can add a calendar on a page.

        1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Calendar widget. Click, hold and drag the Calendar widget onto the desired part of the page, and then release the calendar widget
          screenshot of calendar widget on a page
      • Selecting which Calendar to display

        Within the edit view of a page, you can select which calendar(s) to display.

        1. After you have added the calendar widget to a page, click the Edit button on the widget
          screenshot of edit button on calendar widget
        2. Under the Content tab, select which events to display
          • All Events: This is the default setting. This will display all events. 
          • Events by date:
            • upcoming events
            • current events
            • past events
          • Selected events: you can select one or more events to display
            screenshot of which events to display settings
        3. Narrow selection further
          • Calendar: If you have multiple, you can select one or more calendars
          • All published events: This is the default setting. This will display all published events.
          • Selection of events: you can add filters by a specific calendar, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
            screenshot of narrow selection section
        4. Click the Save button when finished.
      • Customize Calendar settings

        Within the edit view of a page, you can customize how a Calendar displays.

        1. After you have added the calendar widget to a page, click the Edit button on the widget
          screenshot of edit button on calendar widget
        2. Under the List settings tab, you can select what day of the week to start on.
          • Monday
          • Sunday: this is the default setting
            screenshot of Calendar week start section
        3. You can change the default view and allow users to switch between views:
          • Month: Displays the current calendar month
          • Week: Displays a full week view with times
          • Work Week: Displays a Monday through Friday week view with times
          • Day: Displays the current day view with times
          • Agenda: Displays the current day view with event details
          • Timeline: Displays a timeline for the current day
            screenshot of default view settings
        4. Allow users to filter by Calendar
          • The default setting is to allow users to filter by Calendars. Select the text "Allow users to filter by Calendar" to not allow this setting.

            screenshot of calendar filter
      • Customize how the Calendar event details display

        Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

        1. After you have added the Calendar widget to a page, click the Edit button on the widget screenshot of edit button on calendar widget
        2. Under the Single item settings tab, select the page that the event details open in.
          • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
          • Selected existing page: Select the page with the events widget on it.

          screenshot of Calendar single item settings

      Content Blocks

      • Add Content Block widget to a page

        Within the edit view of a page, you can add the content block widget on a page.

        1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Content blocks widget. Click, hold and drag the Content blocks widget onto the desired part of the page, and then release the widget.
          screenshot showing content block widget
      • Edit a Content Block
        1. After you have added the content block widget to a page, click the Edit button on the widget.
          screenshot of content block edit button
        2. Click in the content area to add content. Format content using the WYSIWYG Editor (formatting toolbar) and/or edit the HTML by selecting the </> option on the far right of the toolbar. Formatting options include:
          • Make the text a paragraph, quotation, heading, bold, or italic
          • Change the text color
          • Create an unordered and ordered list
          • Indent or outdent text
          • Create a link
          • Add an image
          • Create a table
          • Align content
          • Make text a subscript and a superscript
          • Add a horizontal rule
          • Remove formatting
            screenshot of content block edit view
        3. Click the Save button when finished
      • Duplicate, Share or use a Shared Content Block
        1. After you have added the content block widget to a page, click the More button on the widget
          screenshot of more button
        2. More options include:
          • Delete: This deletes the content block
          • Duplicate: This duplicates the content block
          • Share: This will create a shared content block. Learn more about shared content blocks.
          • Use Shared: You can select a shared content block that has already been created
          • Permissions: You can set permissions on who can see and edit the content block
      • Adding a background color to a content block
        1. In the edit view of the page, click edit on the content block.
          screenshot of content block edit button
        2. Click the advance settings gear icon   in the top-right of the content block
        3. Under the Classes tab, add the desired background CSS classes to the Wrapper CSS class field. Multiple CSS classes can be added but must be separated by a space.
          Screenshot showing the wrapper css class field on a content block
        4. Click the Save button and then click Save again on the content block.

      Forms

      • Add a Form widget to a page

        Within the edit view of a page, you can add the form widget on a page.

        1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Form widget. Click, hold and drag the Form widget onto the desired part of the page, and then release the widget.
          screenshot of forms widget
      • Select the Form to display
        1. After you have added the form widget to a page, click the Edit button on the widget
          screenshot of edit button on form widget
        2. Select a form.
          screenshot of select a form screen
        3. Click the Save button when complete.

      Categories

      • Add Categories widget to a page

        Within the edit view of a page, you can add a categories filter to a page. You must apply the categories to a content item first.

        1. On the right side menu, click the Content tab, click the Classifications drop-down menu and find the Categories widget. Click, hold and drag the Categories widget onto the desired part of the page, and then release the widget.

        2. Screenshot of adding categories widget to a page
      • Selecting a Categories widget template to be displayed on a page

        Within the edit view of a page, you can add a categories filter to a page. For the filter to be effective, you should have content on the page that has the categories applied to them (i.e. blog posts, list items, events).

        1. In the edit view of the page, click edit on the Categories widget.
          Screenshot showing the edit button on the categories widget
        2. Click the Setting tab and then select the desired layout under the Template drop-down menu.
          Screenshot of Categories templates under settings
      • Choose which categories to display

        After you place the Categories widget on a page, open the widget designer by clicking the Edit button in the upper-right corner of the widget. 

        1. Under Which categories to display? select one of the following:

          • All categories
            All categories are displayed in the list.

          • Top level categories only
            All top level categories are displayed in the list.

          • All categories under paritcular category
            All direct children of a specifically selected category are displayed in the list.
            To select a category, click the Select button.

          • Selected categories...
            A custom selection of categories is displayed. To select one or more categories you want to display, click the Select button.

          • Only categories used by content type...
            A custom selection of categories is displayed. Only categories assigned to the content type items selected are displayed in the list.

        2. In the Settings tab, you can modify the widget behavior:

          • Show item count
            The number of items, to which the category is assigned is displayed.

          • Show empty categories
            Categories that are not assigned to any item are displayed.

          • Sort categories
            By default, the categories are sorted by category title (A-Z). You can select a different sorting criterion:

            • By Title (A-Z)
            • By Title (Z-A)
            • As set manually
              This option is available only when you selected specific categories using Selected categories… option. If you select As set manually, categories are displayed in the selected order.
            • As set in Advanced mode
              DO NOT use this setting
      • Create a Categories/tags Subpage

        For the categories/tags filtering to function properly, you must build a subpage so that when a user clicks the filter it'll render the filtered results in a separate page. 

        1. Create a page
          • You can name this page Categories or Tags, but the page title is your preference
          • Put the page under the page with the categories/tags widget on it. This will be the categories/tags subpage.
          • Be sure to uncheck Show in navigation
        2. Drag and drop the content widget that you will be adding categories/tags to. For instance, if you applied categories to blog posts, add the blog widget to this page.
        3. It is best practice to add the categories/tags widget again to this page in a right or left column. This allows the user to filter when they are on the filtered results page.
      • Render filtered results in the categories/tags subpage

        Within the edit view of the categories/tags parent page, you'll need to select where the filtered results are rendered. 

        1. Click edit on the categories/tags widget.
        2. On the Categories widget:
          1. Click the Setting tab and then click the Advanced button.
          2. Click the Model button.
          3. In the Base URL field add the URL to the page to the categories/tags parent page (i.e. https://www.utmbhealth.com/health-blog)
          4. In the UrlKeyPrefix field add _
          5. Click the Save button when finished
        3. On the tags widget:
          1. Click the Advanced button.
          2. Click the Model button.
          3. In the Base URL field add the URL to the page to the categories/tags parent page (i.e. https://www.utmbhealth.com/health-blog)
          4. In the UrlKeyPrefix field add _
          5. Click the Save button when finished
        1. Make categories/tags a link

          You can make the category/tag link to the subpage to display all content items with the selected category/tag.

          1. Go to the live category/tag subpage (created in the previous step), click on a category/tag filter, then copy that link. (i.e., https://www.utmb.edu/accessibility/digital/accessibility-news/!_/-in-category/categories/a11y/topics/)
          2. Add the link (without the specific category/tag) to the blog properties:
            1. Open the Blog or List properties:
              • For Blogs: Click the Content navigation menu item and then select Blogs.
                screenshot showing blogs under blogs menu
              • For Lists: Click the Content navigation menu item and then select Lists.
                screenshot of lists in the content menu
            2. To the far right of the blog/list that you are filtering, click the three dots under Actions and select Title & properties from the drop-down menu.
              Screenshot of blog properties
            3. Under the Custom fields section, paste the URL in the Categories URL or Tags URL fields. Be sure to remove any specific categories/tags from the URL and leave off the trailing "/".
              Screenshot of Blog categories/tags URL fields
            4. Click Save Changes

        Tags

        • Add Tags widget to a page

          Within the edit view of a page, you can add a tags filter to a page. You must apply the tags to a content item first.

          1. On the right side menu, click the Content tab, click the Classifications drop-down menu and find the Tags widget. Click, hold and drag the Tags widget onto the desired part of the page, and then release the widget.

          2. Screenshot of adding the tags widget to a page
        • Selecting a Tags widget template to be displayed on a page

          Within the edit view of a page, you can add a tag filter to a page. For the filter to be effective, you should have content on the page that has the tags applied to them (i.e. blog posts, list items, events).

          1. In the edit view of the page, click edit on the Tags widget.
            Screenshot of the edit button on a tags widget
          2. Select the desired layout under the Template drop-down menu.
            Screenshot of tags widget settings
        • Choose which tags to display

          After you place the Tags widget on a page, open the widget designer by clicking the Edit button in the upper-right corner of the widget. 

          1. Under Which tags to display? select one of the following:

            • All tags
              All tags will be displayed in the list.
            • Selected tags...
              A custom selection of tags is displayed. To select one or more tags you want to display, click the Select button.
            • Only tags used by content type...
              A custom selection of tags is displayed. Only tags assigned to the selected content type items will be displayed in the list.
          2. Show item count
            The count of all items to which the tag is assigned is displayed.
          3. Show empty tags
            Tags that are not assigned to any item are displayed.
          4. Sort tags
            By default, tags are sorted by their title (A-Z). You can select a different sorting criterion:
            • By Title (A-Z)
            • By Title (Z-A)
            • As set manually
              This option is available only when you have selected specific tags using Selected tags… option. If you select As set manually, tags are displayed in the selected order.
            • As set in Advanced mode
              DO NOT use this setting
        • Create a Categories/tags Subpage

          For the categories/tags filtering to function properly, you must build a subpage so that when a user clicks the filter it'll render the filtered results in a separate page. 

          1. Create a page
            • You can name this page Categories or Tags, but the page title is your preference
            • Put the page under the page with the categories/tags widget on it. This will be the categories/tags subpage.
            • Be sure to uncheck Show in navigation
          2. Drag and drop the content widget that you will be adding categories/tags to. For instance, if you applied categories to blog posts, add the blog widget to this page.
          3. It is best practice to add the categories/tags widget again to this page in a right or left column. This allows the user to filter when they are on the filtered results page.
        • Render filtered results in the categories/tags subpage

          Within the edit view of the categories/tags parent page, you'll need to select where the filtered results are rendered. 

          1. Click edit on the categories/tags widget.
          2. On the Categories widget:
            1. Click the Setting tab and then click the Advanced button.
            2. Click the Model button.
            3. In the Base URL field add the URL to the page to the categories/tags parent page (i.e. https://www.utmbhealth.com/health-blog)
            4. In the UrlKeyPrefix field add _
            5. Click the Save button when finished
          3. On the tags widget:
            1. Click the Advanced button.
            2. Click the Model button.
            3. In the Base URL field add the URL to the page to the categories/tags parent page (i.e. https://www.utmbhealth.com/health-blog)
            4. In the UrlKeyPrefix field add _
            5. Click the Save button when finished
          1. Make categories/tags a link

            You can make the category/tag link to the subpage to display all content items with the selected category/tag.

            1. Go to the live category/tag subpage (created in the previous step), click on a category/tag filter, then copy that link. (i.e., https://www.utmb.edu/accessibility/digital/accessibility-news/!_/-in-category/categories/a11y/topics/)
            2. Add the link (without the specific category/tag) to the blog properties:
              1. Open the Blog or List properties:
                • For Blogs: Click the Content navigation menu item and then select Blogs.
                  screenshot showing blogs under blogs menu
                • For Lists: Click the Content navigation menu item and then select Lists.
                  screenshot of lists in the content menu
              2. To the far right of the blog/list that you are filtering, click the three dots under Actions and select Title & properties from the drop-down menu.
                Screenshot of blog properties
              3. Under the Custom fields section, paste the URL in the Categories URL or Tags URL fields. Be sure to remove any specific categories/tags from the URL and leave off the trailing "/".
                Screenshot of Blog categories/tags URL fields
              4. Click Save Changes

          Feature Box

          • Add Feature box to a page

            Within the edit view of a page, you can add the Feature box widget to a page.

            1. On the right side menu, click the Content tab, click the Feature Box drop-down menu and find the FeatureBoxes widget. Click, hold and drag the FeatureBoxes widget onto the desired part of the page, and then release the FeatureBoxes widget
              screenshot of feature box on a page
          • Selecting which Feature boxes to display

            Within the edit view of a page, you can select which feature boxes to display

            1. After you have added the FeatureBoxes widget to a page, click the Edit button on the widget
              screenshot of edit button
            2. Under the Content tab, select which feature boxes to display
              • From all featurecollections: This is the default setting. This will display all feature boxes from all feature collections on the website. 
              • From selected featurecollections only: This will display all feature boxes from a selected feature collection
              • From currently open featurecollection: Do not use this setting
              • Selected featureboxes: you can select one or more individual feature boxes to display
                screenshot of which feature box to display selections
            3. Narrow selection further
              • All published featureboxes: This is the default setting. This will display all published feature boxes.
              • Selection of featureboxes:  you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the feature boxes before you can add the filter to the feature boxes widget.
                screenshot of feature box filters
            4. Click the Save button when finished.
          • Customize Feature box settings
            Within the edit view of a page, you can customize how feature boxes display.

            1. After you have added the feature box widget to a page, click the Edit button on the widget
              screenshot of edit button
            2. Under the List settings tab, select the paging and limit settings.
              • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed. This setting does not work.
              • Use Limit: You can limit the number of items displayed.
              • No limit and paging: Shows all published items.
                screenshot of list settings
            3. You can sort feature boxes with these settings:
              • Last published: This is the default setting. Sorts the latest feature boxes that have been published in descending order by date.
              • Last modified: Sorts the latest feature boxes that have been edited and saved in descending order by date.
              • By Title (A-Z): Sorts by the title field of the feature box.
              • By Title (Z-A): Sorts by the title field of the feature box.
              • As set manually: Sorts by the the order of the feature boxes in the feature collection. You can manually reorder feature boxes.
              • As set in advanced mode: Do not use this setting
                screenshot of the sort options
            4. Click the Save button when finished.

          Related Training Videos

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

          On this page: