Colors & Background

In the Design section, we can customise our Landbot 'to the infinity and beyond' with more than 20 variables to make it look unique.

To get access to this section all you need to do is clicking on the Design button on the top menu of the builder as below:

Overview

The section is divided into several sub-sections, which we'll cover in the other articles of this category but first, let's point out some important aspects of the main interface:

  1. Real-time changes. Every change you make using the left menu will be shown in real time on the right side of the screen. So, if you're making some changes using, let's say, the Custom Style editor, and you notice no changes, something might be going wrong!
  2. Saving. The app will auto-save your changes every time you move from one section to another to make sure you don't lose any edits, so keep that in mind.
  3. Preview. The right side of the screen contains a fully interactive landbot so you don't need to click preview to test the flow along with the design edits.
  4. Hexadecimal colors. All color-related options allow you to add your own hexadecimal color code to make sure you can fully replicate your brand image in your landbot. 

Colors and backgrounds

Here we can modify the color of every element in our landbot, organised in the following sections:

Base Colors

These are the four colours that have the most presence in your design. If you don't want to spend a lot of time in Design, these are the four variables you should play with.

Base colors - Primary

Base colors - Secondary

Base colors - Dark

Base colors - Light

Background

Choose between five different types of background:

Background - Gradient

A color that transforms into other color. Choose both - top and bottom - to create your own gradient.

Background - Color

The classic of the classics.

Background - Image

Upload your own image (JPG, PNG or GIF) as a background. Try to use at least Full HD resolution (1920X1080) to make sure it's correctly displayed on any device.

Background - Video

Pick between our gallery of videos and your landbot will look alive! You can't add your own videos yet, but we're working on it!

Background - Hide

Avoid any background and use the one you are already using on your website.

Choose how you want your header! you can keep it as it is or customise it! Edit the color of the text contained too!

Header - Custom
  1. Top bar background color

  1. Top bar text

Header - Hide

Chat bubbles 

Modify every colour from the bubbles (visitor's, landbot's, box, text...).

Chat bubbles - Custom
  1. Bot messages background

  1. Bot messages text

  1. User messages background

  1. User messages text

Forms

Customise your buttons: pick the background you like more and tune up your text area.

Forms - Custom
  1. Buttons background

  1. Buttons text

  1. Textarea background

  1. Textarea border

  1. Textarea text


How did we do?