Docs

[Aaron]

I am looking to create a quotes secitons with customer testimonials which show as a slider.. can I use revolution slider?
If so how can I achieve the design shown below thanks!

[Aaron]

This reply has been marked as private.

[Joao]

Hi There

You can use the Slider Element in Cornerstone and add the following code on your Slider Content.

<p style=" float: left; font-size: 600%"> " </p>
<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p style=" float: right; font-size: 600%"> "</p>

You also can use images instead of the font to create the " "

Please check a bit the element functionalities and you will be able to make it transparent and play with it´s parameters.

Let us know how it goes

Joao

[Aaron]

This reply has been marked as private.

[Jade]

Hi Aaron,

Please provide us with the URL of your site so that we can check and provide you with the CSS.

[Aaron]

This reply has been marked as private.

[Joao]

Hi There,

Use this code instead on the slider:

<i class="x-icon x-icon-quote-left" style="float:left; color: hsl(0, 0%, 100%); font-size: 3em;" data-x-icon="" aria-hidden="true"></i>

<p  style="color: white; font-size: 16px;">Tousled food truck polaroid, salvia bespoke small batch Pinterest Marfa. Fingerstache authentic craft beer, food truck Banksy Carles kale chips hoodie. Trust fund artisan master cleanse fingerstache post-ironic, fashion axe art party Etsy direct trade retro organic. Cliche Shoreditch Odd Future Pinterest, pug disrupt photo booth VHS literally occupy gluten-free polaroid Intelligentsia PBR mustache. </p>

<i class="x-icon x-icon-quote-right" style="float: right; color: hsl(0, 0%, 100%); font-size: 3em;    margin-left: 14em;margin-top: -1em;" data-x-icon="" aria-hidden="true"></i>

And than add the following CSS to Appereance Customizer Custom CSS or Cornerstone Custom CSS

.flex-direction-nav {
  left: calc(50% - 50px);
  position: absolute;
  width: 100px;
}

Hope that helps

Joao

[Author]

Posts