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

# Side Portfolio

This layout features a horizontal separation between the gallery and the content, creating a side-by-side arrangement. The gallery is displayed alongside the project content, offering a clear distinction between visual and textual information.

<figure><img src="/files/F5VUYYTaTKzARl3APcOv" alt=""><figcaption><p>Side Portfolio item type preview</p></figcaption></figure>

## Side Portfolio Options

After selecting the **Side Portfolio** item type, a new section will appear in **Parameters and Options** called **Side Portfolio**, along with custom **Project Gallery** options:

<figure><img src="/files/7nh7BH9KOcyA9iTinTlM" alt=""><figcaption></figcaption></figure>

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

### Content Alignment

By default, the content is aligned to the left. To change this, set the **Item Description Alignment** to **Right**. Additionally, you can adjust the width of the content container using the **Item Description Width** setting which be one of the followings: *50% (1/2)*, *33% (1/3)* or *25% (1/4)* of the wrapper container width.

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

### Sticky Description

The description for the item can be set to stick to the top of the viewport, just below the header if it is sticky. Enable the **Sticky Description** option to keep the content aligned with the gallery while scrolling, enhancing the viewing experience.

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

### Stretched Gallery Container

For a fullscreen gallery experience, you can stretch the gallery items to the edge of the viewport. Select the **Full Background** option in the **Gallery Type** to enable this feature and make the gallery extend to the full width and height of the viewport:

<figure><img src="/files/oPYnFzy098b9EXFTFDSg" alt="" width="299"><figcaption></figcaption></figure>

The result after enabling stretched gallery:

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

Please note that this effect is only visible on larger screens; on mobile devices, the gallery will retain its normal behavior.

### Gallery Columns Layout

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

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

## 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/AKeAabQvD6vim0ccYFlL" alt=""><figcaption></figcaption></figure>

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

* **Single Image**: Display a single image in your gallery. This is ideal for showcasing individual visuals or key elements of your project.
* **Slider Images**: 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.
* **Image Comparison**: 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.
* **Video**: Embed videos from platforms like YouTube or Vimeo, or use self-hosted video files. 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 Code**: 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="/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.

{% hint style="info" %}
The **Columned** item type shares the same gallery item options as the **Side Portfolio** type.
{% endhint %}