Skip to main content

Elementor Drag and Drop Builder

Introduction​

RNB Builder is an Elementor extension that allows you to create customizable drag-and-drop forms, specifically designed for rental and booking applications. This documentation will guide you through creating a form and integrating it into your product pages.

Requirements​

  • WordPress with Elementor installed
  • RNB Builder Plugin installed and activated
  • Elementor Pro for theme builder features

Getting Started​

  1. Go to RNB Builder

    • Navigate to the WordPress Dashboard.
    • Find the custom post type RNB Builder in the sidebar menu and click on it.

  2. Create a New Form

    • Click on the "Add New" button.
    • Enter a title for your new form.
    • Click the "Edit with Elementor" button to open the Elementor editor.

  3. Building Your Form

    • Once in the Elementor editor, you'll find all available widgets under the RNB Builder category in the Elementor panel.
    • Drag and drop any field you need for your form.
    • Customize the fields using the powerful Elementor controls, including options for color, typography, border styles, and more.

  4. Customizing Your Form

    • RNB Builder offers extensive customization options:
      • Color: Modify the color of each element to match your branding.
      • Typography: Adjust the typography settings to achieve your desired font style and size.
      • Borders: Customize the borders for inputs and form elements, adding unique styles.

  5. Saving Your Form

    • Once you've finished building and customizing your form, click the "Publish" button in Elementor to save your form.

Integrating the Form into Your Product Pages​

  1. Go to Elementor Theme Builder

    • Navigate to the Elementor Pro builder template options.
    • Click on "Theme Builder" and select "Single Product Page."

  2. Selecting the RNB Form Template

    • In the Single Product Page builder, locate the RNB Form Template.
    • Select this template to ensure that your newly created RNB form is applied to the product page.

  3. Save the Changes

    • Once the form template is selected, click "Save" to apply it across your site.

Video Tutorial​

For a visual walkthrough of the process, watch the video tutorial below:

Conclusion​

With RNB Builder, creating and customizing forms for rental and booking applications is easier than ever. By following these steps, you can create powerful, visually appealing forms and integrate them seamlessly into your product pages.

For additional customization and advanced usage, refer to the plugin's detailed documentation.