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
i would like to use one hero image on raw layout of 2.
so i will have for example on left side some text and youtube video, and on right side i will have contact form.
but to cover all left and right sides with one image. and if i can darker or fill one side , to make it feel more like a seperate sides, will be cool
hope you get what i mean.
if not , i will make image illustrator for my needs.
thanks
without the blur
Hi Do0rway,
Here’s a guide on how I would do this. Make a new row with 2 columns (50/50). Set the background image for the row. (Edit Row screen, in the Row Styles sidebar, under the theme grouping and then under the background image url). Then open the layout grouping and set the padding, and gutter to 0.
I would then add a SiteOrigin Editor in the right column of our newly created row. Edit, and go to the widget styles. Open the attributes grouping and make a transparent background by putting the css into the css styles textarea (example: background: rgba(0,0,0,.7);). Then I would create the contents of my column as I would normally. I’ll leave the left column for you to play with.
Have fun. :)
hello and thanks for your solution
on right side i add the stuff you said, but put attention that on 1920 x 1080 the image been cut a little on the bottom.
and on other screens, its all get messed up . i attach photo.
i use padding 73px for BG, and its works better for the BG cut at bottom (for now i cancel it for keep your work flow)
the BG transparent on right side, its not keep after the youtube movie.
and the contact form, and everything else a bit messed up on lower resolutions.
thanks
Hi Do0rway
You can fix this with some custom CSS. Please give this article a read, CSS Media Queries & Using Available Space. The when you’re ready navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Write your new media queries; it’ll look a little something like this:
@media (max-width: 780px) { .selector { padding: 0; }}You might also need to install the SiteOrigin CSS Editor.
ideal i want it to be like this, thanks
Hi Do0rway,
Do you have a public URL where we can take a look at the page structure? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Really liking how this page is looking by the way – good job. :)
thanks for your help and comment
if you click on the screens resulotions image you get to my website.
or by:
http://www.tadmit4u.co.il
thanks
Hi Do0rway
You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (max-width: 1050px) { #pgc-7-1-0 .panel-widget-style { padding: 15% !important; } }Please note that this CSS will only work with the left row.
You might also need to install the SiteOrigin CSS Editor.
great its kind of doing the trick, ill just keep tweak all of this to get the maximum
big thanks for your help
Hi Do0rway,
It’s been a pleasure. :) If you have any other issues, or questions that I can help you with please feel free to post a new thread.