booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Block Quotes Slider

Block Quotes Slider

Preview Widget
Preview Widget
Getting Started
Content
Global Layout
Stars
Block Quote Icon
Content Styling
Container & Avatar Styling
Slider Styling Settings
Slider Settings

More Widgets

• Image Card Slider
• Team Slider
• Simple Images Slider
• Interactive Carousel

# Getting started

The block quotes slider widget allows you to display your clients reviews in a beautiful slider.Each review can have a name, info and review text, but also an avatar and stars based reviews.Choose between multiple layouts and style everything about the widget elements.

You can find more details about this widget down below.

Content

The block quotes content is where you will set up your clients reviews.You can add a block quote item to the list by clicking on the add item button at the bottom of this section.For each item, you can change the following options :

  • Avatar : You can enable upload a photo representing the author of the review.
  • Name :  A text that represents the author name or the entity that is presenting the review.
  • Info : This text will be used to specify the field of work, company, source or anything that gives a more general information about the reviewer.
  • Text : This is where the review text will be presented.It can be a short paragraph or a long text depending on what is being reviewed and by whom.
  • Active Review Stars : Set the number of stars that were given for this review.

Unique Styling : You can use this to specify the behavior of the unique styling.The unique styling color can be changed with the hover controls in the styling tab. The options are :

-None : This will disable the unique styling including any hover effect.

-Only Hover : The unique styling will only be applied to the hovered slide.

-Only Active : The unique styling will only be applied to the active slide.If you are using more than 3 slides the active slide will be in the middle.If you are using 3 or less slides the active slide will be on the far left.

-Both Hover & Active : This will enable the unique styling for both the hover and active states of the slides.

 

Layout

Under the layout section, you will be able to change the layout style and control the position and the alignment of each element of the block quotes slider widget.This will give your more options for setting up your own custom layout. 

  • Style : Choose either the bubble for a modern layout or the all boxed if you want to use a more regular design.
  • Bubble Layout : This option will only be visibly if you have chosen the bubble layout in the style control.This will be used to position the review text either at the top or at the bottom of the widget.
  • Content & Author Alignement : You can align the review text and the author details to create your personal layout.

Stars

The star rating feature is going to be the factor that all your reviews are going to be based on.

  • Enable stars : You can disable the stars feature but we strongly recommend using this as its considered the number one factor used by consumers to judge a business.
  • Stars position : You can freely positon your stars inside the widget container.Choosing the 'inside author' option will positon the stars under the author info.

Block Quote Icon

This is where you will set up your block quote slider icons and icons positioning by using the following options.

  • Enable Quote Icon : You can disable the block quote icon if you are in need of a more a simple design for your web page.
  • Icon position : You can positon your icon using the multiple options available to find a suitable layout.
  • Icon Type : Choose one of the numerous quote icons available in the list provided by this control.

Styling

The styling tab offer you the tools to control the styling & design of all your block quote slider widget elements.Fonts, colors, background, margins, everything can be customized.

  • Text Content Styling

Customize the text elements, author name, author info & text review. Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Customize the color of your text elements.Additionally, you can use some powerful colors combinations to create fancy hover effects.

  • Quote Icon Styling

Control everything about your icon, apply a custom icon size and color. 

-Size & Margins : Change the icon size and control the space between the icon and the other elements.

-Colors : Change the icon color for both the normal and hover states of the widget.

  • Review Stars Styling

-Colors : Change the review stars colors scheme color for both the normal and hover states.

-Margins : Control the space between the review stars and the other elements of the widget.

Container & Avatar Styling

The two bottom sections available in the styling tab are the container and the avatar styling.You can change the options down below to have more control on the container space but also to customize the colors and create your very own design.

  • Container Styling

-Radius & Padding : Change the container radius if you want to use a more rounded shape and alternate the padding values to control the space inside the container.

-Background : Customize the background & choose to apply either a solid background color or a gradient color for both the normal and hover states of the container. 

  • Avatar Styling

-Size & Margins: Change the avatar size and control the space between the avatar image and the other elements.

-Radius, Border & Box Shadow: Customize the avatar radius to change the image shape and add a border and a box shadow to add even more design to this element.Note that these options are available to be changed for both the normal and hover states.

Slider Styling Settings

Under the avatar styling, you can find the slider styling settings section.This section is going to be used to customize the slider design and to enable additional features.

  • Slider Navigation

You can enable and customize the slider navigation for the widget.

-

-

-Button Layout

-Navigation Colors

-Distance Between Dots

-Navigation Area Margins

  • Slider Arrows

Enable the slider arrows and change everything about their style and position.

-Enable Arrow Navigation
-Arrow Style
-Arrow Background Size & Background Radius
-Arrow & Background Color
-Arrow Position

Settings

To the right of the content and style tabs, you will find the settings tab.This tab is mainly going to be used to configure the functional settings of the slider and to change the slider behavior for tablets and phones.

  • Slider Settings

General Settings

-Slider Type

-

-

-

-Adaptative Height & Center Mode

-Center Mode

Slides Settings

-Slides to Scroll
-Enable Opacity
-Enable Scale
-
Desktop Slider Settings, Tablet Slider Settings, Phone Slider Settings
-
-Break Point : This option is only available for the tablet and phone devices.Define at which width should the widget switch from the default slides to show value (desktop value is the default value) to the tablet/phone slides to show values.Same applies to the center mode if its enabled.
-

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020