A Splash Block is a beautiful design element that also helps break up your page content. This type of block contains a background image or video - you can choose these from our extensive library or upload your own.
In this article:
Creating an image Splash Block
To create a Splash Block with a still image as its background, select the Splash icon from your block menu.
Click Add Image. (Or, click Add Video to create a video Splash Block.)
Note: If you need to change an existing Splash Block from an image background to a video background (or the opposite), please see this article.
From there, you'll have two options. First, you can browse our royalty-free stock library using the controls.
If you'd rather upload your own image, click the Upload button.
Tips for choosing a great splash image
A great Splash image can make your Qwilr Page sing. We've partnered with Unsplash to provide a library of thousands of stock images (and videos) for you to use.
However, if you'd like to find more background images we have three suggestions:
- The Stocks aggregates around a dozen excellent splash image websites. All are royalty-free and ready to use.
- Google Image Search has a filter that allows for royalty-free image search. This means you can sometimes find great photos of specific places/things for free.
- Take your own photos! Having photos of your project, previous work, or team is a great way to personalize your page.
Note: Qwilr has a mobile-responsive layout. This means that as your page is viewed on different screen sizes, the Splash image will change in width, and re-crop automatically to fit. We recommend using a flexible background image.
Creating a video Splash Block
With video Splash Blocks, you can add some eye-catching movement to your pages.
To create a Splash Block, select the Splash icon from your block menu.
Click Add Video.
You'll have these options:
- Select one of our royalty-free stock videos
- Embed a YouTube video (by inserting the video's URL)
In the Qwilr video library, you can preview any video by clicking on it. To use the video, click the Use Video button in the lower right corner.
To use a video of your own, you'll first need to upload it to YouTube and set it as Public or Unlisted. Then click the YouTube button at the top of the library page and paste in the URL.
What your client sees
Splash videos are intended as backgrounds, so they're silent. Even if your YouTube video has an audio track, no sound will play in the Splash Block. If you need to have audio with your video, it's best to use a Video Block or inline video instead.
If your client views your page on a mobile device, they'll see a thumbnail image in place of the Splash video. The reason we do this is that automatically streaming video consumes data. So to avoid doing that on your clients' devices, we replace the video with a static image on mobile devices.
Styling your Splash Block
To access styling options for your Splash Block, head to the top left corner of the block and click the styling icon.
- You can change the image or video size by setting the block to 1/3 page, 1/2 page or full page.
- You can place text over the splash image, or add an inline image that will superimpose over the background image. (It's a great way to add your logo.)
- You can apply an adjustable tint of one of your brand colors over the image.
- You can also adjust the overall opacity of the block, or have the text appear on a background card for greater contrast.
File sizes, resolutions, and automatic cropping
The best ratio for a Splash image is 16 x 9. If you use an image that's 1600 pixels wide by 900 pixels high, most of it will fit on an average-size desktop monitor. But keep in mind that the Splash Block is meant as a flexible background element. Your Splash image (or video) will recrop automatically on smaller and mobile screens.
Splash images can be up to 2mb in size. If you have an image you want to use, you may need to reduce the file size before you can upload it to Qwilr. It's best to use an image set at 72 dpi.
Changing the Splash image
If you decide to change to a different image or video, click the Swap Splash button at the top left corner of any Splash Block.
You'll be taken back to the image library, where you can select from our stock images and videos or upload another one of your own.
If you like your new block, save it so you can reuse it again.