{"id":9308,"date":"2019-06-12T08:10:07","date_gmt":"2019-06-12T08:10:07","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=9308"},"modified":"2023-03-07T11:48:25","modified_gmt":"2023-03-07T11:48:25","slug":"how-to-add-parallax-effect-to-a-column","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/","title":{"rendered":"How to Add Parallax Effect to a Column"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Add a scrolling feature to the pages applying a cool parallax effect. You will attract visitors\u2019 attention creating a moving effect and an interesting column background applying a parallax option of the plugin.<\/p>\n\n\n\n<p>First, open the certain page, where you would like to add parallax effect in <a href=\"https:\/\/elementor.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Elementor<\/a> editor and select the section structure.<\/p>\n\n\n\n<p>Then, find appropriate widgets in the left panel and drag them into two columns.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/adding-parallax.png\" alt=\"where would you like to add parallax effect in Elementor editor\">\n\n\n\n<p>The next step is to click the <strong>Edit Widget<\/strong> option of each widget and open <strong><em>Advanced > JetTricks<\/em><\/strong> section, where different animation effects are available.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/advanced-jettricks-effects.png\" alt=\"Advanced &gt; JetTricks section\">\n\n\n\n<p>Move the toggle to \u201cYes\u201d next to the <strong>Use Parallax<\/strong> field and right there you will get access to set needed options, such as speed, invert and responsiveness. Set the different speed for the widgets that parallax effect will be visible and enable the <strong>Invert<\/strong> option for one of them that they will move in different directions.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/parallax-speed-invert.png\" alt=\"Move the toggle to \u201cYes\u201d next to the Use Parallax field\">\n\n\n\n<p>Don\u2019t forget to click the <strong>Update<\/strong> button to save the changes on the page and go and have a look at eye-catching parallax scrolling.<\/p>\n<\/div><\/div>\n\n\n\n<p>Make your website stylish and spectacular thanks to<em> JetTricks<\/em> parallax effect.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial presents the process of creating a modern-looking parallax effect using JetTricks functionality.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[504],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Parallax Effect to a Column | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore easy and comprehensive parallax functionality to be added to an Elementor column. Try JetTricks to enrich your site with amazing effects!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Parallax Effect to a Column | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore easy and comprehensive parallax functionality to be added to an Elementor column. Try JetTricks to enrich your site with amazing effects!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-07T11:48:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/adding-parallax.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/\",\"name\":\"How to Add Parallax Effect to a Column | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-12T08:10:07+00:00\",\"dateModified\":\"2023-03-07T11:48:25+00:00\",\"description\":\"Explore easy and comprehensive parallax functionality to be added to an Elementor column. Try JetTricks to enrich your site with amazing effects!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Parallax Effect to a Column\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Parallax Effect to a Column | Crocoblock","description":"Explore easy and comprehensive parallax functionality to be added to an Elementor column. Try JetTricks to enrich your site with amazing effects!","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:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Parallax Effect to a Column | Crocoblock","og_description":"Explore easy and comprehensive parallax functionality to be added to an Elementor column. Try JetTricks to enrich your site with amazing effects!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/","og_site_name":"Help Center","article_modified_time":"2023-03-07T11:48:25+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/adding-parallax.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/","name":"How to Add Parallax Effect to a Column | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-12T08:10:07+00:00","dateModified":"2023-03-07T11:48:25+00:00","description":"Explore easy and comprehensive parallax functionality to be added to an Elementor column. Try JetTricks to enrich your site with amazing effects!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-parallax-effect-to-a-column\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Parallax Effect to a Column"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/9308"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=9308"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=9308"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=9308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}