radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator

Start a new topic
Answered

UI Composer

Is it possible to set a UI composer for Desktop and a second for Mobile?


I have created 2 versions in the UI Composer, One I have set as standard throughout however it seems you can only set any other UI Composers per product


Best Answer

OK I have had an idea and this works.


(Wordpress, additional css files)

I have created some css that hides the majority of the elements when on a small screen (Mobile).

This then makes the editing screen alot easier for mobile users to use.

I have also, using the UI Composer to hide the Text line height, Text align, Text stroke, Text Letter spacing and Text Transform within the Toolbar tab.


Just to make the screen on mobile a little easier, I have moved the Text Toolbar to the left hand side in front of the colour toolbar.

This is in the file productdesigner.php which is in the Assets, Templates folder in the FPD Plugin page.


Here is the css I have used.


@media (max-width: 568px) {

 .fpd-tool-text-size{ display: none !important;}

.fpd-tool-text-line-height{ display: none !important;}

.fpd-tool-text-bold{ display: none !important;}

.fpd-tool-text-italic{ display: none !important;}

.fpd-tool-text-underline{ display: none !important;}

.fpd-tool-text-align{ display: none !important;}

.fpd-tool-text-stroke{ display: none !important;}

.fpd-tool-transform{ display: none !important;}

.fpd-tool-move-up{ display: none !important;}

.fpd-tool-move-down{ display: none !important;}

.fpd-align-left{ display: none !important;}

.fpd-align-top{ display: none !important;}

.fpd-align-right{ display: none !important;}

 .fpd-align-bottom{ display: none !important;}

.fpd-text-font-tools{width: 100px;}


Answer

OK I have had an idea and this works.


(Wordpress, additional css files)

I have created some css that hides the majority of the elements when on a small screen (Mobile).

This then makes the editing screen alot easier for mobile users to use.

I have also, using the UI Composer to hide the Text line height, Text align, Text stroke, Text Letter spacing and Text Transform within the Toolbar tab.


Just to make the screen on mobile a little easier, I have moved the Text Toolbar to the left hand side in front of the colour toolbar.

This is in the file productdesigner.php which is in the Assets, Templates folder in the FPD Plugin page.


Here is the css I have used.


@media (max-width: 568px) {

 .fpd-tool-text-size{ display: none !important;}

.fpd-tool-text-line-height{ display: none !important;}

.fpd-tool-text-bold{ display: none !important;}

.fpd-tool-text-italic{ display: none !important;}

.fpd-tool-text-underline{ display: none !important;}

.fpd-tool-text-align{ display: none !important;}

.fpd-tool-text-stroke{ display: none !important;}

.fpd-tool-transform{ display: none !important;}

.fpd-tool-move-up{ display: none !important;}

.fpd-tool-move-down{ display: none !important;}

.fpd-align-left{ display: none !important;}

.fpd-align-top{ display: none !important;}

.fpd-align-right{ display: none !important;}

 .fpd-align-bottom{ display: none !important;}

.fpd-text-font-tools{width: 100px;}

Thank you Ken, I love this idea and I have added this code to my site. Thank you so much for sharing.

Login or Signup to post a comment