Adding styling to blocks
With Qwilr's styling tool, you can customize the design of your blocks in many ways. This guide will show you all your options.
In this article:
Styling options on all blocks
Every block has some general styling options, which you can find at the top left corner. Click on the Block Style icon to open the menu.
The exact options will differ based on the block type, but in general you can make these overall changes:
- Change your block's background color
- Make your block wider or narrower
- Make your block taller or shorter
- Change the color or size of all fonts at once
- Change the alignment of all fonts and image elements at once
- Add animations to your block
Note: If you highlight any text in a block, you'll also have access to a separate set of contextual styling tools for styling individual elements.
Splash Block styling
Along with the basic text, background, and spacing controls above, in Splash Blocks you can also add tinted overlays and background cards. These styling options are great for making any text you've placed on the block easy to read. You can also add a tint of your brand color to the splash image.
When you open the Block Styles menu in a Splash Block, you'll see these options:
Your tint color choices are your brand colors along with charcoal, silver, and white. If you click Edit, you can also choose to add a custom color using an HTML Hex code. You can adjust the tint by sliding the Opacity slider.
If the tint isn't quite what you're looking for, try a background card. This puts a box around your text to help it stand out. You can also adjust the opacity of the card.
Quote Block styling
You'll find the standard block styling options in the top left corner of the Quote Block. Click on the quote itself, and you'll also be able to customize its look.
You can choose whether or not your quote has a card background. This means that the top section is a brand color of your choice and the line items have a white background. You can also select no background, so your quote sits on the background color.
You might see some limits on available colors here, as Qwilr will disable brand colors that wouldn't contrast well. These limits ensure that your text is readable for your clients.
Accept Block styling
In the Accept Block, you can change the color and alignment of the Accept button. Click on the button itself to bring up the style icon.
You'll be able to choose from your brand colors along with charcoal or silver. If you've set a dark background color for the block, however, only your light brand colors will be available for the button. This restriction ensures that the Accept button contrasts from the background, so it's highly visible for your clients.