{"id":1422,"date":"2021-06-17T10:26:56","date_gmt":"2021-06-17T10:26:56","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1422"},"modified":"2023-04-30T08:23:31","modified_gmt":"2023-04-30T08:23:31","slug":"how-to-use-the-call-to-action-widget-in-elementor-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/","title":{"rendered":"How to Use the Call to Action Widget in Elementor [PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1422\" class=\"elementor elementor-1422\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7ac3c553 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7ac3c553\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2464f93d\" data-id=\"2464f93d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7993a9fa elementor-widget elementor-widget-video\" data-id=\"7993a9fa\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=HySVfkbRvGo&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4474b81e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4474b81e\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c0b3993\" data-id=\"c0b3993\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2fc62a00 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"2fc62a00\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-8011\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-8011\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-8012\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-8012\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-8011\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-8011\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-8011\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we will teach you how to use the Call to Action Widget. Using call to actions on your website is essential when trying to get your website visitors to perform an action, and with the extensive options available in the Call to Action Widget from Elementor, you\u2019ll be sure to find a use for this fantastic widget on your website.<\/p><p>This tutorial will cover:<\/p><p>\u2714 The different styling options available<\/p><p>\u2714 Linking your call to action to a page or popup<\/p><p>\u2714 Examples of use cases<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-8012\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-8012\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-8012\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it&#8217;s Ash from Elementor.<\/p><p>In this tutorial we are going to explore the \u2018Call to Action Widget\u2019.<\/p><p>This extremely versatile widget can really bring a new level of design and interactivity to your website, and will provide a fun and engaging way for your website users to perform an action.<\/p><p>With an extensive range of configurations, you\u2019ll be sure to find a need for this widget on your website projects.<\/p><p>So let\u2019s dive in and see what the \u2018Call to Action Widget\u2019 can do!<\/p><p>Today we\u2019ll be working on this real estate website. We\u2019ve created this grid layout of elements by using two call to action widgets within a full width section.<\/p><p>It\u2019s very common to see similar layouts to this created with multiple columns &amp; widgets, but we\u2019ll show you a better way by achieving this with much fewer elements.<\/p><p>In a moment we\u2019ll delete these widgets and recreate them from scratch giving you a full overview on how this widget works.<\/p><p>Afterwards, we\u2019ll then recreate this \u2018Call to Action Widget\u2019 which we\u2019ve linked to a Pop Up form to collect customer information.<br \/>Let\u2019s head over to the Elementor editor and remove these call to actions widgets and recreate them from scratch.<\/p><p>In the widgets panel, we\u2019ll search for \u2018Call to Action\u2019 and then drop the widget into the now empty section.<\/p><p>Please note this section has previously been set to full width, with no column gap, and we\u2019ve also set the padding to 0px on all sides so that our call to action width will fill all of the available space.<br \/>If we now select our call to action widget we can see the panel updates with all of the available settings.<\/p><p>The first option we\u2019re presented with is to choose a skin for our widget.<\/p><p>Classic positions the image either to the side or on top, whilst cover sets it into the background of the widget.<\/p><p>For this example, we\u2019ll set it to classic, but we\u2019ll be sure to explore \u2018cover\u2019 later on in this tutorial.<\/p><p>Next, we are able to set the position for our image. The options available are left, above &amp; right. You\u2019ll also see the device icon here which means you can adjust this configuration to be different for desktop, tablet &amp; mobile devices. This is the case anywhere you see this icon moving forward.<\/p><p>We\u2019ll leave the tablet and mobile configurations for now as we\u2019ll be returning to them shortly, but let\u2019s set the desktop position to \u2018Left\u2019.<\/p><p>Under \u2018Choose Image\u2019, we can choose an image already uploaded to our media library or upload a new one. Once you have chosen an image, simply select \u2018Insert Media\u2019 to add it to your call to action widget.<\/p><p>The final option here allows us to choose an image size. Be sure to choose an image size which allows your image to be displayed without pixelation, but be cautious not to choose an image size which is too large for this section as it will likely slow down your website&#8217;s loading times. For more information about image optimisations, check out our dedicated performance course.<\/p><p>The best image size for our layout is the Large option.<br \/>Let\u2019s now switch to the \u2018Content Tab\u2019.<\/p><p>We can choose to set a \u2018Graphic Element\u2019 first of all, and whilst our design doesn\u2019t use this element let\u2019s still explore what it can do.<\/p><p>We can choose to upload an image first of all.<\/p><p>We can also choose the \u2018Icon\u2019 option.<\/p><p>Insert an icon from the icon library\u2026<\/p><p>&#8230;or we can select an SVG icon from our media library.<\/p><p>If you would like to upload SVG icons to your design, be sure to enable this in the Elementor settings.<\/p><p>We\u2019ll switch the \u2018Graphic Element\u2019 off and move to the next settings which are for the title and description of the call to action widget.<\/p><p>Both of these elements can be populated with dynamic content and this is true anywhere that you see this icon.<\/p><p>Let\u2019s add our title&#8230; and description\u2026<\/p><p>&#8230;And then we\u2019ll set the Title Tag as H3.<\/p><p>In the next section we can specify our button configuration.<\/p><p>We\u2019ll first add our button text\u2026<br \/>Then we\u2019ll choose a page to link to\u2026<\/p><p>We can also apply additional link options here by selecting the gear icon\u2026<\/p><p>And finally we can choose if we would like the link to be applied to the entire \u2018Call to Action Widget\u2019, or just the button. We\u2019ll select \u2018Button Only\u2019.<\/p><p>The last option here allows us to add a ribbon to our call to action. We\u2019ll leave this blank for now, but we\u2019ll explore this in more detail when we create our call to action located at the bottom of our page.<br \/>Now that we have added the content and defined the structure of our call to action widget, it\u2019s time to apply some styles so that it fits with the brand of our website.<\/p><p>Let\u2019s switch to the \u2018Style\u2019 tab and the first option we see is height, which controls the height of the entire \u2018Call to Action\u2019 widget.<\/p><p>We can set this to a specific height using pixels, or via the \u2018Viewport Height\u2019.<\/p><p>The viewport height is a range of 0 to 100 and 1vh is equal to 1% of the viewport height.<\/p><p>We\u2019ll set ours to 70vh which is the same as 70% of the height of our viewport.<\/p><p>Alignment allows us to position the text to the left, center or right. We\u2019ll set this to the left.<\/p><p>And the vertical position allows us to control whether the content is displayed at the top, center or bottom of the widget.<\/p><p>Let\u2019s add some padding, by switching to the percentage value and setting all four sides to 5%.<\/p><p>We can now set the image width. This can be set to an exact measurement using pixels or a dynamic value using percentages. We would like our image to always fill half the users screen, so we\u2019ll set this to 50%.<\/p><p>The final option here is to set the image height.<\/p><p>Just like before with the height of the entire widget, we can set this to a specific height using pixels, or via the viewport height.<\/p><p>In our design, we need the image to fill all of the available space within the widget, so we\u2019ll match our previous configuration and set this to 70vh.<\/p><p>Setting width and height values for any image used on your website is good practice, and can help to reduce layout shift.<\/p><p>Moving on, we\u2019ll now explore the styling options for our content.<\/p><p>First of all we\u2019re able to set the typography and spacing for our title &amp; description.<\/p><p>The typography can be set using a global font or you can adjust them manually like so.<\/p><p>The spacing can be adjusted by using the slider or by entering a value.<\/p><p>Let\u2019s now do the same for the description text\u2026<\/p><p>As you can see in the next area, we have both normal &amp; hover color options.<\/p><p>With normal selected first of all, we\u2019ll set the background, title &amp; description colors using our globals color choices, and we\u2019ll leave the button color blank as the next section will allow us more control over this element.<\/p><p>If required, switch to the hover tab and amend the colors if you would like them to change when a user hovers over these elements. For our design, we\u2019ll leave these blank.<\/p><p>Switching to the button tab next, we are able to fully configure the look and style of our button.<\/p><p>The first option allows us to choose a button size, we\u2019ll set this to \u2018Medium\u2019.<\/p><p>Next, we can amend the typography. Again you can choose a global font here or adjust via the manual selections.<\/p><p>Similar to the previous section we now have the color options which can be configured for both the \u2018Normal\u2019 &amp; \u2018Hover\u2019 states.<\/p><p>With normal selected first of all, we\u2019ll set the text color to \u2018Primary\u2019, background color to \u2018White\u2019, and border color to \u2018Primary\u2019.<\/p><p>Switch to the \u2018Hover\u2019 tab and set the text color to \u2018White\u2019, background color to \u2018Primary\u2019, and border color to \u2018Primary\u2019.<\/p><p>Finally, we\u2019ll set the border width to 1, and the border radius to 0 which will give us nice sharp corners.<\/p><p>Now you can see when we hover over our button, these subtle but effective styles have been applied.<\/p><p>The final option here in the style tab is to configure the \u2018Hover Effects\u2019.<\/p><p>By default, the \u2018Call to Action Widget\u2019 does have some hover effects already applied, but be sure to experiment with all of the settings to find the right look and feel for your design.<\/p><p>Let\u2019s go over each option so you know which one doesn.<\/p><p>First, we have a \u2018Sequenced Animation\u2019 option. We\u2019ll explore this in more detail when we create our next \u2018Call to Action Widget\u2019, as it is a better example to showcase this feature.<\/p><p>Next, we can choose which hover animation is applied to the image when a user hovers over the call to action widget. We\u2019ll set ours to \u2018Zoom In\u2019.<\/p><p>We then have some \u2018Normal\u2019 &amp; \u2018Hover\u2019 color options.<\/p><p>With the normal tab selected, we can choose a color which is applied to the image as default, and if we switch to the hover tab we can set a color which is applied when a user hovers over the call to action widget.<\/p><p>For our design, we\u2019ve decided to leave the overlay colors off, so we\u2019ll set these both to transparent.<\/p><p>Coming towards the end of our styling options, you\u2019ll see that we can apply a CSS filter and blending mode if required, and if we switch over to the hover tab one last time, we can amend the transition duration. This is measured in milliseconds, so our configuration of 1500 will equal 1.5 seconds.<\/p><p>Before we move onto styling our \u2018Call to Action Widget\u2019 for tablet and mobile devices, let\u2019s first switch to the advanced tab and apply a subtle fade-in effect to match the rest of our website elements.<br \/>Let\u2019s switch to mobile view now by using the keyboard shortcut \u2018Command + Shift + M on Mac or Control + Shift + M on Windows\u201d.<\/p><p>We\u2019ll first switch to the style tab and set the image width to 40%.<\/p><p>This looks great now on tablet and we do not need to make any other adjustments as the styles inherited from the desktop view look really good.<\/p><p>Now switch to mobile view, again by using the keyboard shortcut.<\/p><p>OK, as you can see we need to do a little more work here.<\/p><p>Let\u2019s first head to the content tab and set the image position to above.<\/p><p>Now, switch to the style tab and under padding set all four sides to 10%.<\/p><p>We\u2019ll then amend the image width to 100% and the image height to 50vh.<\/p><p>Alright, fantastic! As you can see our \u2018Call to Action Widget\u2019 now looks great on desktop, tablet &amp; mobile devices.<br \/>Let\u2019s now duplicate our \u2018Call to Action Widget\u2019 by right clicking the existing one and selecting \u2018Duplicate\u2019.<\/p><p>By default 20px of spacing is added to all of our widgets from our site settings, so let\u2019s reduce that to ensure our call to actions are flush with each other.<\/p><p>Now amend the image position&#8230;<\/p><p>&#8230;update your image\u2026<\/p><p>&#8230; title&#8230;<\/p><p>&#8230;and description&#8230;<\/p><p>And there we have it! We\u2019ve created a great looking call to action to entice our users to engage with our content, and we\u2019ve reused it to build a fantastic looking grid section on our website.<\/p><p>This was all built using just one section and two widgets!<br \/>If we now scroll to the bottom of our page, you\u2019ll see we have another \u2018Call to Action Widget\u2019, however the style of this one is slightly different.<\/p><p>Let\u2019s delete this widget and rebuild it to see how it was created. We\u2019ll also explore a couple of the options we bypassed in the first example.<\/p><p>First of all we\u2019ll choose the \u2018Cover\u2019 option under skin and as you can see this applies the image to the background of the widget.<\/p><p>Let\u2019s now choose our image and specify a size.<\/p><p>In the content tab, we\u2019ll add our title\u2026<\/p><p>Description\u2026<\/p><p>And set our HTML tag.<\/p><p>Next we\u2019ll enter our button text and set our link. We\u2019re going to link to a pop-up we\u2019ve already created.<\/p><p>Select the dynamic tags icon and find Popup under the Actions subheading.<\/p><p>Now, select the popup field\u2026<\/p><p>Search for\u2026<\/p><p>And select your popup.<\/p><p>Finally switch to the ribbon options\u2026<\/p><p>add some text and select an alignment.<\/p><p>This concludes the content configurations, so now let\u2019s dive into styling our call to action.<\/p><p>Switch over to the style tab and set the box height to 45vh, alignment to center, and vertical position to middle.<\/p><p>In the padding fields, unlink these, switch to the percentage value and add 15% to left &amp; right.<\/p><p>Under content, let\u2019s set the typography and spacing\u2026<\/p><p>&#8230;as well as the colors.<\/p><p>Now open up the button options and configure these options to suit your design.<\/p><p>Next, we\u2019ll style the ribbon.<\/p><p>We\u2019ll set the background &amp; title colors using our global colors and increase the distance to 50.<\/p><p>Finally we\u2019ll amend the typography and as you can see we can also apply a box shadow effect as well.<\/p><p>Let\u2019s finish off our call to action widget by configuring the hover effects.<\/p><p>We\u2019ll set the hover animation to \u2018Shrink\u2019 and animation duration to 1000. Please note these settings apply to the content areas only, so the title, description and button.<\/p><p>If we select the \u2018Sequenced Animation\u2019 option and preview our call to action widget, you\u2019ll see that our title, description and button all now animate in a sequenced order.<\/p><p>We\u2019re actually going to leave this off for our design, but feel free to experiment with this setting to create some amazing results.<\/p><p>In the final area we can apply some settings to control the background image.<\/p><p>We\u2019ll set the hover animation to zoom out and apply an overlay color to both the normal and hover tabs.<\/p><p>Let\u2019s now apply the same subtle fade-in effect we\u2019ve used across our website for consistency.<\/p><p>And our final steps now are to make a few tweaks for mobile devices.<\/p><p>Switch to tablet view first of all, and as you can this looks great already so no further adjustments needed.<\/p><p>Now, change to mobile view.<\/p><p>Open the style tab and under the box settings add 10% padding on all sides.<\/p><p>Now switch to content and amend the description text size to 1.2em.<\/p><p>And there we have it, our call to action widgets are ready for the world to interact with and look great on our website!<br \/>Using the call to action widget on your website is a great way to encourage your website users to engage with your content and can be a really beneficial inclusion for any website.<\/p><p>We hope you enjoyed this tutorial.<\/p><p>Be sure to comment below with any questions and don\u2019t forget to like and subscribe to our channel for more great tutorials.<\/p><p>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we will teach you how to use the Call to Action Widget. Using call to actions on your website is essential when trying to get your website visitors to perform an action, and with the extensive options available in the Call to Action Widget from Elementor, you\u2019ll be sure [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9725,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Call to Action Widget in Elementor [PRO] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Call to Action Widget in Elementor [PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we will teach you how to use the Call to Action Widget. Using call to actions on your website is essential when trying to get your website visitors to perform an action, and with the extensive options available in the Call to Action Widget from Elementor, you\u2019ll be sure [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T10:26:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-30T08:23:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Call-to-Action-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Call to Action Widget in Elementor [PRO] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Call to Action Widget in Elementor [PRO] - Academy","og_description":"Overview Transcript Overview In this tutorial we will teach you how to use the Call to Action Widget. Using call to actions on your website is essential when trying to get your website visitors to perform an action, and with the extensive options available in the Call to Action Widget from Elementor, you\u2019ll be sure [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/","og_site_name":"Academy","article_published_time":"2021-06-17T10:26:56+00:00","article_modified_time":"2023-04-30T08:23:31+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Call-to-Action-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Call to Action Widget in Elementor [PRO]","datePublished":"2021-06-17T10:26:56+00:00","dateModified":"2023-04-30T08:23:31+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/"},"wordCount":2682,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Call-to-Action-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/","name":"How to Use the Call to Action Widget in Elementor [PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Call-to-Action-Widget.jpg","datePublished":"2021-06-17T10:26:56+00:00","dateModified":"2023-04-30T08:23:31+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Call-to-Action-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Call-to-Action-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-call-to-action-widget-in-elementor-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the Call to Action Widget in Elementor [PRO]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1422"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1422\/revisions"}],"predecessor-version":[{"id":9605,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1422\/revisions\/9605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9725"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}