Skip to main content
Drag-n-Drop Dynamic Fields

Positioning dynamic text fields with drag-n-drop

Marc Rosenberg avatar
Written by Marc Rosenberg
Updated over 3 months ago

When positioning dynamic text fields, you can use drag-n-drop, making positioning of fields easy and fast.

Create a Dynamic Text Field:

  1. Go to your Presentation

  2. Go to the Properties Tab and enable Drag-n-Drop

  3. Go to the Fields Tab

  4. Create a new field. (number field for this example, but you can use any field type)

  5. Give the field a name

  6. Give the field a value, for this example I'll type, 8.88

  7. Notice the field appears in the top-left corner of the preview

  8. Give the field a CSS class. I'll use price

  9. Go to the CSS Tab

  10. Declare the price class in the CSS editor, type .price

  11. Use any standard CSS to style the field, here some example CSS:

    for landscape menus use this CSS:
    .price {font-size:44px; color:red;}

    for portrait menus use this CSS (rotates the field):
    .price {transform:270deg; font-size:44px; color:red;}
  12. Go back to the CSS Tab

  13. Below, in the Preview grab the dynamic text and move it anywhere you'd like it on the canvas. (You also can use your keyboard arrow keys to move one pixel at a time)

  14. Save the Presentation

Duplicating a Dynamic Text Field:

  1. Go to the Fields Tab

  2. Select the first field

  3. Duplicate the first field

  4. Give the field a name

  5. Give the field a value, for this example, I'll use 9.99

  6. Notice, the price class is also duplicated

  7. Below, in the Preview grab the dynamic text and move it anywhere you'd like it on the canvas. (You also can use your keyboard arrow keys to move one pixel at a time)

  8. Save the Presentation

Did this answer your question?