# Zig Zag

The Zig Zag item type presents a distinctive layout where content and gallery items alternate in a zigzag pattern, creating a dynamic visual flow. This layout is ideal for showcasing items in a staggered fashion, enhancing visual interest and engagement.

This item type offers similar options to the [Side Portfolio](/post-types/portfolio/creating-a-portfolio-item/side-portfolio.md) layout, with additional gallery item settings such as description content, width, and alignment.

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

## Zig Zag Options

After selecting the **Zig Zag** item type, a new section will appear in **Parameters and Options** called **Zig Zag**, offering custom **Project Gallery** options and layout configurations for this particular item type.

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

### Content Alignment

You can choose between two layout types: **Default Layout** and **Centered Content Layout**. These options allow you to align the content either to the left or center it within the page.

<div><figure><img src="/files/hIcSkUKcMKTV14Hdl2Vd" alt="" width="375"><figcaption><p>Left alignment (Right in RTL)</p></figcaption></figure> <figure><img src="/files/1cqVFhdz5Ux2hStpfaIK" alt="" width="375"><figcaption><p>Centered content alignment</p></figcaption></figure></div>

## Project Gallery

You can customize your Project Gallery with several options, including:

* **Reveal Effect:** Choose the animation or transition effect when gallery items are revealed.
* **Spacing:** Adjust the spacing between items to fit your layout needs.
* **Captions:** Enable or disable captions for gallery images.
* **Items Gap:** Set the gap between items to control the overall look of your gallery.

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

The Project Gallery section supports various media types:

* **Single Image:** Display a single image to showcase individual visuals or key elements of your project.
* **Slider Images:** Add a slider with multiple images for viewers to scroll through different angles or stages of your project.
* **Image Comparison:** Use an interactive slider to compare two images side by side, ideal for before-and-after shots or contrasting design options.
* **Video:** Embed videos from platforms like YouTube or Vimeo, or use self-hosted video files for project demonstrations or other relevant content.
* **Text Quote:** Insert a text quote or message to highlight key feedback, project descriptions, or significant statements related to your work.
* **HTML Code:** Add custom HTML to include additional elements such as interactive widgets, forms, or bespoke features that enhance your gallery.

Zig Zag provides additional details for every gallery item type, including:

* **Description:** Rich text editor for adding detailed descriptions.
* **Width:** Adjust the width of the description.
* **Alignment:** Set the alignment of the description in relation to the gallery media.

To add a gallery item, click **Add New** and select from the available media types.&#x20;

<figure><img src="/files/6FoR33uJxQtG9A0C6X8K" alt="" width="212"><figcaption></figcaption></figure>

Each gallery item type has its own set of options with inline explanations for their functionality and usage.


---

# 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.kaliumtheme.com/post-types/portfolio/creating-a-portfolio-item/zig-zag.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.