Text Editing in Panel-Ui

Printess offers multiple ways to edit single and multi-line text. Please find this overview to get a deeper undertanding about it.

One important thing is that the Creative Photo-Product mode activates the Frame-Bar on Desktop:

The other important difference is that Panel-UI always shows text editing on mobile devices in form-mode (no inline editing). Thats because it plays better together with the IOS and Android keyboard and various assistent technologies.

On Desktop Screens

On Desktop you have the choice between inline-editing and form-based-editing

Configuration Product Mode

Click here to Open Configuration Product Example Template

Multi-line inline editing on desktop (Configuration Product)

In Configuration Product mode on desktop, inline editable multi line text shows it controls in the properties side bar.

Multi-line form editing on desktop (Configuration Product)

In Configuration Product mode on desktop, form editable multi line text shows it the paragraphs and text-areas in the properties side bar.

Single-line inline editing on desktop (Configuration Product)

In Configuration Product mode on desktop, inline editable single line text shows it controls in the properties side bar.

Multiple Single-line-Frames inline editing on desktop (Configuration Product)

In Configuration Product mode on desktop, inline editable single line text of multiple grouped frames shows up like form editable texts in the in the properties side bar.

Single-line form editing on desktop (Configuration Product)

In Configuration Product mode on desktop, form editable single line text of shows up in the in the properties side bar.

Creative Photo Product Mode

Click here to Open Creatived Photo Product Example Template

Multi-line inline editing on desktop (Creative Photo Product)

In Creative Photo Product mode on desktop, inline editable multi line text of displays its properties in the frame bar. Only if the mini-page-navigation panel is available.

Multi-line form editing on desktop (Creative Photo Product)

In Creative Photo Product mode on desktop, form editable multi line text onyl displays its frame properties in the frame bar. It also shows an “Edit Text” button.

All other text-style properties are shown in the text edit overlay which opens when the pen-icon or the text-edit button is clicked.

Single-line inline editing on desktop (Creative Photo Product)

In Creative Photo Product mode on desktop, inline editable single line text of displays its properties in the frame bar.

Single-line form or multiple frames editing on desktop (Creative Photo Product)

In Creative Photo Product mode on desktop, form editable single line text of single frames or multiple grouped frames displays its properties in the frame bar. But the text editing itselfs happens in the overlay shown on edit-click.

Same counts for groups: In Creative Photo Product mode on desktop, inline editable single line text of multiple grouped frames displays its properties also in the frame bar.

On Mobile Devices

Configuration and Creative Photo Product

In the Panel-Ui Inline Editing is not available on mobile devices. Single and Multi line text will show an overlay to play nicely with keyboard behaviour on devices - especially IOS - and to support all on devices assistent technology. Overlays do not support charracter formats and tabulators in the edit view. But those techniques are anyhow very hard to handle with touch text selection.

Which brings us to only two different editing modes, single or multi-line text.

Single Line Text Edit

Single Line Text shows formatting options in the frame-bar. ext editing itself is activated by clicking on the pen icon either in the button-bar or on the frame itself.

It does not matter if a frame has one or more single line text grouped or it other form-fields are pinned to that frame. All of them will be shown together in convienient overlay.

Once “edit” its clicked, printess opens an overlay which allows the user to edit the text frames.

Single Line Text in Compact Ui

One exception is the compact ui.

If only one single text in combination with a max of 5 buttons is available. Printess renders a specialised compact view on mobile. Compact view also shows an extra headline if wanted.

Compact View on Mobile Devices

Compact View on Mobile Devices

Multi Line Text Edit

Only cross paragraph properties are display in the frame-bar. Text editing itself is activated by clicking on the pen icon either in the button-bar or on the frame itself.

Once “edit” its clicked, printess opens an overlay which allows the user to edit and format any given paragraph.

As long as the paragraph has a different format then the previous one it will stay separately editable.