Testimonial Type 3

Talha Aziz

DON’T JUST TAKE  
OUR WORD FOR IT

Donec ac odio tempor orci dapibus ultrices in. Ultricies tristique nulla aliquet enim tortor at aucLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ut tellus elementum sagittis vitae et. Integer malesuada nunc vel risus commodo viverrator. Tincidunt tortor aliquam nulla facilisi cras fermentum.

Client name, company name

The above block is copied from the site: https://pepcreativepac.wpenginepowered.com/

Pattern HTML

<!-- wp:group {"metadata":{"name":"Testimonial Panel"},"align":"full","className":"testimonial-slider","style":{"spacing":{"padding":{"top":"var:preset|spacing|5","bottom":"var:preset|spacing|5"},"margin":{"top":"var:preset|spacing|5"}}},"backgroundColor":"eight","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull testimonial-slider has-eight-background-color has-background" style="margin-top:var(--wp--preset--spacing--5);padding-top:var(--wp--preset--spacing--5);padding-bottom:var(--wp--preset--spacing--5)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"40%","animationsForBlocks":{"animation":"slide","variation":"right","once":true,"mirror":false,"easing":"linear"}} -->
<div class="wp-block-column" style="flex-basis:40%" data-aos="slide-right" data-aos-easing="linear" data-aos-once="true"><!-- wp:heading {"animationsForBlocks":{"animation":"","variation":"fade","once":true,"mirror":false,"easing":"linear"}} -->
<h2 class="wp-block-heading">DON’T JUST TAKE  <br>OUR WORD FOR IT</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"animationsForBlocks":{"animation":"slide","variation":"left","once":true,"mirror":false,"easing":"linear"}} -->
<div class="wp-block-column" data-aos="slide-left" data-aos-easing="linear" data-aos-once="true"><!-- wp:group {"metadata":{"name":"Testimonial Panel"},"align":"wide","style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}}},"textColor":"two","layout":{"type":"constrained","contentSize":""}} -->
<div class="wp-block-group alignwide has-two-color has-text-color has-link-color"><!-- wp:da/wp-swiper-slides {"txtColor":"#1a1919","containerWidth":100,"previousIcon":"https://pepcreativepac.wpenginepowered.com/wp-content/uploads/2025/12/slider-left-arrow.svg","nextIcon":"https://pepcreativepac.wpenginepowered.com/wp-content/uploads/2025/12/slider-right-arrow.svg","clickable_pagination":true,"tabsData":[{"clientId":"beec5b60-6697-4c96-a6bc-3a1d49896a03","slug":"slide-1"},{"clientId":"a70552c4-fb3d-493c-a9f1-d27206ddef18","slug":"slide-2"},{"clientId":"3c2c2fb7-c06d-4f6b-899d-59cb4509b26d","slug":"slide-3"},{"clientId":"2b23ebc3-a63d-4953-acf7-7cd57e64ae8b","slug":"slide-4"}]} -->
<div class="wp-swiper"><div class="wp-swiper__wrapper" style="color:#1a1919"><div class="swiper-container swiper" data-swiper="{&quot;slidesPerView&quot;:&quot;1&quot;,&quot;slidesPerGroup&quot;:1,&quot;slidesPerGroupAuto&quot;:false,&quot;slidesPerGroupSkip&quot;:0,&quot;navigation&quot;:true,&quot;pagination&quot;:{&quot;type&quot;:&quot;bullets&quot;,&quot;clickable&quot;:true},&quot;delay&quot;:3000,&quot;speed&quot;:500,&quot;loop&quot;:false,&quot;direction&quot;:&quot;horizontal&quot;,&quot;slidesOffsetBefore&quot;:0,&quot;slidesOffsetAfter&quot;:0,&quot;autoHeight&quot;:true,&quot;spaceBetween&quot;:0,&quot;releaseOnEdges&quot;:false,&quot;effect&quot;:&quot;slide&quot;}"><div class="swiper-wrapper"><!-- wp:da/wp-swiper-slide {"slug":"slide-1","containerWidth":100} -->
<div data-tab="slide-1" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:100%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|1"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Donec ac odio tempor orci dapibus ultrices in. Ultricies tristique nulla aliquet enim tortor at aucLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ut tellus elementum sagittis vitae et. Integer malesuada nunc vel risus commodo viverrator. Tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<p style="font-style:normal;font-weight:600">Client name, company name</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:da/wp-swiper-slide -->

<!-- wp:da/wp-swiper-slide {"slug":"slide-2","containerWidth":100} -->
<div data-tab="slide-2" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:100%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|1"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Donec ac odio tempor orci dapibus ultrices in. Ultricies tristique nulla aliquet enim tortor at aucLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ut tellus elementum sagittis vitae et. Integer malesuada nunc vel risus commodo viverrator. Tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<p style="font-style:normal;font-weight:600">Client name, company name</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:da/wp-swiper-slide -->

<!-- wp:da/wp-swiper-slide {"slug":"slide-3","containerWidth":100} -->
<div data-tab="slide-3" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:100%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|1"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Donec ac odio tempor orci dapibus ultrices in. Ultricies tristique nulla aliquet enim tortor at aucLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ut tellus elementum sagittis vitae et. Integer malesuada nunc vel risus commodo viverrator. Tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<p style="font-style:normal;font-weight:600">Client name, company name</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:da/wp-swiper-slide -->

<!-- wp:da/wp-swiper-slide {"slug":"slide-4","containerWidth":100} -->
<div data-tab="slide-4" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:100%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|1"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Donec ac odio tempor orci dapibus ultrices in. Ultricies tristique nulla aliquet enim tortor at aucLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ut tellus elementum sagittis vitae et. Integer malesuada nunc vel risus commodo viverrator. Tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<p style="font-style:normal;font-weight:600">Client name, company name</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:da/wp-swiper-slide --></div></div><div class="wp_swiper__navigation"><div class="wp_swiper__navigation-container"><div class="swiper-button-prev wp_swiper__button-prev"><img src="https://pepcreativepac.wpenginepowered.com/wp-content/uploads/2025/12/slider-left-arrow.svg" alt="Previous"/></div><div class="swiper-button-next wp_swiper__button-next"><img src="https://pepcreativepac.wpenginepowered.com/wp-content/uploads/2025/12/slider-right-arrow.svg" alt="Previous"/></div></div></div><div class="swiper-pagination"></div></div></div>
<!-- /wp:da/wp-swiper-slides --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Pattern CSS

.testimonial-slider {
    position: relative;
}

.testimonial-slider h2.wp-block-heading{
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url("/wp-content/uploads/2026/01/quote-start.svg"),url("/wp-content/uploads/2026/01/quote-end.svg");
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
}

.testimonial-slider:before {
    content: "";
    display: block;
    width: 641px;
    height: 265px;
    background-image: url(/wp-content/uploads/2026/01/quote-panel-moon.svg);
    position: absolute;
    left: calc((100% - 1620px) / 2);
    bottom: 0;
    z-index: 0;
}

.testimonial-slider .wp-block-columns .wp-block-column:last-child{
	padding-left: var(--wp--preset--spacing--7);
}

.testimonial-slider .wp-block-columns .wp-block-column:first-child{
	position: relative;
	/* z-index: 9; */
}

body .testimonial-slider .wp_swiper__navigation-container {
	display: flex;
	gap: 30px;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	top: 0;
	left: -620px;
}

.testimonial-slider .swiper-pagination{
	text-align: left;
}

.testimonial-slider .swiper-pagination-bullet-active{
	background: var(--wp--preset--color--three);
}

#site-container .testimonial-slider .swiper-pagination-bullet {
	margin: 0 30px 0 0;
	opacity: 1;
}

body .swiper-button-next, body .swiper-button-prev {
    position: relative;
    margin-top: 5px;
    background-color: var(--wp--preset--color--four);
    border-radius: 50px;
width: 45px;
}

#site-container .testimonial-slider .wp-swiper .wp_swiper__button-next img, #site-container .testimonial-slider .wp-swiper .wp_swiper__button-prev img {
    height: 45px;
    width: 15px;
}

Testimonial Type 3

DON’T JUST TAKE OUR WORD FOR IT

Pattern HTML

Pattern CSS

DON’T JUST TAKE  
OUR WORD FOR IT