🎯 Capture Elements with Ease
Design2Liferay's Chrome Extension makes it easy to select components from any HTML page and convert them into editable Liferay code fragments.
Steps to Capture an Element
- Click on the Elements tab in the extension panel.
- Click Capture Element.
- Start capturing by selecting Start Element Capturing. A red highlight box will follow your cursor as you hover over components.
- Click on the desired element to extract its HTML. It will appear in the code editor as reusable Liferay fragment code.
- If you're unable to select the correct component due to overlays, use Get Parent Component to go one level up in the DOM.
- To stop the process, click Stop Element Capturing.
- To cancel and return, click Cancel Element Capturing.
- Once satisfied, click Save, provide a name, and click Save again. This stores your component in the extracted components list and returns you to the main Elements page.
💡 Tip:
- Use Get Parent Component if your target is wrapped inside other layers.
- Make sure you are not in an iframe or heavily scripted layout for optimal capture accuracy.
- When capturing a large component that contains repeating elements (like a list of cards), start by capturing the main container as a single component. Then, capture a separate component for one sample item (e.g., a single card). This approach allows you to insert a Dropzone inside the container and reuse the item component dynamically.
Screenshots
Below are snapshots of the capturing flow inside the extension:
