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.
You'll have these options:
- Select one of our royalty-free stock images
- Upload an image of your own
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 Splash images (and videos) for you to use.
However, if you'd like to find more background images we have three suggestions:
- The Stocks is a great resource. It 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.
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 add 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 in mobile environments.
Styling your Splash Block
There's a range of options for tweaking your splash image:
- You can change the image or video size by setting the block at full page / 1/2 page / 1/3 page.
- You can apply an adjustable tint of one of your brand colors over the image.
- 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 also adjust the overall opacity of the block, or have the text appear on a semi-transparent background card for greater contrast.
File sizes, Resolutions, and Cropping
The best ratio for a Splash image is 16 x 9. At Qwilr, we use images that are 1600 pixels wide by 900 pixels high, but you can use bigger or smaller images if you wish.
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.
One important thing to keep in mind about Splash backgrounds, though, is that they're a design element. Your image or video will be resized or cropped as needed depending on the screen size of the viewer. Splash backgrounds are great for adding a wow factor, but shouldn't be used if you need your clients to see 100% of an image or video. (In those cases, you can use an inline image or a video block.)
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.