{"id":7062,"date":"2024-04-14T17:28:47","date_gmt":"2024-04-14T09:28:47","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7062"},"modified":"2024-04-14T17:28:47","modified_gmt":"2024-04-14T09:28:47","slug":"arrangement-and-design-compilation-pages","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/arrangement-and-design-compilation-pages\/","title":{"rendered":"Arrangement and design Compilation pages"},"content":{"rendered":"\n
\n

Whenever a fresh item is crafted (e.g., weblog entry, aid document, etc.) in a Compilation<\/a>, an automatic page is generated for it. Compilation pages function as blueprints – the structure and style of the Compilation page applies to all automatically generated item pages.<\/p>\n

Compilation pages are fundamentally models for recurring pieces of content, such as weblog entries, aid documents, or even landing pages.<\/p>\n

Within this tutorial, you’ll discover:<\/p>\n

    \n
  1. Ways to fabricate a Compilation page<\/li>\n
  2. Ways to incorporate and interconnect content<\/li>\n
  3. How to preview Compilation pages<\/li>\n
  4. How to direct to a Compilation page<\/li>\n
  5. Regarding Compilation page setups<\/li>\n<\/ol>\n
    \n
    \"A<\/div>\n<\/figure>\n

    Establishing a Compilation page<\/h2>\n

    Once a Compilation is established, a Compilation page will automatically be generated as well. This Compilation page can be selected by navigating to the Pages panel, <\/strong>and opting for it under the Compilation pages<\/strong> area. A violet icon adjacent to the Compilation page indicates that it’s a CMS-produced page.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    Including and linking content<\/h2>\n

    You can design and evolve the Compilation page just like any other static page\u2014but the strength of Compilation pages emerges when you intend to integrate dynamic content into that layout.<\/p>\n

    Incorporating static and dynamic elements<\/h3>\n

    Similar to with Compilation lists<\/a>, elements inserted into a Compilation page are fixed until they are linked to a field from the Compilation. You shape a Compilation page like any other page, yet the page acts as a model for all the Compilation items.<\/p>\n

    You can attach varied elements in your design to Compilation fields by following these steps:<\/p>\n

      \n
    1. Choose an element on the Compilation page<\/li>\n
    2. Tap the settings icon (or head to the Element Settings Panel \u2014 shortcut:D<\/strong>) \u00a0<\/li>\n
    3. Confirm Get content from Compilation<\/strong><\/li>\n
    4. Unfold the menu and pick the compilation field<\/strong> you wish to get content from<\/li>\n<\/ol>\n

      Once an element is receiving content from a field, it is not exclusive to that one item. This field is linked to the element across all item\u2019s pages in that Compilation.<\/p>\n

      \n
      \"Step<\/div>\n<\/figure>\n
      Insider tip
      <\/strong>Static elements possess blue outlines while dynamic elements, or elements containing data originating from the CMS, showcase purple outlines on the canvas.<\/h6>\n

      Viewing and swapping Compilation pages<\/h2>\n

      When you’re modifying a Compilation page, it seems as if you’re altering solely one of the items in the Compilation. In truth, you\u2019re modifying all other pages simultaneously because you\u2019re enhancing a template.<\/p>\n

      You can switch the content in the page to any Compilation item using the dropdown in the top bar. You can navigate to a distinct page by typing the name of the page in the search bar at the top of the Compilation pages dropdown or in the Quick find bar.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n
      Helpful shortcut keys<\/strong>
      Pressing Shift+Option (Shift+Alt on Windows) and tapping the left and right arrows on your keyboard will replace collection items to the next or previous item in the list.<\/h6>\n
      \n
      \"Three<\/div>\n<\/figure>\n

      Connecting to Compilation pages<\/h2>\n

      You can connect to a Compilation page from other Compilation pages or from a Compilation list. Pursue these steps to connect from a Compilation list:<\/p>\n

        \n
      1. Include a Compilation list<\/strong><\/li>\n
      2. Link it to a Compilation<\/strong><\/li>\n
      3. Incorporate a button<\/strong>, or any other link element to the Compilation list<\/li>\n
      4. With the link element chosen, hit the gear icon (or proceed to Element Settings Panel<\/strong>)<\/li>\n
      5. Opt for the purple Compilation page<\/strong> link choice<\/li>\n
      6. Select Current Item<\/strong><\/li>\n<\/ol>\n

        This will link every button in the Compilation list to its corresponding Compilation page produced for each item.<\/p>\n

        Insider tip<\/strong>:<\/strong> You can also attach any link element to a link field in the URL field<\/strong> kind of your link settings.<\/h6>\n

        Compilation page setups<\/h2>\n

        In the Compilation page configurations, you can define the SEO meta title & description, Open Graph title & description, RSS, and custom code for your Compilation page models. Yet, distinct from static pages settings<\/a>, Compilation page setups can hold dynamic values, signifying they lead to unique information.<\/p>\n

        For every individual page of the Collection.<\/p>\n

        Accessing the page settings of the Collection is possible by hovering over a Collection page template in the Pages panel, and clicking on the settings icon.<\/p>\n

        \n
        \"A<\/div>\n<\/figure>\n

        Overview<\/h3>\n

        To gain more control over the URLs and SEO of Collection item pages, you can include a Collection template page in a specific folder. By assigning a parent folder to a Collection template page, the Collection\u2019s item pages can be accessed through subdirectory URLs. For example, if a parent folder named “Content” and a Collection of blog posts are set, the URL could be “website.com\/content\/blog\/example-post.”<\/p>\n

        Follow these steps to set a parent folder for a Collection template page:<\/p>\n

          \n
        1. Navigate to the Pages panel<\/strong><\/li>\n
        2. Hover over the Collection template page and select the settings \u201ccog<\/strong>\u201d<\/li>\n
        3. Proceed to Overview<\/strong> > Parent folder<\/strong><\/li>\n
        4. Choose your parent folder from the dropdown menu<\/li>\n
        5. Click on Save<\/strong><\/li>\n<\/ol>\n
          Note: <\/strong>Assigning a parent folder to a Collection template page will not display the page under the folder name in the Pages panel.<\/h6>\n

          Publication Configuration<\/h3>\n

          The decision to publish Collection template pages along with your site is entirely up to you. This feature proves useful if there is a need to prevent Collection template pages from being live and indexed by search engines.<\/p>\n

          To activate publishing for Collection item pages:<\/p>\n

            \n
          1. Access the Pages panel<\/strong><\/li>\n
          2. Hover over the Collection template page and choose the settings \u201ccog<\/strong>\u201d<\/li>\n
          3. Navigate to Publication Configuration<\/strong><\/li>\n
          4. Toggle the switch to \u201con<\/strong>\u201d<\/li>\n<\/ol>\n

            To prevent the publication of Collection item pages:<\/p>\n

              \n
            1. Visit the Pages panel<\/strong><\/li>\n
            2. Hover over the Collection template page and select the settings \u201ccog<\/strong>\u201d<\/li>\n
            3. Go to Publication Configuration<\/strong><\/li>\n
            4. Toggle the switch to \u201coff<\/strong>\u201d<\/li>\n<\/ol>\n

              Dynamic SEO Customization<\/h3>\n

              Utilize Collection fields to define templates for page titles and descriptions. Furthermore, preview how they will appear in search engine results pages (SERPs).<\/p>\n

              For further details: <\/strong>Setting meta title and description<\/a><\/p>\n

              \n
              \"The<\/div>\n<\/figure>\n

              Dynamic Open Graph Customization<\/h3>\n

              This section allows you to define the content displayed when sharing links to Collection pages on various platforms. By utilizing Collection fields, unique Open Graph information is created for each page.<\/p>\n

              To know more: <\/strong>Setting Open Graph settings<\/a><\/p>\n

              \n
              \"The<\/div>\n<\/figure>\n

              RSS Feed Configuration<\/h3>\n

              Activating an RSS 2.0 feed for a Collection is possible within the Collection page settings. This allows the publication of a feed that RSS readers can subscribe to, providing updates whenever new Collection items are published.<\/p>\n

              \n
              \"The<\/div>\n<\/figure>\n

              Here, configure the feed settings using Collection fields to establish a dynamic template for the RSS channel title, description, and other configurations. Preview the feed directly within the page settings. Subsequently, you can copy the RSS URL for use with external applications or insert a link to it on your website.<\/p>\n

              Further information:<\/strong>RSS feeds<\/a><\/p>\n

              Personalized Code<\/h3>\n

              Incorporate specific code snippets<\/a> and scripts within the <head> or <\/head><body> tag of a Collection page template. These additions apply to all Collection pages. If the code includes data that should vary for each Collection item page, utilize Collection fields to substitute those values. Simply select the value and click on the purple <\/body> + Add Field<\/strong> option located at the upper right corner of the custom code text box.<\/p>\n

              Important to note<\/strong>
              Custom code and scripts will only be visible on the published site.<\/h6>\n
              \n
              \"The<\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Structure\u2008and\u2008style\u2008Collection pages that\u2008work like templates and automatically update your design.","protected":false},"author":2,"featured_media":7063,"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-7062","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\/7062","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=7062"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7062\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/7063"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}