In the Visual Builder environment, you can effortlessly move components by dragging and dropping them from a Widget. When you drop a Widget into a frame, it displays an initial version of the component that you can manually populate with data. Here, we will explore how to drag and drop Widgets that have a feature called Free Form. With this amazing feature, you can manually enter data instead of relying on automatic inputs.

​
Steps for How to Drag-and-Drop Custom Components:

Step 1 - Search for the Widget that you want to drag and drop. image.png Step 2 - Once you find the Widget, drag and drop it onto the draggable area. When you drop the widget, it will display the initial form of that particular component. Here, we have dropped a component. So, the initial format for the free-form based component looks as follows. Here, we have selected a component, which contains:
  1. Background Image
  2. Heading
  3. Button
image.png Step 3 - Now select the free-form from the drop-down menu. Once you select free-from, it shows few input fields. Whatever you write in those fields will reflect in the component. If you want to add image then you can do so manually or you can select it from Media Manager. Here we are going to add image manually. image.png Step 4 - You can also style them with the given options. For example, you can change the button color or text styles. image.png This was all about Widgets and its types. Next, let us guide you with integrating Custom Image in the document.