www.wysiwygwebbuilder.com

Hello All,

In this case I don't have a demo project,
it's the opposite I may need one from anyone willing to help so I can explore and learn from it.


I hope you can help me out building a re-usable block and also make a nice "in-between" merge shape so they won't look like boring boxes.

- Multiple Layer Images / Content ON EACH OTHER in genial inside ONE BLOCK:
What I'm trying to learn to do is to make a SINGLE CONTAINER / BLOCK, which allows me to freely position and resize images inside it,
place them ON TOP OF EACH OTHER freely without specific auto-alignment.
So if I DUPLICATE the block for re-use I can re-arrange the other objects above as I wish with ease.

In example a Block plays a video (auto-play + mute + loop) on top of it FREELY (none aligned one after another) but ONE above the OTHER images and maybe even a Button, that may look random (which in some cases I need that).

So far I tried the Layout Grid with a SINGLE COLUMN but it requires to either Left / Right / Center and also I can't really resize it in real-time but only do that via Paddings Top/Bottom which is not what I'm looking for for some blocks.

I also tried LAYER which makes more sense as a block I can place things inside.
The problem I couldn't solve was, in Object Manager:
The VIDEO was on the bottom, yet IMAGES never shown ABOVE even when I place them on TOP, while TEXT did appears on top fine.

I'm guessing that maybe Layout Grid is NOT the answer? obviously it's based on a GRID but each section even one section needs alignment.
Maybe Layer but not sure what I'm doing wrong...

EDIT:
I realize the most likely LAYER is what I look for because I could use the BACKGROUND as Video (I just noticed it now)
The thing is:

Can I make the LAYER only auto-stretch for width but also make sure the other OBJECTS (text, images, etc..) will be either Centered while stretching or fixed position?
At the moment it is fixed which will help me A LOT in other cases but auto-stretch on width so it will COVER any browser window size.


---

- The next mission is to add a BLOCK IMAGE or SHAPE to MERGE between 2 blocks.

How do I make a "Divider / Separator" to SIT OVER both containers so it covers a tiny bit of each as I wish. for example:
- BLOCK-1
- Separator / Divider IMAGE to sit on TOP partially of the BOTTOM of BLOCK-1 and the TOP of BLOCK-2
- BLOCK-2

This will allow me to MERGE the blocks in a nice way instead of an ordinary "BOXES" look one after the other.
In WordPress it was a simple block I could shape as I wish with ease, it could also EXTEND over other blocks (the block above and under).
But how to do that in WYSIWYG Web Builder I have no clue.

---

If anyone can please share a project file with similar + examples so I can look at and learn from it will be great!
Obviously any explanation on the correct block or other tools I used / settings etc.. anything to help me figure it out will be very appreciated.


Thanks ahead for your time

#1 - A floating layer will be your best bet as it will allow you to place objects inside and freely place them where you want and stack them. You may also want to check out using a 'section'.

#2 - Layers, layout grids, etc. you can add a 'divider'. Open the properties tab and click on divider. You can choose to place the divider top, bottom, in front or behind elements.

Thank you for the quick reply, I will give these a try