Adding styling to blocks

Block Styling made easy! 

With Qwilr's styling tool, you can customize the design of your Blocks in many ways. This guide will show you all your options.

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 content styling tools for styling individual elements.

Splash Block styling

Splash Blocks have all the basic text, background, and spacing controls shown above. In addition to that, 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 black, 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

The Quote Block has all the standard Block styling options. In addition to that, you can add more styling to the quote itself. 

Click on any quote section, and you can choose whether or not your quote has a Card background. This means that the top section is a brand color 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.

You also have the option to set your highlight color, which is used for small highlights like when you've added a discount or made a line item optional.

You can also style any Plan cards you're using in your quote. Click along the top edge of any group of cards to access the paint roller icon. You can set a primary color for selected cards and a highlight color for discounts.

Accept Block styling

In the Accept Block, you can change the color and alignment of the Accept button. Click on the pencil icon to access the styling tools. 

You'll be able to choose from your brand colors along with black, white, 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.

Stuck? Reach out to the Support Team at help@qwilr.com!