Most of the layout options can be easily set via CSS classes that you need to add the product designer element which is used in new FancyProductDesigner().
You can use the UI&Layout Composer on the official fancyproductdesigner.com website to generate some "Get-Started" code.
CSS Classes
| CSS Classes - Main | These CSS classes can be used with the product designer container element. |
| fpd-topbar | Main navigation will be displayed in a top bar. |
| fpd-sidebar | Main navigation will be displayed in a left side bar. |
fpd-sidebar fpd-sidebar-right | Main navigation will be displayed in a right side bar. |
| fpd-tabs fpd-tabs-side | The tabs will be displayed at the left in the sidebar layout. |
| fpd-tabs fpd-tabs-top | The tabs will be displayed at the top in the sidebar layout. |
| fpd-shadow-{1-9} | Set a shadow. Choose between nine different shadow types, e.g. fpd-shadow-2 |
| fpd-views-inside-{top, right, bottom, left} | Choose between four different inside position for the view selection. |
| fpd-views-outside | Sets the view selection after the product designer. |
| fpd-top-actions-centered | Centers the top actions. |
| fpd-left-actions-centered | Centers the left actions. |
| fpd-right-actions-centered | Centers the right actions. |
| fpd-bottom-actions-centered | Centers the bottom actions. |
| CSS Classes - Helpers | Add these CSS classes to the body |
| fpd-hidden-tablets | Hides the product designer on tablets. |
| fpd-hidden-smartphones | Hides the product designer on smartphones. |
Example
<div id="fpd" class="fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left fpd-grid-columns-2"></div>