> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/the-reporter-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/the-reporter-user-documentation/advanced-customization/home-page/sections-customization.md).

# Sections Customization

**The Reporter** has 24 posts section variants for home page. Each section is **pre-made** partial, that can be inserted anywhere. They looks like this:

```handlebars
{{>layout/type1 tagName='news' themeSection="light-gray"}}
{{>layout/type2 tagName='events'}}
```

Each section has **2 options** (props):

1. `tagName` - **required** props in which you pass the name of the tag you would like to display in this section
2. `themeSection` - **optional** props in which you can pass the additional color-variant for the section. If you don't pass it, section's background-color will be standard (the same as website's background-color). `themeSection` has 2 options:
   1. `"light-gray"` 

      <figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2F4mDpHsP3Y1FQKf06pIQP%2Freporter-startups.highfivethemes.com_.jpg?alt=media&amp;token=41af684c-4401-4d20-822c-5c2f6a880c50" alt=""><figcaption></figcaption></figure>
   2. `"black"`&#x20;

      <figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2Fp73oKveSgXRrn49Gjnv1%2Freporter-auto.highfivethemes.com_.jpg?alt=media&amp;token=a2f53465-fcfb-47f5-89ef-180e265a71c1" alt=""><figcaption></figcaption></figure>

### Here is the options for section layout:

1. `{{>layout/featured-type1 tagName='news' }}`&#x20;
2. `{{>layout/featured-type2 tagName='news' }}`&#x20;
3. `{{>layout/featured-type3 tagName='news' }}`&#x20;
4. `{{>layout/featured-type4 tagName='news' }}`&#x20;
5. `{{>layout/featured-type5 tagName='news' }}`&#x20;
6. `{{>layout/type1 tagName='news' }}`&#x20;
7. `{{>layout/type2 tagName='news' }}`&#x20;
8. `{{>layout/type3 tagName='news' }}`&#x20;
9. `{{>layout/type4 tagName='news' }}`&#x20;
10. `{{>layout/type5 tagName='news' }}`&#x20;
11. `{{>layout/type6 tagName='news' }}`&#x20;
12. `{{>layout/type7 tagName='news' }}`&#x20;
13. `{{>layout/type8 tagName='news' }}`&#x20;
14. `{{>layout/type9 tagName='news' }}`&#x20;
15. `{{>layout/type10 tagName='news' }}`&#x20;
16. `{{>layout/type11 tagName='news' }}`&#x20;
17. `{{>layout/type12 tagName='news' }}`&#x20;
18. `{{>layout/type13 tagName='news' }}`&#x20;
19. `{{>layout/type14 tagName='news' }}`&#x20;
20. `{{>layout/type15 tagName='news' }}`&#x20;
21. `{{>layout/type16 tagName='news' }}`&#x20;
22. `{{>layout/type17 tagName='news' }}`&#x20;
23. `{{>layout/type18 tagName='news' }}`&#x20;
24. `{{>layout/type19 tagName='news' }}`&#x20;

### To customize home page sections:

* **Open** `index.hbs` file, it looks like this:

<figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2F65lEqlSwFynKBIT8mD21%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-16%20%D0%B2%2011.48.01.png?alt=media&amp;token=2b820ea1-3713-4593-961d-61a8d40cb507" alt=""><figcaption></figcaption></figure>

* Here you'll see commented examples of banners and layouts that **The Reporter** has
* Now, **select** the section variant, change **tagName** props value to **your preferred tag** **slug** and insert it inside `{{!-- INSERT LAYOUTS HERE --}} {{!-- ------------------- --}}`  **like this:**&#x20;

<figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2FVSlmsfR2SpTWdXEdNM28%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-16%20%D0%B2%2012.12.42.png?alt=media&amp;token=43f3ed51-39dc-4976-89ad-f5335b4c1827" alt=""><figcaption></figcaption></figure>

* **Add** more sections that you want, the order in which you insert sections coincides with the order in which sections are displayed on the home page:&#x20;

<figure><img src="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2FQzwZ8ZcmQl59wetYsxV4%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-16%20%D0%B2%2012.20.14.png?alt=media&amp;token=62e87d66-3fc3-4282-95bd-274903c7a3db" alt=""><figcaption></figcaption></figure>

* When you're done with the customization, we need to zip our theme to upload its customized version in Ghost. To do this, **insert** `npm run zip` command into the terminal, that we already opened, and press **Enter.**
* Then, **check** that [**Homepage tags**](/the-reporter-user-documentation/custom-settings/homepage-layout/homepage-tags.md) setting inside Ghost Admin Panel has **nothing** inside it!
* Now, find new `the-reporter.zip` file and [**upload**](/the-reporter-user-documentation/getting-started/uploading-a-theme.md) it in your Ghost Admin Panel.
* **Thats it! Now you have customized home page layout!**