Creating a label layout using Pobo Designer

How to style labels with Pobo Designer?

The appearance of the labels can be completely customized to the look of the e-shop. We will show you step by step how to create the look in Pobo Designer.

Notice

Pobo Designer has been replaced by Live Designer, which allows extensive customization of layouts and creation of templates.

For more information, please read the article on switching to Live Designer.

Note: Pobo designer only works on older version of Legacy. We are currently developing a better solution for you.

How Pobo Designer works

We have added a tool called Pobo Designer to Pobo Page Builder , which aims to enable individual appearance of labels without any knowledge of styles (CSS) and HTML. The advantage of Pobo Designer is that it maintains the same appearance across all labels.

What you can customize in Pobo Designer

  1. Size, indentation, color and line spacing of second and third level headings, paragraphs, tables, lists
  2. Spacing between widgets
  3. Detailed styling of widgets

Creating the first look

In the administration, click on the link Appearance of labels in the top menu, then we will see a page with a button to create a customized appearance.

Then a modal window will open in which we enter the name of the template and select the product on which Pobo Designer will set the appearance and project it to all products.

Once saved, the process starts and runs for approximately one minute. After this time, an information message is displayed, below which there is an Edit using wizard button to click.

Adjusting the appearance of the e-shop

When you open the wizard, your e-shop will open with a sidebar where you can customize the appearance of the descriptions. We have a choice between typography (headings, text, tables, bullets, ...) and the widgets themselves. For typography we can adjust the font sizes, indentation, colors, line spacing,... For widgets, we can edit identical attributes including the top and bottom indentation of widgets.

When all the edits are complete, save the appearance in the changes panel.

Reshaping the appearance

If you need to re-edit an already created look, just click the Start Live Edit Look button in the template overview. The task will then run again and we will edit the appearance.