How to customize your header appearance – FreeQR

The header is the first thing visitors see on your landing page. Customize the image, title, layout, and colors to introduce your content and make a strong first impression.

What you can customize

Element	What it controls
Profile	The image, title, and description
Layout	How the header content is aligned
Background	The area behind the header
Profile backdrop	The background behind the profile section
Typography	Text sizes and colors

How to access header settings

Step 1: Open your landing page editor

Go to your Dashboard, select your QR code, and click Edit.

Step 2: Go to the Design tab

The editor has four tabs: Info, Build, Design, and QR Code. Click the Design tab.

Step 3: Open custom design settings

In the Design tab, you will see Choose a template with pre-made design styles. Below the templates, click Customize page design to expand the customization options.

Step 4: Find Header Appearance

After clicking Customize page design, two sections appear:

Header Appearance - Custom header settings
Page Appearance - Custom page body settings

Click Header Appearance to expand it. You will see five sub-tabs: Profile, Layout, Background, Profile Backdrop, and Typography.

Setting up your profile

The profile section appears at the top of your landing page. Use it to identify the page content.

Field	What it does
Profile image	Logo, product image, photo, or icon
Title	Page title, business name, or headline
Description	A short tagline or summary of the page content

Tips: - Use a square image for best results - Keep the title short and memorable - Use the description to set expectations for the page

Choosing a layout

Select how your header content is aligned:

Option	Style
Layout 1	Center aligned
Layout 2	Left aligned

Center alignment works well for personal profiles and simple pages. Left alignment suits business pages with longer titles.

Customizing the background

Set the background for your entire header area.

Background type

Option	What it does
None	Transparent header, shows page background
Color	Solid color behind the header
Image	Custom image as header background

Background blur

When using a color or image background, you can add blur:

Option	Effect
None	No blur effect
Soft	Light blur
Strong	Heavy blur
Glass-like	Frosted glass effect

Setting up the profile backdrop

The profile backdrop is the background directly behind your profile info. This sits on top of the header background.

Backdrop color types

Solid color: Use the color picker to select a single color.

Linear gradient: Blend two or more colors in a direction.

Direction	Effect
To bottom	Colors flow top to bottom
To right	Colors flow left to right
To bottom left	Diagonal flow
To bottom right	Diagonal flow

For gradients, you can set: - Stop colors (the colors in your gradient) - Color offsets (where each color starts and ends)

Radial gradient: Colors radiate outward from a center point. Choose from 25 preset positions on a 5x5 grid to set the gradient center.

Backdrop blur

Add blur to your profile backdrop:

Option	Effect
None	No blur
Soft	Light blur
Strong	Heavy blur
Glass-like	Frosted glass effect

Adjusting typography

Control the size and color of your header text.

Profile title

Size option	Best for
Normal	Standard titles
Medium	Slightly larger emphasis
Large	Bold, attention-grabbing
Huge	Maximum impact

Use the color picker to set your title color.

Profile description

Size option	Best for
Tiny	Subtle, secondary text
Small	Compact descriptions
Normal	Standard readability
Medium	More prominent descriptions

Use the color picker to set your description color.

Tips for a great header

Match your brand. Use colors from your logo or website.
Keep contrast high. Make sure text is readable against your background.
Test on mobile. Preview how your header looks on smaller screens.
Less is more. A clean header is more professional than a cluttered one.

Common questions

Can I remove the header entirely?

Set the background to None and leave the profile fields empty. The header area will not display.

Why does my text look hard to read?

Check your color contrast. Dark text needs a light background. Light text needs a dark background. Adjust your backdrop color or text color.

Can I use my own background image?

Yes. Select Image as your background type and upload your image.

What image size works best for the profile?

Square images work best. We recommend at least 200x200 pixels.

Can I change header settings after publishing?

Yes. Edit your landing page anytime. Changes go live when you save.

Search