Editor

The website builder mode is an intuitive drag-and-drop interface that allows you to easily create your website. This mode is designed for users who prefer a more visual approach to building their website, as it allows you to add and customize blocks with ease. With the website builder mode, you can choose from a wide range of pre-designed blocks, such as text, images, videos, and more, and then customize them to suit your needs. You can also add new blocks to your website, move them around, and adjust their properties. The website builder mode makes it easy for you to create a professional-looking website, even if you have no coding experience.

Section mode

Sections mode is a powerful feature in our website builder that allows you to easily add, delete, copy, and configure different sections of your website. To access this mode, simply select the top icon in the left panel. Once you are in this mode, you can easily add different sections to your website by selecting from our pre-designed templates or by creating your own custom sections.

To configure the sections, simply point to the section in the work area and choose the desired action from the options displayed. You can also delete sections that you no longer need or copy them to other parts of your website. With our sections mode, you have the flexibility and control to create the website of your dreams.

Edit Mode

Edit mode is In this mode, we edit the elements globally (changing the parameters for all the like elements) and locally (changing one specific element).

Global Editing

You can then edit the parameters for the selected element, and the changes will be applied to all instances of that element throughout the project. This is useful when you want to make a change to all instances of a particular element, such as the font or color. Once you have made the necessary changes, simply save them and they will be applied to all instances of that element in your project.

Local Editing

Local editing is a powerful feature in Liteweb that allows you to edit specific elements within your website. To get started, simply click on the element you want to edit and select the desired action from the control buttons that appear. For example, you can change the format of the element (such as H1 to H4), add animation, work with style settings and prepare classes, copy and delete. If the element contains text, a text editor will appear when you double-click on it.

It's worth noting that some specific elements have special options that appear when you click on them, such as images, forms, counters, and video and map iframes. With local editing, you have the flexibility to make changes to your website exactly how you want them.

Responsiveness

Responsive mode is a useful feature that allows you to preview your project on different devices and screen sizes. This helps you to design and build your project with responsiveness in mind, ensuring that it looks great and functions properly across a wide range of devices.

To access the responsive mode in the editor, click on the device icon in the Side panel. You can then choose to preview your project in different modes, such as desktop, tablet, or phone. This will adjust the size of the preview window to simulate how your project will look on different devices.

In responsive mode, you can also edit your project while previewing it on different devices. This allows you to make sure that your changes look good and function properly across all devices.

Project Mode

n project mode, you can manage your entire project including all pages and settings. From here, you can customize your pages, copy them, delete or add new ones. Additionally, you can manage the project itself by saving and loading it, exporting it to code, and using FTP push to sync with your CPanel.

As Liteweb is a lightweight CMS, you can use the project mode to set general info, such as the project name and description, and set SEO info like page titles and meta descriptions. You can also set a preloader for your project and manage other project-wide settings.

SEO: In the project mode, you can set up the SEO (Search Engine Optimization) settings for your website. This includes the page title, meta description, and keywords. These settings help search engines to better understand what your website is about and to rank it appropriately in search results.

Preloader: A preloader is a graphical or animated element that is displayed on a webpage while the content is being loaded. This is especially useful for websites that have large or complex content, as it can improve the user experience by providing visual feedback that the page is loading. In the project mode, you can add and customize the preloader for your website.

Favicon: A favicon is a small icon that is displayed in the browser tab for your website. It can be used to help users easily identify your website among a sea of open tabs. In the project mode, you can upload and customize the favicon for your website.

FTP Push: FTP Push is a feature that allows you to sync your website with your web hosting account. This means that you can use Liteweb as a CMS (Content Management System), and easily make changes to your website and have them automatically reflected on your hosting account. In the project mode, you can set up the FTP push settings for your website.