Testimonials Slider

The Testimonials Slider is a really nice, content display component that allows you to display a snippet of text, along with an image. You can use this for actual customer testimonials, or for new product information, upcoming events... anything that requires text and images, and the need to 'slide' from one bit of information to the next.

Tips


Instructions

Testimonial Slider

In this tutorial, we’ll demonstrate how to update, add and remove comments or client testimonials from the Testimonial Slider. Although we gave it the name of ‘testimonials slider’ it can be used for anything… including product information, upcoming events, or any sort of Call to Action you may want for your website. The Testimonials Slider animates blocks of HTML ( Title, paragraph content wrapped in a Blockquote, and image and a link ( beside or beneath the image ) from one side of the page, to the other, with a long enough pause in between so visitors can read the text, or make a decision to click the link. You can add more sliders, remove what you don’t need or remove altogether! In the following tutorials we’ll demonstrate how to add, remove and update!

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, just right click on the placeholder image, and select Open file:/// .. your Library page will open, and you can quickly edit the content.
Video Demonstration: Testimonials Slider quick edit
http://youtu.be/zYHgy0m3z7Q

  1. First, locate the component placeholder in your page.
  2. Right click on the placeholder and select ‘Open file:///…’
  3. You components Library page will open in a new window, ready for editing.

Remove from a page

  1. Open your page.
  2. Locate the ‘Testimonials Slider’ placeholder.
  3. Click on the ‘placeholder’
  4. Then click on the <div.testimonials-…> tag, located in the ‘Quick Tag Selector’ toolbar.
  5. Press the Delete key on your keyboard.

Add to a page

Video Demonstration: Testimonials Slider add to page
http://youtu.be/evJ0YjyovKM
Overview: The Testimonials Slider is a Library component that can be copied into any page.

  1. Open the page you want to copy add the Testimonials Slider to.
  2. Locate a section in the page to copy the slider.
  3. If you’re not sure how to best locate a section, check out this tutorial we’ll show you how!
  4. Copy the following line of code and paste into your page.
  5. <!--webbot bot="Include" tag="BODY" u-include="Library/components/testimonials-slider/wrappers/testimonials-slider-wrapper.htm" -->
  6. Save and preview.
  7. If the page you are copying into is in a sub folder of your site, make sure to update the webbot link, if you’re not sure how, check out the tutorial on this page and we’ll show you how!

Update the Title, content, image and link

Video Demonstration: Testimonials Slider update heading content image link
http://youtu.be/PmEQLNjXerw

  1. Expand the Library / components / testimonials-slider (folder).
  2. Double click on the ‘testimonials-slider.htm’ page to open
  3. Each slide contains the following 4 elements
    • H2 Heading ( What our Clients Say! )
    • Paragraph of text
    • Client Image
    • Client Name / Title hyperlink
  4. You update each of these elements as you would any text / image / hyperlink in a web page, or Library page. If you’d like some detailed information on how to do this,
    check out our tutorial and we’ll demonstrate the best way to do this!

Add or remove slides

Video Demonstration: Testimonials Slider add or remove slides
http://youtu.be/S9kdxgfO3Oo

You can do this through the Design view, or the Code view. We’ll demonstrate how to do it through code view, as it’s just quicker, cleaner and easier.

Add a slide:

  1. Open the ‘testimonials-slider.htm’ page.
  2. Switch to code view.
  3. Copy and existing slide including ‘comment’ tags.
  4. Place your cursor where you want to paste the new slide.
  5. Right click and Paste ( Ctrl+V ).
  6. Switch back to Design view and update the content.

Remove a slide

  1. Open the ‘testimonials-slider.htm’ page.
  2. In Design view, click on the ‘H2 title’ of the slide you want to remove.
  3. Click on the [ <div.testimonials-...> ] tag, on the Quick Tag Selector toolbar to select the entire slide.
  4. You’ll know you’ve selected the entire slide as it will by highlighted in green, with a darker green border around it.
  5. Press the Delete key, on your keyboard.

Testimonial Slider

In this tutorial, we’ll demonstrate how to update, add and remove comments or client testimonials from the Testimonial Slider. Although we gave it the name of ‘testimonials slider’ it can be used for anything… including product information, upcoming events, or any sort of Call to Action you may want for your website. The Testimonials Slider animates blocks of HTML ( Title, paragraph content wrapped in a Blockquote, and image and a link ( beside or beneath the image ) from one side of the page, to the other, with a long enough pause in between so visitors can read the text, or make a decision to click the link. You can add more sliders, remove what you don’t need or remove altogether! In the following tutorials we’ll demonstrate how to add, remove and update!

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, press and hold the ( Alt ) key on your keyboard, while you click on the ‘pladeholder’ image, then click on ( testimonials-slider.lbi ) .. your Library page will open, and you can quickly edit the content.
Video Demonstration: Testimonials Slider quick edit
http://youtu.be/-wofSsImfiw

Remove from a page

Video Demonstration: Testimonials Slider remove
http://youtu.be/kILCaTnKLuY 
Overview: The Testimonials Slider is a Library page component, by simply selecting the <!–webbot–> in your page, press delete on the keyboard to remove.

Here’s the trick though.. as the ‘Testimonials Slider’ uses javascript and CSS3 animations, you won’t actually ‘see’ the slider in your page, while in Design view, at least not all of it.. the only visible portion of the slider will be the ‘back and next’ buttons, usually located in the ‘top right’ side of the page where the component is located. Aside from the 2 buttons, which will look like simple squares as in this example below:

You will see a large ‘blank’ space where the Testimonials are displayed. The reason you only see a blank space, is because the animation can not run in the Design window and as the Slider is well, as Slider, the content is ‘off page’ until it’s called for by the browser. The Design window can not render javascript or CSS3 animations, so the Testimonials Slider content stays off page. You’ll just need to look for the ‘back and next’ buttons, and a large empty space in your page where the slider will be displayed when the page is actually rendered through a web browser.

  1. Open your page.
  2. Switch to Design view.
  3. Click on the Testimonials Slider ‘ back and next’ buttons, to select it the component.
  4. Check the ‘Quick Tag Selector Toolbar’ to make sure you have the [ <!--webbot--> ] selected.
  5. Press the Delete key, on your keyboard.

Add to a page

Video Demonstration: Testimonials Slider add to page
http://youtu.be/AeuyQr7rLcA

Overview: The Testimonials Slider is a Library component that can be copied into any page.

  1. Open the page you want to copy add the Testimonials Slider to.
  2. Locate a section in the page to copy the slider.
  3. If you’re not sure how to best locate a section, check out this tutorial we’ll show you how!
  4. Copy the following line of code and paste into your page.
  5. <!--webbot bot="Include" tag="BODY" u-include="Library/components/testimonials-slider/wrappers/testimonials-slider-wrapper.htm" -->
  6. Save and preview.
  7. If the page you are copying into is in a sub folder of your site, make sure to update the webbot link, if you’re not sure how, check out the tutorial on this page and we’ll show you how!

Update the Title, content, image and link

Video Demonstration: Testimonials Slider update heading content image link
http://youtu.be/1KVrmNnRYFs

  1. Expand the Library / components / testimonials-slider (folder).
  2. Double click on the ‘testimonials-slider.htm’ page to open
  3. Each slide contains the following 4 elements
    • H2 Heading ( What our Clients Say! )
    • Paragraph of text
    • Client Image
    • Client Name / Title hyperlink
  4. You update each of these elements as you would any text / image / hyperlink in a web page, or Library page. If you’d like some detailed information on how to do this, check out our tutorial and we’ll demonstrate the best way to do this!

Add or remove slides

Video Demonstration: Testimonials Slider add or remove slides
http://youtu.be/uDbuJt_xkLg

You can do this through the Design view, or the Code view. We’ll demonstrate how to do it through code view, as it’s just quicker, cleaner and easier.

Add a slide:

  1. Open the ‘testimonials-slider.htm’ page.
  2. Switch to code view.
  3. Copy and existing slide including ‘comment’ tags.
  4. Place your cursor where you want to paste the new slide.
  5. Right click and Paste ( Ctrl+V ).
  6. Switch back to Design view and update the content.

Remove a slide

  1. Open the ‘testimonials-slider.htm’ page.
  2. In Design view, click on the ‘H2 title’ of the slide you want to remove.
  3. Click on the [ <div.testimonials-...> ] tag, on the Quick Tag Selector toolbar to select the entire slide.
  4. You’ll know you’ve selected the entire slide as it will by highlighted in green, with a darker green border around it.
  5. Press the Delete key, on your keyboard.