JS API – Routes

  • November 19, 2019
Under Development

Please note that this feature is in development process, and this documentation is being updated frequently. Be sure you are updated. 

 

The new Routes API (since 2.7.0), provides a simple and convenient way to interact and manipulate Elementor’s panel UI, navigate the editor, as well as open & close many parts of the editor, using JS routes.

The full list of routes, including custom & 3rd routes, is available via: 

$e.routes.getAll();

Panel

Elements

Change the panel to the main widgets panel:

$e.route( 'panel/elements/categories' );

Pro – Change the panel to the global widgets panel: 

$e.route( 'panel/elements/global' );

Element Settings

Works only if an element is in focus/active.

Change panel to the Content tab:

$e.route( 'panel/editor/content' );

Change panel to the Style tab:

$e.route( 'panel/editor/style' );

Change panel to the Advanced tab:

$e.route( 'panel/editor/advanced' );

For sections only: change panel to the Layout tab:

$e.route( 'panel/editor/layout' );

PRO – Global widget only: change panel to the Global screen (edit/unlink buttons):

$e.route( 'panel/editor/global' );

Menu

Open the panel side menu:

$e.route( 'panel/menu' );

Go to the Color Picker settings:

$e.route( 'panel/color-picker' );

Go to the Global Colors settings:

$e.route( 'panel/global-colors' );

Go to the Global Style tab:

$e.route( 'panel/general-settings/style' );

Go to the Global Lightbox tab:

$e.route( 'panel/general-settings/lightbox' );

History

Open the History Actions tab:

$e.route( 'panel/history/actions' );

Open the History Revisions tab:

$e.route( 'panel/history/revisions ' );

Page settings

Open the Page Settings:

$e.route( 'panel/page-settings/settings' );

Open the Page Settings Style tab:

$e.route( 'panel/page-settings/style' );

Open the Page Settings Advanced tab:

$e.route( 'panel/page-settings/advanced' );

Modals

The following routes will open the modal if it’s closed. The open and close commands are available in the JS API – Commands page.

Library

Show the pre-designed Pages tab:

$e.route( 'library/templates/pages' );

Show the pre-designed Blocks tab: 

$e.route( 'library/templates/blocks' );

Show the My Templates tab: 

$e.route( 'library/templates/my-templates' );

Show the Import Template dialog: 

$e.route( 'library/import' );

Show the Save Template dialog: 

$e.route( 'library/save-template' );

Additional Modals

(For detailed documentation regarding the open/close/toggle commands see the Commands API)

Finder

$e.route( 'finder' );

Navigator

$e.route( 'navigator' );

Shortcuts List

$e.route( 'shortcuts' );