{"id":5036,"date":"2023-07-20T12:52:08","date_gmt":"2023-07-20T12:52:08","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5036"},"modified":"2025-02-17T11:53:34","modified_gmt":"2025-02-17T11:53:34","slug":"how-to-use-the-resource-library-with-filters-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-resource-library-with-filters-template\/","title":{"rendered":"How to use the Resource Library with Filters Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/9708d7a18e9e4482971ed4d5f134b3ff?sid=45255e0f-b273-43f4-8ce7-f9eb954938a7\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p>The <a href=\"https:\/\/iontemplates.rockcontent.com\/preview\/standard\/content-hub\/resource-library-with-filters\">Resource Library with Filters<\/a> quickstart is a gated content hub experience displays a variety of resources such as articles, videos, and free resources. Visitors are presented with a gated form in the hero section of the landing page and additional facts below displayed using reveals and micro animation. Upon completing the form, the experience becomes ungated and all resources are now visible. By default all assets are visible but visitors can explore by filtering and view only the assets that are checked off. This content hub encourages visitors to interact with the filters and view assets that relate to their search.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Content Hub<\/li>\n\n\n\n<li>Complexity: Medium<\/li>\n\n\n\n<li>Use case: Lead Generation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p>Here are the major features, abilities, and interactive elements used in this template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add choice<\/li>\n\n\n\n<li>Asset icon<\/li>\n\n\n\n<li>Background gradient<\/li>\n\n\n\n<li>Reveal animation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p>Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.<\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/drive\/folders\/1JCdiHqaXw-Vim3ASG2GWyKb70b48Guup?usp=share_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Add choice<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the column where you would like the new choice to be placed next too. Click the \u201c+\u201d icon and a new column will appear.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/M-X1t4XQAj9VYpoUUJ7PapvaWjr4cKGvmXq6QgC_UR8gBU-ljIzRMUy-GNfwULpRC734bW0VeWVKZdbOtmM3GWjANZS3QpevuGXlXcnRwqUCsdTPiehTO_8r9epmB4Q2cP0AgzjMEVfJzgFOHgvUILA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Adjust the column width by selecting the column and dragging either the left or right ends of the column. This will impact the other columns but if you want all columns to have the same width then navigate to the row level, select the grided boxes icon, adjust the column setting in each viewport.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/HQ0FgDKOVqfOnYZPoZ9Cu40bcKbmnMqFLE30Aj4nek_VFiyiXxRTwg4XF2RYwZ5mPTbpCYWu6m3oyaES9aUeXX5mSrdE1cta4ypNxMCc4-k4MdX50ItNlljZtUTJMjsDOuvjn8Kc43C8EUIYaH00UtQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Navigate to the Form panel and drag in a choice element. Place the choice inside the empty column.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/XTW9p_et3RF_QOkWVyco3HKWHzSRbcLODCYFXxWtTxNWFB4Ry135dtRoPa0yD68AQO3iuUeUffh0JfAce8Gte_6PMlZ5MSeqxjBhGlk8GcV50SGUme9WEIE8cg_1IP7RFqD2aeYpq-I71CsTli3OXe0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: With the new choice selected navigate to the Variables panel. Give the choice a Data Value and set the Default Selection to Selected.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/8H6T74xllp9ZTfMxYV0eYB8FD48t4eFmihmdlveVLdWoYfZB5Ay7_NKDyTaA8pltZiL8-YcWlXTY6qcimofwQLySnhA7kO7qkFqDQlewvzFIMagxGOGX2fp86YZW5w9ynxVN494UD_UskZj5FDQ07yg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 5: In the same Variable panel add a Form Submit Action. Under Go to Page, in the dropdown select the current page you\u2019re on, Click add a hashtag and set the hashtag as the anchor to the asset section. *Don\u2019t forget to add a tag.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/U9ct3epu4zow0v83lOT3thzkcXCdj2IavzznXo-dE95WzITv9NdD6KL5Pb_KSrleAVuGj1DNI6DyRkJdYhCKkwrAvBQdMlz-lvAmMtSvHM2bNPzuEx-LX6gwsZUgAXpwrISYLX14kObNHMVn701s6kg\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Asset Icon<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the icon and open the Text Editor. In the Text Editor select Standard Text, change the format to HTML at the bottom left of the Text Editor, and paste in the new HTML for the icon replacement. *Icons can be found on: https:\/\/fontawesome.com\/v4\/icons\/<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/KBixqhwpZBmyJcjO_JRhZ2MawrFISteL_8c2DQ81MGqwJ-XSkMcFh6-aOletcZrF-PyIKEk-BLM3Qwl_hOCafYOLOnKQ4g3xI3IfYlOH7ti_pIh5AumIUCn4-SOpHhKJ4rN4juhlAu7l8MH1xYfRRbE\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: You can update the color of the icon using the Micro-Themes in the right hand panel under the dropdown Color. You can update the spacing between the icon and the text next to it by navigating to the Layout panel under margin, either increasing or decreasing the value.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/I4zfFPbVYlBp49oFwh8Yhu1Zjl7t-W6lvVCGpuR9lPl_zzxTZk4o9YMQsW11ek8ACDiEiD4P8AERqTI3KRVwstb3Fp49ZbC5d7ak9HKC7ZeVsWp2-lVJpcJkvVGC0ewunzc3us_0BowZ5FvhU2qeMVI\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Background gradient<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the container within the background image container. Navigate to the Background panel. *If you use the arrow keys on your keyboard select the background image container, press the next arrow and that is the gradient background overlay container.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/Y4ymNl_Mmzi2raZVKVEUMVMluzQLysY_rvasdq5tRHQM9jwuw-zG0O44Ih90qwqyqJgRkB-wAC_8eExOw0iLPS0GF0AG6w-TPV6ZLz2bO4HtHpSYChKWjygF4gOHrUNP7npbywg-TV8bOddhxyK_yE0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Select the colors and adjust to your desired palette. When the color palette opens enter the hex code or choose using the color picker. Use the slider to adjust the opacity.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/s8EGa2li3tcZsKl7q2vomZL_qyOy-AOcE-PA2B0YZVqGRsH9exUrz-azaFqUTcOcEPf8A1vHgRx92snE4SNzPPFKLpM6xQnKEBVFTiqXeq8SYgYN5pCSgpOO82I0UGOyV3S7BCb6jQY_jl_VxVMEtmw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: In the same Background panel, you can adjust the gradient direction by selecting the different arrows under Gradient direction.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/KD2mq90LxpjsttOjDtHR4JhLQsxTQZzT77cAGFcKzYbZVmchHJuRlCHNgQfbfPt74vQrf7YpX5lvBylUXLmLbGm8CqmPSXrkoZl7BfnxhHXP96PxLNfyUeAXqrG0DX28Z_MLLlJnlEFexkVGsFiuOxg\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal animation<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the reveal container. Navigate to the Micro-Themes panel, select Reveal from the dropdowns. From the Reveal, there are 3 different transition drop-down you can choose from.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/BQ36tK7Vk0V58J86s9doPSDIPlft_TgouJ2vH8B7vUbk58kU5WLQ8q4flJMDo3QhnlZVvh0MlOaKtrH7TBJgo4C5XLZiHe-YnuKRc7LmdDTyWf3UPbehwNhIS5HMM1b4Ib3znhjQLt977cQ21iV83L8\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1m_neRY1ak96ng5ylkx43eWUFAdk-UedulpFGwPuYnBw\/edit?usp=sharing\">Here is the content structure\u2019s template<\/a> to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related templates<\/h2>\n\n\n\n<p>If you like this template, you might want to check out these other similar models.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/premium\/contenthub\/articles-hub\">Articles Hub<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/contenthub\/interactive-catalog\">Interactive Catalog<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/interactive-newsletter\/\">Interactive Newsletter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/content-hub\/interactive-toolkit\">Interactive Toolkit<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p>Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to <a href=\"mailto:help@ioninteractive.com\">help@ioninteractive.com<\/a>, so we can make sure to have this article constantly up to date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Resource Library with Filters quickstart is a gated content hub experience displays a variety of resources such as articles, videos, and free resources. Visitors are presented with a gated form in the hero [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5163,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5036"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5036\/revisions"}],"predecessor-version":[{"id":7513,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5036\/revisions\/7513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5163"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}