Navigation

This content is old and no longer supported. You may use at your own risk, but no official support will be provided for anything listed here. If you are a Themeco customer, we invite you to check out our new community and forums, Apex.

  • Author
    Posts
  • #612228

    mmbogan
    Participant

    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!

    #612537

    Paul R
    Moderator

    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.

    #612599

    John Ezra
    Member

    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

    Click New Slider

    2| Slider Settings:

    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.

    Edit 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!

Join Apex

This content is old and no longer supported. We invite you to check out our new community and forums, Apex.

Join Apex