Home Forums Porto Template Slider Caption and Columns

This topic contains 2 replies, has 2 voices, and was last updated by  MoiraAllen 2 months ago. This post has been viewed 94 times

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

    MoiraAllen
    Participant

    Hi Rodrigo – I hope you are well. This time I am using the Insurance Demo for my new site and I have a couple of questions.

    The slider captions appear on a white background. Both the background and the captions slide in. Is it possible to have both these items fade in?

    My other question is about columns. I would like to have 5 columns and I don’t know if that’s possible with Bootstrap’s 12 column system. Do you have any suggestions?

    Thanks for your help.

    Moira


    #10030446

    Support2
    Keymaster

    Hello Moira,

    Hope all is well with you too 🙂

    1) This is possible. Note the HTML below where changed the attribute data-transform_in="" of each layer:

    <div class="tp-caption bg-color-light"
    	data-x="['left','left','20','20']"
    	data-y="center"
    	data-width="['400','400','400','430']"
    	data-height="['405','405','405','450']"
    	data-start="1000"
    	data-transform_in="opacity:0;s:500;"
    	data-transform_out="opacity:0;s:500;"></div>
    
    <h1 class="tp-caption custom-primary-font font-weight-normal"
    	data-x="['60','60','80','80']"
    	data-y="center" data-voffset="['-105','-105','-105','-125']"
    	data-width="['310','310','310','310']"
    	data-start="1300"
    	data-fontsize="['34','34','34','44']"
    	data-transform_in="opacity:0;s:500;"
    	data-transform_out="opacity:0;s:500;"
    	style="white-space: normal;">Protecting you is our business</h1>
    
    <div class="tp-caption"
    	data-x="['65','65','85','85']"
    	data-y="center" data-voffset="['10','10','10','17']"
    	data-width="300"
    	data-start="1600"
    	data-fontsize="['14','14','14','20']"
    	data-lineheight="['24','24','24','29']"
    	data-transform_in="opacity:0;s:500;"
    	data-transform_out="opacity:0;s:500;"
    	style="white-space: normal;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</div>
    
    <a class="tp-caption btn btn-secondary font-weight-bold custom-btn-style-1"
    	href="#"
    	data-x="['65','65','85','85']"
    	data-y="center" data-voffset="['120','120','120','145']"
    	data-start="1900"
    	data-fontsize="['14','14','14','20']"
    	data-paddingtop="['11','11','11','16']"
    	data-paddingbottom="['11','11','11','16']"
    	data-paddingleft="['32','32','32','42']"
    	data-paddingright="['32','32','32','42']"
    	data-transform_in="opacity:0;s:500;"
    	data-transform_out="opacity:0;s:500;">GET A QUOTE</a>

    2) Regarding 5 columns:
    This is not possible just with Bootstrap. But Porto already comes with a code for 5 columns that we created:

    <div class="container">
        <div class="row">
            <div class="col-lg-1-5"></div>
            <div class="col-lg-1-5"></div>
            <div class="col-lg-1-5"></div>
            <div class="col-lg-1-5"></div>
            <div class="col-lg-1-5"></div>
        </div>
    </div>

    * You also can use the responsive levels like in bootstrap, for example: “col-1-5”, “col-sm-1-5”, “col-md-1-5”, “col-lg-1-5” or “col-xl-1-5”.

    We hope this helps.

    Kind Regards,

    Rodrigo.


    #10030470

    MoiraAllen
    Participant

    Thanks very much. That was what I needed. Have a great day!


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