CMS connected elements

Design help CMS
1

Hello everyone,

I’m asking for your help because I’m designing my portfolio. To do this, I’m creating a website, including a home page, pages specific to my projects, and an about page. My problem is with my home page and my project pages. Indeed, to be able to display my work on my portfolio, I used a CMS, allowing me to “automate” the content of my projects (images, explanatory texts…). To understand my problem, here are some details on what I’d like to do:

For my home page (see cf 1):
I made a grid (2x2) in CMS, to put the “cover” of each project. When the user moves his mouse over a project, an information banner, containing the project name and its nature, appears in hover, for more detailed access to the project in question.

My problem :
As soon as I hover my mouse over an image, all the information banners appear, whereas I’d like only the banner for the project in question to appear. This is due to my CMS, which applies every parameter (class, interactions…) to all my projects. I don’t know how to “individualize” my information banners for each project?

For my project pages (see cf 2):
For each project, I’d like there to be a dedicated page, with photos and explanations of my projects (each page being in CMS).

My problem :
It’s linked to the problem I encountered with my home page. Indeed, when I assign an image pattern to present my project (for example, one large image, then 2 small ones side by side…), this pattern is replicated on all my other project pages. I know that since I’m using the CMS, everything is replicated, but I’d like to be able to change this pattern according to my projects, and not have everything linked. The same applies to interactions. For example, on one project page, I want to show the logo I’ve made by rotating it (so far, I’ve managed to do this), but this interaction is applied to all my other project pages when I don’t want it to be (cf 2). What can I do?

I thank you for your help, and please feel free to look at the photos in cf, to better understand what I’m talking about.
If you have any questions or misunderstandings, please don’t hesitate.
Thank you very much.

cf 1 :

Capture d’écran 2024-02-23 à 17.24.05
Capture d’écran 2024-02-23 à 17.24.051496×816 158 KB

cf 2 :

Capture d’écran 2024-02-23 à 17.20.52
Capture d’écran 2024-02-23 à 17.20.521792×882 106 KB

Capture d’écran 2024-02-23 à 17.21.25
Capture d’écran 2024-02-23 à 17.21.251612×597 51.7 KB

Here is my public share link: [LINK][1]
([how to access public share link][2])

2

Yes you can isolate interactions and modals to collection list items.

A CMS template page is designed once and shared across every item page.

ALL of the differences you can have at the per-item-page level exist from only 3 things;

  • The content you have stored in each item
  • Conditional visibility of elements, which is controlled by the content you have stored in each item
  • Custom code, which can make other changes depending on e.g. the item slug to identify individual items
3

Thank you for your reply.
So I can’t change the structure of my project pages?
Is it possible to apply interactions only to one element of my project page (still in CMS) and not to the others?

4

Not natively. You create variations with conditional visibility.
In situations where I need variation, I design 3 or 4 layout variants and build them into the collection page, some details here-

In more complex situations ( rare ), I’ll create the template-variants as static pages and then build a reverse proxy to stich them together. This gives some advantage to the designer experience, since each page design can be managed independently, and that makes it much easier to create 20 or 30 layout variations.

5

Thank you very much, I’m a bit lost, but I’ll look at the data you’ve sent me and hope to come up with a conclusive result.
Thank you very much.