How do I put elements and presets on top of each other?

Hi @Beau_Martin,

there are many way to achieve this. We had a similar question here: How to stack two elements

The same would work for your wish to add a text animation over an image:

  1. Go to Add content > Elements. Drag and drop a container to your preferred location

  2. Let’s say we want the container to be a bit bigger. Use the settings panel on the left to make your preferred changes. In this case, I changed the height to 500px, so we will see more of the image. But you can do the same with width etc.

  3. In the panel, switch to Background > Element > Image and upload an image

  4. In this case, I think the image is too bright for the text to be visible. That’s why I added a color overlay. I selected a grey color and adjusted the transparency of the color to my needs:

  5. Then let’s add a text element in the box with the dotted border. Go to Add content > Elements > Text. Drag and drop the text element in the box by pressing Ctrl (you will see that the border will change to orange to indicate that the element will be dropped into this box).

  6. You can now style the text as you like. I changed the font size, color and made it bold. Then you can switch to Style in the left settings panel and open Animation. There you can select your preferred animation and Duration, Delay and Trigger.

  7. Click Preview in the top menu to see if the animation works.

Same applies for logo on a menubar on an image. Use a container and then go to Add content > Preset >Header and select a preset to drag and drop into the container - style as you like by using the steps above. But instead of the text element, you will change the settings in the preset.

Hope that helps :blush:

2 Likes