Change BG Color of slide in frame?

Hi, i’m rebuilding a site in Webflow that was custom coded for my company so that I can change things quicker and easier on my end.

Anyways, there’s a couple pieces of the site that are a bit complex, one of them is our “review slider” on the landing page. It’s basically a slider full of reviews, but the slider that is in the “number 1 position” gets a different background color.

Here’s what that looks like: https://socialflight.co, just scroll towards the bottom until you hit the sliding reviews.

Trying to figure out how to rebuild that in webflow. I’ve got the structure down, I just need to figure out how to change that BG color of the div that holds the review when it’s “in frame”.

Hopefully that makes sense!

Here’s the read-only link for the Webflow version if you want to see what i’ve got so far: https://preview.webflow.com/preview/socialflight-instagram-growth?utm_medium=preview_link&utm_source=designer&utm_content=socialflight-instagram-growth&preview=6c31e1871384ff08458f95ba884ad4ed&mode=preview

Thanks a bunch for any tips, solutions, or nudges in the right direction!

IMO I wouldn’t bother!
The old design is odd, with the “inframe” review being at the left of the page, not the centre.

I think your cards are much nicer… always bright and easy to read.

The big PLAY button at the top is a bit confusing though… do I click it? what about the CTA under it?

Yeah I think that’s what i’ll chalk it up to. Looks good without it :slight_smile:

Hm, maybe the play button looks weird in the read-only view. Check the live site where it’s on top of a video: https://socialflight-instagram-growth.webflow.io/

Does it make more sense on that page? I appreciate the feedback!

hahahah… yeah, that’s a bit different!

I love the CTA interactions! (see all reviews doesn’t pop!) and I hate that the video continues when I scroll down the page (but given the product that’s probably ok!)

this is odd:
Trusted by 1,000+ Individuals and Brands

OR

you don’t need the OR


Ok, now i’m just playing with the top two CTAs because they are so much fun but i’m getting a color contrast error with a web accessibility tool … it seems to think there is white text on white background. I’m going to have to investigate further.

Also, why doesn’t “see how it works” POP?

hmm… 3 should be YOU GET maybe?? to keep the style the same as 1 and 2?

Glad to hear that was the issue and not just a bad design on my part haha.

Yeah! They’re pretty fun :smiley:

Ah yes, need to get some animation on it like the Get Started buttons.

Yeah I guess that does look kind of odd. It was meant to convey: “Get Started OR See How It Works” but the “Trusted by” kind of breaks that up too much.

Hmm, yeah I think I might be able to modify that. The video is hosted on Wistia and they’ve got some pretty crazy customization available through a built in Javascript API. Even going as far as modifying things on the page when the video hits a certain time-stamp. I don’t know how to work it super well yet but lots to learn.

I’ve done that plenty of times now while building this :joy:

Ah interesting, maybe a similar deal as things breaking when Javascript gets turned off.

I should add it :grin:

That’s true, and it will fill out the top line more evenly too. Just added it in!

Thanks a bunch for the feedback, hard to see those things after you look at it for so long building it haha.

1 Like

Let me know when it’s finished! I’d love to see the whole thinh