--- title: "(Collections) Granted Assets: Show assets granted to users" slug: "collections-granted-assets-show-assets-granted-to-users-1" description: "Discover how to use the Granted Assets element to dynamically display assets granted to users, such as digital downloads or course materials, and customize its layout for an engaging user experience." tags: ["granted assets", "collection", "digital assets"] updated: 2025-02-10T19:29:23Z published: 2025-02-10T19:29:23Z canonical: "support.myclickfunnels.com/collections-granted-assets-show-assets-granted-to-users-1" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # (Collections) Granted Assets: Show Assets Granted to Users The **Granted Assets** element allows you to dynamically display resources such as digital downloads or course materials that have been granted to users. This ensures your audience can easily access their purchased or assigned assets directly from your pages. In this article, we’ll cover how to add the element, customize its appearance, and explore the ideal pages for its use.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(402).png) --- ## Requirements - An active ClickFunnels account - [Granted digital Assets](/v1/docs/how-to-upload-and-deliver-digital-downloads) --- ## **Where You Can Use The Granted Assets Element** The **Granted Assets** element is versatile and can enhance the user experience on various page templates: - [**Custom Customer Center Dashboard**](/v1/docs/customer-center-explained-setup-and-management): Create a centralized area where users can locate and download their granted assets. - [**Course Pages**](/v1/docs/getting-started-with-courses): Display resources as part of a course experience, including **Course Home Pages**, **Module Templates**, or **Lesson Template Pages**. This is particularly effective for sharing additional learning materials alongside lessons or modules. > [!WARNING] > **Important** > > Users can only view granted assets if they have been properly assigned access. For more guidance on managing and delivering digital assets, check out these related articles: > > - [How to Upload and Deliver Digital Downloads](/v1/docs/how-to-upload-and-deliver-digital-downloads) > - [How to Manually Grant Digital Assets to Contacts](/v1/docs/how-to-manually-grant-digital-assets-to-contacts) --- ## Adding The Granted Assets Element in a Course 1. Navigate to the **Courses** app from the left-side menu. 2. Select the course you want to edit. 3. Click **Customize** to access the course editor. 4. You can display granted assets in the following locations: 1. **Course Home Page:** Select **Course Home** from the left sidebar to customize the main course overview page. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-FY252ITM.png) 2. **Default Module Page and Default Lesson Page:** Switch to the **Templates** tab, then select either the **Default Module Page** or **Default Lesson Page** to edit and add the element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-PJGF8IJ5.png) 5. Click **Add Element** in the desired row to open the **Elements** menu. 6. Scroll to the **Collections** section and select the **Granted Assets** element.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(403).png) 7. Next, you will be prompted to select the number of **columns** you want to add inside the container. 8. Add dynamic details such as **Download Title**, **Image**, and **Link**, which automatically pull data from your asset settings to keep your page updated. You can include the following elements: 1. **Download Title**: Displays the name of the granted asset. 2. **Download Link**: Provides a clickable link for users to download the asset. 3. **Download Image**: Adds a thumbnail or visual representation of the asset.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(404).png) 9. Click on each element to access its settings. Adjust fonts, colors, spacing, and layout to match your page’s design for a cohesive look. --- ## Adding The Granted Assets Element in The Customer Center 1. Navigate to **Site & Blog** in the left-hand menu and select **Customer Center**. 2. Click **Customize** to open the editor. 3. Choose the section where you want to add the **Granted Assets Element**. 4. Click **Add Element** in the editor’s sidebar. 5. Scroll to the **Collections** section and select the **Granted Assets Element**. 6. Next, you will be prompted to select the number of **columns** you want to add inside the container. 7. Add dynamic details such as **Download Title**, **Image**, and **Link.** 8. Click **Save** and then **Update Customer Center** to apply your changes. --- ## Customizing The Granted Assets Element ### Accessing Settings When you hover over a collection element, its border will be highlighted in magenta. To access its settings, click on the **g****ear** **⚙️ icon** or click directly on the element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1732028378098.png) ### Top Margin ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1751891362357.png)The **Top Margin** setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the **Body** will be the parent. You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (`px`) or percentage (`%`) to create consistent spacing across screen sizes. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748441653595.png) ### Collection Settings ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-HLHJSWMM.png) The Collection Settings let you configure how grid items (cards) are arranged and paginated inside the container. - **Items Per Row**: Choose how many items appear on each row of the grid. The layout will wrap to new rows and adapt on smaller screens automatically. - **Items Per Page**: Set the total number of items rendered on a single page in the container. If the collection has more than this number, ClickFunnels creates additional pages. - **Hide pagination**: Turn pagination on or off. When enabled, page-number controls are removed and all eligible items render in one continuous list. For very large collections, consider leaving pagination on to improve load time and navigation. - **Pagination Item Color**: Color of the pagination items’ text/icons (e.g., the numbers 1, 2, 3). - **Pagination Item Background Color**: Background color for non‑active pagination items. - **Pagination border color**: Border color around each pagination item. - **Pagination Active Item Color**: Text/icon color for the current (active) page item. - **Pagination Active Item Background Color**: Background color for the active page item. - **Pagination Active border color**: Border color for the active page item. > [!TIP] > Tips: > > For accessibility, use pagination colors with sufficient contrast so page numbers remain easy to read. ### **Advanced Settings** ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748535637061.png) To further customize your container (section, row, column, and element), ClickFunnels provides **Advanced** settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details: - [**Advanced Settings - Customize Styles**](/v1/docs/advanced-settings-customize-styles): Learn how to populate contents dynamically, position containers, and apply z-index. - [**Advanced Settings - Customize Animation**](/v1/docs/advanced-settings-customize-animation): Learn how to add animations, control entry and exit effects, and adjust animation delay. - [**Advanced Settings - Customize Logic**](/v1/docs/advanced-settings-customize-logic): Learn how to apply conditional logic to elements and add custom attributes. ### **Control Panel** The **Element Control Panel** appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(47).png) - **ALL**: The element will be visible on all devices (desktop, tablet, and mobile). - **Desktop Icon**: The element will only be visible on the desktop view. - **Mobile Icon**: The element will only be visible on mobile view. - **Eye Icon**: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors. - **Code Icon**: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling. - **Trash Icon**: Removes the element from the page editor entirely. ## Related - [How to Customize the Store Product Page](/how-to-customize-the-store-product-page.md) - [How to Customize the Store Collection Page](/how-to-customize-the-store-collection-page.md) - [How to Create a Store Upsell in the Store App](/how-to-create-a-store-upsell-in-the-store-app.md) - [How to Create and Manage Products](/how-to-create-and-manage-products.md) - [How to Create and Manage Orders](/orders-how-to-manage-orders.md)