{"id":12140,"date":"2016-12-28T10:10:06","date_gmt":"2016-12-28T10:10:06","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=12140"},"modified":"2017-02-27T13:47:49","modified_gmt":"2017-02-27T13:47:49","slug":"testimonials-slider","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/testimonials-slider","title":{"rendered":"Testimonials Slider"},"content":{"rendered":"

[vc_row][vc_column css=”.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}” col_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” col_shadow_hover=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)”][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][vc_column_text]Add a slider and carousel with one module.<\/p>\n

You may see the example of the module in the first section on the Testimonials<\/a> page.<\/p>\n

Watch the video tutorial on Testimonial Slider module creation<\/a> for more details.<\/h5>\n

[\/vc_column_text][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][dfd_tta_tabs border_radius=”4″ alignment=”left” active_section=”1″ active_tab_background=”#3b55e6″ tab_hover_text_color=”#3b55e6″ tab_active_color_text=”#ffffff” border_color_active=”#3b55e6″][vc_tta_section title=”General settings” tab_id=”1486545572585-2437c7e1-5371″][vc_column_text]<\/p>\n

General settings<\/h3>\n

\"\"<\/p>\n

    \n
  • Style<\/strong> – select the style of the testimonial slider for your site.\n
      \n
    • Simple<\/strong> – the author image is displayed on the top with the testimonial text below it and the title and subtitle below the testimonial text.<\/li>\n
    • Centered<\/strong> –\u00a0the author image is displayed on the top and the author images of the previous and next testimonials are displayed on the left and right sides correspondingly with opacity set for them and the testimonial text\u00a0is set below it and the title and subtitle below the testimonial text.<\/li>\n
    • Full width<\/strong> – the testimonial slider is set to full width with the opacity effect applied to\u00a0the previous and next testimonials.<\/li>\n<\/ul>\n<\/li>\n
    • Image position<\/strong> – select the position of the author image in the testimonial.\n
        \n
      • Above content<\/strong> – the image is displayed above the testimonial content.<\/li>\n
      • Below content<\/strong> – the image is displayed below the testimonial content.<\/li>\n<\/ul>\n<\/li>\n
      • Content align<\/strong> – set the alignment of the testimonial content in horizontal respect. Left<\/strong>, right<\/strong> and center<\/strong> positions are available.<\/li>\n
      • One line title<\/strong> – set it to Enable<\/strong>\u00a0to display the title and the subtitle in one line (first title and then subtitle will be displayed).<\/li>\n<\/ul>\n
        Extra features<\/h5>\n
          \n
        • Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n
        • Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type custom-style<\/strong> class and then go to Theme options<\/del>\u00a0General options<\/del>\u00a0Custom CSS\/JS<\/del> Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n

          [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Slides” tab_id=”1486545572829-e1c1304c-ee12″][vc_column_text]<\/p>\n

          Slides<\/h3>\n

          <\/p>\n

          Testimonials<\/h5>\n
          In this section, you can customize the testimonials of the module.<\/h6>\n
          By clicking on the\u00a0arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate the testimonials, change\u00a0their order (simply drag-n-drop the blocks) and delete the unnecessary testimonials as well.<\/h6>\n
            \n
          • Author image<\/strong> – select the image to be displayed as author image in the testimonial.<\/li>\n
          • Title<\/strong> \u2013 enter the title for the module.<\/li>\n
          • Subtitle<\/strong> \u2013 enter the subtitle for the module.<\/li>\n
          • Testimonial\u00a0<\/strong>\u2013\u00a0enter the\u00a0testimonial text.<\/li>\n<\/ul>\n

            [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Slider settings” tab_id=”1486545573068-02c117a6-3d50″][vc_column_text]<\/p>\n

            Slider settings<\/h3>\n

            <\/p>\n

              \n
            • Draggable<\/strong> – set it to Enable<\/strong> to activate the mouse drag effect while scrolling the slides.<\/li>\n
            • Autoplay<\/strong> – set it to Enable<\/strong> to activate automatic slides scrolling.<\/li>\n
            • Autoplay speed<\/strong> – specify the speed of the slides scrolling.<\/li>\n<\/ul>\n

              [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Styles” tab_id=”1487170921347-12f405f9-dcb8″][vc_column_text]<\/p>\n

              Style settings<\/h3>\n

              <\/p>\n

              Author thumbnail<\/h4>\n
                \n
              • Shadow<\/strong> – set it to Enable<\/strong> to display shadow effect around author image.<\/li>\n
              • Image size<\/strong> – specify the size of the image displayed as author thumbnail image.<\/li>\n
              • Border radius<\/strong> – set the border radius of the image to have rounded corners.<\/li>\n<\/ul>\n
                Testimonial background<\/h5>\n
                  \n
                • Color<\/strong> – set the background color for the testimonial. The default color is set to transparent.<\/li>\n
                • Border radius<\/strong> – set the\u00a0border radius of the testimonial to have rounded corners.<\/li>\n
                • Triangle pointer<\/strong> – set it to Enable to display the triangle pointer decoration for the testimonial. It is displayed if the background color is selected.<\/li>\n<\/ul>\n

                  [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Typography settings” tab_id=”1486545573311-423c930f-c6e7″][vc_column_text]<\/p>\n

                  Typography<\/h3>\n

                  <\/p>\n

                  Title typography<\/h5>\n

                  These settings are inherited from Theme options<\/del> Typography\/Fonts<\/del> Headings typography<\/del>\u00a0Content title big Typography<\/del>. Font size is set to 14px and line-height to 24px by default.<\/p>\n

                    \n
                  • Element tag<\/strong> \u2013 select the tag for the title.<\/li>\n
                  • Font size<\/strong> \u2013 set the font size you need to use in the title.<\/li>\n
                  • Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n
                  • Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the title text.<\/li>\n
                  • Text color<\/strong> \u2013 set the color of the font.<\/li>\n
                  • Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the title.<\/li>\n
                  • Custom font family<\/strong> \u2013 set it to Enable<\/strong> to use custom Google font.\n
                      \n
                    • Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n
                    • Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the title.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                      Subtitle typography<\/h5>\n

                      These settings are inherited from Theme options<\/del> Typography\/Fonts<\/del> Headings typography<\/del>\u00a0Content subtitle Typography <\/del>with font size set to 13px and line-height set to 27px by default.<\/p>\n

                        \n
                      • Element tag<\/strong> \u2013 select the tag for the subtitle.<\/li>\n
                      • Font size<\/strong> \u2013 set the font size you need to use in the subtitle.<\/li>\n
                      • Letter spacing<\/strong> \u2013 set the needed distance between letters in the\u00a0subtitle.<\/li>\n
                      • Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the subtitle text.<\/li>\n
                      • Text color<\/strong> \u2013 set the color of the font.<\/li>\n
                      • Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the subtitle.<\/li>\n
                      • Custom font family<\/strong> \u2013 set it to Enable<\/strong> to use custom Google font.\n
                          \n
                        • Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n
                        • Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the subtitle.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                          Content typography<\/h5>\n

                          The default settings are inherited from Theme options<\/del>Typography\/Fonts<\/del>\u00a0Text typography<\/del>\u00a0Default text Typography<\/del>.<\/p>\n

                            \n
                          • Font size<\/strong> \u2013 set the font size you need to use in the text in the testimonial.<\/li>\n
                          • Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n
                          • Line-height<\/strong> \u2013\u00a0set the needed distance between lines.<\/li>\n
                          • Text color<\/strong> \u2013 set the color of the font.<\/li>\n
                          • Font style<\/strong> \u2013 select the font weight and style (bold, italic).<\/li>\n
                          • Custom font family<\/strong> \u2013 set it to Enable<\/strong> to use custom Google font.\n
                              \n
                            • Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n
                            • Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the text in the testimonial.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                              Pagination settings<\/h3>\n

                              <\/p>\n

                                \n
                              • Pagination<\/strong> – switch it to Enable<\/strong> to display the pagination in the testimonial slider.<\/li>\n
                              • Pagination style<\/strong> – select the most suitable style of the pagination for your testimonial slider.<\/li>\n<\/ul>\n

                                Navigation style<\/h3>\n

                                For Simple<\/strong> and Centered styles<\/strong> only.<\/p>\n

                                <\/p>\n

                                  \n
                                • Use navigation<\/strong> – set it to Enable to display the navigation between the previous and next testimonial inside the slider.<\/li>\n
                                • Arrow icon<\/strong> -select the most suitable icon style for the pagination.<\/li>\n<\/ul>\n
                                  Arrow icon style<\/h5>\n
                                    \n
                                  • Icon color<\/strong> – choose the icon color. The default color is #343434.<\/li>\n
                                  • Icon hover color<\/strong> – set the color for the icon on hover. The default color is #9a9a9a.<\/li>\n
                                  • Icon size<\/strong> – set the size of the icon. The default font size is 10px.<\/li>\n<\/ul>\n
                                    Arrow background style<\/h5>\n

                                    The default settings for the icon are inherited from theme files and are as follows: color: #343434, box-sizing: content-box, icon hover color is\u00a0#9a9a9a.<\/p>\n

                                    <\/p>\n

                                      \n
                                    • Background border radius<\/strong> – set the border radius for the background of the arrow icon to have rounded corners.<\/li>\n
                                    • Background border width<\/strong> – set the width of the border around the arrow icon.<\/li>\n
                                    • Background color<\/strong> –\u00a0set the color for the background of the icon.<\/li>\n
                                    • Hover background color<\/strong> –\u00a0set the color for the background of the icon on hover.<\/li>\n
                                    • Border color<\/strong> – choose border color for the icon.<\/li>\n
                                    • Hover border color<\/strong> – choose border color for the icon on hover.<\/li>\n
                                    • Shadow on hover<\/strong> – switch it to Enable<\/strong> to display the shadow effect for the arrow icon on hover.<\/li>\n
                                    • Navigation number<\/strong> –\u00a0switch it to Enable<\/strong> to display numbers above the arrows.<\/li>\n
                                    • Numbers color<\/strong> – set\u00a0the color for the numbers. The default color is #c3c3c3.<\/li>\n<\/ul>\n

                                      The default settings for the numbers are inherited from theme files and are as follows:\u00a0font-size: 11px, letter-spacing: 1.4px, font-family: “Montserrat”, color: #c3c3c3.[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

                                      <\/h3>\n

                                      [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

                                      Add a slider and carousel with one module.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[17,46,23,22,16,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12140"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=12140"}],"version-history":[{"count":7,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12140\/revisions"}],"predecessor-version":[{"id":12247,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12140\/revisions\/12247"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=12140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=12140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=12140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}