{"id":12074,"date":"2016-12-26T12:42:54","date_gmt":"2016-12-26T12:42:54","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=12074"},"modified":"2023-07-31T11:40:43","modified_gmt":"2023-07-31T11:40:43","slug":"services-2","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/services-2","title":{"rendered":"Services 2"},"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]The Services 2 module is the element for presenting the services available for your customers which allow you to attract more visitors with customizable hover effect. This is a nested shortcode \u2013 module that includes other modules. You may style the container and then fill it in with elements.<\/p>\n

More module examples can be found here<\/a>.[\/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=”Service 2 settings” tab_id=”1486545572585-2437c7e1-5371″][vc_column_text]<\/p>\n

Service 2 settings<\/h3>\n

\"\"<\/p>\n

    \n
  • Element width<\/strong> –\u00a0specify the width of the columns for the service item.\n
      \n
    • Inherit<\/strong> \u2013 the module will take the full width of the container it is inside.<\/li>\n
    • Half size<\/strong> \u2013 the module will take the half of the width of the container it is inside.<\/li>\n
    • 1\/3<\/strong>\u00a0\u2013 the module will take the third part of the width of the container it is inside.<\/li>\n
    • 1\/4<\/strong> \u2013 the module will take the quarter of the width of the container it is inside.<\/li>\n
    • 1\/5<\/strong> –\u00a0the module will take the fifth part of the width of the container it is inside.<\/li>\n
    • 1\/6<\/strong> –\u00a0the module will take the sixth part of the width of the container it is inside.<\/li>\n<\/ul>\n<\/li>\n
    • Vertical content offset<\/strong> –\u00a0add the top and bottom offset for the content in Service module.<\/li>\n
    • Border style<\/strong> – select the border style between the services items.<\/li>\n
    • Border color<\/strong> – specify the color for the border between the service items.\u00a0The default border color is #1b1b1b<\/strong>.<\/li>\n
    • Block min height<\/strong> – set\u00a0the minimum height for the services block in px.<\/li>\n
    • Custom CSS class<\/strong>\u00a0\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\u00a0custom-style\u00a0<\/strong>class and then go to\u00a0Theme options<\/del>\u00a0General options<\/del>\u00a0Custom CSS\/JS<\/del>\u00a0Custom CSS<\/del>\u00a0field 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=”Service item 2 settings” tab_id=”1503389475391-57330fc2-8612″][vc_column_text]<\/p>\n

      General settings<\/h3>\n

      \"\"<\/p>\n

        \n
      • Style<\/strong> – choose between 4 preset styles.\n
          \n
        • Simple<\/strong> – the service item has the\u00a0icon, title and subtitle on the front and description on the back part.<\/li>\n
        • Background<\/strong> – the service item has the\u00a0icon with the\u00a0background color.<\/li>\n
        • Bordered<\/strong> – the service item has the\u00a0icon with the border around it.<\/li>\n
        • Overlay<\/strong> – the icons is displayed as a background for the front part of the service item.<\/li>\n
        • Top icon<\/strong> – the icon of the service item is displayed on top with the content below it.<\/li>\n<\/ul>\n<\/li>\n
        • Hover style<\/strong> – select the hover style you’d like to use from the list of available ones.<\/li>\n
        • Front content alignment<\/strong> –\u00a0specify the horizontal alignment of the front side content. For Top Icon style<\/strong> only.<\/li>\n
        • Link<\/strong> – set it to Enable<\/strong> to\u00a0add the link to the service item.\n
            \n
          • Link URL<\/strong> – add a custom link or select existing page.<\/li>\n<\/ul>\n<\/li>\n
          • Animation<\/strong>\u00a0\u2013 choose between 14 preset animation effects.<\/li>\n
          • Custom CSS class<\/strong>\u00a0\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\u00a0custom-style\u00a0<\/strong>class and then go to\u00a0Theme options<\/del>\u00a0General options<\/del>\u00a0Custom CSS\/JS<\/del>\u00a0Custom CSS<\/del>\u00a0field 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=”Content settings” tab_id=”1486545572829-e1c1304c-ee12″][vc_column_text]<\/p>\n

            Content settings<\/h3>\n

            \"\"<\/p>\n

              \n
            • Title<\/strong> \u2013 enter the title for the module.<\/li>\n
            • Subtitle<\/strong> \u2013 enter the subtitle for the module.<\/li>\n
            • Description<\/strong> \u2013 enter the text for the description.<\/li>\n<\/ul>\n

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

              Icon \u00a0settings<\/h3>\n

              \"\"<\/p>\n

                \n
              • Icon to display\u00a0\u2013 select the element to be displayed in Info Box module.<\/strong><\/strong>\n
                  \n
                • Icon<\/strong>\u00a0\u2013 select this variant to display the\u00a0icon in Info Box module.\n
                    \n
                  • Icon library<\/strong>\u00a0\u2013\u00a0choose the icon library for the module.<\/li>\n
                  • Select icon<\/strong>\u00a0\u2013 select the icon to be displayed in the module.<\/li>\n
                  • Opacity<\/strong>\u00a0\u2013\u00a0specify icon transparency, if needed.<\/li>\n
                  • Size of icon<\/strong>\u00a0\u2013 select the size for the icon for Info Box module.<\/li>\n<\/ul>\n<\/li>\n
                  • Custom image<\/strong>\u00a0\u2013 select this variant to display custom image\u00a0on the left side from the text.\n
                      \n
                    • Upload image<\/strong>\u00a0\u2013 select the image from media library for Info Box module.<\/li>\n
                    • Opacity<\/strong>\u00a0\u2013\u00a0specify the image transparency, if needed.<\/li>\n
                    • Size<\/strong>\u00a0\u2013 select the size for the image for Info Box module.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

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

                      Icon background settings<\/h3>\n

                      Available for all style, except for Top Icon style.<\/h6>\n

                      \"\"<\/p>\n

                        \n
                      • Icon background size<\/strong> – specify the width of background for the icon.<\/li>\n
                      • Border radius<\/strong> – set the border radius of the icon decoration, if needed.<\/li>\n
                      • Start Background color <\/strong>– set the background color for the icon.<\/li>\n
                      • End Background color<\/strong> – set the end background color to create gradient effect.<\/li>\n
                      • Border color<\/strong> – set the border color, for Bordered<\/strong> style only.<\/li>\n
                      • Border width<\/strong> – specify the width of the border decoration, for Bordered<\/strong> style only.<\/li>\n<\/ul>\n

                        [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Typography ” tab_id=”1487165798310-c0fdaa9d-c63f”][vc_column_text]<\/p>\n

                        Typography settings<\/h3>\n

                        <\/p>\n

                        Title typography<\/h5>\n

                        These settings are inherited from\u00a0Theme options<\/del>\u00a0Custom typography<\/del>\u00a0Feature Title Typography.<\/del><\/p>\n

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

                            The typography settings are inherited from\u00a0Theme options<\/del>\u00a0Custom typography<\/del>\u00a0Subtitle typography<\/del>.<\/p>\n

                              \n
                            • Element tag<\/strong>\u00a0\u2013 select the tag for the subtitle.<\/li>\n
                            • Font size<\/strong>\u00a0\u2013 set the font size you need to use in the subtitle.<\/li>\n
                            • Letter spacing<\/strong>\u00a0\u2013 set the needed distance between letters in the\u00a0subtitle.<\/li>\n
                            • Line-height<\/strong>\u00a0\u2013\u00a0set the needed distance between lines in the subtitle text.<\/li>\n
                            • Text color<\/strong>\u00a0\u2013 set the color of the font.<\/li>\n
                            • Font style<\/strong>\u00a0\u2013 select the font weight and style (bold, italic) for the subtitle.<\/li>\n
                            • Custom font family<\/strong>\u00a0\u2013 set it to\u00a0Enable<\/strong>\u00a0to use custom Google font.\n
                                \n
                              • Font Family<\/strong>\u00a0\u2013 select the font family for the drop-down list.<\/li>\n
                              • Font style<\/strong>\u00a0\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 typography settings are inherited from\u00a0Theme options<\/del>\u00a0Custom typography<\/del>\u00a0Text typography<\/del>.<\/p>\n

                                \"\"<\/p>\n

                                  \n
                                • Element tag<\/strong>\u00a0\u2013 select the tag for the text in module.<\/li>\n
                                • Font size<\/strong>\u00a0\u2013 set the font size you need to use in the text in \u00a0module.<\/li>\n
                                • Letter spacing<\/strong>\u00a0\u2013 set the needed distance between letters.<\/li>\n
                                • Line-height<\/strong>\u00a0\u2013\u00a0set the needed distance between lines.<\/li>\n
                                • Text color<\/strong>\u00a0\u2013 set the color of the font.<\/li>\n
                                • Font style<\/strong>\u00a0\u2013 select the font weight and style (bold, italic).<\/li>\n<\/ul>\n

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

                                  The Services module is the element for presenting the services available for your customers which allow you to attract more visitors with customizable hover effect.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[29,23,22,16,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/12074"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=12074"}],"version-history":[{"count":17,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/12074\/revisions"}],"predecessor-version":[{"id":15612,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/12074\/revisions\/15612"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=12074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=12074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=12074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}