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

**URL:** https://community.sitejet.io/t/how-do-i-put-elements-and-presets-on-top-of-each-other/914
**Category:** Website Builder
**Tags:** cms\_element
**Created:** [August 27, 2021, 10:39pm UTC](https://community.sitejet.io/t/how-do-i-put-elements-and-presets-on-top-of-each-other/914 "2021-08-27T22:39:14Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Franzi](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/franzi/32/12_2.png) [@Franzi](https://community.sitejet.io/u/Franzi)
#### Post date: [August 30, 2021, 9:57am UTC](https://community.sitejet.io/t/how-do-i-put-elements-and-presets-on-top-of-each-other/914/2 "2021-08-30T09:57:32Z")

</div>

Hi @Beau_Martin,

there are many way to achieve this. We had a similar question here: [How to stack two elements](https://community.sitejet.io/t/how-to-stack-two-elements/924)

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 😊

---

_[View the full topic](https://community.sitejet.io/t/how-do-i-put-elements-and-presets-on-top-of-each-other/914)._