# Our Boats

The page was created thanks to [TZ portfolio+ extension](https://tzportfolio.com/), so you should make sure this extension is installed on your site with the latest version. 

Suggested add-ons: 

* Form Builder
* Pricing Content
* Video Content
* Gallery Content
* Feature Box
* Image Gallery

### I. Install add-ons

Go to Admin > Components > TZ Portfolio+ > Addons > Click Install & Update > Install the suggested add-ons above. 

### II. Create portfolio articles

* Go to TZ Porfolio+ > Articles > Add new
* Media: Image Gallery
* Add your content to the content tab and upload images in the Image Gallery tab

{% tabs %}
{% tab title="Upload Image gallery" %}

<figure><img src="/files/kxYtzVhB14XdzNUHLuVR" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### III. Form Builder

In the form builder tab,&#x20;

### IV. Boat Pricing

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

In the Pricing content tab, you should click on the "+" button to add a new price item.&#x20;

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

### V. Custom Fields

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

#### Create a field group and custom fields

* You should go to TZ Portfolio+ > Custom field group > create a new custom field group
* Then go to Fields > create new fields

<figure><img src="/files/XM13qAGlATnHX4RwBiIZ" alt=""><figcaption><p>Create a new custom field</p></figcaption></figure>

{% hint style="info" %}

#### How to display the custom field on the listing page and detailed page

* When creating a new custom field, you should **enable the "List View" and "Detail View" options**.
  {% endhint %}

After that, go to Articles > edit your article > Field tab > enter data into fields

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

### VI. Content Gallery

Below the content description, you can see the Gallery section to configure Content Gallery

Just drag & drop your boat images or click to add files and wait until they are uploaded successfully. You can also add a caption for each image right below each one.&#x20;

<figure><img src="/files/9Q835Q3M1NUKF9P9NBLn" alt=""><figcaption><p>Configure the content gallery content</p></figcaption></figure>

### VII. Content Video

Right below the content gallery is the content video. The addon supports displaying videos from Youtube and Vimeo. You can add the video url to the video url field. \
There are some options you can enable or disable: Autoplay, loop, mute, auto pause, by line, video title, portrait, control, and so on.&#x20;

<figure><img src="/files/DHbj8mjcDLDoXttC9HO6" alt=""><figcaption><p>Configure the content video addon</p></figcaption></figure>

### VIII. Layout Builder

The page is assigned to the Elegant style. You should go to TZ POrtfolio+ > Layouts > Open the Elegant - Default > Edit the layout to fit your need.&#x20;

{% hint style="info" %}
You're supposed to add add-ons (content gallery, content video, pricing content, extra fields, form builder, and feature) to the layout, so they will display properly in the front-end.&#x20;
{% endhint %}

<figure><img src="/files/VBMLUl0J2JJnUAikPoH1" alt=""><figcaption><p>Edit layout builder</p></figcaption></figure>

### IX. Create A Boats Menu

After all, you should create a new menu item in order to display boats properly in the front-end.&#x20;

* Go to Menus > Main Menu > Add New
* Menu type: TZ Portfolio+ / Portfolio
* Choose your portfolio categories
* Portfolio layout: Elegant - Default
* Template style: tz\_amanus - default

<figure><img src="/files/2JuNpxVuwukiz6TqXUYR" alt=""><figcaption><p>Create Boat menu</p></figcaption></figure>

{% hint style="info" %}
If you have any questions or encounter problems with this page, feel free to contact us to get assistance.&#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jollyany.co/templates/amanus/our-boats.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.