Control the visual style of your entire landing page. Set backgrounds, button styles, form designs, block layouts, and fonts to create a cohesive look.
What you can customize
| Element | What it controls |
|---|---|
| Background | Page background color, gradient, or image |
| Button | Button size, colors, borders, and corners |
| Form | Form field styling and colors |
| Block style | Component borders and shadows |
| Block header | Component title styling |
| Block body | Component content styling |
| Unwrapped contents | Text outside of components |
| Font | Typography across the page |
How to access page appearance 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 Page Appearance
After clicking Customize page design, two sections appear:
- Header Appearance - Custom header settings
- Page Appearance - Custom page body settings
Click Page Appearance to expand it.
Setting the page background
Control the main background of your landing page.
Background type: Color
Solid color: Use the color picker to select a single background 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 |
Set stop colors and color offsets to control 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.
Background type: Image
Upload a custom image as your page background.
| Setting | Options |
|---|---|
| Image fit | Stretch, Fit, or Repeat |
| Image blur | None, Soft, Strong, or Glass-like |
Styling buttons
Customize how buttons appear across your landing page.
Button size
| Option | Best for |
|---|---|
| Tiny | Compact layouts |
| Small | Secondary actions |
| Medium | Standard buttons |
| Normal | Default size |
| Large | Primary actions |
| Huge | Maximum emphasis |
Button color
Choose from: - Solid - Single color - Linear gradient - Directional color blend - Radial gradient - Color radiating from center
Button text color
Use the color picker to set text color inside buttons.
Button border
| Setting | Options |
|---|---|
| Border style | None, Thin, Medium, Thick |
| Border color | Color picker |
| Corner radius | None, Small, Medium, Large, Full |
Styling forms
Customize form fields on your landing page.
Form size
| Option | Best for |
|---|---|
| Tiny | Compact forms |
| Small | Simple inputs |
| Medium | Standard forms |
| Normal | Default size |
| Large | Easy touch targets |
| Huge | Maximum accessibility |
Field background color
Choose from: - Solid - Single color - Linear gradient - Directional color blend - Radial gradient - Color radiating from center
Field text and border
| Setting | Options |
|---|---|
| Field text color | Color picker |
| Border style | None, Thin, Medium, Thick |
| Border color | Color picker |
| Corner radius | None, Small, Medium, Large, Full |
Form state colors
| State | What it indicates |
|---|---|
| Active color | Field is selected |
| Success color | Input is valid |
| Error color | Input has an error |
Styling blocks (components)
Control how components appear on your page.
Block style
| Setting | Options |
|---|---|
| Border radius | None, Small, Medium, Large |
| Border style | None, Thin, Medium, Thick |
| Border color | Color picker |
| Shadow | None, Thin, Medium, Large |
Block header
The block header contains the component title and description.
Layout: | Option | Style | |--------|-------| | Layout 1 | Left aligned | | Layout 2 | Center aligned |
Background color: Choose from solid, linear gradient, or radial gradient.
Blur effect: None, Soft, Strong, or Glass-like.
Typography: | Setting | Options | |---------|---------| | Title size | Normal, Medium, Large, Huge | | Title color | Color picker | | Description size | Tiny, Small, Normal, Medium | | Description color | Color picker |
Block body
The block body contains the component content.
Background color: Choose from solid, linear gradient, or radial gradient.
Blur effect: None, Soft, Strong, or Glass-like.
Typography: | Setting | Options | |---------|---------| | Text size | Tiny, Small, Normal, Medium | | Text color | Color picker |
Styling unwrapped contents
Control text that appears outside of components.
| Setting | Options |
|---|---|
| Text size | Tiny, Small, Normal, Medium |
| Text color | Color picker |
Choosing a font
Select a font for your entire landing page:
- Arial
- Atma
- Anton
- Roboto
- Open Sans
- Special Gothic
- Tinos
- Newsreader
- Pacifico
- Merriweather
The font applies to all text on your page including headers, body text, and buttons.
Tips for great page design
- Stay consistent. Use the same colors and styles throughout.
- Prioritize readability. High contrast between text and background.
- Test on mobile. Most visitors scan QR codes on phones.
- Use templates first. Start with a preset template, then customize.
- Less is more. Simple designs often perform better.
Common questions
Can I use different fonts for different sections?
No. The font setting applies to the entire page. For consistent branding, one font works best.
What is the difference between block header and block body?
The block header contains the component title and description. The block body contains the actual content (text, images, links, etc.).
Will my changes affect all components?
Yes. Page appearance settings apply globally. All components on your page use these styles.
Can I reset to default styles?
Yes. Select a template from Choose a template to reset your design, or manually adjust settings back to defaults.
How do I preview my changes?
The preview panel updates in real time as you make changes. Check how your design looks before saving.
Comments
0 comments
Please sign in to leave a comment.