{"id":1568,"date":"2024-03-27T07:29:13","date_gmt":"2024-03-27T07:29:13","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1568"},"modified":"2024-04-10T08:53:38","modified_gmt":"2024-04-10T08:53:38","slug":"call-to-action","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/call-to-action\/","title":{"rendered":"Call To Action"},"content":{"rendered":"\n

Call To Action Block is added to a site with the goal of motivating users or site visitors to complete a specific action based on its message. It’s typically written as a command such as Buy Now, Sign up, Contact Us, etc.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After you have chosen the Call To Action block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the CTA block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

Design<\/h3>\n\n\n\n
    \n
  • Preset<\/strong> – It refers to the styles\/designs that display the Call-to-Action block. Currently, the Call-to-Action block provides four layouts.<\/li>\n<\/ul>\n\n\n\n
    \"Block
    Block with Preset Layout 2<\/figcaption><\/figure>\n\n\n\n

    Title<\/h3>\n\n\n\n

    The Title appears at the top of the description and comes with the following option to customize it:<\/p>\n\n\n\n

      \n
    • Enable<\/strong> – Switch the Toggle to the right area to enable the title. Enabling the option will display the title.<\/li>\n\n\n\n
    • HTML Markup<\/strong> \u2013 It changes the title heading tag. Under the HTML Markup option, select the required markup for your post title. You can set your title to be in H1 \u2013 H6<\/strong>, paragraph <\/strong>and div<\/strong>.<\/li>\n<\/ul>\n\n\n\n
      \"Enable
      Enable Title and Change HTML Markup<\/figcaption><\/figure>\n\n\n\n

      Description<\/h3>\n\n\n\n
        \n
      • Enable<\/strong> – Switch the Toggle to the right area to enable the description. Enabling the option will display the description on your end.<\/li>\n<\/ul>\n\n\n\n
        \"Enable
        Enable Description<\/figcaption><\/figure>\n\n\n\n

        Button<\/h3>\n\n\n\n

        It provides the following customization options for the button that appears inside the Call To Action Block.<\/p>\n\n\n\n

          \n
        • Enable<\/strong> – Switch the Toggle to the right area to enable the Button inside the CTA Block. Enabling the option will display the Button on your end. <\/li>\n\n\n\n
        • URL<\/strong> – This option is used to add the link, which will redirect the user to a specified web address or page. Moreover enabling the option Open Link in a New Tab <\/em>will open the added URL in a new tab.<\/li>\n<\/ul>\n\n\n\n
          \"Enable
          Enable the Button and Add the URL<\/figcaption><\/figure>\n\n\n\n

          Style <\/h2>\n\n\n\n

          Under the style settings, you’ll find the following options available:<\/p>\n\n\n\n

          Properties<\/h3>\n\n\n\n
            \n
          • Text Alignment<\/strong> – It sets the text alignments added to the CTA Block. You can set the alignments as Left, Center, and Right. Moreover, you can also set the alignment position to be different depending on the device, i.e., desktop, tablet, or mobile.<\/li>\n<\/ul>\n\n\n\n
            \"Set
            Set Left Text Alignment<\/figcaption><\/figure>\n\n\n\n

            Background<\/h3>\n\n\n\n
              \n
            • Type<\/strong> – It sets the background color for the CTA Block. You can change the visual appearance of the background by changing its color or adding an image.<\/li>\n<\/ul>\n\n\n\n
              \"Change
              Change Background Color<\/figcaption><\/figure>\n\n\n\n

              Title <\/h3>\n\n\n\n
                \n
              • Text Color<\/strong> – It allows you to change the color of the title.<\/li>\n\n\n\n
              • Typography<\/strong> – It controls the title font family, weight, and font size.<\/li>\n<\/ul>\n\n\n\n
                \"Change
                Change Title Color and Typography<\/figcaption><\/figure>\n\n\n\n

                Description<\/h3>\n\n\n\n
                  \n
                • Text Color<\/strong> – It allows you to change the color of the description.<\/li>\n\n\n\n
                • Typography<\/strong> – It controls the description text, including font family, weight, and font size.<\/li>\n<\/ul>\n\n\n\n
                  \"Change
                  Change Description Color and Typography<\/figcaption><\/figure>\n\n\n\n

                  Button<\/h3>\n\n\n\n

                  It provides the following styling options for the Button. These are listed below:<\/p>\n\n\n\n

                    \n
                  • Text Color<\/strong> – It allows changing the color of the text added inside the button.<\/li>\n\n\n\n
                  • Background<\/strong> -It sets the background color of the button. You can change the visual appearance of the background by changing its color or adding an image.<\/li>\n\n\n\n
                  • Typography<\/strong> – It allows you to control the site\u2019s Typography, such as\u00a0font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties for the text. The options are listed below:\n
                      \n
                    • Font Family<\/strong> – The option allows you to choose the appropriate font family for the text.<\/li>\n\n\n\n
                    • Weight<\/strong> – It refers to the thickness or boldness of the text.<\/li>\n\n\n\n
                    • Size<\/strong> – It controls the font size of the text.<\/li>\n\n\n\n
                    • Line Height<\/strong> – It manages the space above and below the text.<\/li>\n\n\n\n
                    • Letter Spacing<\/strong> – It controls the amount of space between characters in the text.<\/li>\n\n\n\n
                    • Style<\/strong> – Using the property, you can set the text to be Italic or Oblique.<\/li>\n\n\n\n
                    • Transformation<\/strong> – It changes the case of the text, such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
                    • Decoration <\/strong>– The styling is applied to the text to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • Border<\/strong> – It customizes the Border area added around the button and comes with the following options:\n
                        \n
                      • Type<\/strong> – You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders. When you select none, you will be given the following option:\n
                          \n
                        • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for the border.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                          However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                            \n
                          • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                          • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                            \"Change
                            Change Button Color, Typography and Border<\/figcaption><\/figure>\n\n\n\n

                            Border<\/h3>\n\n\n\n

                            It customizes the Border area added around the CTA block and comes with the following options:<\/p>\n\n\n\n

                              \n
                            • Type<\/strong> – You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders for the CTA block.<\/li>\n<\/ul>\n\n\n\n

                              When you select none, you will be given the following option:<\/p>\n\n\n\n

                                \n
                              • Radius<\/strong>\u00a0\u2013 It allows you to fix the radius value to make the round corners for the border.<\/li>\n<\/ul>\n\n\n\n

                                However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                                  \n
                                • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color for the CTA block.<\/li>\n\n\n\n
                                • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                                  \"Add
                                  Add Border Around Block<\/figcaption><\/figure>\n\n\n\n
                                    \n
                                  • Box Shadow<\/strong> \u2013 When you enable the Box Shadow option, you will get the following customization options:\n
                                      \n
                                    • Color<\/strong> \u2013 It allows you to select the appropriate box-shadow color for the CTA block.<\/li>\n\n\n\n
                                    • Horizontal-X<\/strong> \u2013 It displays the box shadows in the horizontal position.<\/li>\n\n\n\n
                                    • Horizontal-Y<\/strong> \u2013 It displays the box shadows in the vertical position.<\/li>\n\n\n\n
                                    • Blur<\/strong> \u2013 You can set up the blur value of the box shadows appearing.<\/li>\n\n\n\n
                                    • Spread<\/strong> \u2013 The shadow\u2019s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site\u2019s requirements.<\/li>\n\n\n\n
                                    • Position<\/strong> \u2013 You can set the position of the box shadows as Inset<\/strong> or Outline<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                                      Note – You can apply the border settings option differently for Normal and Hover Modes.<\/em><\/p>\n\n\n\n

                                      \"Add
                                      Add Box Shadow Effect<\/figcaption><\/figure>\n\n\n\n

                                      Advanced<\/h2>\n\n\n\n

                                      The Advanced section consists of four options for the CTA block.<\/p>\n\n\n\n

                                      Spacing<\/h3>\n\n\n\n

                                      Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                        \n
                                      • Block Margin<\/strong> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                                      • Block Padding<\/strong> \u2013 According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different padding for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                        \"\"
                                        Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

                                        Z-Index<\/h3>\n\n\n\n

                                        It allows you to set the priority of the CTA block according to the site requirement.<\/p>\n\n\n\n

                                        Responsive Condition<\/h3>\n\n\n\n

                                        Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                          \n
                                        • Hide on Desktop<\/strong> \u2013 It hides the CTA block on the Desktop.<\/li>\n\n\n\n
                                        • Hide on Tablet<\/strong> \u2013 It hides the CTA block on the Tablet.<\/li>\n\n\n\n
                                        • Hide on Mobile<\/strong>\u00a0\u2013 It hides the CTA block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                          \"Enable\/Disable
                                          Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                          Advanced<\/h3>\n\n\n\n

                                          Under the option, you can set the CSS ID and Classes for this particular CTA block. The available options are listed below:<\/p>\n\n\n\n

                                            \n
                                          • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                                          • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                                            \"Add
                                            Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                                            After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                            Call To Action Block is added to a site with the goal of motivating users or site visitors to complete a specific action based on its message. It’s typically written as a command such as Buy Now, Sign up, Contact Us, etc. After you have chosen the Call To Action block, you’ll get a block[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1568"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1568"}],"version-history":[{"count":31,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1568\/revisions"}],"predecessor-version":[{"id":2773,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1568\/revisions\/2773"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1568"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1568"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}