Streaming live at 10am (PST)

How to make a tab or Button out of elements to create click to reveal content

Hello! So I have this webflow project that I’m working on. I would like to make the photos at thebe such that when I click them, the larger square in the middle will change to show either another image, or section? I essentially want to click them and show information connected to the name of the section. Also, at the bottom of the site, do you see the other icons there? I want to be able to click any of them so that the original image is shown.

But I do not know how to do all of this without changing the appearance with tabs. Also, When I tried and used tabs for the photos at the top: I changed the background to be transparent, but when I changed the viewport to go to mobile, tablet, sideways phone, it no longer sized down properly anymore.

TDLR: I want to be able to click on icons to reveal more info. I want to do so in a way where when the viewpoint is changed, it can scale down properly.

Here is what they look like now when sized down:




Here is my public share link: LINK
(The Current Published site)

You should be able to do all of this with tabs. But instead of linking the tab to the section, you just add the content to the tab pane.

ok, I’ll try and to this tab thing again and see what changes.

@joejola Ok so I have made the top section into tabs.

Question 1: But How can i make the partnerships link to an external site instead of having a tab pane?(the fourth photo on the top right hand side) . Or maybe even have the Partnerships tab pane be pressed and a custom HTML code be executed?


Question 2: How can I make the tabs so that when the viewpoint is changed, It can decrease properly? I have photos of what it initially looked like before I changed the top to be all tabs. but now, when I switch to mobile, this is what it looks like:


Question 1: You will either need custom code or create a link block with absolute positioning to make it look identical to the tabs.

Questions 2: Simple layout configuration. See how I changed your tab links.

@joejola Okkkk so I have done the link block thing and the tab links (TYSM!!! :slight_smile: ) now, The only problem I am having right now, is when I put content in the tab. How can I make it such that the following is done:

  1. How can the initial photo in the center be seen without anyone clicking on a tab yet? (see below the problem of putting the content in the tabs)?
  2. How do I make it that when I click one of the tabs, this main picture in the back disappears? ( Instead of trying to fit the tab content over the first photo)?

When I tried to put the original photo into the first tab’s content to retrofit the positioning of the original photo, it shifted some of the elements like this:

When I go to the preview mode and click on the second tab ( this doesnt have content yet)

Styling:

  1. Vertically align Tabs and Tabs Menu
  2. Set each Tab Link padding to 10 px left and right
  3. Remove the Link Block and add a fourth Tab Link
  4. Follow this guide for adding custom code. This will allow you to set a Tab Link to an external URL

For content:

  1. Select the content you want, and paste it into the Tabs Pane. The Tabs Pane corresponds to each Tab Link

@joejola Thank you so much. here is the current read-only link: https://preview.webflow.com/preview/col-test-last-supper?utm_medium=preview_link&utm_source=designer&utm_content=col-test-last-supper&preview=b716117894205e48448bcfdaba32c82b&mode=preview. I was able to do the link block thing that you discussed earlier!

So now I am trying to put content in the tabs, but I am having the following problems:

  1. When I start changing the 'Tabs content, the ‘Partnerships’ photo shifts down. How can I fix this?
  2. Following my past question, how can I make it such that when people initially come to the site, you don’t see any of the tabs’ content?
  3. How can I make it so that when I put in content into the tab, It is within the size of the ‘Image 8’ size where the original “Colborare” photo is?
  4. When I try adjusting the size of the tab content, it doesn’t shrink properly, how can I fix this?( see photo pertaining to question 4 below).

Pertaining to question 1:

Pertaining to question 2

Pertaining to question 4