HomePage Forums Traveler How to build full video background layout?

Topic Resolution: Resolved

This topic contains 6 replies, has 4 voices, and was last updated by  angelchacon 3 years, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #3581

    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/

    #3629

    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.

    #3707

    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.

    #3756

    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.
    #4294

    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.
    #4361

    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

    #4437

    Muchas gracias, funciona correctamente.

    Saludos

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘Traveler’ is closed to new topics and replies.