UI Composer

Posted about 6 years ago by Ken Gamble

Post a topic
Answered
K
Ken Gamble

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

0 Votes

K

Ken Gamble posted about 6 years ago 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;}

0 Votes


2 Comments

Sorted by
S

Sabrina Easley posted over 5 years ago

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

0 Votes

K

Ken Gamble posted about 6 years ago 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;}

0 Votes

Login or Sign up to post a comment