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

Each Block comes with general styling options, which you can find in the top left corner. Click the Style Library icon to browse Style Tiles, where you can choose from your Saved Styles or check out the current Block's styles.

Want to tweak the styles? Just click the paintbrush icon, then select Customize Style to make changes to texts, colors, and more.

The exact options will differ based on the Block type, but in general, you can make these overall changes:

Block Width: Make your Block's content wider or narrower
Block Spacing: Make the padding at the top of your Block larger or smaller

In the Animate field, you can add animations to your block.

Need more control over text styles? The Extended Text Widgets let you fine-tune additional text elements in your Block.

You can customize:

Small Text for subtle details, like fine print or disclaimers.
Medium Text for standard content, making it easy to read without being too bold.
Large Text for emphasis, headlines, or key messages that need to stand out.
H1, H2, H3, H4, T1, T2, T3, and Pull Quote for structured content.
Caption Text for annotations or descriptions.

To adjust these styles, click the paintbrush icon, go to Customize Style, and navigate to the Text tab. From there, you can tweak colors, fonts, and sizes to match your design.

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

Clicking on the Background icon will also allow you to change Block Color. You can choose among your brand colors, or click Edit to paste in a custom hex color code.

Text and Splash Block styling

Most Blocks have all the basic text, background, and spacing controls shown above. For Text and Splash Blocks, you can also add Images or Videos as your Background

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.

Here's an explanation of additional styling options in the Background area:

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.

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 [email protected]!