Customize Homepage
Short Description
This module allows customers to fully configure the design of their website homepage using a code editor or drag-and-drop components. Both visual editing and custom code input are supported, enabling users to work either technically or visually. Below is an explanation of each component used in this module.
Customize Homepage - The Layout
Go to Design > Customize Homepage in the serB2B admin panel to personalize your homepage design.
1. Main Commands Panel
-
The Main Commands Panel is typically used to define custom actions or buttons. It’s the panel where functional buttons are located in the drag-and-drop editor.
-
Additional custom commands can be added to increase functionality. This panel also provides control over editor-related view and functional settings.
| Icon | Description |
|---|---|
| ▢ | Shows/hides the components panel |
| 👁 | Switches to preview mode |
| ⛶ | Enables full-screen mode |
</> | Opens the HTML/CSS/JS code editor |
| ✎ | Switches to edit mode |
| 𝐇 | Displays meta settings |
| 🌎 | Opens language-based customization menu |
2. Styles, Layers, Settings, and Blocks
This panel provides tools to manage styles, layers, component settings, and block structures during editing.
| Icon | Description |
|---|---|
| 🖌 | Edits the style settings of the selected element |
| ⚙️ | Manages component settings (attributes, labels, etc.) |
| ☰ | Displays page layers in a hierarchical structure |
| ▦ | Opens the block library (sliders, text, images, etc.) |
3. Code Editor Tabs
For users who prefer to work with code, the editor provides three distinct tabs:
| Tab | Description |
|---|---|
| HTML | Defines the page structure. Use this tab to add elements like headers, sliders, and grids. |
| CSS | Controls visual styling. Customize colors, fonts, spacing, and more here. |
| Script | Allows for dynamic behavior using JavaScript. Example: slider transitions, button clicks, etc. |
Note: Code changes are instantly reflected in the visual editor and can be previewed live.
Resources
Support & Contact
For any questions or support requests, please reach out to our support team.