Skip to content
  • There are no suggestions because the search field is empty.

How do I use the Branding tab in BlockLab?

The Branding tab in BlockLab is where you set the core styling for your whole website: colours, fonts, your logo, and button styles, all in one place, so everything stays consistent across every page.

How do I access the Branding tab?

  1. Open a page in BlockLab.
  2. Click on the Branding tab at the top.

You'll see four sections: Design, Fonts, Logo, and Buttons.



Design

Design is where you set the overall look and feel of your site, from your brand colours and background through to how wide your pages display.

  • Brand Colours give you instant access to your key hex codes, so you're not hunting them down every time you need one.

  • Main BG sets a solid background colour for your website, or you can click Choose BG Image to use an image instead. Once an image is set, use BG Style and BG Size to control how it displays, for example whether it repeats or scales to fit.

  • You can also set Maximum Page Width here, choosing between Narrow (960px), Default (1170px), or Extra Wide (1280px), to control how wide your site displays on larger screens.



Fonts

Fonts is where you set the typography for your whole website, so every heading, body of text, button, and link stays consistent wherever it appears.

  • Use the Choose Font to Edit dropdown to pick which text type you'd like to update: Heading 1, Heading 2, Body Text, Buttons, Links, or Links (hover).

  • For each one, choose a font from the list of Google Fonts, set its size in pixels, and apply Bold, Italic, Underline, or capitalisation as needed.

  • If the font you want isn't in the list, click Custom Fonts.

  • Enter the exact Google Font Name as it appears on Google Fonts, for example Major Mono Display, set the Font Weight, then click Add Google Font.
  • You can review everything you've added so far from the Existing Fonts panel, using Edit Font/CSS Theme.



Logo

Logo is where you upload the logo and favicon your website uses wherever the Logo block appears.

  • Upload your main logo and favicon here.
  • Your logo then becomes available directly through the Logo block, so you can add it to any page without needing to find it in the image library each time.

Buttons

Buttons is where you define a consistent style for every button on your site, so you don't need to style each one individually.

  • Choose between Flat, Gradient, or Ghost, then pick your Background (BG) and Border colours.

  • Turn on Auto Border if you'd like the border colour generated for you. It will be set slightly darker than your chosen background colour.

 

Tips

  • Changes made in the Branding tab apply across your whole website, so it's worth checking a few different pages after editing to make sure nothing looks off elsewhere.

  • Set your fonts and Maximum Page Width early on. Most other blocks and rows will follow these settings by default, saving you from adjusting them individually later.

  • Remember to publish your changes. They won't appear on the live website until you do.