How to configure Stack in vDesigner 2.0?

I would like to create a card that contains an image element with text overlaid on top of it. Provide detailed steps on how to achieve this in vDesigner 2.0.

  1. Start with a card element on your canvas to achieve this functionality.

  2. On that card, drag and map a stack element.

  3. Now, on that stack element, map an image.
    Note: You can’t provide margins and padding on an element inside the stack element.

  4. To manage the position of the image element on the stack element, you will need to place it manually.

  5. After that, place the text element.
    Note: Keep the elements inside the stack on AUTO FILL under the Shape & Decoration tab.

  6. Click on apply, save, commit, and sync.

The Outcome will look like this:

Screenshot from 2024-05-17 13-51-46

1 Like

@AnushkaGupta Can you give some other UI-based examples for a better understanding of the power & feasibility of the stack element?

Here, is one more example of using stack :

To achieve this I have followed some steps which are

  1. First use a header element.
  2. Then, map one stack element on that header.
  3. I have mapped two image elements and one text element on that Stack element.
  4. In the stack element, you can’t provide margins to the specific elements. you have to set the elements manually according to your need on the stack element.
  5. Keep your image elements on AUTO-FILL and the image element should be on fill more rather than cover.
  6. You can also provide manual size if needed, according to Figma.