New accounts will include a Testimonials page in the "Other Pages" section by default. If you already had an existing account, follow these steps to add it in.
In this article, we'll cover:
Create a New Testimonials Page
Before you get started, decide if you want your Testimonials page to show in your Main Navigation or to be accessible only via a direct URL. For the latter, use the "Add New" button in your Other Pages section. Don't worry if you're not sure yet - you can always drag the page to another spot in the navigation later.
Step 1: Create a New Page
Log into your Twenty Over Ten account.
Click "Add New" in your website dashboard side panel. Fill out the Page Name and Browser Page Title fields. You can make these whatever you'd like, as long as the Page URL Slug is unique on your website. We'll name ours "Testimonials":
Before we hit "Create Page", scroll down to find the Header Code Inject box. We're going to add in the snippet that activates your testimonial slider.
Copy the following code and paste it into that box:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/><style>.editable .testimonial-slider-ots > div{position:relative;border:dashed 2px #aaa;border-radius:6px;padding:1rem;margin:.5rem;/*height:100%;*/}.editable .testimonial-slider-ots > div::after{z-index:-1;}.editable .testimonial-slider-ots > div::before {content: 'Slide';display: block;position: absolute;bottom: 100%;left: -1px;background: #333;color: white;font-size: 9px;text-transform: uppercase;font-weight: 600;padding: .5em 1em;border-radius: 4px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}.editable .testimonial-slider-ots .row span.delete-row {opacity: 1;visibility: visible;margin-bottom: 0px;}.editable .testimonial-slider-ots .row span.delete-row::before {content:'Delete Slide';}.fixwidth{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.editable .testimonial-slider-ots div, {margin-bottom:2rem;}.testimonial-slider-ots .testimonial h2{margin-top:1rem;}.testimonial-slider-ots .row{margin-right: unset !important;margin-left: unset !important; }.testimonial-slider-ots .slick-prev:before, .slick-next:before {font-family: 'slick';font-size: 28px !important;line-height: 1;opacity: .75;color: black !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.testimonial-slider-ots .testimonial blockquote{margin-bottom:1em;}.testimonial-slider-ots .testimonial h4{font-size:1.3em;}button#new-testimonial{background:#fff;color:#333;padding:1rem 1.75rem;border-radius:999rem;border:1px solid transparent;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;cursor: pointer;display:none;}button#new-testimonial:hover{box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;/*border:1px solid lightgray;*/}button#new-testimonial:active{border:1px solid darkgray;}.editable button#new-testimonial{display:inline-block;}.target-insert{display:none;}.editable .target-insert{display:block;}</style><script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script> <script>window.onload = () => {if (!window.suppress) { $('.testimonial-slider-ots').slick({infinite: true,dots:true,arrows:true,speed:500,autoplay:true,autoplaySpeed: 2000,slidesToShow: 1,pauseOnHover:true,slidesToScroll: 1});$('.testimonial-slider-ots').slick('slickRemove',0);}function createTestimonial() {$('<div class="row testimonial"><span class="delete-row"></span><div class="col-xs-12 col-sm-12"><blockquote><p>Your new testimonial</p></blockquote><h4 class="is-mt0" style="text-align: center;">- Jane Doe, Client</h4></div></div>').insertAfter(".target-insert");}$("#new-testimonial").on("click", createTestimonial);}</script>Click "Create Page."
Step 2: Create Your Testimonial Slider
In the side panel, select your new page to load it in the preview window.
It will look something like this:
Click in the main content area to activate the popup toolbar. If you have trouble getting it to appear, click right at the end of the "Testimonials" heading.
Choose the "Code View" option from the lower right.
Select everything inside the Code View box and delete it. This makes room for your Testimonials slider.
Copy and paste the following code into the Code View box:
<h1 style="text-align: center;">See What Our Clients Are Saying</h1><h3 style="text-align: center;"><a class="btn is-pill" href="https://www.google.com/business/" rel="noopener noreferrer" target="_blank">See all our reviews</a></h3><p style="text-align:center;"><button contenteditable="false" id="new-testimonial" style="margin-top:2rem;">+ Add New Testimonial</button></p><div class="testimonial-slider-ots"><span class="target-insert"></span><div class="row testimonial"><span class="delete-row"></span><div class="col-xs-12 col-sm-12"><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></blockquote><h4 class="is-mt0" style="text-align: center;">- Jane Doe, Client</h4></div></div><div class="row testimonial"><span class="delete-row"></span><div class="col-xs-12 col-sm-12"><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></blockquote><h4 class="is-mt0" style="text-align: center;">- Jane Doe, Client</h4></div></div><div class="row testimonial"><span class="delete-row"></span><div class="col-xs-12 col-sm-12"><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></blockquote><h4 class="is-mt0" style="text-align: center;">- Debbie Crushfield, Client</h4></div></div></div>
Click the </> icon to close Code View. You'll see a new heading, a call-to-action, a button to add a new testimonial and a static view of your Testimonials slider!
Using Your Testimonials Page
Each Testimonials page comes with three review slides by default. These slides cannot be re-ordered, but you can add and delete slides as often as you need. New slides will appear at the top of the page, and the top slider will be the first to appear on your slider.
How can I add a new testimonial?
You'll see a "+ Add New Testimonial" button while you're logged into your dashboard. (Don't worry, that is only visible to you while you're logged in.) Click this button to add a new Testimonial slide to the top of the page.
How can I see my slider in action?
The slider is deactivated inside your dashboard to make it easier to edit. You can view a preview of your slider by viewing your Build URL while you aren't logged into your dashboard.
Quick Tip
Use your browser's Incognito Mode or Private Browsing to preview your Build URL without needing to log out of your dashboard.
The add button doesn't seem to be working. Did I break it?
Probably not! Try this:
click "Save Changes," then
reload your Testimonials page by clicking on the page title in the side panel.
Reach out to our team if you are still having trouble after reloading the page.
What should the "See all our reviews" button link to?
Because this page is not representative of all testimonials, we recommend linking directly to your main review source, like your Google My Business page, for example, to comply with the requirements of the rule.
I've created the page and added testimonials, but I'm still not seeing this on my site - what's up?
Don't forget that you'll need to publish your site to push these changes up to your live site! If you've published your site and you still don't see it, give us a shout at support@twentyoverten.com so that we can help you get up and running.