Webflow Quick Tip: Add a dynamic testimonial banner

Do you use the Webflow CMS to organise your online portfolio? If you're a bit like me you probably do, since the CMS lets you update your projects and case studies easily and add new projects quickly. However I recommend not only to show visuals of your projects and write about your role, goals as well as outcomes. You should also add client testimonials that are related to the specific project you're talking about in  your portfolio. In order to have a different testimonial on each of your projects you can't simply create the testimonial on your project page as it will repeat the same testimonial for each project. Instead you'll need to add specific fields to your CMS collection and make the testimonial banner dynamic. Let's see how this works! Not a Webflow user yet? You can get your account here.

1. Styling the testimonial bannerStart by creating and styling  your testimonial banner on the CMS collection page that relates to your portfolio. You will obviously need to integrate a CMS collection list and connect this to your portfolio CMS collection.
2. Access your CMS collection and add a Plain Text Field called "Client Testimonial". Then go into each of your CMS collection items (projects/case studies) and copy the desired testimonial text in.
3. Now go back to your collection page and connect your styled testimonial with the text field you've just created in your CMS collection. To do this you are using the "get text from ..." option that appears when you press the little cog icon next to your testimonial text element.
4. But wait, there's one more thing to do. You might not have a testimonial available for each project in your portfolio. This means that some of your styled testimonial banners might be empty, not displaying any text, as you've entered non in your text field inside the CMS collection.  But don't worry, you can simply solve this issue by using Webflow's conditional visibility feature. And that's what we'll set up next.
5. Select your testimonial on the page – you can simply use the testimonial wrapper div for this. When it's selected go into your element panel on the right side of your screen and click the little plus next to "conditions" underneath "conditional visibility". You can then change the setting to: "Element is visible when... "Client Testimonial" Is Set". In this case "Client Testimonial" is the name you've given to the text field in your CMS collection. By doing this you tell Webflow to only show the testimonial banner when there is content inside the text field. This way a testimonial banner will only be shown when you've actually got a client testimonial available for your project. Easy!

That's it. You can now continue styling your testimonial banner to your liking or simply leave it as is. From now on whenever you add a new project to your portfolio, you can enter your client testimonial along with all the other details in your portfolio CMS collection and you're done. So now go and collect some great testimonials from your clients!

Any questions? Contact me here.

Still looking for a great alternative to PayPal for accepting client payments? Check out TransferWise – a tool I use for any non-Aussie clients. You can read more about it in a previous blog article or try out TransferWise here (yep, this is an affiliate link).