Webflow Workshop - Rebuilding MailChimp's homepage

Join us on April 4th @ 10am (pacific)
[ Watch live ] | [ Join the live chat room ]

This week we’ll be rebuilding MailChimp’s homepage in Webflow. This one will feature a basic structure, but with a lot of layered backgrounds, and custom animations and interactions. This is going to be a fun learning experience for everyone.

3 Likes

Beautiful landing page!!! :+1:

Great workshop. @PixelGeek Do you have the clonable link for this? I’d like to play with some ideas regarding the background image placement.

Found it: MailChimp Clonable Demo

@PixelGeek I was able to get the BG images not to have their position tied to the browser width, thus making them not move around for different monitor displays.

I only did it for the first two images, but the link is: http://bg-img-test.webflow.io/

I was previously using a more cumbersome method of doing this same effect.

How to do it

Put the image in a div, nested in a relative position section. Tell the div to be position absolute left, 50%. Also, in the div, set a BG image, set to contain and tile none. That is the main class. You can then assign combo classes depending on your image.

The combo class will have a fixed height / width, with a margin pushing / pulling from the image to the place you want from the center of the screen. The reason this is a combo class is that it will all vary depending on your image.

Hi @PixelGeek aka Nelson ;),

I applied the same nav bar format to one of my projects but before that I customized my Menu Button, even if I hide the right button, the Menu bar is not aligned with my logo, how can this be fixed.

This is still a a work in progress and can’t share a unblock link on public.

Thanks in advance.

the issue has been fixed, thanks all!