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

# Columned

A grid of gallery items beside the project content.

The Columned item type organizes gallery items into columns, forming a grid to showcase gallery content effectively. Similar to the [Side Portfolio](/post-types/portfolio/creating-a-portfolio-item/side-portfolio.md) type, it shares many common options, but the gallery can be displayed either above or below the content.

This layout also supports a centered style where the title and description are text-centered. Additionally, it offers a full-width option for the gallery container and supports a masonry layout for a more dynamic arrangement of gallery items.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-92335d02f7ae2609190e7732edd32ecdbd799a67%2FColumned%20Portfolio%20-%20Preview.jpg?alt=media" alt=""><figcaption><p>Columned item type preview</p></figcaption></figure>

## Columned Options

After selecting the **Columned** item type, a new section will appear in **Parameters and Options** called **Columned**, offering custom **Project Gallery** options for organizing your gallery items into columns.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-50460f275160431b7245ab44a757589afa2b1b08%2FColumned%20Portfolio%20-%20Options.jpg?alt=media" alt=""><figcaption></figcaption></figure>

These options are specific to this portfolio type and allow further customization of the layout.

### Content Alignment

You can choose between two layout types: **Default Layout** and **Centered Content Layout**. These can be set in the **Layout Type** option, allowing 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%2Fgit-blob-7632d1e0f294201a1b9318615682b539df49e77e%2FColumned%20Portfolio%20-%20Default%20Alignment.jpg?alt=media" 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%2Fgit-blob-a117d89718ce8b1cf4994d35d2d6999dac31a146%2FColumned%20Portfolio%20-%20Centered%20Alignment.jpg?alt=media" alt="" width="375"><figcaption><p>Centered content alignment</p></figcaption></figure></div>

Setting the **Centered Content Layout** also changes the placement of the *checklists* and *project link*.

You can adjust the placement of the content to be either above or below the gallery, and position social network links either before or after the gallery. This can be done by setting Gallery Position to any of these values: *Below description* or *After description*, the same applies for social networks.

### Featured Image

This portfolio item type supports inserting the featured image above the content, with an option for full-width display.

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-36407eeb7f0ba163fe2309bedbec37662c0488b8%2FColumned%20Portfolio%20-%20Featured%20Image.jpg?alt=media" alt="" width="375"><figcaption><p>Featured Image enabled</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-672d46a1f8ad0d76371a2c467082ca2eed69ed37%2FColumned%20Portfolio%20-%20Featured%20Image%20Full%20Width.jpg?alt=media" alt="" width="375"><figcaption><p>Full width featured image</p></figcaption></figure></div>

### Gallery Columns Layout

The gallery columns layout can be adjusted to use Masonry style by enabling the **Masonry Mode Gallery**. This will align the items and remove any unused gaps:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-085f259b19907bc2bce534ee053c19718757f1db%2FColumned%20Portfolio%20-%20Masonry%20Mode%20Gallery.jpg?alt=media" alt=""><figcaption></figcaption></figure>

## Project Gallery

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

* **Images Reveal Effect**: *None*, *Fade* or *Slide and Fade* as gallery items come into view.
* **Image Spacing**: *Default spacing* or *No spacing (merged)*.
* **Image Captions Position**: *Use from Theme Options*, *On hover* or *Below image*.
* **Gallery Columns Gap**: The gap between items, in pixels.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-f9532b9b6cd7660e751f3f030108cf906a7fdff2%2FColumned%20Portfolio%20-%20Project%20Gallery.jpg?alt=media" alt=""><figcaption></figcaption></figure>

The Project Gallery section lets you add various media types, including:

* **Image**: Display a single image in your gallery. This is ideal for showcasing individual visuals or key elements of your project.
* **Images Slider**: Add a slider containing multiple images. This allows viewers to scroll through a series of images, which is useful for showing different angles or stages of your project.
* **Comparison Images**: Use an interactive slider to compare two images side by side. This is particularly effective for before-and-after shots or contrasting different design options.
* **YouTube Video**, **Vimeo Video** and **Self-Hosted Video**: Embed a video, whether hosted on one of those platforms or uploaded to your site. Videos can include project demonstrations, tutorials, or any other relevant content.
* **Text Quote**: Insert a text quote or message. This can be used to highlight key feedback, project descriptions, or significant statements related to your work.
* **HTML**: Add custom HTML to include additional elements such as interactive widgets, forms, or any other bespoke features that enhance your gallery.

These options allow you to create a versatile and engaging gallery for each portfolio item, showcasing your work in a dynamic and interactive manner.

To add a gallery item, click **Add New** and select from the available media types:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-12986815b4ada173ee1cb0759111a7894946c78b%2FSide%20Portfolio%20-%20Project%20Gallery%20-%20Add%20New.jpg?alt=media" alt="" width="212"><figcaption></figcaption></figure>

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