> 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/tours.md).

# Tours

The tour data on this template should be created with [TZ Portfolio+ component](https://tzportfolio.com/), so please make sure the latest version of this component is installed on your website. 

### Create Tours with TZ Portfolio+ Component

Please go to Admin > Components > TZ Portfolio+ > Articles > Add a new article. 

<figure><img src="/files/ZFEIUzOb5HpfU1IX7BuA" alt=""><figcaption><p>Input the tour's description.</p></figcaption></figure>

#### Tour's Featured Image

In the Image tab, you can upload the featured thumbnail image of the tour.&#x20;

<figure><img src="/files/XbJae25WHBrQZWit1Avj" alt=""><figcaption><p>Upload a featured image fo a tour. </p></figcaption></figure>

#### Tour's image gallery

<figure><img src="/files/9HA1O7159eajmKGUDW4f" alt=""><figcaption><p>Single Tour gallery</p></figcaption></figure>

To create this image slide, you should install the [Gallery Content addon](https://www.tzportfolio.com/addons/gallery-content.html) of TZ Portolio+ Component.&#x20;

Click **"Open the file Browser"** to upload images from your computer. And wait until all the images are loaded successfully to finish.&#x20;

<figure><img src="/files/rFmp0zPtq7hjh7K9CFH3" alt=""><figcaption><p>Upload tour's gallery images</p></figcaption></figure>

#### Tour Video

<figure><img src="/files/Ws3oUbX7RtUdrZ3drNwA" alt=""><figcaption><p>Tour gallery</p></figcaption></figure>

You should create this video section with the Video Content addon of TZ Portfolio+ extension. So please make sure you have it installed.&#x20;

This video addon supports YouTube or Vimeo videos, you need to copy and paste the video's url into the field.&#x20;

<figure><img src="/files/emZKIthpLOBGj41BV9H5" alt=""><figcaption><p>Video content options</p></figcaption></figure>

#### Tour Plan

<figure><img src="/files/mawAL40noB8YRD1qzrHf" alt=""><figcaption><p>Tour plans</p></figcaption></figure>

The tour plan section is created thanks to the built-in Accordion addon of TZ Portfolio+ extension. When creating or editing a new article, you can configure the content of tour plans in the tab Accordion.&#x20;

<figure><img src="/files/0Wt8ePMke6eTmr2TuJ1U" alt=""><figcaption><p>Tour Plan Title</p></figcaption></figure>

Click the + icon to add new accordion items and input content (Title and description).&#x20;

And click - icon to remove the item.&#x20;

<figure><img src="/files/K1vNB97WR3ctL6Sm1XZA" alt=""><figcaption><p>Add new accordion items</p></figcaption></figure>

#### Tour Booking Form

<figure><img src="/files/fMUOXhZeK7yTAh7aM8dL" alt=""><figcaption><p>Tour's booking form.</p></figcaption></figure>

The tour booking form is based on the [Form Builder addon](https://www.tzportfolio.com/addons/form-builder.html) of TZ Portfolio+ extension. So you should go to Admin > Components > Addons > Click on Install/Update > Navigate the Form Builder and install it.&#x20;

In the tab "Form Builder", You can configure the below options on the first half options.&#x20;

* Email & Recipient Options:&#x20;
* Success & Error Message Options:
* Redirect, Security & Policy Options:
* Button Options:

<figure><img src="/files/0Pl1tLR0jVxfIGa4rMDH" alt=""><figcaption></figcaption></figure>

This is the time to create the form's fields. Click on + icon to add new items.&#x20;

* **Field type**: Choose a field type from the drop-down list
* **Field label**: Enter the field label
* **Field place hover**: Enter the field's placeholder text
* **Field required**: Decide if the field should be compulsory or not
* **Column large**: Set the column width of the field on large devices
* **Column medium**: Set the column width of the field on medium devices
* **Column small**: Set the column width of the field on small devices
* **Column Xsmall**: Set the column width of the field on mobile devices

<figure><img src="/files/yryOlavH7txUxBFmR6m4" alt=""><figcaption></figcaption></figure>