CREATE YOUR OWN INTERFACE

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

Enter your text.

Main Bar

Top Bar Layout

Side Bar Tabs Position

Dimensions

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

Placement

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; }

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!