{"id":6379,"date":"2024-04-14T18:57:29","date_gmt":"2024-04-14T10:57:29","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6379"},"modified":"2024-04-14T18:57:29","modified_gmt":"2024-04-14T10:57:29","slug":"sorters","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/sorters\/","title":{"rendered":"Sorters"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Sorters grant you authority over visual effects that can be applied to an element and its offspring. These are highly beneficial for situation changes, such as converting a black-and-white image to color upon hovering.<\/p>\n<p>Explore more about sorters and alternate effects.<\/p>\n<p><strong>In this tutorial:\u00a0<\/strong><\/p>\n<ol>\n<li>Comprehending sorters<\/li>\n<li>Incorporating sorters<\/li>\n<li>Regulating conditions<\/li>\n<li>Integrating transitions<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9494d140dc3bde634594a_5fa35480b106085f389ad372_91weqtlpzjmqijgabl_n5qczqnq_3umyxciruvphn0wsiidizsppwgtmra8cosqvksugwzft7tzc9mqz9aga-_k5z682gnbb_ajwxwmzjlobaczfufgvf9hjnrlmektln7ztziyb.jpeg\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b9494d140dc3bde634594a_5fa35480b106085f389ad372_91weqtlpzjmqijgabl_n5qczqnq_3umyxciruvphn0wsiidizsppwgtmra8cosqvksugwzft7tzc9mqz9aga-_k5z682gnbb_ajwxwmzjlobaczfufgvf9hjnrlmektln7ztziyb\"><\/div>\n<\/figure>\n<h2>Comprehending sorters<\/h2>\n<p>You have the option to select from various sorter alternatives:\u00a0<\/p>\n<ul>\n<li>Fuzz<\/li>\n<li>Colorize<\/li>\n<li>Intensity<\/li>\n<li>Lightness<\/li>\n<li>Difference<\/li>\n<li>Mono<\/li>\n<li>Sepia<\/li>\n<li>Reverse<\/li>\n<\/ul>\n<h2>Incorporating sorters<\/h2>\n<p>You can put on a sorter just as you can design any category on any element anywhere. You can apply a sorter directly on an image \u2014 you can also insert a sorter on an element that has offspring.\u00a0<\/p>\n<p>As an illustration, you have 3 Link blocks, all sharing the same category (e.g., \u201cPrice link block\u201d).\u00a0<\/p>\n<p>To append a <strong>Fuzz<\/strong> sorter:\u00a0<\/p>\n<ol>\n<li>Proceed to the <strong>Style panel <\/strong>&gt; <strong>Effects<\/strong> &gt; <strong>Sorters<\/strong><\/li>\n<li>Tap the plus symbol for <strong>Sorters<\/strong><\/li>\n<li>Select <strong>Fuzz<\/strong> from the menu<\/li>\n<li>Modify the fuzz radius to regulate the fuzz levels for your element and its offspring<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9494d140dc3bde6345952_5fa35480bc16e24371efed7c_4kbleeakkbu9ss5rbt9fwlabsdqybj-u-zlwhdwduieh68t25abj8s2eueexuyfh0ilqohgomk9by-thaknwitjh96zp1cv39cj4ati4ybd4jm4k43nejsiuk2swqiaxjaoaxwlj.jpeg\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b9494d140dc3bde6345952_5fa35480bc16e24371efed7c_4kbleeakkbu9ss5rbt9fwlabsdqybj-u-zlwhdwduieh68t25abj8s2eueexuyfh0ilqohgomk9by-thaknwitjh96zp1cv39cj4ati4ybd4jm4k43nejsiuk2swqiaxjaoaxwlj\"><\/div>\n<\/figure>\n<p><\/p>\n<p>If you revert to the Sorter menu and switch from Fuzz to Mono, the Link blocks and their offspring turn monochromatic.<\/p>\n<p>To add an illumination sorter above the monochrome sorter:<\/p>\n<ol>\n<li>Tap the plus icon (+) for <strong>Sorters<\/strong><\/li>\n<li>Choose <strong>Intensity<\/strong> from the menu<\/li>\n<li>Slide the <strong>Quantity<\/strong> slider to regulate the <strong>Intensity <\/strong>level<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9494d140dc3bde6345946_5fa3548057a41f4a3342d4f2_bqxgkauhbp2fdght_yvfls_hzspnhjgsbqoyi1kldawarsxrt1owmlyfh7hrkneaklgq6gwd-ay2dgyzauzmirpomjcebswar_h-fsrvjlwk_xpkqwk5gcovkmo6qekb9assajtu.jpeg\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b9494d140dc3bde6345946_5fa3548057a41f4a3342d4f2_bqxgkauhbp2fdght_yvfls_hzspnhjgsbqoyi1kldawarsxrt1owmlyfh7hrkneaklgq6gwd-ay2dgyzauzmirpomjcebswar_h-fsrvjlwk_xpkqwk5gcovkmo6qekb9assajtu\"><\/div>\n<\/figure>\n<p><\/p>\n<p>In this instance, both sorters \u2014 Mono and Intensity \u2014 are organized like strata. You can toggle the visibility of each sorter, or drag each of the layers around to modify their sequence.\u00a0<\/p>\n<h2>Regulating conditions<br \/><\/h2>\n<p>To regulate the sorter on an element while in another condition:\u00a0<\/p>\n<ol>\n<li>Select the <strong>Link block<\/strong> (e.g., \u201cPrice link block\u201d)<\/li>\n<li>Travel to the <strong>Select<\/strong><strong>field<\/strong> in the <strong>Style<\/strong><strong>panel<\/strong><\/li>\n<li>Pick <strong>Hover<\/strong> from the menu\u00a0<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9494d140dc3bde634594e_5fa35480a3240d8ec10f830d_0zvymcadxanytzm56kv87f5tbprivllrlae2vutfuanb-dssv3kp3jajkvrb5axsh8li16ug0ijtguttuuxx5wwmn2jde9lbqycvpdvx00tmei6voiqkryadzteconkqgxszurqp.jpeg\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b9494d140dc3bde634594e_5fa35480a3240d8ec10f830d_0zvymcadxanytzm56kv87f5tbprivllrlae2vutfuanb-dssv3kp3jajkvrb5axsh8li16ug0ijtguttuuxx5wwmn2jde9lbqycvpdvx00tmei6voiqkryadzteconkqgxszurqp\"><\/div>\n<\/figure>\n<p><\/p>\n<p>The <strong>Hover<\/strong> condition inherits characteristics from the <strong>None<\/strong> condition (which is what you were styling when you initially organized <strong>Mono<\/strong> and <strong>Intensity<\/strong> sorters). Therefore, those sorters remain exactly the same.\u00a0<\/p>\n<p>To alter sorters in the Hover condition:<\/p>\n<ol>\n<li>Head to the <strong>Style panel <\/strong>&gt; <strong>Effects<\/strong> &gt; <strong>Sorters<\/strong><\/li>\n<li>Tap the <strong>Mono<\/strong> sorter you configured previously<\/li>\n<li>Revise the <strong>Quantity<\/strong> to 0% (which restores the color to the Link blocks)<\/li>\n<li>Tap into the <strong>Intensity<\/strong> sorter<\/li>\n<li>Revise the Intensity <strong>Quantity<\/strong> back to 100%<\/li>\n<\/ol>\n<p>Hover across the Link blocks to witness these updated effects in motion.\u00a0<\/p>\n<h2>Incorporating transitions<br \/><\/h2>\n<p>Add a transition to smoothen the sorter effects between None and Hover conditions:<\/p>\n<ol>\n<li>Navigate to the menu in the <strong>Select<\/strong><strong>field<\/strong> and switch back to <strong>None<\/strong><\/li>\n<li>Visit the <strong>Style panel <\/strong>&gt; <strong>Effects<\/strong> &gt; <strong>Transitions<\/strong><\/li>\n<li>Tap the plus symbol and insert a <strong>Transition<\/strong><\/li>\n<li>Select <strong>Sorter<\/strong> from the <strong>Transition Type <\/strong>menu\u00a0<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9494d140dc3bde6345956_5fa354802447244feb1aa9ba_m0jagos1yr9ebvcd5bw8tynl5k9ms5z98xkzhroxdhyy0udyb5q_is_wq1azh2niaoyj_pre9b8pasvh1br_mwu7wkxrjfjfmeefee0f3ydi2lqqxncre559bh1htuom7jlse7_k.jpeg\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b9494d140dc3bde6345956_5fa354802447244feb1aa9ba_m0jagos1yr9ebvcd5bw8tynl5k9ms5z98xkzhroxdhyy0udyb5q_is_wq1azh2niaoyj_pre9b8pasvh1br_mwu7wkxrjfjfmeefee0f3ydi2lqqxncre559bh1htuom7jlse7_k\"><\/div>\n<\/figure>\n<p><\/p>\n<p>This will employ a transition to any sorter(s) you\u2019ve arranged to alter between the None and Hover conditions.\u00a0<\/p>\n<p>Experiment with the timing of the transition, and hover over the Link block to perceive the transition duration in motion. In this situation, the default of 200 milliseconds appears satisfactory.\u00a0Persist in adding sorters to elements within your project, and bestow your designs some supplementary interest and interactivity!\u00a0<\/p>\n<p>Explore more about <a href=\"https:\/\/help.webflow.com\/article\/states\">styling conditions<\/a> and refining the animation between conditions with <a href=\"https:\/\/help.webflow.com\/article\/transitions\">transitions<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create\u2008hover effects using filters","protected":false},"author":2,"featured_media":6380,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6379","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6379"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6380"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}