{"id":104613,"date":"2023-02-16T17:32:57","date_gmt":"2023-02-16T12:02:57","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104613"},"modified":"2023-02-16T17:32:57","modified_gmt":"2023-02-16T12:02:57","slug":"connect-process-steps-with-carousel-anything-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-process-steps-with-carousel-anything-in-elementor\/","title":{"rendered":"How to connect Process Steps with Carousel Anything Widget in Elementor?"},"content":{"rendered":"\n<p>One of the biggest advantages of using the Carousel Anything widget of The Plus Addons for Elementor over any other carousel slider widget is that it allows you to interconnect with other widgets (The Plus Addons for Elementor widgets) to create some amazing solutions.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, <a href=\"\/docs\/carousel-anything-elementor-widget-settings-overview\/\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/carousel-anything?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>One such widget is the Process\/Steps widget, you can easily connect these two widgets using the Unique Carousel ID.<\/p>\n\n\n\n<p>For this process, first, drag and drop the Carousel Anything widget and the Process Steps widget on the page, and then follow the below steps:<\/p>\n\n\n\n<p>1. Add content to the Carousel Anything widget from Elementor template or shortcode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"282\" height=\"455\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/carousel-anything-content-type.png\" alt=\"carousel anything content type\" class=\"wp-image-103222\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/carousel-anything-content-type.png 282w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/carousel-anything-content-type-186x300.png 186w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/figure>\n\n\n\n<p>2. Make sure the number of slides in your slider and the number of steps in your Process\/Steps widget are the same.<\/p>\n\n\n\n<p>3. Add a <strong>Unique Carousel ID<\/strong> in the Carousel Anything widget. This can be any combination of letters and numbers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"301\" height=\"580\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-anything-uc-id.png\" alt=\"carousel anything unique carousel id\" class=\"wp-image-104614\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-anything-uc-id.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-anything-uc-id-156x300.png 156w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>4. Now select the Process\/Steps widget and turn on the <strong>Carousel Anything Connection<\/strong> toggle and add the same ID in the <strong>Connection Carousel ID<\/strong> field to make the connection.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"301\" height=\"679\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/process-step-cc-id.png\" alt=\"process step connection carousel id\" class=\"wp-image-104615\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/process-step-cc-id.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/process-step-cc-id-133x300.png 133w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>From the <strong>Effect on<\/strong> dropdown, you can choose the slider play mode on mouse hover or click.<\/p>\n\n\n\n<p>Now both the widgets are connected, and if you play the slider the steps will change too and vice versa for the steps as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1019\" height=\"637\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/carousel-anything-steps-demo.gif\" alt=\"carousel anything steps demo\" class=\"wp-image-104616\"\/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-carousel-remote-with-carousel-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to connect Carousel Remote with Carousel in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104617,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[550,527],"class_list":["post-104613","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-carousel-anything","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104613"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104613\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104617"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104613"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}