ElegantBuilder comes powered by our intuitive drag and drop page builder. This module-based system allows to you build your page visually without ever having to touch a line of code or deal with a sea of messy shortcodes. Drag your modules onto the canvas and re-size and rearrange them quickly and easily with your mouse. You can create advanced layouts using columns and nested elements, as well as integrate widget ready sidebars and plugins. ElegantBuilder gives you a completely new set of tools for creating and managing your content.
Adding modules to your page is as simple as "drag and drop." To manage your landing page, log into the WordPress Dashboard and edit one of your posts. Below the standard text editor you will see the new visual builder. To add a module, click the "Add a Module" link to reveal a list of available elements. To add one to your page, simple click and drag the module button onto the canvas and release your mouse. You will notice that a large blue box has been added to your canvas that represents your newly selected module. When you drag a new module onto the canvas, it will be added below the modules you have already added.
Once you have added a module to the canvas, you can configure the module by clicking the white settings icon. Once clicked, a list of configuration fields for the module will appear. Simply fill out these fields and click save. Each module needs to be configured via the settings window. Settings vary with each module.
Each module that you add to your canvas can be easily resized by click on the right-right side of the blue module box and dragged it to the left. As you change the size of your module box, the "element" on your page that this module represents also changes accordingly. A blue module box that has been resized to "50%" will result in an element that space half way across your page.
You can also rearrange modules by dragging and dropping them around the canvas. Simply pick them up and place them in the order that you would like them to appear.
In addition to modules, columns can also be added to your canvas. To add a column, simply click the "Add a Column" button to reveal a list of available columns. Drag and drop a column onto your canvas to add it to your page. You can then drag new modules inside the columns to nest them. Columns are useful for creating advanced grid-based layouts.