All Collections
Building Your Site
Images & Video
Create a Hero Gallery Using Canvas Views
Create a Hero Gallery Using Canvas Views

Create a full screen hero image type gallery using canvas views

Jeff Willems avatar
Written by Jeff Willems
Updated over a week ago

Galleries can be added easily to Showit via the gallery widget. However, if you want to add a full screen or Hero type gallery and/or add text and other elements, you can accomplish this using Canvas Views. Do keep in mind this is best suited to display a few images on rotation, for large quantities of images it is best to use our standard gallery options.

Getting Started

First, make sure you’re seeing the Page tab in the Site Panel, on the left, which will show you your list of Canvases and elements that make up your page. Click on the canvas you want to add the images to make sure it is set to a canvas type of Window Height. Click on the options menu (...) to the right of the Canvas name and choose Add Canvas View.

Now you will see the canvas views in your canvas layer denoted by the numbered canvas view tabs. 

Set Canvas View Backgrounds

Next, we want to select the first view, navigate to the Canvas View tab in the Properties Panel (right), and adjust the Canvas View Background setting there to set our image.

Once the background type is set to image under the Canvas View tab in the right sidebar you can click to add your desired image as we've done for view 2 in the image below.

Repeat the process for the remaining views to set the desired images as Canvas View Backgrounds under the Canvas View tab for each individual canvas view.

Auto-Advance or Next/Previous Arrows

Once that's finished there are two options for advancing the images. You can either set the images to auto-advance as a rotating slideshow or you can set up controls that will move the images along. In the example below, we show how to set up the auto-advance option. To set up the arrows simply add your arrow icons and set them with a click action to go to the next canvas view.

Did this answer your question?