Implementing multi-level responsive navigation using a hierarchical transformation

https://devnet.kentico.com/articles/implementing-multi-level-responsive-navigation-using-a-hierarchical-transformation

Some questions: 1.In this step below, does all of this code go into 1 transfromation, or seperate? 2. Am I supposed to click the "Generate default Transformation" button or jsut save as is?

Create a new hierarchical transformation with following transformations in it (all of them as Text/XML type): Header transformation, Level: 0, Apply to sublevels: No

Header transformation, Level: 1, Apply to sublevels: Yes
Footer transformation, Level: -1 (All)

Item transformation, Level: -1 (All)

• {%HTMLEncode(DocumentName)%}{^SubLevelPlaceHolder^}