how do I change the background like on your home page? Those transparent menu bar and a background image which slowly moves along?
Moving background
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Serwo
For the home page only, with Sticky Menu turned on in Theme Settings, you can try the following under Appearance > Custom CSS:
Ok, the transparent menu is working perfectly.
but how does that work whit the background image. I use the meta slider at Page Metaslider for the Backgrundpicture.
Can you perhaps send through a link so we can see it active?
http://www.filmgebung.de
the last update give the menu text 2 different colors. Why?
Your menu color is being set in the RGBA: 255, 255, 255 is white and 0.5 is the opacity. Adjust as required. If you leave your menu like this you’ll need to go into Appearance > Customize and set your menu colors, right now links are set to white, you’ll need to change them in the Customizer.
I’m not quite following your question about Meta Slider, how can we help there?
Ok, color right.
what i want is to set the metaslider in the background and when you scroll whit the mouse all move buy not the slider. you have it on your home page. or look at this page. https://affinity.serif.com/en-gb/about/
you see the picture is not move but the rest off the site is moving.
hope you now what i mean ;)
For sure. Meta Slider to my knowledge doesn’t have a parallax option. If you find another slider to use for this we can help integrate it into the same position as Meta Slider.
Ah ok. so i need a slider with parallax option. I have found the DZS parallax. http://codecanyon.net/item/parallaxer-parallax-effects-on-content/9256004
what do you use?
DZS will hopefully have in it’s documentation an option to insert the slider directly using PHP. You’d need to use a child theme, here is one you can start with:
https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip
You’d then need to make a copy of header.php from the parent theme and insert it into the child theme. Within header.php you’d need to change the vantage_render_slider line with the PHP call for your new slider.
Hey Andrew, I have the plugin and i use the child theme. but i don’t now the PHP call from the new slider.
I have renewed my page. the problem are the frame. which are off on the home page and contact page.
I’m not quite following the last part you said.
If it was just for your home page, you’d copy header.php from your parent theme into the child theme.
Edit header.php and replace the following line:
With something like this:
That example is using a shortcode method. You’d need replace the shortcode there with your shortcode.
Here are some threads where I discuss this:
Thread: Replacing Meta Slider with Another Slider in Vantage
Thread: Possible to Integrate LayerSlider instead of Meta Slider?
i don’t want any frames around the row and the pics. how can i switch that off.
Try editing the row in question, on the far right of the row, click the wrench icon, edit the row, click Layout and enter in 0 as your padding for the row.
i did it. but it doesn’t work.
Sorry to hear that. We’ll definitely look into what’s happening. For now, edit the row, click Attributes top right and enter a class name in the CSS class name field:
Then insert the following under Appearance > Custom CSS:
OK, we are on the right site. ;)
with the visual editor does not change. works only with the text editor.
I have the meta slider set to 1570px x 600px.
now I want the contents of the row are also 1570x wide.
so it looks like the box layout.
2. directly under the meta slider is still a frame.
I insert the meta slider with “display page meta slider”.
Thank you for your Big support!
I’m not sure why no-padding wouldn’t work with the Visual Editor. Are you applying this style to the row or the widget. The CSS I sent is specifically meant for the row level settings. Perhaps let me know if you have an example of this problem showing.
To set the row content width to normal, edit the row, click the Layout tab on the right and change the drop down from Full Width or Full Width Stretched to Standard.
To remove the padding under the slider please try the following under Appearance > Custom CSS:
1. i apply the style to the row.
i insert the same parallax effect whit the visual editor at the end of my site. so you can see the different. same setting.
2. i set the row to standard and colored the Background in the row style > theme.
the background color is on the whole row. i want the color for the row 1570px
you can see it at my Page http://www.filmgebung.de
3. removing the padding under the slider work.
i apply the style to the row.
Hi.
1. Sorry, can you perhaps try explaining this point to me again? Thanks
2. Try removing the background color from the row and instead editing the widget and applying the background color there.
3. Glad that helped.
you say: I’m not sure why no-padding wouldn’t work with the Visual Editor. Perhaps let me know if you have an example of this problem showing.
i have the example of this problem on my site http://www.filmgebung.de. so you can see it. on the home-site you can see: first the meta slider (width 1570px) then you see 4 row’s. 1. is the last setting you telling me (2. Try removing the background color from the row and instead editing the widget and applying the background color there.). can you see the problem? it’s not in the same width like the meta slider and i have a frame between the widgets. 2. is the row with text edit and the parallax effect. it works, but when you change the size of the window, the image of the parallax effect are not changing there size. 3. is a text and a image. 4. is the visual editor with the parallax effect. between 3 and 4 you see the frame. this frame comes from the visual editor. all row’s are setting to standard
Thanks for trying to explain this further. Let’s try work a point at a time.
If you insert the following under Appearance > Custom CSS you can change the site width to be the same as the slider:
Give that a try.
Please keep in mind that Vantage is natively 1080px wide in the inner container. We can try help you change things like that but it can starts to complicate things as we proceed. For example, if you had to set your slider to 1080px wide then the width would match the rest of the site and wouldn’t need to change anything else.
Let’s just get this width issue sorted. We can then move onto the next question.
ok, i think maybe i now the problem!? the theme have under design>customize 2 background colors. 1. is color>background color (this is the color that have the 1570px or your standard 1080px) and 2. is the page background color. the page builder has not the same with as the color>background color. it is smaller. i change the theme to boxed and changed the color for both backgrounds, row and container to make it visible. i want a clean design like the meta slider on the top of the page. no frames. Is this possible or do I want too much?
Hi Serwo
Thanks for being so patient. I’m having a hard time following exactly what you’re looking to accomplish here. Do you have any experience with Photoshop or Paint etc? Is there any chance you can make a quick mockup of what your page should look like? If you can, you could upload that image to your Media Library and then post the link here.
hey Andrew,
her is the link: http://filmgebung.de/wp-content/uploads/2015/02/Page-Layout.jpg
hope it is good enough. :)
Thanks.
This CSS will sort most of this out. Be sure it’s not mixed up with other stuff we’ve tried:
Next:
1. Set all your row background colors from Edit Row > Theme > Background Color. Don’t set row background colors from the widget level.
2. On each row go to Edit Row > Theme > and check the No Bottom Margin setting.
3. On your row Parallax FX 1570px no border, the row after the video. On that row Edit Row > Attributes, enter the following in as your Row CSS Class:
Then add the following to Appearance > Custom CSS:
The camera and laptop which need to be absolute left and absolute right. I’m not sure. Please send me a link once those are there and I’ll try help with those.
ok, 1 question: must i set the theme to boxed or to full width?
Full width please.
ok i’ve done that. you can see result at my home page.
the problem is that the page builder is not boxed the row’s in standard. so you don’t see the background from the site. the metaslider have a different background i can’t change.
Cool, nice one.
Meta Slider background color can be set from Custom CSS using:
when we changed the row standard to 1570px than we have a boxed row style and i can change the other site to full with on the row style. than I have both options. boxed and full with optic.
Background not changing from meta slider
The above code is white. Your background was white. You’ll need to change #fff to the color you require.
“when we changed the row standard to 1570px than we have a boxed row style and i can change the other site to full with on the row style. than I have both options. boxed and full with optic.”
Sorry, I’m not following at all here. Please can you try explain again what you’re trying to achieve.
If you want to try this using the Boxed layout you can. Give it a go.
hahaha, #fff is white, that right. sorry.
No problem, sorry, I could have changed that for you, was just working quickly.
ok first. sorry that i’m so complicated.
ok, tjis is stange. i set the theme to boxed. all page builder row have a frame left and right. but the one i insert 3 columns side by side it’s full boxed. but the picture is not on the left edge.
No problem.
It’s most likely going to be much easier to achieve your layout in Full Width mode.
Are those rows set to Edit Row > Layout > Full Width Stretched? Are you still trying to make this look like the image you sent?