PLUGIN INSTALLATION

Customer Testimonials

Scroll down for the installation tutorial.

mathilde-langevin-FXJRdoIhs_U-unsplash.jpg

Inez Didot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet nisl fermentum, sollicitudin ligula sed, malesuada nibh. Donec rhoncus nunc magna, at ullamcorper diam rhoncus ac. Maecenas hendrerit interdum nunc, nec semper lorem efficitur vel.

shayan-rti-5NrI8ZAxkRk-unsplash+%281%29.jpg

Ella Goldenbook

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet nisl fermentum, sollicitudin ligula sed, malesuada nibh. Donec rhoncus nunc magna, at ullamcorper diam rhoncus ac. Maecenas hendrerit interdum nunc, nec semper lorem efficitur vel.

cherry-laithang-hEi3AiGnuTs-unsplash.jpg

Sasha Moret

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet nisl fermentum, sollicitudin ligula sed, malesuada nibh. Donec rhoncus nunc magna, at ullamcorper diam rhoncus ac. Maecenas hendrerit interdum nunc, nec semper lorem efficitur vel.

STEP #1:

Create the Testimonials

– Create 3 Side-by-Side Images

Image Layout Stack

Image Title – Client’s Name

Image Subtitle - Testimonial Copy

– Update Image Stack Design Settings

Text Alignment: Center

Image Separation: 6%

Title Separation: 3%

STEP #2:

Import Fonts

– Add the fonts

Add the following code to your Header Code Injections.

<link rel="stylesheet" href="https://use.typekit.net/nrh8rtv.css

Go to SETTINGS > ADVANCED > CODE INJECTIONS and paste the above code to the HEADER section.

STEP #3:

Add Custom Code

– Add the code

Copy and paste this code into your Custom CSS

Make sure to update the SECTION ID

[data-section-id="ENTER YOUR SECTION ID#"] {

.sqs-block-image .image-block-outer-wrapper.image-block-v2 {
   display:flex;
   flex-direction:column;
   padding:20px 9% 65px;
   box-shadow: 0px 0px 0px 1px #ccc, 0px 0px 0px 1px #ccc;
 }
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card {
   display:flex;
   flex-direction:column;
 }
.image-title-wrapper{
   order:2;
   position:absolute;
   bottom:35px;
   align-self:center;
 }
.intrinsic {
   width:100px;
   margin:15% auto;
   order:3;
 }
.sqsrte-small {
   font-weight:400;
   font-size:.725rem!important;
   margin-bottom:3em!important;
   letter-spacing:.2em!important;
 }
h4 {
   font-size:1.875rem;
   line-height:.5em;
   letter-spacing:.03em;
   font-family: recherche, sans-serif;
   font-style: normal;
   font-weight: 400;
   padding-right:.7em;
  }
h4:before {
   content:'– ';
 }
}/*END TESTIMONIAL*/