Splash Blocks (Background on your Pages)
A Splash Block creates instant engagement.
It's a great way to start a new Page or to break up your existing content. You can use still images or videos as backgrounds across the board, but this Block is a stunning way to get your buyers engaged.
In this article:
- Creating a Splash Block
- Background with an image
- Background with a video
- Styling your Splash Block
- File sizes, resolutions, and automatic cropping
- Frequently Asked Questions
Creating a Splash Block
Think of Blocks like Lego pieces that stack to create more content. To add a new Block, first start by clicking the + icon at the top or bottom of any existing Block.
Then, select the Splash icon from the New Block Menu.
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.
When you add a Splash Block, a random image is selected by default. To change it, open the Background menu (circle icon) in the top left corner.
Here, you have a choice: you can return to a single-color background or add an image or video instead.
Background with an image
To set an image as a background, click the Background menu and select Image as the background type. Then, click Background Image. This will automatically open the library. You can either drag an image from the library into the Background Box or click the Upload button in the Background Box to choose a file from your device.
Note: The image must be dragged into the Background Box. Clicking on it or dragging it onto the Block itself will insert it onto the page instead of applying it as a background.
Background with a video
With videos, you can add some eye-catching movement to your pages.
To use a video as a background, click the Background menu and choose Video. Next, select Background video. The library will open automatically. You can either drag a video into the Background Box or click Embed to add one from a hosting service.
To use a video of your own, you'll first need to upload it to YouTube and set it as Public or Unlisted. (Tip: you can also use Vimeo for that).
After clicking the Embed button, you will be prompted to insert either a link to the video hosted on the platforms, or the embed code:
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 Style Library icon. Then, select Customize style.
- 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.)
There are additional styling options if you head to the top left corner and click the Background menu icon.
- Background tint: Add a semi-transparent layer over the background to improve readability.
- Tint style: Select "Normal" for a standard overlay or "Blend" for a smoother integration with the background.
- Tint opacity: Adjust the transparency of the tint using the slider (0 for none, 100 for full coverage).
- Background card: Toggle this on to add a separate background behind text for better 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.
If you need your clients to see 100% of an image or video no matter the screen size, it's best to use an inline image or a video block.
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.
Frequently Asked Questions
Q: Can I save my Block and reuse it across different Pages?
A: Yep! If you like your new block, save it so you can reuse it again.
In the top left corner of the Block, click the Block Options icon (3 dots). Next, click the blue Save Block icon. Give the block a title, and click Save.
Q: Why does my Video Splash Block not play on Mobile?
A: Splash background videos are visually appealing, but can be complicated to deal with on mobile devices.
If your client views your page on a mobile device, they'll see a thumbnail image in place of the Splash video. There are two reasons for this. First, video uses data - so we wanted to avoid that. Secondly, there are some restrictions with YouTube that prevent background embeds on Mobile.
So to avoid any issues on your clients' mobile devices, we replace the video with a static image.
If you have admin access to the video on YouTube, you'll be able to set or change the thumbnail image via the video settings on YouTube's side.
Q: Can I change a Splash Block from image to video?
A: Yes you can! In the top left corner of the Splash Block, click on the Background menu icon (circle).
From there, click on Background and choose the option you need:
Let us know if you have any questions or feedback by emailing [email protected].