HomePage Forums Traveler Info as to how to create Location Page

Topic Resolution: Resolved

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Elver 3 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6004

    Hi guys,

    could you share details as to how to build locations page like:

    Paris

    Especially the tab part which is the one that I am after.

    Thank you.

    #6050

    Hello

    We build that layout with visual element.

    Here is full shortcode of it:

    [vc_row full_width="stretch_row" bg_type="image" parallax_style="vcpb-default" bg_image_new="id^6033|url^https://suncarsgroup.comwp-content/uploads/2015/01/rent-porsche-spain.jpg|caption^null|alt^null|title^rent-porsche-spain|description^null" bg_override="full" css=".vc_custom_1490776137461{margin-top: -100px !important;background-image: url(http://travelerwp.com/wp-content/uploads/2014/11/john-towner-125993.jpg?id=23309) !important;}"][vc_column css=".vc_custom_1478894705020{padding-top: 100px !important;padding-bottom: 100px !important;}"][vc_column_text el_class="block1"]
    
    Welcome to Paris
    
    We can provide any service you want!
    
    Paris, the capital of light, can be considered France's most famous tourist destination. Paris always brings a lavish, elegant beauty with architectural works full of art and delicate cuisine, luxury. Visitors can visit the Arc de Triomphe, Notre Dame de Paris, the Eiffel Tower, the Picasso Museum, the Sacred Heart Basilica or the Georges Pompidou Center, and many other tourist attractions. .[/vc_column_text][/vc_column][/vc_row][vc_row css=".vc_custom_1493181701212{margin-top: -43px !important;}"][vc_column][vc_tta_tabs active_section="1" interval="0" tab_style="search_tab" el_class="location_tab_nopadding" css=".vc_custom_1493181810681{padding-bottom: 25px !important;}"][vc_tta_section tab_icon="fa fa-info" title="Information" tab_id="01e3fb61-8a32-3" el_class="infor"][vc_row_inner][vc_column_inner][vc_empty_space height="25px"][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width="1/2"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_single_image image="23310" img_size="full"][/vc_column_inner][/vc_row_inner][vc_row_inner css=".vc_custom_1493189037548{margin-top: 25px !important;margin-bottom: 25px !important;}"][vc_column_inner width="1/2"][vc_single_image image="23311" img_size="full"][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][vc_toggle title="The Catacombs of Paris" style="square" color="mulled_wine"]Toggle content goes here, click edit button to change this text.
    
    [/vc_toggle][vc_toggle title="The Eiffel Tower" style="square" color="mulled_wine"]Toggle content goes here, click edit button to change this text.
    
    [/vc_toggle][vc_toggle title="Palace of Versailles" style="square" color="mulled_wine"]Toggle content goes here, click edit button to change this text.
    
    [/vc_toggle][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width="1/2"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    
    [/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_single_image image="23314" img_size="full"][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section tab_icon="fa fa-car" title="Hotels" tab_id="3dca09c8-f4f0-9" el_class="infor"][vc_row_inner][vc_column_inner][vc_empty_space height="25px"][/vc_column_inner][/vc_row_inner][st_list_hotel st_number_ht="8" st_orderby="name" st_order="asc" st_style_ht="grid2" st_ht_of_row="4"][/vc_tta_section][/vc_tta_tabs][/vc_column][/vc_row]

    And you need some css code to change the color style:

    #st_location_single .block1 {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 25px;
        width: 60%;
    }
    #st_location_single .columnstyle  {
        height: 500px;
    }
    #st_location_single .columnstyle .bg-mask {
        opacity: 0;
    }
    #st_location_single li.vc_tta-tab {
        background-color: #f2f2f2;
    }
    #st_location_single li.vc_tta-tab.vc_active {
        background-color: #c6eaea;
    }

    Thanks

    #6667

    thank you.

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

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