Pixieset Style Testimonial Slider style 02

Description

  • testimonial slider with summary block: 2 panels left – right, title, excerpt, counter number on left side, image in middle of 2 panels, arrows on top right of right panel
  • view demo – password: abc
  • buy me a coffee

08.26c30v17(v2) Pixieset Style Testimonial Slider style 02

#1. Install Code

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

08.26c30v17 Pixieset Style Testimonial Slider

#1.2. and connect a Blog Page

08.26c30v17 Pixieset Style Testimonial Slider

#1.3. Next, enable these options

08.26c30v17 Pixieset Style Testimonial Slider

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

08.26c30v17 Pixieset Style Testimonial Slider

#1.5. at Design > Anchor Link > enter word: v2pixieset-slide

08.26c30v17(v2) Pixieset Style Testimonial Slider style 02

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

08.26c30v17 Pixieset Style Testimonial Slider

#1.7. Click Advanced > Paste this code

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

  fixedText: "TESTIMONIALS",
  fixedTag: "h2",
  fixedSize: "",
  fixedColor: "#9a8f7d",

  showCounter: true,
  counterColor: "#9a8f7d",
  counterSize: "",

  titleTag: "h3",
  titleColor: "",

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

  effect: "fade",

  overlayColor: "",

  heightDesktop: "500px",
  heightMobile: "640px",

  leftPanelColor: "#f5f1e8",
  rightPanelColor: "#e8e8e8",
  leftPanelWidth: "62%",

  panelPadding: "56px",
  panelPaddingMobile: "24px",

  imageWidth: "30%",
  imageMargin: "100px",

  arrowColor: "#333333",
  arrowSize: "12px",

  spinnerColor: "#888888",

  autoScroll: false,
  autoScrollDelay: 5000,

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

08.26c30v17(v2) Pixieset Style Testimonial Slider style 02

#2. Customize

#2.1. To change text TESTIMONIALS and its style, change line 06 – 09

fixedText: "TESTIMONIALS",
fixedTag: "h2",
fixedSize: "",
fixedColor: "#9a8f7d",

#2.2. To change summary title/excerpt style, change line 15 – 21

titleTag: "h3",
titleColor: "",

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

#2.3. To change counter number style, change line 11 – 13

showCounter: true,
counterColor: "#9a8f7d",
counterSize: "",

#2.4. To change slider height, change line 27 – 28

heightDesktop: "500px",
  heightMobile: "640px",

#2.5. To change left, right panels color, change line 30 – 32

leftPanelColor: "#f5f1e8",
rightPanelColor: "#e8e8e8",
leftPanelWidth: "62%",

#2.6. To change image size, change line 37 – 38

imageWidth: "30%",
imageMargin: "100px",

#2.7. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

 

Buy me a coffee