Block Styles

With Block Styles you can put your own twist on your Qwilr Page styling. Want the font a bit larger? Block Styles has you covered. Want to change the background color? Still there for you. Make your accept button a different color? Yep! Give it a try today.

Note: This feature is available on all Starter, Trial, Pro, and Business plan accounts. 

Styles are always controlled by the style icon. When you see the paint roller icon that means style options are available for that element. Some block types have different options than others. For example because Splash blocks have the option to have a background image, Block Styles will give you the option to add a tinted overlay to that image. There will be sections below discussing the options for each block type as well as how to save and reuse your styles.

The Basics

Contextual Controls

You can make quick changes to your text styles by highlighting and editing.

Highlight the elements and you'll see a menu pop up. From there click on the styles icon. You'll be able to change things like the color and size of your text as well as left or center aligning. For a full list of controls read our Contextual Editing section.

Block Level Controls

If you want to make larger changes, that's where the block level styles come in. Next to the block settings icon is the Block Styles icon. Click on that to expose the options. The exact options will differ based on the block type, but in general you can make overall block and text changes. 

This includes:

  • Changing your block background color
  • Making your block wider or narrower
  • Making your block taller or shorter
  • Changing your font color or size all at once
  • Changing your font alignment for all elements at once

Contextual Editing

With contextual editing, you can highlight the element you want to style to bring up the menu. Then click the style icon to access the controls. You'll be able to style:

  • Headings
  • Subheadings
  • Paragraphs
  • Tables
  • Links
  • Lists
  • Pull Quotes

Headings

You'll be able to control the font size, color, and alignment.

Subheadings

You'll be able to control the font size, color, and alignment.

Paragraphs

You'll be able to control the font size, color, and alignment.

Tables

You'll be able to control various parts of the table styling, including both font colors and border style and color. Click on the edges of the table to highlight and you'll see the menu pop up allowing you to click on the style icon and make your changes.

Links

You'll be able to control your link text color as well as if there is an underline and if so what color it is. Within the link menu you'll see the style icon to access the contextual controls.

Lists

You'll be able to control your list color, the marker type and the marker color. Highlight all of the text in your list to see the style option pop up.

Pull Quotes

You'll be able to control your quote text size and the styling such as the bar color or if you have a quote mark. Highlight your pull quote to see the editor menu.

Splash Block Controls

Along with the basics of text and background controls, alignment, sizing and spacing, Block Styles also allow you to control tinted overlays and background cards on your Splash Blocks.

Because you can add a background image or video to your splash, you want to make sure that your text remains readable. Overlays and cards are the way to do that.

Head to your styles superpower to open up the options:

From there you can choose to add an overlay of color. These include your brand colors along with charcoal, silver, and white. However, if you click "edit" you can also choose to add a custom color using an HTML Hex code.

That adds a gentle wash of color over your background, but you can adjust how gentle it is using the opacity option. The smaller the number the less of the tint that shows, and the larger the number the more of the tint.

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 define the opacity with it, so you can have a subtle white box background your text.

Quote Block Controls

For the Quote Block, you have those same block level controls, but you can control some of the coloring of the quote itself. Click on your Quote section and you'll see a menu pop up. This contains options to move your section up and down and delete the section. But importantly it also contains the style superpower. Clicking on that opens up the options for quotes.

First, you can choose whether or not there is a card background. That defaults to the pale gray at the top of each section and your total box along white behind your line items. 

You can turn that off entirely and instead your quote block background color will show through. You'll see some limits on colors here as Qwilr will disable brand colors that wouldn't contrast well to make sure your text is readable for your clients.

If you want to keep the card color, you can change it to be one of your brand colors. Again, the color options you see depend on the block background.

You also have an option to set your highlight color. This is for small highlights such as when you've added a discount or made a line item optional.

Accept Block Controls

In your accept block, your special styling superpower is to change the accept button color. Click on the button itself and you'll see options to preview (that will let you preview the whole accept process) or style. Styling gives you color options. 

Like the Quote Block options, the colors you see are limited by your background color and your brand colors. You'll only see your two brand colors along with charcoal or silver. However, if your chosen block background color is dark, for example, only light colors will be offered for your button. This is to give color contrast and make sure your accept button is always easily visible to your clients.

Video Block

You'll have the standard block and text style options in the Video Block. These include:

  • Block background color
  • Block spacing
  • Block width
  • Text color
  • Text alignment
  • Text size

Saving Styles

Once you have everything in your block set up the way you want it, you can save the style for future use. Head to your Style Library and click on the + icon to save your style. Name it and save.

Now next time you're creating a block of that type, your style will be there for use.

If you've applied a saved style to a block and then changed that style, you'll see a prompt to save your edits.

Head to the settings menu and choose save:

And then you'll have a couple of options. You can choose to update both the existing style and all blocks (both old and new) using it. Or you can update only new blocks going forward using that style. Then update and save!

Reusing Styles

To reuse a saved style, head to your style library and click on the style in your list that you want to use. It will automatically be applied. You an also use the search field to search your styles by name and find just the right one.

Still need help? Contact Us Contact Us