How to build full video background layout?

[jorgepelaez]

Hello, how can build a full video background?
Can you pont me to the documentation.

I want my home page like this one: http://travelerwp.com/full-video-slider/

[huannv]

Hello Jorgepelaez,
Thank you for waiting.
This layout is our advanced custom layout so if you want to build it, we can help you build it by custom code.
Thank you.

[jorgepelaez]

Hello Huannv is it possible you can provide me the code in a zip file that I can copy/paste in classic mode and the switch to Visual composer and edit it?

Thanks for your repply.

[Bryan]

Hello

You can use this header layout:

[vc_row video_bg="yes" video_bg_url="https://www.youtube.com/watch?v=uPH7ooIRqWA" parallax_class="yes"][vc_column width="2/3" css=".vc_custom_1506051205215{margin-top: 175px !important;padding-top: 50px !important;padding-bottom: 150px !important;}"][vc_custom_heading text="Find Your Perfect Trip" font_container="tag:h1|text_align:left|color:%23ffffff" use_theme_fonts="yes"][st_search st_style_search="style_2" st_box_shadow="no" field_size="md" tabs_search="hotel,tour,activities" st_list_search="all,hotel" st_search_tabs="yes" st_list_form="hotel,rental,cars" hotel_title="Search and Save on Hotels"][/vc_column][vc_column width="1/3" css=".vc_custom_1506051213747{margin-top: 175px !important;}"][st_simple_location st_type="st_tours" st_list_location="287" st_list_location_2="287"][/vc_column][/vc_row][vc_row css=".vc_custom_1422239553047{padding-top: 30px !important;padding-bottom: 30px !important;}"][vc_column width="1/3" css=".vc_custom_1422239559712{padding-top: 30px !important;padding-bottom: 30px !important;}"][st_about_icon st_pos_icon="top" st_size_icon="box-icon-big" st_text_align="text-left" st_color_icon="#000000" st_name="Combine & Save" st_link="#" st_description="Faucibus tristique felis potenti ultrices ornare rhoncus semper hac facilisi" st_icon="fa-briefcase"][/vc_column][vc_column width="1/3" css=".vc_custom_1422239566268{padding-top: 30px !important;padding-bottom: 30px !important;}"][st_about_icon st_pos_icon="top" st_size_icon="box-icon-big" st_text_align="text-left" st_color_icon="#000000" st_name="Combine & Save" st_link="#" st_description="Rutrum tellus lorem sem velit nisi non pharetra in dui" st_icon="fa-dollar"][/vc_column][vc_column width="1/3" css=".vc_custom_1422239573876{padding-top: 30px !important;padding-bottom: 30px !important;}"][st_about_icon st_pos_icon="top" st_size_icon="box-icon-big" st_text_align="text-left" st_color_icon="#000000" st_name="Trust & Safety" st_link="#" st_description="Nostra sodales pharetra lacus sit sapien tristique luctus class magnis" st_icon="fa-lock"][/vc_column][/vc_row][vc_row parallax_class="yes" css=".vc_custom_1427261023966{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(http://travelerwp.com/wp-content/uploads/2014/11/196_365_1200x5004.jpg?id=4995) !important;}"][vc_column][st_last_minute_deal st_post_type="st_hotel"][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=".vc_custom_1417684129972{margin-top: 60px !important;margin-bottom: 0px !important;}"]

Top Destinations

[/vc_column_text][/vc_column][/vc_row][vc_row css=".vc_custom_1417684088770{padding-top: 30px !important;}"][vc_column][st_list_location st_number="4" st_col="4" st_style="curved" st_show_logo="yes" st_logo_position="left" st_orderby="none" st_order="asc"][/vc_column][/vc_row]

and this css code for it:

@media (min-width: 1200px){
#st_header_wrap_inner {
    height: 0px !important;
}
.header-top {
    background: transparent;
}
.main_menu_wrap {
    margin-top: -55px;
    padding-right: 5%;
    background: transparent!important;
    border-bottom: none!important;
}
header#main-header .main_menu_wrap ul.slimmenu {
    width: 60%;
    float: right;
}
#menu1 .menu-collapser{
    background: transparent;
}
.bg-holder>.bg-mask {
    opacity: 0;
}
header#main-header {
    background: transparent;
}
.header-top .main-header-search {
    display: none !important;
}
.header-top li.top-user-area-lang{
    display: none !important;
}
.header-top .col-md-9 {
    width: 30%;
    float: right;
    margin-right: -35px;
}
.header-top .col-md-3 {
    z-index: 99;
}
ul.slimmenu li a {
    color: #ffffff;
}
ul.slimmenu li .sub-toggle>i{
    color: #fff !important;
}
#top_toolbar{
    background: transparent  !important;
}
ul.slimmenu li ul li a {
    background-color: transparent;
}
}

My image will show you the place to use css code

Thanks

Attachments:

You must be logged in to view attached files.

[angelchacon]

Good afternoon, I also want to know how I can build the full video page and the transparent header.
Can you send me the code or the sample? Thank you

Attachments:

You must be logged in to view attached files.

[Bryan]

Hello angelchacon,

I have published the shortcode of visual composer and the code you need to to use to make the header transparent.

Please try it.

Thanks

[angelchacon]

Muchas gracias, funciona correctamente.

Saludos

[Author]

Posts