Most important parts of your documentation can be represented with tiles on the Heretto Portal home page.

A tile is a clickable box that consists of a title, short description, and icon. On larger screens, tiles are displayed in three columns. On mobile devices, tiles are displayed either in two or in one column depending on the resolution

The minimum required to render a tile is a navigational title added within a site section.

1. Open the sitemap connected to your portal.
2. Right-click the sitemap element and append it with the sitesection element.

   

3. Right-click the sitesection element and append it with the topicmeta element.
4. Right-click the topicmeta element and append it with the navtitle element.
5. Right-click the topicmeta element and append it with the shortdesc element.
6. Right-click the topicmeta element and append it with the data element.

7. Edit the navtitle element to display the name that you want.
   1. Hover over the navtitle element and click the gear icon. On the right, the attributes pane appears.
   2. In the top-right corner of the attributes pane, click the pencil icon to edit the contents of the navtitle element.
   3. Edit the contents of the navtitle tag.
      <navtitle>My First Section</navtitle>
   4. Click Save.
8. Follow the same steps to edit the short description element.

9. Hover over the data element and click the gear icon to open the attributes pane.
   1. Fill in the name attribute with the thumbnail value.
   2. Find the href attribute and click Change to select the icon that you would like to display in a tile.

   

10. Append your site section with a proper ditamap file that you would like to link to the created tile.

    

    An example of a basic site section. Elements marked in red are responsible for the contents displayed within a tile.

Go to the home page of your Heretto Portal and refresh it to see the newly created tile.

You can add your own sections on the home page by using the topicgroup element.

1. Open the sitemap connected to your portal.
2. Right-click the sitemap element and append it with the sitesection element.

   

3. Right-click the sitesection element and append it with the topicgroup element.
4. Hover over the topicgroup element and click the gear icon to open the attributes tab.
   1. To ensure your additional section is not displayed in the search results, set the search attribute to no.
   2. To ensure your additional section is not listed in the navigation, set the toc attribute to no.

   

5. Right-click the topicgroup element and append it with the data element.
6. Hover over the data element and click the gear icon to open the attributes pane.
   1. Fill in the name field with the topicgroup-name value.
   2. Fill in the value field with a unique meaningful value that will represent your section. This value will be later used for translation purposes. Do not use spaces or special characters.
      <data name="topicgroup-name" value="about-us"/>

      By default, the title of your section will be displayed on the home page as label.your-value. Our example will be displayed as label.about-us. To change the title of the newly created home page section, see Localize Custom Sections.

7. Append your topicgroup element with topics that contain contents that you would like to display on the home page.
   Note:

   If you want to localize your content, add a map reference instead as you can only localize maps. If you do not localize content, it is fine to add topic references instead.

   The example below shows how to add an additional section with contents based on two topics: our-values.dita and see-more.dita. For your implementation, use as many topics as necessary. The example assumes that you already introduced two tiles to the sitemap: “Site Section 1” and “Site Section 2” to show you how additional sections are placed with reference to the tiles. To learn more about adding tiles, see Add Section Tiles.

   <!-- A site section that renders additional blocks of content on the home page -->
   <sitesection>
       <topicgroup search="no" toc="no">
   	<!-- Introduces a "topicgroup-name" parameter with an ID "about-us" -->
           <data name="topicgroup-name" value="about-us"/>
   	<!-- Topics with content that is going to be displayed on the home page -->
           <topicref href="content/our-values.dita"/>
           <topicref href="content/see-more.dita"/>
       </topicgroup>
   </sitesection>

Go to the home page of your Heretto Portal and refresh it to see the newly created section.

You can add new sections to your Heretto Portal home page. Section titles are saved as strings that need to be localized. This process also produces a valid structure even if you do not localize your content into multiple languages.

1. Open the sitemap connected to your portal.
2. Find the sitesection element related to the home page section that you want to localize.
3. Expand the sitesection element to see the value of the data element.

   

4. Create a localization string variable that you will use in the next steps. It follows the pattern: label.your-value. Save or remember the string.
5. Open the config.json file connected with your Heretto Portal.
6. Add your localization string for every locale that you localize your Heretto Portal to.
   Remember:

   Locale codes in the config.json file have to be the same as the codes that you use during the localization process in Heretto CCMS.

      "i18n": {
         "en-us": {
            "label.about-us":"About us"
         },
         "de-de": {
            "label.about-us":"Über uns"
         }
      }

7. To localize contents of your additional sections, follow the standard localization process. You only need localization strings for section titles.

Go to the home page of your Heretto Portal and refresh it. You should now be able to see the updated title of the section in a selected language.