Youxi Builder

Content creation might be difficult and not user friendly if done manually by defining shortcodes inside the post editor. The requirement of most CSS frameworks to have elements follow the container, row and columns rule also increase the difficulty when creating pages using shortcodes.

All of this process can be automated by using Youxi Builder plugin. This builder allows users to define their page elements visually, which in turn will be converted to correctly structured shortcodes. If you drop an element inside the page builder editor, they will be automatically wrapped inside columns, rows and containers without the hassle of having to do that manually.

As an advanced user, you might be more comfortable generating shortcodes manually by typing it inside the post editor. This is also supported by the page builder, and it will be reflected back visually as long as the shortcodes are correctly formatted.

The Page Builder Tab

You can access the page builder via the extra added tab besides the Text tab of your WordPress editor.

The Page Builder Controls

The Page builder has a rather simple user interface. On top of the page builder, you’ll see a set of tabs. Each tab corresponds to a shortcode category as on the TinyMCE shortcode editor. In each tab, you can find the shortcodes as draggable boxes. Drop one of these boxes to the page builder work area below, and you’ll get the element visually displayed.

The Page Builder Elements

Below you can see that the page builder arranges the shortcode following a simple rule. An element should be inside a column, which also must be inside a row and container. This is all done automatically so composing valid pages should be very easy. The page builder generates shortcodes that are represented visually as boxes with control buttons on their headers.

The Page Builder Control Buttons

Below is an images showing the five available control buttons that you can use to control each page builder element.

  • The first and second buttons are the Resize button. They are only available on column page builder elements. These buttons are used to modify the columns size.
  • The third button is the Duplicate button that can be used to duplicate a certain page builder element. This button is available on all elements except the columns.
  • The fourth is the Edit button that can be used to edit a page builder element’s shortcode attributes and content. If you click on this button, a shortcode editor modal form like on the TinyMCE shortcode editor will be displayed.
  • The fifth button is the Delete button. This button is used to remove a page builder element along with its contents.

 

Was this article helpful?

Related Articles