--- title: How to Use the Tile Gallery Widget? description: Use the Tile Gallery widget to display images in a modern, non-uniform tiled layout. --- [Skip to content](https://success.ministrydesigns.help/how-to-use-the-tile-gallery-widget#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) # How to Use the Tile Gallery Widget? ## Arrange images in a stylish tiled layout 1\. A tile gallery is a widget with a layout that displays images in a grid of tiles. Each tile can vary in size and shape, creating a visually interesting and organized way to showcase multiple items. This type of gallery is often used to present photos, portfolios, or products in an appealing and easy-to-navigate format. Drag and drop the Tile Gallery widget on the page ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-21/264cf626-f4d1-4c98-8082-e1fff74637ea/ascreenshot.jpeg?tl_px=0,328&br_px=859,809&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=32,212) 2\. Left-click the Tile Gallery to edit the Settings described in Step 3 and further ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/d8b9579f-c728-412f-9d21-1c6579320ccc/ascreenshot.jpeg?tl_px=294,166&br_px=1441,807&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=370,283) 3\. Left-click the Tile Gallery widget twice or click "Edit" to prompt the window from Step 4 ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/9e1edab2-c14e-4a74-9546-d88929380770/ascreenshot.jpeg?tl_px=1060,35&br_px=1920,516&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=686,212) 4\. Click "Add Images" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/9d449d5c-382d-4c12-9560-cf0ca270f8df/ascreenshot.jpeg?tl_px=83,0&br_px=943,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,67) 5\. Select images for the Tile Gallery from the Media Library ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/146d327c-3488-4670-b0ab-0f334c2b5aef/ascreenshot.jpeg?tl_px=288,166&br_px=1148,647&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) You can select several images for the Tile Gallery from the Media Library by holding the Ctrl button on the keyboard and left-clicking once on each image 6\. Click "Apply" to add the required images to the Tile Gallery ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/428ede73-8cc2-45a2-bd30-9460a1c00173/ascreenshot.jpeg?tl_px=338,304&br_px=1485,945&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,438) 7\. Click "Apply" again to confirm the selected images ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/c8c1b9d3-6b83-4ef8-a674-91d0a608354b/ascreenshot.jpeg?tl_px=216,175&br_px=1593,945&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,439) 8\. Enable alignment to the bottom with the "Align to the Bottom" checkbox for horizontal images to fill up the space in the gallery ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/5c1ed762-2635-4659-a905-237b19863ba3/ascreenshot.jpeg?tl_px=1060,83&br_px=1920,564&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=583,212) 9\. This is how it looks. The horizontal images are aligned to the bottom to fill in space ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/c6e7bee3-7fd3-4b1c-8fed-c1158ffba9a3/ascreenshot.jpeg?tl_px=773,261&br_px=1920,902&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=625,276) 10\. Enable Image Counter in Tile Gallery with the "Show Image Counter in Lightbox" checkbox. It will show a number counter for Lightbox images, providing a visual hint of which image is being viewed. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/743b46a8-6fd7-40fc-9046-9a490f047906/ascreenshot.jpeg?tl_px=1060,133&br_px=1920,614&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=579,212) 11\. Select a device resolution that should have different columns and margins for the Tile Gallery. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/2c71be83-32ed-479b-99da-f643e93dfce8/ascreenshot.jpeg?tl_px=657,108&br_px=1517,589&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=660,212) 12\. By default, the columns and margins values are inherited from the Desktop version to other devices. However, these values can still be set to something else on smaller devices ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/d7fb02ca-cb18-4a09-a1e5-a5527dc45829/ascreenshot.jpeg?tl_px=657,192&br_px=1517,673&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=632,212) 13\. Tile Gallery now has 3 columns as a result of the Tablet resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/c543fb53-aad9-4777-8bee-0f7d273cc7fe/ascreenshot.jpeg?tl_px=270,294&br_px=1417,935&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=465,359) 14\. If needed, both columns and margins can be reset to the inherited values by clicking an arrow next to them ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/f5119c0b-ce57-49f1-a9b0-27f26854ce8b/ascreenshot.jpeg?tl_px=1060,295&br_px=1920,776&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=803,212) 15\. Use Margins to increase spacing between each tile ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/afc63194-6dba-4d97-a4b3-dc48638c1dbb/ascreenshot.jpeg?tl_px=1060,375&br_px=1920,856&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=643,212) 16\. "Visible Caption on" is the same feature as "Visible On". For more information on the Visible On feature, please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/5fe7ccce-df92-436a-ae23-5acdcdf6221e/ascreenshot.jpeg?tl_px=1060,464&br_px=1920,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=662,225) 17\. To add a caption, left-click the Tile Gallery widget twice or click "Edit" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/db363dd7-4a36-4974-8d3e-94c6aca5077d/ascreenshot.jpeg?tl_px=1060,43&br_px=1920,524&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=697,212) 18\. Click on a pencil icon to edit an image in the Tile Gallery ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/39012649-247f-4b30-98bc-bd9235a96e90/ascreenshot.jpeg?tl_px=242,12&br_px=1102,493&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 19\. Specify an Alt Text for the Tile Gallery image ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/2d54c542-3e18-41bf-8eb2-7b5a65710700/ascreenshot.jpeg?tl_px=284,0&br_px=1144,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) The Alt Text provides alternative information for an image if a user for some reason cannot view it (because of a slow connection or if the user uses a screen reader). Please refer to [this SEO](https://success.ministrydesigns.help/how-do-i-seo-optimize-my-website) guide on how to adjust the SEO settings 20\. Type the text for the caption in this text field to have a caption with a predefined Text Style ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/a0bc57ab-b4fa-4459-a4db-63f6bdad054a/ascreenshot.jpeg?tl_px=242,130&br_px=1102,611&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 21\. Select from the dropdown where to link the Tile Gallery images. By default, they will open in Lightbox effect, filling the screen, and dimming out the rest of the web page. Please refer to [the following guide](https://success.ministrydesigns.help/link-to-overview) that explains in broad detail how the Link To feature works. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/4fe301fa-8d8b-4cfc-ace6-acd8affb7f25/ascreenshot.jpeg?tl_px=346,430&br_px=1206,911&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 22\. Alternatively, turn on the "Enable Text Editor" toggle for editing the caption with the Text Editor ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/ed051410-211e-4bba-93f7-3dedddc32a6f/ascreenshot.jpeg?tl_px=305,78&br_px=1165,559&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 23\. Use the Text Editor for more detailed editing of the caption. Use additional options besides Text Styles such as alignment, adding a link to text, etc. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/3757e2c6-10cf-40b9-bd2e-4fd57a8b4d61/ascreenshot.jpeg?tl_px=490,133&br_px=1350,614&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 24\. Click "Apply" to confirm the changes to the image ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/099999b7-f4b3-4157-a0ff-1393928581a9/ascreenshot.jpeg?tl_px=415,395&br_px=1398,945&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=459,450) 25\. Click "Apply" again to confirm the changes to the image in the Tile Gallery ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/1af2babf-b284-4422-854c-23dbae30b98c/ascreenshot.jpeg?tl_px=221,175&br_px=1597,945&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,442) 26\. Click "Save" for the changes to take effect on the page ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/bea030f1-df3d-4840-b69b-32ab276bd321/ascreenshot.jpeg?tl_px=1060,0&br_px=1920,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=777,63) 27\. This is how it will look on the page preview. The caption is using the Text Style from the Text Editor ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-09/ddf69f22-61f7-4d15-8459-558e7c0e7d99/ascreenshot.jpeg?tl_px=175,320&br_px=1035,801&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) The rest of the features here - Spacing, Visible On, Animation, Design - Preset, and Text style are common features in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on these features. - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,