Lana Editor

"Lana Editor" v1.0.0 Documentation by "Lana Codes"


Introductory

The "Lana Editor" is a unique Drag and Drop Page Builder optimized for Bootstrap.


The "Lana Widgets" are developed primarily for the Page Builder.


If you want to edit a page which has a row or widget added with "Lana Editor", the "Lana Editor" will appear automatically instead of the standard editor.


The "Lana Editor" plugin is WordPress 4.5 compatible.

It has been tested on the following browsers:

  • Firefox
  • Google Chrome
  • Opera
  • Internet Explorer

You must enable JavaScript in your browser to use this plugin.


Support

If you have any more questions, feel free to contact us at: http://themeforest.net/user/lanacodes

Created: 06/17/2016
By: Lana Codes
E-mail: info@lana.codes



Installation

1. Install WordPress

Download and Install WordPress 4.1 (or higher).


2. Upload Plugin via FTP

Upload "Lana Editor" plugin folder via FTP into /wp-content/plugins directory.

or

2. Upload Plugin in WordPress Admin

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


3. Active plugin

In WordPress Admin Panel go to Plugins > Installed Plugins.

Select "Lana Editor" theme and click Activate button.

Plugin files

"Lana Editor" plugin: /lana-editor.zip

"Lana Widgets" plugin: https://wordpress.org/plugins/lana-widgets/



Overview

Lana Editor general overview

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.

Fullscreen mode

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").



Settings

Lana Editor settings

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.



Container

Lana Editor container example

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.

How to add container in Lana Editor


1. add new container to editor panel

1. click on the icon next to Add Container.

The default type of the added container: None.


2. container in panel

The added container shows up, which you can edit.

How to edit container in Lana Editor


1. what you can do with a container

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.


2. editing 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



Row

Lana Editor row example

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

How to add row in Lana Editor


1. add new row to editor panel

1. click on the icon next to Add Row.

Automatically adds a container to the added row.


2. add new row to container

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.

How to edit row in Lana Editor


1. what you can do with a row

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.


2. editing 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



Column

Lana Editor column example

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

You can't add a single column to the row.

You can always change the size of the column.

How to edit column in Lana Editor


1. what you can do with a column

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

2. you can resize the column.


2. editing 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



Widget

Lana Editor widget examples

You can see how the widgets looks in the two examples below.


Widget example in Admin

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

1. Text widget

2. Lana Thumbnail widget


Widget example in Frontend

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

1. Text widget

2. Lana Thumbnail widget

How to add widget in Lana Editor


1. add new widget to column

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

1. click on "Add Widget".


2. choose a widget from the list

Choose which widget you want to add.

2. click on the choosen widget.


3. widget edit dialog

The widget edit dialog shows up automatically.

3. widget corresponding editor area in modal dialog.


4. the added widget

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.

How to edit widget in Lana Editor


1. what you can do with a widget

1. you can edit a widget.

2. you can delete a widget.

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


2. editing the widget

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



Credits