Columned

The Columned item type organizes gallery items into columns, forming a grid to showcase gallery content effectively. Similar to the Side Portfolio 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.

Columned item type preview

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.

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.

Left alignment (Right in RTL)
Centered content alignment

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.

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

Featured Image enabled
Full width featured image

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:

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.

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:

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

Last updated