Colors & Background

Updated 2 weeks ago by Pau Sanchez

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 icon on the right 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:

  1. 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.

  1. Background. Choose between five different types of background:
    1. Gradient. A color that transforms into other color. Choose both - top and bottom - to create your own gradient.
    2. Color. The classic of the classics.
    3. 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. 
    4. 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!
    5. Hide. Avoid any background and use the one you are already using on your website.
  2. Header.  Choose how you want your header! you can keep it as it is or customise it! Edit the color of the text contained too!

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

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

How did we do?