# Squarespace Pixieset Style Testimonial Slider

**URL:** <https://community.elfsight.com/t/squarespace-pixieset-style-testimonial-slider/173777>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [September 9, 2026, 9:29am UTC](https://community.elfsight.com/t/squarespace-pixieset-style-testimonial-slider/173777 "2026-09-09T09:29:09Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [September 9, 2026, 9:29am UTC](https://community.elfsight.com/t/squarespace-pixieset-style-testimonial-slider/173777/1 "2026-09-09T09:29:09Z")

</div>

**Description**

- testimonial slider with summary block: summary image as background image, title on left of image, excerpt in white box over background image, when users click arrow will fade text + fade image
- [view demo](https://tuanphan-demo.squarespace.com/0826c30v17-pixieset-style-testimonial-slider?noredirect) – password: abc

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/9/39dae743fe216210fb1b0c6aff251f2ef4cbdfdb.jpeg)

**#1.1.** First, make sure you use Summary Block Carousel

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/c/4c204f8a1f284ac592267b6f96995c0f35b5ec80.jpeg)

**#1.2.** and connect a Blog Page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/e/2e4c961318e23fe6c41a1604f81f8633c74d7ff4.png)

**#1.3.** Next, enable these options

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/6/468f1e63f65d6160c25c565905bf9d42dbc78d9a.png)

**#1.4.** Hover on top right of section \> Click EDIT SECTION

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/0/60dd7323214659f8e4f68ba12d2d78d985dbb10a.jpeg)

**#1.5.** at Design \> Anchor Link \> enter word: pixieset-slide

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/0/0016e21d488f49336437c7438664133b1dae65a7.jpeg)

**#1.6.** Hover on Page where you use Summary Block \> Click Gear icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/b/cba6fe74c9c1cfcae667fb4ba46f0610af6d2307.png)

**#1.7.** Click Advanced \> Paste this code

```auto
<!-- 08.26c30v17 Pixieset Style Testimonial Slider -->
<script>
window.PxTestimonialConfig = {
  targetSelector: "section[id*='pixieset-slide']",

  fixedText: "TESTIMONIALS",
  fixedTag: "h2",
  fixedSize: "",
  fixedColor: "#fff",

  titleTag: "h3",
  titleColor: "#fff",

  descTag: "p",
  descClass: "",
  descSize: "",
  descColor: "",

  effect: "fade",

  overlayColor: "rgba(0,0,0,0.35)",

  bgHeightDesktop: "420px",
  bgHeightMobile: "520px",

  boxColor: "#ffffff",
  boxRightOffset: "6%",
  boxOverflowBottom: 50,
  boxPadding: "48px",

  arrowColor: "#333333",
  arrowSize: "26px",
  arrowBottom: "28px",

  spinnerColor: "#888888",

  autoScroll: false,
  autoScrollDelay: 5000,

  dragToSlide: true
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0826c30v17pixiesetslider.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/c/6c27fe6d17f6c02d80ad77039025fe5f9835c623.jpeg)

**#2.1.** To change text “TESTIMONIALS”, change line 06

```auto
fixedText: "TESTIMONIALS",

```

to change its size, change line 07 – 09

```auto
fixedTag: "h2",
fixedSize: "",
fixedColor: "#fff",

```

**#2.2.** To change summary title style, change line 11 – 12

```auto
titleTag: "h3",
  titleColor: "#fff",

```

**#2.3.** To change summary excerpt style, change line 14 – 17

```auto
descTag: "p",
descClass: "",
descSize: "",
descColor: "",

```

**#2.4.** To change overlay color over image, change line 21

```auto
overlayColor: "rgba(0,0,0,0.35)",

```

**#2.5.** To change height of Slider on Desktop, Mobile, change line 23, 24

```auto
bgHeightDesktop: "420px",
  bgHeightMobile: "520px",

```

**#2.6.** To change white box style, change line 26 – 29

```auto
boxColor: "#ffffff",
  boxRightOffset: "6%",
  boxOverflowBottom: 50,
  boxPadding: "48px",

```

**#2.7.** To change arrow style, change line 31 – 33

```auto
arrowColor: "#333333",
arrowSize: "26px",
arrowBottom: "28px",

```