[mmboganParticipant]

Hi! Loving your themes!

I’m using the Renew theme and would like to get the header to overlay on a video like so, https://www.airbnb.com/

I’ve looked through the demos for all the themes and did not see this specific display.

Thanks!

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[John EzraMember]

Hi there,

Thanks for writing in! The way we would do this is to first set up a slider with a video background, like integrity 1 or 9.

First you would need to create a transparent slide and slider.

1| Create New Slider via Revolution Slider > Create New Slider

2| Slider Settings:

A. Select “Default Slider” as the Content Source
B. Enter a Title and Alias.
C. Select “Standard Slider” as the Slider Type
D. Then set Slide Layout to “Full Screen“.
E. Enter .masthead in the “Offset Containers” field.
F. (optional) You may or may not have to put a value (“Offset Size“) to adjust the visibility of the masthead (navbar)

More Settings – Right Column

Layout & Visual

Under Appearance
i. Set “Shadow Type” to No Shadow
ii. Set “Background Color” to transparent

Under Spinner
i. Set Choose Spinner to Off (optional)

Navigation
Set Arrows, Tabs, Bullets, Thumbs, Touch, and Misc. to Off (optional but recommnended)

After completing the Slider Settings, Next is to Edit the slides.

A. Click on Edit Slides (blue button)
B. Click Add New Transparent Slide (If there isn’t one already)
C. Add any layers you want on top of the video.
D. You’re done with this section (remember your slider name from step A you will need it in the next section)
E. Don’t Forget to Save.

Next we need to Setup the Video Background on the page. (This requires a URL to your video)

1| (if you haven’t already) Upload a Video .mp4 works in most cases.

2| The Page Settings

From the WP Editor
A: Go to and Enter the Page Editor of your home page (or chosen page).
B: Scroll Down until you find the “Slider Settings: Above Masthead” (past page settings)

From Cornerstone
Within Cornerstone, click on the Settings tab (gear icon) and click on Slider Settings: Above Masthead

i. Select your slider (the one you just created earlier) from the Slider dropdown menu.
ii.Then set “Optional Background Video” to http://LinkToYourUploadedVideo/video.mp4
iii.Toggle the “Enable Scroll Bottom Anchor” check-box (optional but recommended)
iv. Set “Scroll Bottom Anchor Alignment” to Bottom Center (you can choose whichever position you like)
C: Save and you’re done with the setup.

The Slider Animations are done within Revolution slider. This is a third party plugin, despite it being bundled with X, we have limited support here especially for how to use and customize. So the following Guide is really basic.

Slider Editor

1| (if you haven’t already) Go Back to Revolution Slider and Edit the Transparent Slider we created earlier.
2| Edit the Transparent Slide. (Edit Slide – Pencil Icon) This will take you to the Slide Editor.
3| Scroll Down and click on the blue Plus “+” sign – This will allow you to add layers.
4| If you use a Text/Html layer you can enter your text or HTML on the layer that appeared on the screen.
5| Other layer options will open up a window for you to select options.
6| There are several settings above the slide editor and also a timeline below. You can play around with it to get familiar with the settings and options
7| Update the slide by clicking on the green save button (has the save icon on it) floating on the upper right hand of the screen.
8| The magnifying glass lets you preview the slider (unfortunately this isn’t always accurate and it is best to preview on the actual page)
9| You can repeat steps above to add more layers to this slide, or create additional slides to animate to after this slide.

There you have it. Hope this helps!

[Author]

Posts