CREATE YOUR OWN INTERFACE

The UI & Layout Composer will help you to create your own user interface. Its in your hand which action elements you need for your business. The composer is included in the WooCommerce/WordPress plugin.


Layout Modules Actions Toolbar Colors Custom CSS Guided Tour

Main Bar

Top Bar Layout

Side Bar Tabs Position

Dimensions

For the best performance keep it under 4000px.
For the best performance keep it under 4000px.

Miscellaneous

Image Grid Columns

Container Shadow
Initial Active Module

View Selection Position

Your Selected Modules

These modules will be visible in your main navigation.

Drop Modules Here

Double-click on an item to remove it from the dropzone.

Available Modules

Drag desired modules to dropzone.

Your Selected Actions

Drop Actions here
Drop Actions here
Drop Actions here
Drop Actions here

Double-click on an item to remove it from the dropzone.

Available Actions

Drag desired actions to dropzone

Alignment

Top Actions
Right Actions
Bottom Actions
Left Actions

Exclude Tools

Type

Color Theme

Create an own color scheme.

Primary

Secondary

Element Boundary

Bounding Box

Out Of Bounding Box

Corner Control Icons

You can add custom CSS styles to the pages where the product designer is included.

Helpful CSS classes:
  • .fpd-container - The product designer container.
  • .fpd-product-designer-wrapper - Wrapper around the product designer container.
  • .fpd-mainbar - The main bar container.
.fpd-product-designer-wrapper { margin: 20px 0; }

Create a guided tour by marking action and module elements with an explanation tooltip.

Add step Run

If you are using the jQuery version, just can grab the code to get started. If you are using the WooCommerce/WordPress version you do not need that, the composer is included in the WordPress admin!