Trio showcase settings

This guide describes the Trio Showcase section.

Use the Trio Showcase section to display a visually engaging layout with multiple images and centrally positioned content. You can add between one and three images on the left and between one and three images on the right.

Content options include:

Heading
Text
Button

The content can be aligned in the center between the image columns, or positioned to the left or right, depending on your design preference.

A key feature of this section is interactive image movement—users can shift the images by moving their cursor.

Demo Example:The Trio Showcase section displayed on the homepage, featuring images on both sides and centrally aligned content.

How to access the Trio showcase section

Note: Section cannot be added to the Password page.

From any page, click on “Add Section” and choose “Trio showcase” from the list.

To insert a new section between existing ones, follow the steps in the article Add a section

How to configure the Trio showcase section

Basic Components

The “Trio showcase” section consists of two primary components:

General settings
Block. Available block types include:

Heading (Article "Heading")
Text (Article "Text")
Button (Article "Button")
Left image (Article "Left image")
Right image (Article "Right image")

General settings

Select a setting described in the following table:

Setting	Description
Content width	This option allows you to control the width of the left and right images. Set the desired width using the slider.
Content alignment	You can horizontally align your main heading, text, and button: Left Center Right
Desktop content position	You can vertically align the heading, text, and button with respect to the images: Top Center Bottom

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.