1. Home
  2. Docs
  3. Page Builder
  4. KingComposer – Page Builder

KingComposer – Page Builder

  • create a page under Pages > Add New tab,
  • fill in Title field,
  • click on the ‘Edit with KingComposer’ button to activate editor mode.

Table of contents:

  1. Adding elements
  2. Row settings
  3. Section management

Adding elements:

Start adding elements to your page. You can do it in two ways:

  1. Click on the ‘Elements’ button to add an element from the list.

2. You can choose column layout for your section first, and then add elements to each column by clicking on the ‘Add Elements’ link or  ‘PLUS’ icon.

All KC elements are divided into tabs by functionality and have small thumbnails above titles to demonstrate their role in the theme.

Each KC element has a lot of customization option that is also divided into tabs:

  • ‘General’ tab – you can add content and configure the main settings of the element.
  • ‘Styling’ tab – allows you to customize the design of your element – colors, font size, and font family, background color/images, paddings, margins, borders, etc. Styling options are different for each element.
  • ‘Animation’ tab – you can enable animation and choose animation type for a particular element.
  • ‘Presets’ tab- this option lets you save settings of the module and use them in another section or page.

Row Settings

Each section has a number of options that you can customize the way you want. Click on the ‘PENCIL’ icon on the top right corner of the section box to open row settings.

The row settings are:

  1. ‘General’ tab – here you can adjust: – dimensions of the row and columns – set Youtube video or Parallax image background – add row ID and extra class names for the row and container
  2. ‘Styling’ tab: – Typography options – Background options – Box options – margins,paddings, borders of the row. – Custom – here you can add custom CSS codes that will be applied to the current row.
  3. ‘Animation’ tab – you can enable animation effect, animation speed and delay for the current row.
  4. ‘Presets’ tab – this option lets you save settings of the row and apply them in other rows on the current or other pages.
  1. Columns number. You can change the number of columns in the row whenever you want. Simply click on the ‘LIST’ icon on the top left corner of the section box and select the required column number.

Custom columns width. You can set custom column width in the row. There are two ways to do this: – click on the ‘LIST’ icon on the top left corner of the section box and enter columns width in % into the input field. The total number must be 100%.

– put cursor over the columns border and move it to left or right changing size of the column.

3. Rows reorder. You can reorder rows on the page in two ways: – Hover over ‘CURSOR MOVE’ icon on the top right corner of the section box. In the appeared box enter the order number of your row and click on the blue button with arrows.

– Hold the ‘CURSOR MOVE’ icon with the left mouse and move the row to the target location on the page.

4. Publish/unpublish rows. You can unpublish selected rows if you don’t want them to be visible on the frontend. Simply click on the blue toggle to disable the row. Click on the gray toggle to enable it again.

5. Copy rows and element. You can copy created rows and elements and paste them to any place in the editor. Call contextual menu with the right mouse click over row or element. Select ‘Copy’option. Click over another row/element with the right mouse and select ‘Paste’ option. The row or element will stand below it.

Or click on the ‘PASTE COPIED ELEMENT’ button on the bottom bar.

6. You will be redirected to a new page. All you have to do is to give a title to your section and click on the ‘Publish’ button to save changes.