> For the complete documentation index, see [llms.txt](https://docs.jollyany.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jollyany.co/templates/travelami/home-page.md).

# Home Page

In this Travelami, there is a difference in building up the page content compared to other previous templates. \
For previous templates, we often build the home page with the power of the SP Page Builder Pro component. 

However, Travelami was completely built with Astroid widgets which are awesome elements you can employ easily by dragging & dropping in Astroid's layout builder. 

### Home Page Layout

To edit the home page's content, please go to Admin > System > Site Template Styles > tz\_travelami - Home Page > Layout. 

Here you can directly edit the content of each element in the layout. 

<div><figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FaMjco4flHJCii9SX2bcv%2Ftravel-home1.jpg?alt=media&amp;token=73d4e806-1ee0-4081-a32b-fe091ca2adab" alt=""><figcaption></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FWcnEewApCH2eipn9HGlt%2Fhome1-layout.jpg?alt=media&amp;token=2172562d-736c-4043-869b-652cd63652b6" alt=""><figcaption><p>Home page layout</p></figcaption></figure></div>

### Home Filter Module

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Fj8M8wwHNOqZOaVvzQ3t0%2Fhome-filter.jpg?alt=media&amp;token=8c0dd3da-4e6a-4117-93e0-28680d6f3866" alt=""><figcaption><p>Tour Search Module</p></figcaption></figure>

The tour filter was created with TZ Portfoio+ Filter module of TZ Portfolio+ Component. So you're supposed to go to Components > TZ Portfolio+ > Fields > Create custom fields there first.&#x20;

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FqxuOmRjZW9Sh8vXIZ4lI%2Fcreate-tour-custom-field.jpg?alt=media&amp;token=d9f1f954-85c8-4442-857c-6616d72ec150" alt=""><figcaption><p>Create a custom field</p></figcaption></figure>

{% hint style="info" %}

* List View: Enable the option to display the custom field in the list new
* Detail View: Enable the option to display the field in the detailed tour page.
* Advanced Search: Enable the option to allow the field to appear in the advanced search.&#x20;
  {% endhint %}

#### TZ Portfolio+ Filter Module

* Module name: Filter - Main Top - Light Bg (Filter - Main Top - Dark Bg for dark version).&#x20;
* Module position: main-top

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FqOzHBEJWTQz8T2bwYQwW%2Fhome-filter-module.jpg?alt=media&amp;token=cca4d124-027b-414e-a878-5008fa1e989c" alt=""><figcaption><p>Edit the Filter module</p></figcaption></figure>

Here you can choose custom fields from TZ Portfolio+ and configure options available in the module setting.&#x20;

### Assign the module position to the layout builder

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Fd4tmdEFmeGhOHdbewu0n%2Ftour-search-layout.jpg?alt=media&amp;token=b2936aa9-03cb-4dd1-8904-fa708b60bb44" alt=""><figcaption><p>Edit the element in the layout</p></figcaption></figure>

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F6qVbdpovrwxtQrQlgD7b%2Ftour-search-mod-general-settings.jpg?alt=media&amp;token=3c17b600-34bf-45d5-8521-0e6ce0532596" alt=""><figcaption><p>The element's general settings</p></figcaption></figure>

* **Module position**: Choose the module position of the tour search module.&#x20;
* **Module style**: Choose a module style from the drop-down list.
* **Custom class**: ***rounded-4*** (Edit the custom class to change the border shape).