{"id":5414,"date":"2024-04-14T11:38:37","date_gmt":"2024-04-14T03:38:37","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5414"},"modified":"2024-04-17T21:55:10","modified_gmt":"2024-04-17T13:55:10","slug":"homepage-customer-projects","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/homepage-customer-projects\/","title":{"rendered":"Homepage: customer projects"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Enhance the experience of your homepage by showcasing a compilation of customer projects from your CMS Collection data, which can be effortlessly updated in the future. Delight your visitors with a consistent layout, visual patterns, and flow in your design \u2014 and pave the way for success by establishing a Heading hierarchy. <\/p>\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\/64b94b7a88e591e7f60e1adb_602d6f6f951d6652160a6ad9_z7qtbrfiibzt-g3axnljcnealeaw8fbxmpbt22rmr5jrwwnvn8ib55lblynhhpev6poan0rvcv6advecwv36yroo9fpt4cyyjb2ojddpejhjcztknzlhy81hqhfweu69jsdasrjt.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1adb_602d6f6f951d6652160a6ad9_z7qtbrfiibzt-g3axnljcnealeaw8fbxmpbt22rmr5jrwwnvn8ib55lblynhhpev6poan0rvcv6advecwv36yroo9fpt4cyyjb2ojddpejhjcztknzlhy81hqhfweu69jsdasrjt\"><\/div>\n<\/figure>\n<p>Within this tutorial, you will master the incorporation of a CMS Collection into your project and the integration of its data into your visual design utilizing the following steps:<\/p>\n<ul>\n<li>Establish the framework<\/li>\n<li>Generate a CMS Collection<\/li>\n<li>Include a CMS item<\/li>\n<li>Import projects from CSV<\/li>\n<li>Develop the design<\/li>\n<\/ul>\n<p>Follow the instructions and <a href=\"https:\/\/webflow.com\/website\/uxportfoliocourse-homepage-clientproj\">access the resources<\/a> for this session.<\/p>\n<h2>Establish the framework<\/h2>\n<p>Let\u2019s introduce a <strong>Segment<\/strong> to exhibit customer projects on the homepage: <\/p>\n<ul>\n<li>Access the <strong>Navigator<\/strong><\/li>\n<li>Expand the <strong>Add panel<\/strong><\/li>\n<li>Drop a <strong>Segment<\/strong> into the <strong>Navigator<\/strong> and position it below the existing <strong>Segment<\/strong><\/li>\n<\/ul>\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\/64b94b7a88e591e7f60e1afe_602d6f70185349949f390052_nlrshf33_7eiqcj56usi3rlzt3cvvcws5qagscqakx_prq080t6ibsvybg6uvuh1idoo2r10njs6m3vbqh4fynb6khqofhaaoc2zc7y1mrrgnk34s9m6uxnkk-l429qm4_lmnekt.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1afe_602d6f70185349949f390052_nlrshf33_7eiqcj56usi3rlzt3cvvcws5qagscqakx_prq080t6ibsvybg6uvuh1idoo2r10njs6m3vbqh4fynb6khqofhaaoc2zc7y1mrrgnk34s9m6uxnkk-l429qm4_lmnekt\"><\/div>\n<\/figure>\n<p>Let\u2019s apply the existing \u201cSegment\u201d class to our new <strong>Segment<\/strong> to retain the 60 pixels of top and bottom padding previously styled: <\/p>\n<ol>\n<li>Access the <strong>Style panel<\/strong><\/li>\n<li>Enter the <strong>Selector field<\/strong><\/li>\n<li>Select \u201cSegment\u201d from <strong>Existing classes<\/strong><\/li>\n<\/ol>\n<p>Insert a <strong>Heading<\/strong> into our latest <strong>Segment<\/strong> and assign it as H2 since the initial, top-tier <strong>Heading<\/strong> is marked as H1: <\/p>\n<ul>\n<li>Launch the <strong>Add panel<\/strong><\/li>\n<li>Drag a <strong>Heading<\/strong> into the fresh <strong>Segment<\/strong><\/li>\n<li>Designate H2 as the heading type<\/li>\n<\/ul>\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\/64b94b7a88e591e7f60e1b11_602d6f71cb7e2ad315d413f3_arvgexjxr9swtzmui3lgyyt-zgzycp859lrtwceyqfuin6k7oxj6v8lydxt8wiqcn1v2e04ydcqfdkd4q94h6e7klqgzw_ruvfxqw1-vgh_-m60yvzd-vsxrlo96oxlqzwznfg47\"><\/div>\n<\/figure>\n<p>Modify the H2 text by double-clicking and entering the preferred heading (e.g., \u201cChosen projects\u201d) <\/p>\n<p>Let\u2019s duplicate the \u201cHeading\u201d class on the H2 to produce a new alternative heading class with distinct styles: <\/p>\n<ol>\n<li>Access the <strong>Style panel<\/strong><\/li>\n<li>Enter the <strong>Selector field<\/strong><\/li>\n<li>Select \u201cHeading\u201d from <strong>Existing classes<\/strong><\/li>\n<li>Click the \u201cHeading\u201d class and opt for <strong>Replicate class<\/strong> from the dropdown<\/li>\n<li>Revise the class name (e.g., \u201cSecondary heading\u201d) <\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b1e_602d6f706a224b2ff79b3005_d6a7e-dbokiljc6lskgimmols3t3wtxbqr4xseqsapuxj3-3ybuhg9zs1hn46uyupgdcxpygchradrbzzizjwzjmu0ip9mvcvtfwhkibhge5hyfylokvtzcnozhvv_wkj7-bmu5f.png\"><\/div>\n<\/figure>\n<p>Refer to the guidance on duplicating classes. <\/p>\n<p>Since the H2 should be smaller than your H1 for visual hierarchy purposes, let\u2019s reduce the font size on the new \u201cSecondary heading\u201d class: <\/p>\n<ol>\n<li>Access <strong>Style panel<\/strong> &gt; <strong>Typography<\/strong><\/li>\n<li>Adjust the font <strong>Size <\/strong>to 28 pixels<\/li>\n<\/ol>\n<p>To confine your H2 neatly within the new <strong>Segment<\/strong>, introduce a <strong>Container <\/strong>to the fresh <strong>Segment<\/strong> and nest the H2 within the <strong>Container<\/strong>:<\/p>\n<ol>\n<li>Expand the <strong>Add panel<\/strong><\/li>\n<li>Drop a <strong>Container<\/strong> into the recent <strong>Segment<\/strong><\/li>\n<li>Select the \u201cSecondary heading\u201d and place it inside the <strong>Container<\/strong><\/li>\n<li>Choose the <strong>Container <\/strong>and go to the <strong>Selector field<\/strong><\/li>\n<li>Select \u201cContainer\u201d from <strong>Existing classes<\/strong><\/li>\n<\/ol>\n<blockquote><p><strong>Note:<\/strong> When you assign a class to an element, all style adjustments made on that element are saved within that class. You can utilize the class on other elements to instantly apply the saved styles. <\/p><\/blockquote>\n<p>Insert a <strong>Paragraph<\/strong> into the <strong>Container<\/strong> and assign it a narrower maximum width: <\/p>\n<ol>\n<li>Open the <strong>Add panel<\/strong><\/li>\n<li>Under \u201cSecondary heading\u201d, drag a <strong>Paragraph<\/strong><\/li>\n<li>Access <strong>Style panel<\/strong> &gt; <strong>Size<\/strong><\/li>\n<li>Set <strong>Max W <\/strong>to 450 pixels<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1ad5_602d6f700bdc2c760b93175f_5toc7jlvhpd4f-znu9nghzcg33ivf9c34qdzf4zljcn-4indsblxinbjj9rdki8h9vfhzkfmgcliiq0a2jos08rruli4u8n4uuw8hxsggwxqbybhw1e782bpzmmbtook7_eapnm_.png\"><\/div>\n<\/figure>\n<p>Minimize the space between the \u201cSecondary heading\u201d and the <strong>Paragraph<\/strong>:<\/p>\n<ol>\n<li>Select the \u201cSecondary heading\u201d <\/li>\n<li>Expand <strong>Style panel<\/strong> &gt; <strong>Spacing<\/strong><\/li>\n<li>Decrease the bottom <strong>margin<\/strong> to 15 pixels<\/li>\n<\/ol>\n<p>Also, adjust the opacity of the <strong>Paragraph<\/strong>: <\/p>\n<ol>\n<li>Select the <strong>Paragraph<\/strong><\/li>\n<li>Open the <strong>Style panel<\/strong> &gt; <strong>Typography<\/strong><\/li>\n<li>Access the <strong>color picker <\/strong>and adjust the <strong>opacity<\/strong> to 60<\/li>\n<\/ol>\n<\/div>\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1af1_602d6f70951d66d4dd0a6b00_rickvus3rdtnesp-wk-dbej040dgpmxts13pef-gs8l_r5szv5bxdneex1olnfvyo3jalpusb-njuxteoxpnejugzveuvhw2tycfbey2h2qi3wtlobmwtyawq5zjc-p2d490xrp.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1af1_602d6f70951d66d4dd0a6b00_rickvus3rdtnesp-wk-dbej040dgpmxts13pef-gs8l_r5szv5bxdneex1olnfvyo3jalpusb-njuxteoxpnejugzveuvhw2tycfbey2h2qi3wtlobmwtyawq5zjc-p2d490xrp\"><\/div>\n<\/figure>\n<blockquote><p><strong>Information:<\/strong> Embed accessibility by utilizing the <strong>contrast checker<\/strong> for making color selections that are more accessible.\u00a0<\/p><\/blockquote>\n<p>Let\u2019s delete the 20-pixel top margin from our \u201cSecondary title\u201d to ensure consistent spacing among components:\u00a0<\/p>\n<ol>\n<li>Choose the \u201cSecondary heading\u201d\u00a0<\/li>\n<li>Access <strong>Style panel<\/strong> &gt; <strong>Spacing<\/strong><\/li>\n<li>Adjust the top <strong>margin<\/strong> to 0 pixels<\/li>\n<\/ol>\n<h2>Construct a CMS Collection<\/h2>\n<p>A CMS, known as a content managing system, allows us to configure a database for organizing various data types visually. This data, comprising client undertakings, blog entries, or menu listings, can significantly support the design process.\u00a0<\/p>\n<p>By linking segments of our design to our dataset (using placeholders), we streamline the process of creating designs that reflect our <strong>Grouping<\/strong> standards.\u00a0<\/p>\n<p>Introduce a <strong>Grouping Collection<\/strong> into our venture and formulate the layout to organize our data:\u00a0<\/p>\n<ol>\n<li>Open the <strong>Grouping panel<\/strong> positioned on the Designer&#8217;s left side<\/li>\n<li>Click on the \u201cEstablish Grouping Collection\u201d option<\/li>\n<li>Assign a name to your <strong>Grouping<\/strong> (e.g., \u201cTasks\u201d)<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1af8_602d6f70e2b946774ab3ec94_xuap-yfg4c-iqlir94rnzvjdjpnj8durbd949zsgsyjnly2q_h4rylimpau-knnyidjxgaoj_4i6kr2fsoe-kegicmo0je8xgprs5v4iqo7bjjqlr4xytml2o_dij3d_4__y_c0i.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1af8_602d6f70e2b946774ab3ec94_xuap-yfg4c-iqlir94rnzvjdjpnj8durbd949zsgsyjnly2q_h4rylimpau-knnyidjxgaoj_4i6kr2fsoe-kegicmo0je8xgprs5v4iqo7bjjqlr4xytml2o_dij3d_4__y_c0i\"><\/div>\n<\/figure>\n<p>Since each <strong>Grouping item<\/strong> contains the information for each client project that you plan to exhibit, you should define fields for all data categories you wish to monitor.<\/p>\n<p>Let\u2019s append our initial <strong>Grouping field<\/strong> to the <strong>Grouping<\/strong>:\u00a0<\/p>\n<ol>\n<li>Click on \u201cTitle\u201d underneath <strong>Essential details <\/strong>in <strong>Grouping fields<\/strong>\u00a0<\/li>\n<li>Modify the default text (e.g., \u201cTask title\u201d)\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1aa8_602d6f717d63951d90cc1a7f_jljjvgevygtk72xhodcbxdhulhsucdmvffmyb3x-76dj6d8wizxyge1gu3iwzegbc1bv5l9jvgnnbfso76fz8y8imbpbnitoarnsk5g8pa_s31wpbbbw4antvumii6fnttlwo1m9.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1aa8_602d6f717d63951d90cc1a7f_jljjvgevygtk72xhodcbxdhulhsucdmvffmyb3x-76dj6d8wizxyge1gu3iwzegbc1bv5l9jvgnnbfso76fz8y8imbpbnitoarnsk5g8pa_s31wpbbbw4antvumii6fnttlwo1m9\"><\/div>\n<\/figure>\n<p>We will include an additional 8 <strong>personalized<\/strong><strong>Grouping fields<\/strong>, each destined to hold unique data related to:\u00a0<\/p>\n<ul>\n<li>Patrons<\/li>\n<li>Task illustration<\/li>\n<li>Task shade<\/li>\n<li>Task category<\/li>\n<li>Task period<\/li>\n<li>Patron identity<\/li>\n<li>Task reference<\/li>\n<li>Various task illustrations<\/li>\n<\/ul>\n<p>Let\u2019s integrate the \u201cPatrons\u201d <strong>Grouping field<\/strong>, encompassing a succinct overview of the client:<\/p>\n<ol>\n<li>Click the <strong>Incorporate new field <\/strong>option<\/li>\n<li>Select <strong>Plain text<\/strong> as the <strong>Field category<\/strong><\/li>\n<li>Append a <strong>Title<\/strong> (e.g., \u201cConcise task description\u201d)<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b14_602d6f71b57c2f26e6fba9ce_faoq_ezsd3pxss-r7ql-_upawddjalsnuzgqhzxigbo3kw5ytlp_sbk3lnift2grfwafjmbysnjohrrbskbr9zqf9f-vsfnwggy_adq-b1g6gr2nosiulvpgea1tznjmurw7cfre.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b14_602d6f71b57c2f26e6fba9ce_faoq_ezsd3pxss-r7ql-_upawddjalsnuzgqhzxigbo3kw5ytlp_sbk3lnift2grfwafjmbysnjohrrbskbr9zqf9f-vsfnwggy_adq-b1g6gr2nosiulvpgea1tznjmurw7cfre\"><\/div>\n<\/figure>\n<p>Hit the \u201cGenerate collection\u201d button to produce and store this assortment.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1aac_602d6f719b560b1875837f5d_f0s85iwdindae80raofmg55lg2k-b_4ou8ufbgfye9whi6jbzgy_vyspmebue3os6einq4kc0kvbm8p7lpm3v4irautandvnpnxxs3m_uldshrw7e4qrdidczcyxtz_xge7yov-i.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1aac_602d6f719b560b1875837f5d_f0s85iwdindae80raofmg55lg2k-b_4ou8ufbgfye9whi6jbzgy_vyspmebue3os6einq4kc0kvbm8p7lpm3v4irautandvnpnxxs3m_uldshrw7e4qrdidczcyxtz_xge7yov-i\"><\/div>\n<\/figure>\n<h2>Include a CMS item<\/h2>\n<p>Once the \u201cGenerate collection\u201d button is pressed, a database is initialized where you are able to append a fresh project:\u00a0<\/p>\n<ul>\n<li>Utilize the \u201cNew project\u201d option to produce your primary project within your <strong>Collection<\/strong><\/li>\n<\/ul>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1ad8_602d6f72e2b9463b50b3ecb0_t7mesrnzhi61ki4uo8fns5b6k-l9c_fpg-toff6zkobburkaeyehkxnwoo13xqkg_gogpiat8omc_c4udsvga5nqtanjojwj7rdpdqs9qvonbcgob6vitdevmg8rteazfr6eq3vc.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1ad8_602d6f72e2b9463b50b3ecb0_t7mesrnzhi61ki4uo8fns5b6k-l9c_fpg-toff6zkobburkaeyehkxnwoo13xqkg_gogpiat8omc_c4udsvga5nqtanjojwj7rdpdqs9qvonbcgob6vitdevmg8rteazfr6eq3vc\"><\/div>\n<\/figure>\n<p>We should input details into the <strong>Collection fields<\/strong> we set up, which then appear in the corresponding project within our <strong>Collection<\/strong>:\u00a0<\/p>\n<ol>\n<li>Assign a name to the project in the \u201cProject name\u201d section (e.g., \u201cFinance app\u201d)\u00a0<\/li>\n<li>Attach a summary to the \u201cShort project description\u201d area (e.g., \u201cI collaborated with NewStar Dollars to devise UX designs for their upcoming finance app.\u201d)\u00a0<\/li>\n<li>Drop an <strong>Image<\/strong> into the \u201cProject image\u201d slot (e.g. \u201cGreen-mountain.jpg\u201d)\u00a0<\/li>\n<li>Paste the \u201cProject color\u201d(e.g., \u201c#6789ab\u201d)\u00a0<\/li>\n<li>Opt for the \u201cUI design\u201d preference from the \u201cProject type\u201d dropdown<\/li>\n<li>Include a \u201cProject year\u201d (e.g., \u201c2022\u201d)\u00a0<\/li>\n<li>Add a \u201cCustomer Name\u201d (e.g., \u201cNewStar Dollars\u201d)\u00a0<\/li>\n<li>Type or paste content into the \u201cProject details\u201d section (this can be placeholder text like Lorem Ipsum)\u00a0<\/li>\n<li>Integrate a \u201cProject link\u201d (e.g., \u201cyahoo.com\u201d)\u00a0<\/li>\n<li>Gather various <strong>Images<\/strong> into \u201cProject pictures\u201d (e.g., \u201cGreen-blue-shade.jpg,\u201d \u201cGreen-red-shade.jpg,\u201d \u201cGreen-valley.jpg,\u201d and \u201cColor-splash.jpg\u201d)\u00a0<\/li>\n<li>Hit \u201cGenerate\u201d to record the new CMS item<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1af4_602d6f7378ee4f768c7811a8_q4jxorsx6atdwcsk0ecrpyq3994fz_whd94nugwspxiof0tudrl5p1p3rgrubjm5nqzr-5wmabzjvay8k6_r5sgopbni5x_neic1fprma1q6u7jdsxc9-rssvse6c-7sqvjyop0a.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1af4_602d6f7378ee4f768c7811a8_q4jxorsx6atdwcsk0ecrpyq3994fz_whd94nugwspxiof0tudrl5p1p3rgrubjm5nqzr-5wmabzjvay8k6_r5sgopbni5x_neic1fprma1q6u7jdsxc9-rssvse6c-7sqvjyop0a\"><\/div>\n<\/figure>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1abf_602d6f72a4551f205a59739d_1pk4wv3jqr0wqnhf0nwggm5jd8ovnqyix52cjcyfp5ojo2vwdtzdb_ewi4hiexcv6cgliq__wzmjxsydi1mley8yrtuxluonkqd3deh6fmbpklhjevrxzzta3lhpqgl_mtuxaqrz.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1abf_602d6f72a4551f205a59739d_1pk4wv3jqr0wqnhf0nwggm5jd8ovnqyix52cjcyfp5ojo2vwdtzdb_ewi4hiexcv6cgliq__wzmjxsydi1mley8yrtuxluonkqd3deh6fmbpklhjevrxzzta3lhpqgl_mtuxaqrz\"><\/div>\n<\/figure>\n<h2>Bring in projects from CSV\u00a0<\/h2>\n<p>You have the option to manually enter this data for each additional project you wish to generate, but there exists a quicker method to achieve this.\u00a0<\/p>\n<p>If you possess all your desired data for the <strong>CMS Collection<\/strong> in CSV (comma separated value) form, you can directly import it into your <strong>Collection<\/strong>. To prevent making duplicate projects, it&#8217;s prudent to arrange the CSV file and eliminate the \u201cFinance app\u201d project you manually included during the preceding processes:<\/p>\n<ol>\n<li>Access the \u201cClient projects.csv\u201d file and erase the fifth row (e.g., the \u201cFinance app\u201d project)\u00a0<\/li>\n<li>Save the \u201cClient projects.csv\u201d file<\/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=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b08_602d6f73bcbc792dd30aa899_g1mn7rlmnfwis-9l5xgoo4jwp7-mgwz6jn5ni9ihqjg4japrvcx05vzlpcbe4n51mgqgrlu40dkn0kbmmuibaeonghzaet8gcjvag2t2a3xi217qwh_draf11erlglaefwlxwa5n.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b08_602d6f73bcbc792dd30aa899_g1mn7rlmnfwis-9l5xgoo4jwp7-mgwz6jn5ni9ihqjg4japrvcx05vzlpcbe4n51mgqgrlu40dkn0kbmmuibaeonghzaet8gcjvag2t2a3xi217qwh_draf11erlglaefwlxwa5n\"><\/div>\n<\/figure>\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1ab6_602d6f72d58a7702f1e97543_vot0tdj3g_0b0p182avysmewqr_oj7qv_zsmmly7ic5fk4k25cy5iffhy60m9v0rdjvcpfk4trxramftpwq8y_e9zugcqsvrocuz2yvfjwhkdkawupfzf6ux8cmq_nnr0kveauxo.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1ab6_602d6f72d58a7702f1e97543_vot0tdj3g_0b0p182avysmewqr_oj7qv_zsmmly7ic5fk4k25cy5iffhy60m9v0rdjvcpfk4trxramftpwq8y_e9zugcqsvrocuz2yvfjwhkdkawupfzf6ux8cmq_nnr0kveauxo\"><\/div>\n<\/figure>\n<p>Now that the CSV file is prepped, let\u2019s import its contents:<\/p>\n<ol>\n<li>Access your \u201cProjects\u201d <strong>CMS collection<\/strong> in Webflow<\/li>\n<li>Click on \u201cImport\u201d and drag your CSV file (e.g., \u201cClient projects.csv\u201d) into the Upload CSV overlay<\/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=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1ac2_602d6f72617d944272c4c8be_syeyhk9szrf9-sltqmtx5d4mi2uwfb5vhayavtvojqum1ffu_j3vcunajxwrueuj4gk3kgdjovrhwo6ovzv1gasd4pld3o6joip1fy0jveapowjf-5nqmfhw1goiplurvm5jtbwy.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1ac2_602d6f72617d944272c4c8be_syeyhk9szrf9-sltqmtx5d4mi2uwfb5vhayavtvojqum1ffu_j3vcunajxwrueuj4gk3kgdjovrhwo6ovzv1gasd4pld3o6joip1fy0jveapowjf-5nqmfhw1goiplurvm5jtbwy\"><\/div>\n<\/figure>\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1ac5_602d6f724516256736fcb677_xuwqgh_d7hpeotnkxmctdpzcervt-tnbw23ytwp_6_be6nlugndzvqlv_txtdrx_orfgf6gpnb8quob2eqefucgcer8ylpr4q-uzv1qbpsqtq_6t69w7qvudznufaysj9_2vdyi7.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1ac5_602d6f724516256736fcb677_xuwqgh_d7hpeotnkxmctdpzcervt-tnbw23ytwp_6_be6nlugndzvqlv_txtdrx_orfgf6gpnb8quob2eqefucgcer8ylpr4q-uzv1qbpsqtq_6t69w7qvudznufaysj9_2vdyi7\"><\/div>\n<\/figure>\n<p>Declare that the upper row in the CSV serves as the header and click on \u201cContinue.\u201d\u00a0<\/p>\n<p>Associate each of the field kinds to the material in your CSV:\u00a0<\/p>\n<ol>\n<li>Press the dropdown beside \u201cBrief description\u201d and select \u201cMap to existing field\u201d\u00a0<\/li>\n<li>Hit the \u201cSelect field\u201d dropdown and opt for \u201cBrief project description\u201d\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b18_602d6f7346ce57d3b872c9ca_r7kxdxj-1x4frlspdnycmwyf1hpgphb3stpi6k5dqjgshvemzk_8mwa1tpjq-omg9xzjubikzal7defi5k2zp_fgegcsvcrfcxleezeebwt5nev414toplqsnildu7hvi9jzxa8r.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b18_602d6f7346ce57d3b872c9ca_r7kxdxj-1x4frlspdnycmwyf1hpgphb3stpi6k5dqjgshvemzk_8mwa1tpjq-omg9xzjubikzal7defi5k2zp_fgegcsvcrfcxleezeebwt5nev414toplqsnildu7hvi9jzxa8r\"><\/div>\n<\/figure>\n<blockquote><p><strong>Reminder<\/strong>: In certain cases, fields might not align automatically with your imported CSV content if the CSV field isn\u2019t phrased precisely as in your Collection. In such instances, you can manually align your fields. Find additional information regarding importing Collection items.<\/p><\/blockquote>\n<p>Redo the previous 2 steps to align the remaining \u201cProject type\u201d and \u201cLink to project\u201d fields.\u00a0<\/p>\n<p>After aligning all fields, hit \u201cImport 3 projects\u201d to bring in all your CMS content and tap on \u201cClose\u201d once the process finishes.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94b7a88e591e7f60e1b21_602d6f74077eb17627976473_4zyxmrg5khr_axhkt23sm_cctwnnd5pn7aty0v-a0pm4mkodwfcajy7nl6boo_lmg-yk5ukljhq44k1iiuxwecg6zbavn4dicjscx6o2cbo3qxnmo8bhxgntyu4h0uruirrjtyit\"><\/div>\n<\/figure>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94b7a88e591e7f60e1abc_602d6f74b3d00c058cb2e8af_hxsgs75cuu140lnyzua2oypsfjr8oavd1eziyzvpebjhixw2ijqmftlsbqzpt8gexv83pyo5crjhr8molqjfldwj7htkudbnlbz7xpjs6xcx092vigoudpd19oog7ursbxytfsro\"><\/div>\n<\/figure>\n<blockquote><p><strong>Reminder: <\/strong>Simply tap on the \u201cpin\u201d symbol on the top right of your <strong>Collection<\/strong> to get a preview of specific fields you\u2019ve configured for your <strong>Collection <\/strong>data.\u00a0<\/p><\/blockquote>\n<h2>Develop the layout<\/h2>\n<p>Shut down the <strong>Collection<\/strong> to go back to your homepage and embark on designing with the data you\u2019ve included.<\/p>\n<p>We will utilize a <strong>Collection list<\/strong> to store that data, and we\u2019ll configure it to refer to the \u201cProjects\u201d <strong>Collection<\/strong> you recently established. Let\u2019s embed a <strong>Collection list<\/strong> onto your page:\u00a0<\/p>\n<ol>\n<li>Uncover the <strong>Add panel<\/strong><\/li>\n<li>Scroll through to <strong>CMS<\/strong><\/li>\n<li>Drop a <strong>Collection list<\/strong> into the <strong>Container<\/strong> and underneath the <strong>Paragraph<\/strong><\/li>\n<\/ol>\n<p>Once you insert a <strong>Collection list <\/strong>into your page, placeholder <strong>Collection items<\/strong> automatically pop up. To integrate your data into the placeholder <strong>Collection items<\/strong>, you initially need to connect the <strong>Collection list<\/strong> with your <strong>Collection<\/strong>:<\/p>\n<ul>\n<li>Select \u201cProjects\u201d (your <strong>Collection)<\/strong> as the <strong>Source<\/strong> in the <strong>Collection list<\/strong><strong>settings<\/strong> prompt<\/li>\n<\/ul>\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\/64b94b7a88e591e7f60e1b01_602d6f73587137f645db0f4d_suuoi843vo9pnpq9mnbugibyez2i4xame-wpkz_1ewqnajluqhqtoe8liz2su1mdomczyk5ybwxfclmu9ytv1trzzauamkq8ldzakstaxf-5mnhohwidrkym0hod26t-p7yup5n0\"><\/div>\n<\/figure>\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\/64b94b7a88e591e7f60e1ae7_602d6f74d58a775e80e9758e_98qiekdh3k1dntmn0gwa4zikndfqv4u9bjktidlftbepwkh_p8l7kwf14y8czcauwzapg6wwf8chhiuvzacxl0bkf7c6e1svcy8fwmcjtandgf5avpadqo9xgmiiqcwdxubfo7x0\"><\/div>\n<\/figure>\n<p>Let\u2019s insert components into our <strong>Collection list<\/strong> kicking off with a <strong>Heading<\/strong>:<\/p>\n<ol>\n<li>Launch the <strong>Add panel<\/strong> and drag a <strong>Heading <\/strong>into any of the <strong>Collection items<\/strong><\/li>\n<li>Transform the <strong>Heading <\/strong>into an H3 respecting the heading hierarchy<\/li>\n<\/ol>\n<p>We will witness \u201cHeading\u201d replicated four times on our page \u2014 one heading for every <strong>Collection item<\/strong>. Let\u2019s bind the <strong>Heading <\/strong> with the data in our <strong>Collection<\/strong> and observe our distinct information manifest:<\/p>\n<ol>\n<li>Press the settings of the <strong>Heading<\/strong> located under the cog icon<\/li>\n<li>Tick \u201cRetrieve text from Projects\u201d\u00a0<\/li>\n<li>Uncover the dropdown \u201cSelect field\u201d and opt for the field to associate with the <strong>Heading<\/strong> (e.g., \u201cProject name\u201d)\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b0b_602d6f73d58a7799c0e9758d_4jw6mxelhbi1gedacvfychso4fm2snnsg_16pnx3pa-reeeq43r24oynjyqdyqrly3-fgale_umqn2kvcm5b_23athcqss74cawpx6ax_tjsnqpjuro7eqc5dihk0kgbadk2nwfd.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b0b_602d6f73d58a7799c0e9758d_4jw6mxelhbi1gedacvfychso4fm2snnsg_16pnx3pa-reeeq43r24oynjyqdyqrly3-fgale_umqn2kvcm5b_23athcqss74cawpx6ax_tjsnqpjuro7eqc5dihk0kgbadk2nwfd\"><\/div>\n<\/figure>\n<p>Add a <strong>Paragraph<\/strong> inside the <strong>Collection list <\/strong>and associate it with our <strong>Collection <\/strong>data:\u00a0<\/p>\n<ol>\n<li>Access the <strong>Add panel<\/strong> and drag a <strong>Paragraph <\/strong>into any of the <strong>Collection items <\/strong>below the <strong>Heading<\/strong><\/li>\n<li>Tick \u201cRetrieve text from Projects\u201d\u00a0<\/li>\n<li>Launch the dropdown \u201cSelect field\u201d and opt for the field to connect with the <strong>Paragraph<\/strong> (e.g., \u201cBrief project description\u201d)\u00a0<\/li>\n<\/ol>\n<p>Integrate a <strong>Text block<\/strong> within the <strong>Collection list <\/strong>and tie it with our<strong>Aggregation <\/strong>information:\u00a0<\/p>\n<ol>\n<li>Initiate the <strong>Include panel<\/strong> and drag a <strong>Text module <\/strong>into any of the <strong>Collection objects <\/strong>above the <strong>Header<\/strong><\/li>\n<li>Verify \u201cObtain text from Projects\u201d\u00a0<\/li>\n<li>Initiate the \u201cChoose field\u201d dropdown and opt for the field to associate with the <strong>Text module<\/strong> (e.g., \u201cProject category\u201d)\u00a0<\/li>\n<\/ol>\n<p>Include another <strong>Text module<\/strong> into the <strong>Collection lineup <\/strong>\u2014 but this time we will not connect it to our <strong>Aggregation <\/strong>information:\u00a0<\/p>\n<ol>\n<li>Initiate the <strong>Include panel<\/strong> and drag a <strong>Text module <\/strong>into any of the <strong>Collection objects <\/strong>beneath the <strong>Text<\/strong><\/li>\n<li>Double-tap the <strong>Text module <\/strong>to modify the predefined text (e.g., \u201cInvestigate project\u201d)\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b0e_602d6f74b3d00c57fbb2e93c_mix9i3jhcxefrl6ln81z60lx1lmpoprwks_ab0_xbmpm_f5_5hah6xtllgevtte-vgcpervnozfv3c2hvu_9a2arwvuhd6zoc8cgumuake2a6yfmwi1oro2c6rl1qivxglpubpgi.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b0e_602d6f74b3d00c57fbb2e93c_mix9i3jhcxefrl6ln81z60lx1lmpoprwks_ab0_xbmpm_f5_5hah6xtllgevtte-vgcpervnozfv3c2hvu_9a2arwvuhd6zoc8cgumuake2a6yfmwi1oro2c6rl1qivxglpubpgi\"><\/div>\n<\/figure>\n<blockquote><p><strong>Indication: <\/strong>Upon altering any single <strong>Collection object<\/strong>, it influences all remaining <strong>Collection objects <\/strong>in the identical <strong>Collection lineup<\/strong>. Find out more about Collections.\u00a0<\/p><\/blockquote>\n<p>Let\u2019s enhance the appearance and introduce a <strong>Block divider<\/strong> to accommodate the 4 elements we previously inserted:\u00a0<\/p>\n<ol>\n<li>Pick the <strong>Collection object<\/strong><\/li>\n<li>Initiate the <strong>Include panel<\/strong> and drag a <strong>Block divider <\/strong>into any of the <strong>Collection objects <\/strong>above the initial <strong>Text module<\/strong><\/li>\n<li>Move the <strong>Text module<\/strong>, <strong>Header<\/strong>, <strong>Text<\/strong>, and last <strong>Text module<\/strong> into the <strong>Block divider<\/strong>\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b1b_6036a3aeb05e9e8403cc210f_hicv5wqpphqghvmtk08yt8ylxurc9tmu0mg16fu0mfzyzwtlstoq9_dmkqosdpas26xq5xd46ytdypncknajqzh-8dhq0zg6vu7ggi8ijajdtpo46dtqigxwrf7ruulzqdlov57l.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b1b_6036a3aeb05e9e8403cc210f_hicv5wqpphqghvmtk08yt8ylxurc9tmu0mg16fu0mfzyzwtlstoq9_dmkqosdpas26xq5xd46ytdypncknajqzh-8dhq0zg6vu7ggi8ijajdtpo46dtqigxwrf7ruulzqdlov57l\"><\/div>\n<\/figure>\n<p>\u200d<\/p>\n<p>Let\u2019s style our <strong>Collection objects <\/strong>according to each object\u2019s information from our <strong>Collection<\/strong>. In this instance, we\u2019ll adjust the background shade on the <strong>Block divider <\/strong>to utilize the color from our <strong>Collection<\/strong>:\u00a0<\/p>\n<ol>\n<li>Choose the <strong>Block divider<\/strong> and open the <strong>Element configurations <\/strong>on the right of your screen<\/li>\n<li>Verify \u201cObtain BG Color from Projects\u201d\u00a0<\/li>\n<li>Enter the \u201cChoose field\u201d dropdown and select \u201cProject shade\u201d<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b24_602d6f751853493a6839037c_afbphjtvasnklehlby5dfrs87ao-p4agpub_59nyyk6kessvsyromhnl7uocxaidruy4jea2p6euyu0tpkdev1ktslqkqpwbsnwyu92uezvc-wbouywayfoyqukzyojpnhwavhl.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b24_602d6f751853493a6839037c_afbphjtvasnklehlby5dfrs87ao-p4agpub_59nyyk6kessvsyromhnl7uocxaidruy4jea2p6euyu0tpkdev1ktslqkqpwbsnwyu92uezvc-wbouywayfoyqukzyojpnhwavhl\"><\/div>\n<\/figure>\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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1b05_602d6f75d0bf8b72397b7e94_qs0zqjlelk7kcpd3avleuyt1crdslxdbkz2b60cc6xadsouho37xjgv-lc1nrp3fmbnjuydc5zy8rb-aixjoy56ixivmfgzodcpzdffzevl0tzqu9nuk2b0tnd1nrtz6bxou1e3x.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1b05_602d6f75d0bf8b72397b7e94_qs0zqjlelk7kcpd3avleuyt1crdslxdbkz2b60cc6xadsouho37xjgv-lc1nrp3fmbnjuydc5zy8rb-aixjoy56ixivmfgzodcpzdffzevl0tzqu9nuk2b0tnd1nrtz6bxou1e3x\"><\/div>\n<\/figure>\n<p>Let\u2019s introduce space between each <strong>Collection object<\/strong> and incorporate some <strong>spacing<\/strong>:\u00a0<\/p>\n<ol>\n<li>Pick a <strong>Collection object<\/strong><\/li>\n<li>Initiate <strong>Design panel<\/strong> &gt; <strong>Void<\/strong><\/li>\n<li>Incorporate undermost <strong>spacing<\/strong> of 30 pixels<\/li>\n<\/ol>\n<p>Incorporate an <strong>Art piece<\/strong> to the <strong>Collection object<\/strong>:\u00a0<\/p>\n<ol>\n<li>Drag an <strong>Art piece<\/strong> from the <strong>Include panel <\/strong>into the <strong>Collection object<\/strong> beneath the <strong>Block divider<\/strong><\/li>\n<li>Verify \u201cObtain image from Projects\u201d in the Art piece settings modal<\/li>\n<li>Initiate the \u201cChoose field\u201d dropdown and opt for the field to associate with the <strong>Art piece<\/strong> (e.g., \u201cProject image\u201d)<\/li>\n<\/ol>\n<p>Let\u2019s utilize <strong>CSS lattice<\/strong> on our <strong>Collection object<\/strong> to arrange them in a more aesthetically pleasing manner:\u00a0<\/p>\n<ol>\n<li>Choose the <strong>Collection object<\/strong> \u2014 the root element of both the <strong>Block divider<\/strong> (containing all the data within it) and the <strong>Art piece<\/strong><\/li>\n<li>Initiate <strong>Design panel <\/strong>&gt; <strong>Layout<\/strong><\/li>\n<li>Arrange <strong>Manifestation<\/strong> to <strong>Lattice<\/strong><\/li>\n<\/ol>\n<p>By default, the <strong>Lattice <\/strong>presents 4 sectors \u2014 2 columns and 2 rows. Let\u2019s retract the lower row to design a 2-by-2 lattice:\u00a0<\/p>\n<ul>\n<li>Right-click the lower row and opt for \u201cRemove row\u201d\u00a0<\/li>\n<\/ul>\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\/64b94b7a88e591e7f60e1afb_602d6f75ca23ce5225d28e4c__xj-w_qwku1edmgeglrq4slqu9ulo58ubzb1v5lnsvxvdppwi9qy0_ivfujtekb6tk2sipvuq80xqujqqpyhnabmyzabho2t_dyw008jxahopjsvie1xn89nyk0j6t4eqqdi0ruq\"><\/div>\n<\/figure>\n<p>Let\u2019s eliminate the void between the lattice cells to create a parallel design:\u00a0<\/p>\n<ol>\n<li\tTake hold of and adjust the verge of one of the lattice cells to diminish the space between the cells to 0 pixels<\/li>\n<li>Tap \u201cConcluded\u201d to complete the adjustment of the <strong>Lattice<\/strong><\/li>\n<\/ol>\n<blockquote><p><strong>Indication:<\/strong> While your <strong>Lattice<\/strong> is chosen, you can also regulate the gap between lattice cells by selecting <strong>Edit lattice<\/strong> under <strong>Layout<\/strong> in the <strong>Design panel<\/strong>.<strong>\u00a0<\/strong><\/p><\/blockquote>\n<p>Let\u2019s push our text farther from the edges of our <strong>Block divider<\/strong> and incorporate some <strong>padding<\/strong>:\u00a0<\/p>\n<ol>\n<li>Pick the <strong>Block divider<\/strong> and unveil <strong>Design panel <\/strong>&gt; <strong>Void<\/strong><\/li>\n<li\tEscalate the <strong>padding <\/strong>to 30 pixels on all boundaries<\/li>\n<\/ol>\n<blockquote><p><strong>Indication: <\/strong>You can promptly contribute margin or padding to all boundaries of an element by holding <strong>Down<\/strong>, and pulling one of the <strong>margin<\/strong> or <strong>padding<\/strong> controls.<\/p><\/blockquote>\n<p>Select the <strong>Block divider<\/strong> and bestow it a distinct classification instead of its inherent \u201cBlock divider\u201d category (e.g.,\u201cDetails of the assignment\u201d)\u00a0<\/p>\n<p>Let\u2019s utilize <strong>Flexbox<\/strong> on our recently rebranded \u201cDescription of the assignment\u201d <strong>Container <\/strong>to enable us to organize our content in a horizontal or vertical manner \u2014 for this illustration, we are going to opt for a vertical layout:\u00a0<\/p>\n<ol>\n<li>Pick the \u201cDescription of the assignment\u201d <strong>Container<\/strong><\/li>\n<li>Access the <strong>Design panel <\/strong>&gt; <strong>Layout<\/strong><\/li>\n<li>Change the <strong>Display<\/strong> setting to <strong>Flex<\/strong> and adjust the <strong>Direction <\/strong>to <strong>Vertical<\/strong><\/li>\n<\/ol>\n<p>Additionally, let\u2019s utilize <strong>Flexbox<\/strong> to assist us in positioning the \u201cView project\u201d <strong>Text container <\/strong>towards the very bottom of the \u201cDescription of the assignment\u201d <strong>Container<\/strong> (its parent element):\u00a0<\/p>\n<ol>\n<li>Choose the bottom <strong>Text container<\/strong><\/li>\n<li>Open the <strong>Design panel <\/strong>&gt; <strong>Spacing<\/strong><\/li>\n<li>Change its top <strong>margin<\/strong> to Auto<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1aee_602d6f76b0df2d06e4304174_2qyjy3yri67mnoneb0q2izuyvewydiqls7e5cvn-p2inqmxdxt26x8hvuf7cndxbzl28ff5seu8iefmt787joe9ou-nvifqaosedawko8koqkmidcdc9rxglcmjlrfcyiifr3y2r.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1aee_602d6f76b0df2d06e4304174_2qyjy3yri67mnoneb0q2izuyvewydiqls7e5cvn-p2inqmxdxt26x8hvuf7cndxbzl28ff5seu8iefmt787joe9ou-nvifqaosedawko8koqkmidcdc9rxglcmjlrfcyiifr3y2r\"><\/div>\n<\/figure>\n<p>Choose the H3<strong> Title<\/strong> and assign a class as well as some styling:\u00a0<\/p>\n<ol>\n<li>Select any H3<strong> Title<\/strong> within your <strong>Group item<\/strong><\/li>\n<li>Enter the <strong>Selector<\/strong> area and allocate a class (e.g., \u201cPreview of project name\u201d)\u00a0<\/li>\n<li>Access the <strong>Design panel<\/strong> &gt; <strong>Typography<\/strong> and modify its <strong>font <\/strong>(e.g., \u201cDM Serif Display\u201d)<\/li>\n<li>Adjust its <strong>weight<\/strong> to 400<\/li>\n<li>Reduce the <strong>font size<\/strong> to 20 pixels<\/li>\n<\/ol>\n<p>Let\u2019s decrease the transparency of the upper <strong>Text containers<\/strong>:\u00a0<\/p>\n<ol>\n<li>Pick any upper <strong>Text container<\/strong> within your <strong>Group item<\/strong><\/li>\n<li>Open the <strong>Design panel<\/strong> &gt; <strong>Typography<\/strong><\/li>\n<li>Click on the <strong>color picker<\/strong> and reduce the <strong>opacity<\/strong> to 63<\/li>\n<\/ol>\n<p>Select the <strong>Text section <\/strong>within your <strong>Group item <\/strong>and iterate the prior 2 actions to also diminish its transparency to 63.\u00a0<\/p>\n<p>Access the <strong>Selector area<\/strong> and rename the default class of the <strong>Text section<\/strong> (e.g., \u201cPreview of project type\u201d).\u00a0<\/p>\n<p>Also, tweak the appearance of our <strong>Grid <\/strong>to refine the layout:\u00a0<\/p>\n<ol>\n<li>Pick the <strong>Group item<\/strong><\/li>\n<li>Press \u201cModify grid\u201d\u00a0<\/li>\n<li>Adjust the FR (fraction units) of the <strong>Grid <\/strong>to .8FR<\/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-s3.tenten.co\/2024\/04\/64b94b7a88e591e7f60e1aeb_602d6f76077eb13826976653_aax1zsrfqdpw7yly5yawrcqp8nbkym_t4cyexlfd08c3nzk_ge84prv55rakvm9ncq7oi1szbru4ra9kcrnvbpd8n8dt1ehewymyqa3iwhxetrlipljuqb_1n1lfsxhhj9o7ttrr.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1aeb_602d6f76077eb13826976653_aax1zsrfqdpw7yly5yawrcqp8nbkym_t4cyexlfd08c3nzk_ge84prv55rakvm9ncq7oi1szbru4ra9kcrnvbpd8n8dt1ehewymyqa3iwhxetrlipljuqb_1n1lfsxhhj9o7ttrr\"><\/div>\n<\/figure>\n<blockquote><p><strong>Reminder: <\/strong>You can precisely adjust the FR units of your <strong>Grid<\/strong> by clicking onto the row or column header of the grid cell and inputting your specific FR value.\u00a0<\/p><\/blockquote>\n<p>Lastly, ensure proper organization of classes and assign a class to the bottom <strong>Text container <\/strong>(e.g., \u201cText for button\u201d).\u00a0<\/p>\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\/64b94b7a88e591e7f60e1adb_602d6f6f951d6652160a6ad9_z7qtbrfiibzt-g3axnljcnealeaw8fbxmpbt22rmr5jrwwnvn8ib55lblynhhpev6poan0rvcv6advecwv36yroo9fpt4cyyjb2ojddpejhjcztknzlhy81hqhfweu69jsdasrjt.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94b7a88e591e7f60e1adb_602d6f6f951d6652160a6ad9_z7qtbrfiibzt-g3axnljcnealeaw8fbxmpbt22rmr5jrwwnvn8ib55lblynhhpev6poan0rvcv6advecwv36yroo9fpt4cyyjb2ojddpejhjcztknzlhy81hqhfweu69jsdasrjt\"><\/div>\n<\/figure>\n<p>Excellent job \u2014 showcase those projects you have!\u00a0<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Showcase a consistent layout of your client projects with the help of a CMS Collection.","protected":false},"author":2,"featured_media":5179,"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":[306],"tags":[],"class_list":{"0":"post-5414","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-kb","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5414","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=5414"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5414\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5151"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}