Streaming live at 10am (PST)

Event Master Template - Fiddling with the Speaker Section (Adjusting Width, etc)


#1

Hello!

https://preview.webflow.com/preview/blurred-6c2a09?preview=f506d84d61127f1237c0bb04855e2102

I am trying to turn this section,

into something such as this

What I am aiming to do, is increase the width of the speakers, while having them closer together in addition, while also being mindful of the responsiveness and making sure everything stays in tact once I mess around with the template.

Thank you so much for your help.


Here is my public share link: LINK
(how to access public share link)


#2

One way is with flexbox and removing all the data you don't need or create a custom one but I don't know what happen if the template designer update the theme, can you help us here @thesergie @PixelGeek?


#3

@Allix_Hannah you can keep the collection structure or edit it as you see fit. Are you looking for some type of step-by-step tutorial? If so, you're better off hiring a Webflow consultant to design it for you.

Unless you're willing to start exploring the designer tool to design it yourself (which I recommend because learning is fun :wink: )


#4

HI @Allix_Hannah
I Designed that template.
Making it look like your example should be fairly easy. But the trickiest part is the actual photos of the team members. Those different color filters should be done in photoshop and then uploaded in to the CMS. In webflow we can't add different image filters for each dynamic item by using default Webflow css filters.


#5

Hi @Allix_Hannah

As for the colors, here's what you can do:

  1. Add a a color option in your Collection.
  2. Then add an overlay on the picture, then set the background color to come from your collection.
  3. Just make sure that your collection color has a low opacity.

Hope this helps!


#6

Not a step by step, just an idea of how to take a four person grid and expand the width out to each side, while expanding the images to sort of stay (side by side) close to eachother as well.


#7

Yes, the color part isn't the primary concern yet! It's just a matter of expanding the width of each person in order to be the width of the page while having the sizing proportional as it is currently. My main concern was ruining the content and code, but I've exported the HTML/CSS incase anything screws up.


#8

Check this guide I made to give an idea.


#9

This was extremely helpful. THANK you for sharing this with me!

Do you think that it's possible to adjust the width of all four, to extend the four people out so that it's basically the max width of the page? Perhaps I have to adjust the width of the container to do so, I'm thinking. Hmm.

Thank you again.


#10

Try removing the container entirely. In doing so, the items should span the full width of the screen.


#11

I've tried this but.... it's a hot mess when I remove the container, almost as if it would be easier to just redo the entire section...hmmmm


#12

Not a bad idea. You can always open up a separate browser window and open the original template on Webflow's website in "view in designer" mode. This way you can recreate what they did by mimicking the settings they used. Once you get to a point where it starts to get tricky, you're on your own. But it does save a lot of time up front.


#13

That's a good idea :slight_smile: I've actually recreated the section and it worked! Losing the container was exactly what I had needed to do. Thanks so much for your help


#14