Layout Blocks always stretched or am I missing something?

Just upgraded tot 4 (had to jump through some hoops) and eager to go and work with it!

I’m rebuilding a site from the ground up, a good time to start using lay-out blocks. They seem fascinating. But when I try them each one gets stretched to the sides of the window, over the edges of the canvas. That is not what I want - the design changes dramatically - but I don’t see a way to change that. Is there?

yea they are full width, but you can just set the background to transparent - the layout blocks serve as an structure more than anything, so it shouldn’t interfere with your design if you set the background color to transparent.

1 Like

Layout Blocks are essentially Wide Boxes with special content grouping and vertical ordering properties. You can give them a background color/image, or leave them transparent.

Think of your webpages as individual card sections stacked vertically. If you build those card sections with Layout Blocks, you can resize the vertical height of each card and the rest of the cards below will just flow to accommodate the depth change. This saves you the manual work of repositioning everything below.

The other magical property of Layout Boxes is that you can drag one Layout Box over another and they and their content will switch positions. Moreover, this vertical position switch will be reflected in all your device layouts, so the vertical order is preserved.

3 Likes

Ah, thanks! That’s a relief. Time to tinker…! :slight_smile:

Hello.

The documentation for LayoutBlocks says:

Moreover ‍the ‍placement ‍will ‍also ‍apply ‍across ‍all ‍devices, ‍keeping ‍the ‍section ‍order ‍consistent.

That means it is NOT per device. On a wide screen layout you usually have 3 or 4 columns. On the mobile 320 layout it is very often a 1 column layout. Here the blocks are helpful.

Does that mean when i build a LayoutBlock on the small screen, it shows up on the wide screen as well and destroys the layout by moving other elements?

Mr. F.

@Mr_Fozzie I know Blocks from other website tools I have used in the past.
There are very handy and I understand it right is, when you do your block on other devices and copy this block, then it copies as well the layout of the other devices.
You could literally create a template file with lots of blocks in there and just copy and past blocks in your new website project.

— add —
just played around and it works like that how I thought it shall works. amazing stuff.

2 Likes

Hello.

I obviously do not understand. Whatever I do, it does not lead to the goal.

A LayoutBlock always contains a wide box. Right?

So I can’t create 2 of these blocks horizontally next to each other in the wide layout and at the same time these two blocks vertically below each other in the smartphone layout. Is that correct?

Mr. F.

You cannot place blocks layout horizontally but you can place them as many you wish vertically, also in the mobile version.
It’s always a wide box and everything you put in the box is movable as a whole block and or movable across devices.
Next I will try if I can copy and paste them to other projects.

Hello.

I think I am getting closer to the issue.
I make all the elements that I have horizontally next to each other in the wide layout into a single LayoutBlock.

This will remain in the narrow layout as well. There I can resize it and arrange and adjust the elements in it as I want.

This way it could work.

Mr. F.

2 Likes