Elegant Builder Documentation

Elegant Builder Overview

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

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.

Configuring Each Module

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.

Re-sizing and Rearranging Modules

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.

Building Advanced Layouts With Columns

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.

Using Sample Data to populate your first installation

If you are starting from scratch, and installing your theme onto a WordPress blog that does not have any content yet (posts, pages, categories, etc), then you can choose to import our sample data file, which will populate your new WorPress blog with "dummy content." This dummy content is just a bunch of gibberish text, however, it will give you a good template to work with. Instead of following the above instructions, some people prefer to simply upload the sample data first, and then replace the dummy content with their own. To do this, you can use the Tools > Import feature in wp-admin to import the included sample data file. This sample data file comes with all themes, and is located in your theme folder here: sampledata/sample.xml. When performing the import procedure, be sure to check the "Import epanel settings" box.

Using Shortcodes - Create advanced layouts with ease

All of our themes come with a comprehensive collection of shortcodes. These shortcodes allow you to use pre-made design elements to create advanced page/post layouts without any HTML knowledge. When you install the theme, you will notice that some new buttons have been added to the WordPress text editor. Clicking these buttons will reveal options for adding shortcodes to your post. For complete shortcode documentation you can refer to the video on the left, as well as the following documentation page: http://www.elegantthemes.com/preview/TheProfessional/357-2/

Using Page Templates To Create Advanced Layouts

All of our themes come with a collection of page templates that can be used for a variety of purposes. You can apply each of these page templates to any page that you have created. When you edit a page in wp-admin, you will notice a Templates dropdown menu to the right of the text editor. Here you can select from a list of available page templates. Once a template is selected, additional settings will appear in the "ET Page Templates Settings" box below the dropdown menu. These settings should be configured to acheive the desired result, as outlined in this video tutorial.

Translating The Theme To Another Language

You can use the included Mo and Po files (located in the /lang folder of your theme) to translate the various English words that occur throughout the design. You can learn more about translating WordPress here: Translating WordPress

How To Update Your Theme To A New Version

Updating your theme is done via the WordPress Dashboard just like any normal theme. Before you can update, however, you must first authenticate your Elegant Themes subscription using the Elegant Themes Updater Plugin. Once authenticated, you can update your Elegant Themes using the standard update interface in WordPress.

To authenticate your WordPress installation, you must first download and install the Elegant Themes Updater. Download the ZIP file here, and then install it via the Plugins > Add New link in your WordPress Dashboard. Once it has been installed and activated, navigate to the Settings > General tab and scroll to the bottom of the page. You will notice that a new section has been added called "Elegant Themes Automatic Update Settings." Here you will need to input your Elegant Themes Username as your Elegant Themes API Key. You can find your Elegant Themes API Key here. Once both fields have been filled in, click the "Save Changes" button. You can now update your theme when a new version has been released via the Dashboard > Updates page, or via the Appearances > Themes page.