I’ve inherited a site, starting out it only needs a few minor changes, and I was knocking those out left and right today, but now I’ve finally arrived at the time where I need to read the directions.
I’ve included the read only site link below, the page that I’m struggling with is the North Carolina Holiday Flotilla | Holiday Flotilla At Wrightsville Beach page. As you click on the different sponsorship levels, associated images populate the left side of the screen, it doesn’t look like they’ve used flex boxes, just a ton of near random grids and columns. I was moving along with no problems, switching out last year’s logos for generic “your logo here” place holders, until i arrived at the admiral sponsor who’s hidden boxes weren’t linked to its Header title.
I can see the images in the navigator, but most of the “toggles” don’t have any individual names, it does look like I can possibly drag them around but I don’t feel like breaking something.
Another questions is why some of the “your logo here” place holder images are happy being set to an AUTO sized dimension, but the other containers had to be manually dragged to reach a similar size and did not want to be reset to an auto setting. (I’m guessing there was a setting chosen upon their creation that is determining this.)
If someone could direct me to the appropriate tutorials, and offer any other advice (such as delete the god forsaken pre-existing grid and start over with flex boxes or what have you), it would be MOST appreciated.
Special Note, those toggling headers don’t appear in the Preview mode, only if you visit the live site, that link again! http://ncholidayflotilla.org/sponsorship
Honestly, this seems to be a fairly large adjustment, if you’re not re-creating? I would definitely start from scratch and replicate, rather than fixing/redo. If that’s what you’re asking.
Trying to figure out how and what can get really long. Not sure what the goal is.
Thanks for your answer, yeah not necessarily trying to redo the website at this early juncture, just need to know what tutorials deal with the grid toggling functions, I have the tutorial on grids loaded up (having a personal playback issue right now with youtube), but like the title says, I just need to know what tutorials deal with the toggling features (clicking on the header titles and the images populate to the left).
I was under the impression you couldn’t import non-webflow websites into webflow, regardless of that question/answer, yes this was created in webflow.
gary, i appreciate the response, but my whole point of posting is to find out what tutorials deal with the grid / toggling features I’m describing, I’m familiar with the entire video course load start page. I’ve worked with webflow in the past, and I’m already good to go with quite a bit of interface, and I’ve already knocked out a ton of changes already.
Maybe these can help. In general, I understand what you’re trying to do. And this is going to require many interaction sets. I’ve searched and couldn’t find this specific functionality, mainly because it’s going to be a unique situation.
If I understand, when you say “Grid Toggling”, you mean - click a text/button and show an image?
Do you mind sharing a visual graphic or outline on what you’re trying to layout. Is text on left, vertically aligned, images pop out right?
What is supposed to look like, on the example site it’s only accordions?
Yeah thanks, in my original question (that i’ve quoted above), if you visit that page link, and click on a title (on the right) images will appear on the left (in (grid containers), that correspond to that title, they are linked by a toggle function, the action does not work in preview mode you have to go to the website.
From what I can see at the site code, that toggle functionality implemented by using custom code and inside the Designer it is really hard to understad what content belongs to which toggle.
Did you consider using native Tabs component for re-creating same functionality? I think it would make your work much easier.
I’ll look into those Native Tabs, also having general connectivity issues today
I was able to figure out what containers went with what titles (they aren’t in any order for some happy reason),
but they are labeled.
Unfortunately, I can’t access the forums right now because of my connectivity issues, otherwise I’d check this next question before I’d ask it.
I saw after clicking the < > at the top of the designer the window with code for the page, but how do I access the code so I can just copy what the other title toggles are doing and apply that to the single title that wasn’t assigned any containers?
I don’t think that if I change that code in that < > window it affects the live site, I thought it was just for export purposes.
Yes, @SomeHack, I have the same connectivity problems.
You are right, <> button is only for exporting code purposes.
I assume that custom jQuery code have been added on the “Custom Code” tab in the project settings (sorry can’t provide screenshot just now).
