A Splash Block is a beautiful design element that also helps break up your page content. You can use still images or videos as backgrounds.
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.
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
- Insert the URL of a YouTube video of your own
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' mobile devices, we replace the video with a static image.
Styling your Splash Block
To access styling options for your Splash Block, head to the top left corner and click the Block Style 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.