{"section":"tutorials","requestedLocale":"en","requestedSlug":"what-is-cms-layout","locale":"en","slug":"what-is-cms-layout","path":"docs/en/tutorials/storefront/layout/what-is-cms-layout.md","branch":"main","content":"> This functionality is available for stores using the Legacy Portal technology.\n\nThe [Layout](/en/subcategory/layout--2g6LxtasS4iSeGEqeYUuGW) section allows you to create your storefront with HTML and CSS. \n\n## Sites and channels\n\nIf you haven't yet created a Web Site (or want to create a new one), it's in this directory that you must go first. If you already have a Web Site, this is where you will access and manage your entire folder structure.\n\n**Sites and channels** is also the place where you will be able to create and organize the layouts of your site, as we will see later.\n\n> This feature is also available for stores using Site Editor.\n\n## Binding\n\nBefore you begin to organize the content of your Web Site, it must be linked to an account name. With that, the system understands where all the information added or modified in the folders, files or code of the Web Site will be applied.\n\nThis is a fundamental process for the perfect functioning of your store, but it is also very simple. Just follow the steps [of this article](/en/docs/tutorials/linking-an-account-name-to-a-website-binding).\n\n![Binding](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/what-is-cms-layout_1.png)\n\n## Layouts and templates\n\nWith your Web Site created and already linked to an account name, you will need to define templates and layouts.\n\n- **Template**: here is where the code itself is written. Among other things, it determines how the information will appear on the screen, including where the placeholders will be shown. The templates are put together in the **HTML Templates** and **Shelves Templates** folders.\n- **Layout**: it's responsible for determining which elements will appear on a page. It is the one that sets the placeholders (elements like banners, collections and others), that will be displayed to the end user. In order to work, each layout must be linked to a single template. You can find the layouts of your Web Site organized by folders in the **Sites and channels** directory.\n\n## Placeholders\n\nThese are elements (DHTML Banner, HTML, Collection, Banner, Related Products) that may or may not be used in the pages of your Web Site. They are configured in the layouts (which are stored in the **Sites and channels** directory), but their position on the page is determined by the code in the templates (stored in the **HTML Templates** directory).\n\nThe layout defines which placeholders are going to be used, and what they display, but it's the code (that is, the template) that will tell you where they appear on the page.\n\n## Collection\nFor the CMS module, collections are placeholders that display product clusters on a particular page. These groups need to be defined in the **Product Clusters (Collections)** directory.\n\n## Controls\nVTEX native controls render various useful and replicable features in your site templates. For example, when you enter the `<vtex.cmc:productName/>` control on your product page, the system will automatically render the product name.\n\nSee the complete list of native controls for templates [in this article](/en/tutorial/list-of-controls-for-templates).\n\n## Custom Elements\nIn addition to native VTEX controls, the system allows you to create custom controls. They are stored in the Custom Elements directory, and can be used in any template, in the same way as native controls.\n\n## URL Builder\nIn this section you can build friendlier URLs, making the pages of your Web Site easier for the user to find.\n\n## Files Manager\nTo manage the files of your Web Site, you may access this directory. In it, you can add, delete and modify CSS, JavaScript, XML and image file\n\n### References\n- [Layout](/en/subcategory/layout--2g6LxtasS4iSeGEqeYUuGW)\n- [Settings](/en/subcategory/cms-settings--6kovkwzMRyeOOc2iEC4suM)\n- [Layout folder structure](/en/tutorial/cms-folder-structure--2RdMaJSv4AK4EyscmQuocu?&utm_source=autocomplete)\n- [List of template controls](https://developers.vtex.com/docs/guides/list-of-controls-for-templates)\n- [What are templates?](/en/tutorial/o-que-sao-templates--4l7BQBYO9ycumsqua2CU88?&utm_source=autocomplete)\n- [What is a website?](/en/tutorial/o-que-e-um-web-site--5sPUdFEv9C02i0MMqqSo0U?&utm_source=autocomplete)\n- [What are controls?](/en/tutorial/o-que-sao-controles--6e2qsk9zu8IQuyEysKweag?&utm_source=autocomplete)\n- [What are layouts?](/en/tutorial/o-que-sao-layouts--CckPh00rZIcIUG60y8Gse?&utm_source=autocomplete)\n- [What are shelves?](/en/tutorial/o-que-sao-prateleiras--28D8d6GFfuAsuAoeWC8eq0?&utm_source=autocomplete)\n- [What is binding?](/en/tutorial/o-que-e-binding--4NcN3NJd0IeYccgWCI8O2W?&utm_source=autocomplete)\n\n### Guides\n- [Creating and editing a page template](/en/docs/tutorials/how-to-create-a-page-template): Learn how to create a page template. A page template is a model designed to define an HTML structure for displaying page content.\n\n- [Associating a template with a layout](/en/tutorial/associando-um-template-a-um-layout--7CkgOHRj7DVbsRxyR8YQrK?&utm_source=autocomplete): Associate a template with a layout using the Sites and Channels folder.\n\n- [Managing placeholders](/en/docs/tutorials/managing-placeholders): A placeholder is a configurable snippet of code that meets conditions defined by the store. Learn how to insert and configure a placeholder, for example, a banner on your store’s homepage.\n\n- [Using VTEX's native controls](/en/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/7mGkGmo8l6wf4fXJCkWwPi?&utm_source=autocomplete): Controls are snippets of codes that you can use in your website's templates to perform specific actions. For example, you can use a control on a product page to display the product name.\n\n- [What is the purpose of the Customized Control?](/en/docs/tutorials/what-is-the-purpose-of-the-customized-control): In addition to VTEX's native controls, you can create your own controls."}