> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/post-types/portfolio/creating-a-portfolio-item/zig-zag.md).

# 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.