In WordPress Admin Panel go to Plugins > Add New > Upload Plugin and upload .zip plugin file.

In WordPress Admin Panel go to Plugins > Installed Plugins.

Select "Lana Editor" theme and click Activate button.

To switch to "Lana Editor" page builder, click on the Lana Editor tab.

1. with this button, you can add a new container to "Lana Editor".

2. with this button, you can add a new row to "Lana Editor".

3. with this button, you can switch to full screen mode.

4. with this button, you can switch back to the WordPress editor.

5. the added elements show up in this area.

If you click on the fullscreen button, you can view "Lana Editor" in it's full size.

The left side menu bar appears in small form.

The right side settings disappears (they move under "Lana Editor").

General Settings

Default Page Template: Default Template in Page Attributes.
options: WordPress page templates
default: Default Template (page.php)

Default Container Type: You can choose the default container type, when you add a contanier in "Lana Editor".
options: None, Container, Container-Fluid (link to#container)
default: None

Frontend Settings

Bootstrap Load: You can choose the Bootstrap file you want to load in Frontend.
options: None, Normal Bootstrap (bootstrap.min.css, bootstrap.min.js), Minimal Bootstrap (minimal-bootstrap.min.css) default: Normal Bootstrap

If there is a "bootstrap" named style and script loaded in the template, it won't load any bootsrap file from the plugin.

The container has 3 types, just like in Bootstrap.

None: Container without width. Display in full size.

Container: Container with Bootstrap responsive width.

Container Fluid: Container with Bootstrap full width. Display in full size with padding.

1. click on the icon next to Add Container.

The default type of the added container: None.

The added container shows up, which you can edit.

1. you can change the order of the container.

2. you can edit the container, if you click on "lana container".

3. you can delete the container.

4. you can add a row to the container.

General tab

On this tab, you can find the settings of the container type.

1. general tab

2. settings tab

3. container type settings

4. save container

Settings tab

On this tab, you can find the settings to change the look of the container.

1. general tab

2. settings tab

3. container editing fields

Id: the container id (for stylesheet or javascript).

Class: the container style classes (for stylesheet or javascript). Seperate for " ".

4. save container

The row always has columns, as default.

These are the default column layouts: 12, 6-6, 4-4-4, 3-3-3-3, 8-4, 4-8

1. click on the icon next to Add Row.

Automatically adds a container to the added row.

1. click on "add row" in the choosen container.

2. the Add Row dialog shows up, then select the type of the row you want to add.

1. you can change the order of the row.

2. you can edit the row, if you click on "lana row".

3. you can delete the row.

1. row editing fields

Id: the row id (for stylesheet or javascript).

Class: the row style classes (for stylesheet or javascript). Seperate for " ".

2. save row

1. you can edit the column, if you click on "lana column".

2. you can resize the column.

1. column editing fields

Id: the column id (for stylesheet or javascript).

Class: the column style classes (for stylesheet or javascript). Seperate for " ".

2. save column

You can see the two added widget on the admin panel.

1. Text widget

2. Lana Thumbnail widget

You can see how the two widgets shows up on the page to the users.

1. Text widget

2. Lana Thumbnail widget

Choose to which column you want to add a new widget.

1. click on "Add Widget".

Choose which widget you want to add.

2. click on the choosen widget.

The widget edit dialog shows up automatically.

3. widget corresponding editor area in modal dialog.

3. the added widget to the column.

The Widget type is on the left, and next to it on the right you can find the Widget title.

You can find the Widget description on the second row.

1. you can edit a widget.

2. you can delete a widget.

3. you can drag and drop a widget into another column.

General tab

On this tab, you can find the WordPress defined editor fields.

1. general tab

2. settings tab

3. widget editing fields

4. save widget

Settings tab

On this tab, you can find the settings to change the look of the widget.

1. general tab

2. settings tab

3. widget editing fields

Id: the widget id (for stylesheet or javascript).

Class: the widget style classes (for stylesheet or javascript). Seperate for " ".

4. save widget