{"id":11814,"date":"2016-12-21T14:28:18","date_gmt":"2016-12-21T14:28:18","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11814"},"modified":"2017-03-06T14:08:37","modified_gmt":"2017-03-06T14:08:37","slug":"call-to-action","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/call-to-action","title":{"rendered":"Call to Action"},"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]Allows you to create a Call to Action item with or without icons or text.\u00a0Create the noticeable element for your site to get the immediate\u00a0response from your customers.<\/p>\n

Check the Call to Action module example following this link<\/a>.<\/p>\n

Watch the video tutorial on Call to Action 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

\"general-tab\"<\/p>\n

    \n
  • Style<\/strong> \u2013 choose between 2 preset styles.\n
      \n
    • Simple<\/strong> – the icon and text content are displayed on one background color.<\/li>\n
    • Separated<\/strong>\u00a0– the icon has its own background color set and text content has its own background color.<\/li>\n<\/ul>\n<\/li>\n
    • Alignment<\/strong> \u2013 select the horizontal alignment of the element: Left<\/strong>, right<\/strong> and center<\/strong> positions are available.<\/li>\n<\/ul>\n
      Extra features<\/h5>\n
        \n
      • Animation<\/strong> – choose between 14 preset animation effects.<\/li>\n
      • Custom CSS class<\/strong> –\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=”Main Content settings” tab_id=”1486545572829-e1c1304c-ee12″][vc_column_text]<\/p>\n

        Main content settings<\/h3>\n

        <\/p>\n

          \n
        • Icon<\/strong> \u2013 set it to Enable<\/strong> to add the icon to the call to action content.<\/li>\n
        • Icon to display<\/strong> \u2013 select the element to be displayed on the left side from the text.\n
            \n
          • Icon<\/strong> \u2013 select this variant to display icon\u00a0on the left side from the text.\n
              \n
            • Icon library<\/strong> \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
            • Icon size<\/strong> \u2013 select the size for the icon for Call to Action module.<\/li>\n
            • Icon color<\/strong> \u2013\u00a0select the color for the icon for Call to Action module.\u00a0Default icon color is #fff.<\/strong><\/li>\n<\/ul>\n<\/li>\n
            • Image<\/strong> \u2013 select this variant to display custom image\u00a0on the left side from the text.\n
                \n
              • Upload image<\/strong> \u2013 select the image from media library for Call to Action module.<\/li>\n<\/ul>\n<\/li>\n
              • Text<\/strong> \u2013 select this variant to display custom text\u00a0for Call to Action module. The default settings are inherited from theme files and are as following: line-height:1 em,\u00a0font-family: Montserrat, font-weight: 700, \u00a0letter-spacing: -1px.\n
                  \n
                • Font size<\/strong> \u2013 set the font size you need to use for the text displayed on the left site.<\/li>\n
                • Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n
                • Text color<\/strong> \u2013 set the color of the font of the text.<\/li>\n
                • Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the text.<\/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) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
                  • Title<\/strong> \u2013 enter the title for the Call to Action module.<\/li>\n
                  • Subtitle<\/strong> \u2013\u00a0enter the subtitle for the Call to Action module.<\/li>\n<\/ul>\n

                    <\/h3>\n

                    [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Button settings” tab_id=”1486559410400-b0b27656-5765″][vc_column_text]<\/p>\n

                    Button settings<\/h3>\n

                    <\/p>\n

                      \n
                    • Icon<\/strong> – set it to Enable<\/strong> to you to add the icon to the Call to Action button.<\/li>\n
                    • Icon library<\/strong> \u2013\u00a0choose the icon library for the module. Standard<\/strong> and none<\/strong> variants are available.<\/li>\n
                    • Select icon<\/strong>\u00a0\u2013 select the icon to be displayed in the button.<\/li>\n
                    • Button text<\/strong> – enter the text for the Call to Action button.<\/li>\n
                    • Button link<\/strong> – assign the link for the button in the Call to Action module.<\/li>\n<\/ul>\n

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

                      Styles<\/h3>\n

                      \"\"<\/p>\n

                        \n
                      • Blocks left\/right padding<\/strong> – set the value for the left and right paddings of the Call to Action button.<\/li>\n
                      • Blocks top\/bottom padding<\/strong> – set the value for the top and bottom paddings of the Call to Action button.<\/li>\n
                      • Blocks border radius<\/strong> – set the border radius to have rounded corners for the Call to Action module.<\/li>\n
                      • Button block background color<\/strong> – select the background color for the button container.\u00a0Default button block background color is #f4f4f4<\/strong>.<\/li>\n
                      • Main block background color<\/strong> -select the background color for the main content container. The default value is inherited from Theme Options<\/del> Styling options<\/del> Main site color<\/del>.<\/li>\n<\/ul>\n
                        Button styles<\/h5>\n

                        \"\"<\/p>\n

                          \n
                        • Text color<\/strong> – select the text color for the button. The default value is inherited from\u00a0Theme options<\/del> General options<\/del> Default button options<\/del> Default Button Typography\u00a0<\/del>section.<\/li>\n
                        • Text hover color<\/strong> – select the text color for the button on hover. The default value is inherited from\u00a0Theme options<\/del> General options<\/del> Default button options<\/del> Default button hover text color.<\/del><\/li>\n
                        • Background color<\/strong> – select the background color for the button. The default value is inherited from\u00a0Theme options<\/del> General options<\/del> Default button options<\/del> Default button background color\u00a0<\/del>section.<\/li>\n
                        • Hover background color<\/strong> – select the background color for the button on hover. The default value is inherited from\u00a0Theme options<\/del> General options<\/del> Default button options<\/del> Default button hover background color\u00a0<\/del>section.<\/li>\n
                        • Padding left<\/strong> – set the padding left for the button, from button text to the edge of the button. The default value is 40 px, if the icon is set for the button the value is 50px.<\/li>\n
                        • Padding right<\/strong> – set the padding right for the button, from button text to the edge of the button. The default value is 40 px.<\/li>\n
                        • Border radius<\/strong> – select the border radius for the button to have rounded corners.<\/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 settings<\/h3>\n

                          <\/p>\n

                          Title Typography<\/h5>\n

                          The settings are inherited from\u00a0Theme options<\/del> Typography\/Fonts<\/del> Headings typography<\/del>\u00a0Content title big Typography<\/del> section and the following values are inherited direct from theme files and are as follows: font-size: 21px,\u00a0color: #fff, line-height: 1.2.<\/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> –\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

                              The settings are inherited from\u00a0Theme options<\/del> Typography\/Fonts<\/del> Text typography<\/del>\u00a0default text Typography<\/del> section and the following values are inherited direct from theme files and are as follows:color: rgba(255,255,255,.4), line-height: 1.6, padding-top: 7px.<\/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> –\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) for 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
                                  Button Text Typography<\/h5>\n

                                  The button settings for Call to Action module are inherited\u00a0from Theme options<\/del> General options<\/del> Default button options<\/del> Default button typography\u00a0<\/del>section.<\/p>\n

                                    \n
                                  • Font size<\/strong> \u2013 set the font size you need to use in the button text.<\/li>\n
                                  • Letter spacing<\/strong> \u2013 set the needed distance between letters in the button text.<\/li>\n
                                  • Line-height<\/strong> –\u00a0set the needed distance between lines in the button text.<\/li>\n
                                  • Text color<\/strong> \u2013 set the color of the font.<\/li>\n<\/ul>\n

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

                                    Allows you to create a Call to Action item with or without icons or text. Create the noticeable element for your site to get the immediate response from your customers.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[27,23,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11814"}],"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=11814"}],"version-history":[{"count":9,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11814\/revisions"}],"predecessor-version":[{"id":12271,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11814\/revisions\/12271"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}