Blog | Banana.tech

Enjoy TOTAL DESIGN FREEDOM. Introducing the Front End Editor.

Written by Valeria Nidoli | Jan 4, 2024 8:30:00 AM

Banana's mission has always been to help our clients create high-quality tourist accommodation websites in the minimum possible time and with no technical resource consumption. To make this possible, our web builder has an infinite number of skins that can be combined to create almost any design imaginable.

Today we introduce the Front End Editor, the missing step to reach Total Design Freedom. 
The Front End Editor is an HTML, CSS and JS code editor embedded in the platform itself that allows you to create a skin with any design you can imagine or make small adjustments to an existing skin.

 

What can I do with the Front End Editor?

You have total freedom, you can create any structure with HTML, CSS and JS using the site's global CSS variables and global data. In addition, once you have created a skin you can edit it as many times as you want, or duplicate it to make a variation.

 

How does the Front End Editor work?

The editor provides separate panels for HTML, CSS, and JavaScript, allowing users to see the results in real-time. 


  • HTML Panel: This is where you can write the HTML code for the selected skin. It includes the structure of the block, such as paragraphs, images, and other elements.

  • CSS Panel: In this panel, you can style the HTML elements using Cascading Style Sheets (CSS) making them visually appealing. You can control the layout, colors, fonts, and other visual aspects of the webpage.

  • JavaScript Panel: Here you can add interactivity and dynamic behavior to the skin using JavaScript. This panel allows for scripting and manipulation of the webpage in response to user actions.

You can hide the panels you’re not using, creating more room for the ones you require to work by clicking the eye symbol positioned above each panel.

Whenever you make a change in any of the three sections, the render button allows you to display a live preview of the changes on different screens to ensure that your website looks pixel perfect across desktops, tablets, and smartphones. 

This immediate feedback enables you to see the impact of the changes instantly.

To get to know every aspect of how Front End Editor works, take a look at our Help Center 

Don't lock up your imagination, every block on your webpage is a building block of the hotel brand story, and the ability to personalize each one is a game-changer. The Front End Editor allows you to freely experiment and create dynamic web content.