In the Design section, we can customize our Landbot 'to the infinity and beyond' with more than 20 variables to make it look unique.
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:
- 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!
- 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.
- 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.
- 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.
- Design templates. Here you can pick between different templates to make your life easier:
Use one of them or take it as a starting point to keep customizing your design from there.
- Logo and avatar. Here you can edit everything in the header:
- Logo and avatar. Upload your company's logo or create a character and upload its avatar to make it feel more human by browsing a picture from your computer. Try using PNG formats a for better display.
- Text logo which is the piece of text right next to the logo.
- Tagline, ideal the slogan of your company (e.g. "Just do it") or the purpose of the chatbot (e.g. "Survey Bot").
- You can also choose if you want to remove the tagline or to customize the avatar by changing its size (scale) and shape (original, squared, round).
- Colors and backgrounds. Here we can modify the color of every element in our landbot, organized in the following sections
- Base Colors. These are the four colors that have the most pressence 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.
- Background. Choose between four different types of background:
- Gradient. A color that transforms into other color. Choose both - top and bottom - to create your own gradient.
- Color. The classic of the classics.
- 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.
- 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!
- Header. Keep it transparent or add a solid color to it. Customize the color of the text contained too!
- Chat bubbles and forms. Modify every color from the bubbles (visitor's, landbot's, box, text...) and the forms (textareas, textbox, place holder, time stamps, custom responses...).
- Fonts. Here you can select your landbot's typography (between Droid Serif, Inconsolata, Montserrat, Open Sans, Oswald, Raleway, Roboto, Roboto Slab and Lato) and modify it's size (keep in mind your audience!).
And that was it for the General Settings of the Design section. Check the following articles for Advanced Settings.