{"id":6583,"date":"2024-04-14T15:43:19","date_gmt":"2024-04-14T07:43:19","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6583"},"modified":"2024-04-14T15:43:19","modified_gmt":"2024-04-14T07:43:19","slug":"introduction-to-the-webflow-cms","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/introduction-to-the-webflow-cms\/","title":{"rendered":"Introduction to the Webflow CMS"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">A content management system (CMS) is a platform where dynamic content is stored and managed on a website. Dynamic content, which refers to content that changes, can be incorporated into the site design. Any updates or changes made to the content in the CMS by you or a team member will be instantly reflected on all pages where it&#8217;s used.<\/p>\n<p id=\"\">This tutorial will cover:<\/p>\n<ol id=\"\">\n<li id=\"\">The process of organizing dynamic content in the CMS<\/li>\n<li id=\"\">Integrating dynamic content within your website<\/li>\n<li id=\"\">Modifying dynamic content<\/li>\n<\/ol>\n<h2 id=\"\">Organizing Dynamic Content in the CMS<\/h2>\n<p id=\"\">The initial step involves creating a <a href=\"https:\/\/help.webflow.com\/article\/cms-collections\" id=\"\">Collection<\/a>. A Collection stores dynamic content in Collection items, allowing you to reference this content across your website.<\/p>\n<p id=\"\">Each Collection is designated to store a specific type of content. For example, you can establish Collections for blog posts, team members, job listings, recipes, or any other content you prefer. Each Collection consists of Collection items \u2013 representing individual instances like a single team member in a &#8220;Team members&#8221; Collection.<\/p>\n<p id=\"\">Collections offer an efficient method of storing and managing consistent content structure.<\/p>\n<h3 id=\"\">Defining Collection Fields<\/h3>\n<p id=\"\">When setting up a Collection, you determine the structure for each Collection item within it. For instance, when creating a Collection for &#8220;team members,&#8221; you might include fields for name, picture, and email. Each type of content corresponds to a Collection field \u2013 for instance, a plain text field for names, an image field for pictures, and an email field for addresses.<\/p>\n<p id=\"\">It&#8217;s possible to update or delete Collection fields, as well as the content within them, at any point.<\/p>\n<p id=\"\">Explore more about utilizing Collection fields for organizing Collections.<\/p>\n<h3 id=\"\">Creating Content<\/h3>\n<p id=\"\">Once the Collection fields are in position, you can commence creating Collection items. Each Collection item serves as a distinct segment of content within the Collection.<\/p>\n<p id=\"\">For example, following the creation of your &#8220;Team members&#8221; Collection, you can start inputting content for each team member. Within each Collection item (i.e., each team member), you&#8217;ll complete the predefined Collection fields (such as name, picture, and email address).<\/p>\n<h6 id=\"\"><strong id=\"\">Pro tip:<\/strong> For importing numerous Collection items simultaneously, consider using a CSV file.<\/h6>\n<p id=\"\">Learn further about creating and structuring Collections.<\/p>\n<h2 id=\"\">Incorporating Dynamic Content in Your Website<\/h2>\n<p id=\"\">After forming your Collection structure and adding Collection items, you can include that dynamic content on your website. This can be achieved through two methods: utilizing a Collection list or designing a Collection page.<\/p>\n<figure id=\"\" 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 id=\"\"><img decoding=\"async\" alt=\"A diagram displays the two ways to add dynamic content to your Webflow project. The two main elements from which Profile cards stem from are A Collection List or a Collection Page.\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94c5f2463a29b9b995e97_64a74313bed7a180f14c2678_-ii9gi151rajhg5qawmpwp_zmobv9yhiwbky59zbe1qa4wh6rhfjlhzlbe0pbfe-h2j59y9rnztsaz0gwke6tx59t-9gy0jt8skxbnar5vf2fnr2f-dubfamlabda76uw76q9jhbrlfqauapbgvvd6.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94c5f2463a29b9b995e97_64a74313bed7a180f14c2678_-ii9gi151rajhg5qawmpwp_zmobv9yhiwbky59zbe1qa4wh6rhfjlhzlbe0pbfe-h2j59y9rnztsaz0gwke6tx59t-9gy0jt8skxbnar5vf2fnr2f-dubfamlabda76uw76q9jhbrlfqauapbgvvd6\"><\/div>\n<\/figure>\n<h3 id=\"\">Displaying Collections<\/h3>\n<p id=\"\">Using the Collection list element, you can showcase dynamic Collection content on any page of your site, including static pages like the homepage. It allows you to specify which items are displayed, apply filters or conditional visibility based on field values, and organize the content.<\/p>\n<h3 id=\"\">Designing Collection Pages<\/h3>\n<p id=\"\">For each Collection item in your Collection, a Collection page is automatically generated. Consider a Collection page as a universal design template for all Collection items \u2013 the design you craft on the Collection page is applied to each item in your Collection.<\/p>\n<p id=\"\">When customizing a Collection page, you can integrate dynamic content by referencing Collection fields. Any changes made to the design or dynamic references of a Collection page will reflect across all Collection pages associated with items in that Collection.<\/p>\n<h6 id=\"\"><strong id=\"\">Note:<\/strong> Elements placed on a Collection page remain static until they are linked to Collection fields.<\/h6>\n<h2 id=\"\">Modifying Dynamic Content<\/h2>\n<p id=\"\">Content within your Collection can be altered or expanded at any moment. This can be executed from either the Designer or the Editor.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"The Webflow CMS gives you full control over your content structure and how content is designed throughout your site.","protected":false},"author":2,"featured_media":6584,"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":[300],"tags":[],"class_list":{"0":"post-6583","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6583","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=6583"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6583\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6584"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}