🧬 Integrate Liferay Macros with the Toolbox
The Design2Liferay extension makes it effortless to add common Liferay macros like Search Bar, User Personal Bar, Dropzone, Language Selector, and Site Logo into your components.
Once you select any HTML element on the page, the extension activates a code editor and toolbox. From there, you can simply click inside the code block where you want the macro inserted, and then choose the desired macro from the toolbox.
🛠️ Toolbox Macros Available
- Search Bar: Adds a fully functional Liferay search bar component.
- User Personal Bar: Shows user-specific links such as profile and sign-out.
- Dropzone: Adds a dynamic dropzone area for drag-and-drop content.
- Language Selector: Enables users to switch between available locales.
- Site Logo: Displays the site’s default logo wrapped inside a link to the site home page.
✨ Inserting a Macro
- Select an HTML element inside your component or layout.
- The code editor will open, and the macro toolbox will appear beside it.
- Click inside the code editor where you want to insert a macro.
- Click the desired macro in the toolbox.
- The macro code will be inserted at your cursor’s position.
💡 Tip:
You can combine multiple macros within a single block, or use them as placeholders in dynamic content. This makes your component logic modular and maintainable.
📷 Screenshots
