> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-collage.md).

# Image collage

<mark style="color:orange;">**Note!**</mark> By adding the section, you get a ready-made layout. Use settings from the section and blocks to customize the image appearance according to your preferences.

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Images</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-collage/images.md)" blocks.\
**Tip:** Press **"Add block"** to use the "Images" block. Each block can be added individually and customized in different ways.
{% endhint %}

### Section link

**Link**\
The collage can be linked to pages/ collections/ products. Choose the destination in the source selector.

**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.

### Layout

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Vertical alignment**\
Choose how the "Header" content group is aligned relative to the image collage: "Top", "Center", or "Bottom".\ <mark style="color:orange;">**Note!**</mark> The option is available for the "Split" layout.

**Use custom column width**\
Show the width settings by activating the option.

**Content column width**\
Control the collage size using the scale, which ranges from 25% to 75%.

### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Animations

**Hover animation**\
Adds an animation inside the image container. Choose the suggested option from the list:

* **"Use theme settings"**. Select the option if there is no need to apply animation settings for the section individually. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "**Banner image"** hover animation drop-down. Read the details on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/theme-settings/animations.md#hover-animation).
* **"None"**. Deactivates the animation.
* **"Zoom in"**. Enlarges the image on mouse hover over the banner.
* **"Zoom out"**. Decreases the image on mouse hover over the banner.

Read more about the described options on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#animations).

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/jjB5mlAl0s4CGgnJrG7a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/99fDX8epBol6p8D3v3ge" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}