# 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](https://docs.kaliumtheme.com/post-types/portfolio/creating-a-portfolio-item/side-portfolio) layout, with additional gallery item settings such as description content, width, and alignment.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FPqxIueiSIR4ohL82FF8V%2FZig%20Zag%20-%20Preview.jpg?alt=media&#x26;token=d503e9f8-e45d-4d5e-a623-872876056bd2" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FSheIHq0V2qQ22WqYDs1n%2FZig%20Zag%20-%20Options.jpg?alt=media&#x26;token=219a38c7-1d3d-4433-86c7-17eb6075d2f8" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F1sQkOv3QNx7TlSWe06WJ%2FZig%20Zag%20-%20Content%20Alignment%20-%20Left.jpg?alt=media&#x26;token=d5083d35-c228-4e98-82ea-dd0c59dddbc4" alt="" width="375"><figcaption><p>Left alignment (Right in RTL)</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fbs5iLqfW67lLRlC5C0nG%2FZig%20Zag%20-%20Content%20Alignment%20-%20Center.jpg?alt=media&#x26;token=9e271944-f70c-4244-8ca9-04c73f415dcb" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FNu5TqmAWAFo0RYMtm6to%2FZig%20Zag%20-%20Project%20Gallery%20Options.jpg?alt=media&#x26;token=390f6fb9-3871-444f-82f9-231294855590" 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="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FHlZU2JaUqBHzOOyaX8JY%2FSide%20Portfolio%20-%20Project%20Gallery%20-%20Add%20New.jpg?alt=media&#x26;token=6c0ccfc8-edb9-4635-8bd0-71c202652103" alt="" width="212"><figcaption></figcaption></figure>

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