Okay
  Public Ticket #2159156
Need Help with this testimony layout
Closed

Comments

  • _brandmystyle started the conversation

    Hello Team,

    I can't find this 

    Simple Transparent Boxes

    layout in any demo website. How do i create exact same layout for my web page. Thank you in advance

  • _brandmystyle replied

    sorry i forgot the attachment, i would love to create something like this

    Attached files:  Simple transparent.PNG

  •  580
    Qode replied

    Hello,

    Thanks for writing in.

    There's no single element that could achieve this but you could make some CSS adjustments to the existing elements and make a similar effect.

    We advise you use the element holder and make a structure like this:

    1742490306.png

    We're sending you the code to achieve this:

    [vc_row css_animation="" row_type="row" use_row_as_full_screen_section="no" type="full_width" angled_section="no" text_align="left" background_image_as_pattern="without_pattern" z_index="" css=".vc_custom_1569246337203{background-color: #ddbf8d !important;}"][vc_column][qode_elements_holder number_of_columns="three_columns"][qode_elements_holder_item vertical_alignment="middle" horizontal_alignment="center" advanced_animations="no" item_padding="30px 20px"][icons icon="fa-amazon" size="fa-lg" type="normal" target="_self" margin="10px 0" icon_color="#ffffff"][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][/qode_elements_holder_item][qode_elements_holder_item vertical_alignment="middle" horizontal_alignment="center" advanced_animations="no" item_padding="30px 20px"][icons icon="fa-amazon" size="fa-lg" type="normal" target="_self" margin="10px 0" icon_color="#ffffff"][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][/qode_elements_holder_item][qode_elements_holder_item vertical_alignment="middle" horizontal_alignment="center" advanced_animations="no" item_padding="30px 20px"][icons icon="fa-amazon" size="fa-lg" type="normal" target="_self" margin="10px 0" icon_color="#ffffff"][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][/qode_elements_holder_item][/qode_elements_holder][/vc_column][/vc_row]
    

    You will also need to add your own class to each of the holder item elements:

    5950903504.png

    Make sure to add the same class to each of the three. Then add the following css targeting this class:

    .q_elements_item.my_holder_item_class .q_elements_item_content {
        margin: 50px;
        border: 1px solid white;
    }
    

    That will get you this effect:

    2125989035.png

    With some tweaking you can adjust this to look even more like the example you sent, by changing the size of the icon, the color of the text, the padding of the elements etc.

    We hope this helps.

    Best regards,

    John


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  • _brandmystyle replied

    Hello Team, 

    I think We Have a misunderstanding here, I wanted to create a parallax row with testimony carousal,  or a element slider that can achieve the same, or any other slider technique that will help me.

    I want exact same  "simple transparent box" section 

    Here: https://bridgelanding.qodeinteractive.com/elements/testimonials/

    Thank you in advance  

    Attached files:  Simple transparent.PNG

  •  1,712
    Qode replied

    Hello, 

    The section that you are referring to is Parallax, with Testimonials Carousel element: 

    qvpTeWk.png

    We have attached ZIP file - inside, there is a text file with the code of our demo page. You can create a test page with Full Width template, open Classic editor, paste the code into Text tab and switch again to Backend Editor to check our settings. 

    Best regards, 

    Ian

    Attached files:  landing_testimonials.zip


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.