Smart Banking for Freelancers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus in enim congue ornare. Sed vitae leo placerat, venenatis massa at, dictum nisl.

Slide 1
Maria Illescas
CEO at Carderrr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus in enim congue ornare. Sed vitae leo placerat, venenatis massa at.

Slide 2
Kevin Bird
Product Designer at Holaw

Vivamus semper, odio nec mattis mollis, diam lorem sodales sapien, a maximus eros elit vel ligula. Sed non mauris elementum, aliquam nisl.

Slide 3
Dalton Tate
CMO at Banky

Maecenas eget ipsum at dolor sagittis pellentesque mollis sed tellus. Praesent vestibulum ipsum enim. Donec urna sapien, maximus eget.

Smart Bank

πŸ’» Settings | πŸŽ“ Layers | πŸŽ‰ Animations | πŸ—οΈ Layout | πŸ“± Responsive | ⚑ Speed

Description: Display the best reviews of your product or company with this colorful Smart Bank testimonial slider. Change the texts and its ready to use.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Best features of Smart Bank slider

Settings

This colorful Smart Bank slider template can be a great testimonial slider with great CTA buttons. You can display the best reviews about your product or company, and can call your visitors to an interaction to check your pricing, or navigate to a try site, or another page.

The main image of the slider is a slider background image which can be found at the Slider settings β†’ General β†’ Slider Design. This image will always be in the background even when you switch the slides.

Slider background image
Slider background image

The slider is autoplaying every 5000ms, but you can switch slides with dragging your mouse or using the bullet control on the bottom. The active slide is marked with an orange bullet, which you can change at the Controls tab β†’ Bullet β†’ Dot Style. Here a popup will open, and you can select the Active state at the top right corner where the orange color can be changed.

Layers

When you check this slider, the first thing you will notice the gradient heading and the gradient bullet. These colorful layers cheer up the slider, and also look good. How to change the colors? There isn’t a basic setting for that, we have used custom CSS to make this gradient effect.

You can find this custom CSS at the heading layer if you click on it, and go to the Style tab of the Layer window. Here you can press on the More button to see the advanced settings, like custom CSS. The starting color is #F71285, and the ending is #FFA000. If you want to change them, just override the hexa color codes. Also you can change the angle if you want, now it is 90 deg.

Custom color of the Heading
Custom color of the Heading

The button also uses custom CSS for their background. You can change or customize it at the Layer window β†’ Style tab β†’ Background β†’ More β†’ CSS.

Custom background color of the button
Custom background color of the button

Animations

When you check the slider, you can notice there are small particles in the background. This is a cool design effect which helps your site stand out of the crowd. You can customize it at the Particle editor which can be reached from the Slider settings β†’ Animations tab. Here you can change for example the number of the particles, the speed, and the interactions.

Particle manager
Particle manager at the Slider settings

Layout

The base of this slide template is the slide background image and the static overlay where the static content is. The content on the static slide won’t change when you switch to another slide. The changeable slides are reviews, each review is a different slide but with the same layout. If you want to display more, you can easily duplicate a slide, then change the content.

Slides of the slider
A static slide with 3 slides

Responsive

This slider is also fully responsive as the other templates. The main responsive settings at this slide is the wrap after and the font scale. By default the buttons are under each other in mobile, because it’s row wraps after 1 column. But at this layout it will wrap after 2 columns. Also the texts are smaller thanks to the Text scale option which is device specific, so doesn’t change the sizes on other devices.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on May 25, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.7 s
Largest Contentful Paint
0.5 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
99

Mobile

First Contentful Paint
1.1 s
Speed Index
1.9 s
Largest Contentful Paint
2.2 s
Time to Interactive
1.9 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0

Related Documentation: Slider background

Related Post: What is a Particle Effect and Why Should You Use It?

Related Post: Best Testimonial Slider Examples for WordPress


Similar Sliders -

Static testimonialTestimonial CarouselTestimonial ShowcaseSimple Testimonial