Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello,
We are use Page Builder along with the widgets bundle to lay out our site. We are trying to give a 3d feel to each page by overlapping images and having some images appear outside of the normal parameters established by the rows.
Is there a way to fix an images position on the page?
Hi SQZBen,
Yes, although it’s a tad complicated. Basically, you need to apply position: relative; to the parent container and then apply position: absolute; to the image you wish to move (so it’s absolutely positioned relative to the container).
Do you have a public URL where we can take a look at your current setup? This will allow me to write CSS relevant to your website. Please note that I won’t be able to write the complete CSS but I should be able to give you a better idea of how to accomplish this.
Hi Alex,
Thanks for the response. I do not see a Private Reply option in the comment box or before hitting the “Reply” button
Hi SQZBen
Very sorry – that was a force of habit. Unfortunately, you’re not longer allowed to privately post things.
Although I can’t share a URL, I have copy and pasted what we came up with below. Please let me know if there are any improvements you would make to the code. We have placed this in the “Additional CSS” section and add the overflow-image class to whatever image we want to be in a fixed place.
.overflow-image {
position: relative;
}
.overflow-image .so-widget-image {
position: absolute;
top: -50px;
}
This becomes a bit annoying when we want to attribute other classes because Pagebuilder only allows for one class in the layout. Is there a way around this?
I imagined that the best way would be to apply specific css in Attributes –> CSS Styles but many things haven’t seemed to work. Could it be that the class attributes overwrite the CSS Styles (even if they don’t conflict)?
Thanks!
Hi SQZBen,
To clarify, there are no actual restrictions on how many classes you can set. If you wish to apply multiple classes to a row or widget, simply add a space between the classes and you’re good to go. So for example, say I want to add box-shadow and border-red it would look something like this:
That’s basically what I would have suggested so there are no real improvements to be made. Good job mate. :)
The CSS Styles field is basically an easy method of setting inline CSS to the row or widget container. It can still be overridden but due to the inline nature, it’s a little “harder” to do so (!important).