Elementor Call to Action Widget Variation

elementor-cta-variation-01.json

{"version":"0.4","title":"CTA – Variation 01","type":"section","content":[{"id":"184c4fa1","settings":{"structure":"20"},"elements":[{"id":"3e50565c","settings":{"_column_size":50,"_inline_size":null},"elements":[{"id":"3503203b","settings":{"layout":"above","bg_image":{"url":"","id":""},"title":"Text Here","description":"Text Here","button":"Get Started","link":{"url":"#","is_external":"","nofollow":""},"link_click":"box","ribbon_horizontal_position":"left","vertical_position":"middle","padding":{"unit":"px","top":"0","right":"0","bottom":"20","left":"0","isLinked":false},"title_typography_typography":"custom","description_spacing":{"unit":"px","size":30,"sizes":[]},"title_color":"#ffffff","description_color":"#000000","button_text_color":"#ffffff","button_background_color":"#ffa500","button_border_color":"#ffa500","custom_css":"selector .elementor-cta__title {\n    background: orange;\n    padding: 5px 0;\n}\nselector .elementor-cta__title:before {\n    content: \"\";\n    position: absolute;\n    left: 11px;\n    top: 11px;\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 10px 0 10px 17.3px;\n    border-color: transparent transparent transparent #ffffff;\n}"},"elements":[],"isInner":false,"widgetType":"call-to-action","elType":"widget"}],"isInner":false,"elType":"column"},{"id":"559223a2","settings":{"_column_size":50,"_inline_size":null},"elements":[{"id":"23083963","settings":{"layout":"above","bg_image":{"url":"","id":""},"title":"Text Here","description":"Text Here","button":"Get Started","link":{"url":"#","is_external":"","nofollow":""},"link_click":"box","ribbon_horizontal_position":"left","vertical_position":"middle","padding":{"unit":"px","top":"0","right":"0","bottom":"20","left":"0","isLinked":false},"title_typography_typography":"custom","description_spacing":{"unit":"px","size":30,"sizes":[]},"title_color":"#ffffff","description_color":"#000000","button_text_color":"#ffffff","button_background_color":"#66007f","button_border_color":"#66007f","custom_css":"selector .elementor-cta__title {\n    background: #66007f;\n    padding: 5px 0;\n}\nselector .elementor-cta__title:before {\n    content: \"\";\n    position: absolute;\n    left: 11px;\n    top: 11px;\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 10px 0 10px 17.3px;\n    border-color: transparent transparent transparent #ffffff;\n}"},"elements":[],"isInner":false,"widgetType":"call-to-action","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"}]}

Instructions.md

Elementor Custom CTA

This is a variation for Elementor Pro's Call to Action widget. A .json template is supplied to import to your website.

Requirements

Elementor Pro

Instructions

1. Download the file titled "elementor-cta-variation-01.json"
2. Log into your website
3. Go to Templates > Saved Templates
4. Click "Import Templates"
5. Select elementor-cta-variation-01.json
6. Add template to a page or post and enjoy

Notes

• CSS was added to the Custom CSS section of the widget in the Advance tab and used to modify this variation.

Thanks alot Jeff.

I needed a little help with one more thing.
Do you know how do I add gradient to banner only for mobile?