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:
- Block Color: Change your block's background color. You can choose among your brand colors, or click Edit to paste in a custom hex color code.
- Block Width: Make your block's content wider or narrower
- Block Spacing: Make the padding at the top of your block larger or smaller
When the Block Styles menu has a Text tab, you can:
- Change the brand color or size of all fonts at once
- Change the alignment of all fonts in the block at once
In the Animate tab, you can 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
In addition to the standard block styling options you'd find in the top left corner of the Quote Block, you can add more styling to the quote itself.
Click on any section, and 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 None and remove the color headers.
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.