I have Layoutblocks on my Page with 4 Columns in the layout… left, first column is the sub-navigation… right (4th column) sjould be free for images… but as seen in Picture 1, everything under LIne A moves… i want that only the text in the Layoutblocks move (open & close). See picture
2-4 how the Logo, which should not move, makes his journey…
From what I can see, it looks like the logo is spanning two layout blocks - that could cause a problem. If the logo isn’t completely sitting inside a layout block, it will have a tendency to remain where it is on the canvas. In the first illustration below, you will see that the image is on the canvas sitting between two layout blocks:
If I now move the bottom layout block up the page, you will see that it starts to cover the image which remains in place:
Clearly, this isn’t an ideal situation. Therefore, it’s best to have a clearer understanding of layout blocks and why they exist.
Layout blocks allow you to divide your page into logical sections. Within each block you add all the elements that have to stay together - whether they be individual elements like text, images or grouped elements. By doing this, you will be able to do several things that make life easier for you. If you extend a layout block by dragging it’s bottom handle, all the blocks below it will move down the page - creating space for additional content within the expanded layout block without having to move individual elements below the block. This is a particularly useful feature when switching to say a mobile layout where things have to be moved about or enlarged - such as font sizes in text blocks. In the mobile layout you can simply expand the layout blocks and then edit the content to better to suit the device layout.
If you move a layout block from one position to another, it will snap above or below the previous or next layout block - making it easy to rearrange your logical sections on the page. So, the general rule I follow is to either use layout blocks consistently on the page, or don’t use them at all. Essentially, make sure that all your page content is sitting inside a layout block, with nothing left isolated on the canvas that isn’t in a layout block. This should prevent the issue you’re experiencing.
To give you an idea of what I mean, the illustration below is part of a web page using layout blocks consistently (outlined in blue):
There is a block for the top navigation, a block for the hero section, and a block for the images and associated text. Notice that all the elements are fully contained within each block. If I were to now move these blocks around to say have the hero swap position with the image block, I would simply move the image block up the page. In doing so, the hero block would jump to below the image block - which is exactly what I would want to do. If I didn’t like the new position, I could drag the image block down the page again - allowing the hero block to jump back up the page so that it sits above the image block. The key is to not have other elements outside of a layout block sitting on the page - its all or nothing!
Hopefully, this will give you a clearer picture of what is happening so you can fix the issue.
As you say: it is all or nothing… but I want this open and close effect on the text in column 2 and 3… But also pictures in column 4, which are not moving… cause they stand for all that textes on C2&C3… Just for the future: is it possible to move all out of the way in homepages what is LOWER LAYERS? And dont move everything on higher layers then the Layoutblock? so I (and not the software) decide what to move…
I think I see what you’re trying to do. If you’re using the block visibility function to expand your text then you will hit a problem. This is because blocks are full width. When the visibility function is activated by clicking on a link, the block appears full width. This will have a tendency to move adjacent content to make way for the visible block.
If I were faced with this issue, I would use popups instead of block visibility. This would keep all adjacent content in place. The only downside of this arrangement is that the links below the clicked link will be obscured by the popup, so users would have to click the link again to collapse the popup and see all the other options again. Here is how the arrangement would look on a page.
Everything has ben arranged in a single layout block in three columns. The left column contains static content, as too does the third column - the image. The centre column is a set of buttons which when clicked opens a popup with the extra information
The popups are aligned to cover the related button and replace the topic title on the button with a Click to Close instruction. When that is clicked, the popup closes allowing for further selections to be made. You will see that the static content on the left and right column remains in place and doesn’t move.
The problem with the accordion - like structure you have at present is that the expanded content will always move other elements around on the page to make way for the expanded block - which doesn’t look too good. By using popups, you could also add some movement by having the popups animate into view - maybe fading in-place to add some extra interest. As long as the instructions on the page are clear, most visitors will understand how it all works.
As a side note: If the image in the third columns has to change to be relevant to a particular popup, you could make the pop-up extend over the third column where the image could sit. Likewise, your popups could also contain scrolling text boxes, as in your example, Here is what that sort of arrangement could look like before and after a link is clicked.
BEFORE
AFTER
Do you mean something like this? A Harmonica effect that you can insert as an element and not as a Layout? Maybe Sitely will add it in an update at some point. It would be great, as would the Image and Video Gallery if it were a separate element that you could insert anywhere, even into a Popup. I’m including the code that you can rewrite and adjust the texts to suit your needs.
You can cancel your order within 24 hours of creation in the "My Orders" section.".
Standard delivery takes 3-5 business days.
Yes, you have a 30-day return period.
That’s a great option for those who want to get into code snippets - in fact, its an option I use very often. I like the fact that accordions like this will expand the page downwards as the links are clicked, whilst leaving the adjacent content in place. I still add the code element to a layout block - when the accordion expands, the layout block expands also -ensuring that all following layout blocks move down the page. I also add the feature that only opens one panel at a time which reduces the space needed to display the page content. Here is how my version looks in collapsed and expanded mode.
COLLAPSED
EXPANDED
Maybe you should post the code here so that others can try it out - I know many people don’t use code options - because one of the reasons they use Sitely is because it’s a no-code website builder. But for those who want to further their knowledge of website building, understanding some of the coding options available is the way to go.
You’re right. The things I find practical that are not in Sitely I try to replace with code. I should point out here that I’ve never programmed and have been programming websites for less than 3 years. I use AI to generate code. I’m an amateur, but Ai fixes all problems with quality.
I thought I could also solve Image and Video Gallery this easily and put it in Popup, or manage posts for Blog so that customers manage themselves, but this is a higher level and it’s up to Sitely’s strategy if she wants to do something like this.
I welcome every new feature and improvement because customers are very demanding and it’s annoying to send them elsewhere that the app doesn’t offer the feature.
I created a Harmonica project into which I put two different Harmonica codes. One closes the other when opened and the other code leaves the windows open when opened. It’s up to you which one works for you. You can change the font. You can find Henken Grotest in the code and replace it with your own. Adjust the colours to suit yourself. The code is also functional in the Popup and on the page. You can have it used multiple times on the page.
It’s a primitive solution that doesn’t offer as much convenience as working with native elements in Sitely, but maybe it will help someone.
Harmonica.sitely (460 KB)
