Side Portfolio
Last updated
Last updated
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.
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:
These options are specific to this portfolio type and allow further customization of the layout.
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.
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.
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:
The result after enabling stretched gallery:
Please note that this effect is only visible on larger screens; on mobile devices, the gallery will retain its normal behavior.
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:
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.
The Columned item type shares the same gallery item options as the Side Portfolio type.
