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

[Beau_Martin]

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

Examples:

• a text animation over an image
• three deep: logo on a menubar on an image

Every time I try to drag one into place it either winds up moving the object onto which it was dropped up or down but fails to maintain the overlap. This must be simple, but right now I’m very frustrated.

Virtually all of the instruction videos are about client and project management, the one part of the tool in which I have next to no interest right now.

Even the search for “putting elements on top of each other” turned up zero questions and answers.

Rather than keyboard shortcuts, client management, project management, etc., I could use a really basic “here are the 10 things you need to know how to do to create great websites with Site jet” post/video.

I know your focus is on production workshops, but this would be super helpful for me.

Thanks!

[Franzi]

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