How do you make navigation like Arete Photography?

Design help General
1

Hey guys, I’m new at figuring out templates and stumbled upon this one: http://arete.webflow.io/

I really like how it works, but I’d love to understand it to be able to recreate it and play around with it. Could you please tell me how is this done? How can I edit each page content? How can I add more pages and links to them?

I know it’s a bit much to ask, but I feel very lost right now.

Your guidance is very much appreciated!

Thank you!

Raf

2

It’s one page with one main section and four hidden panels that are shown when you click on links in the main section.

Each link is trigering an interaction that 1. perform a 3D transform on the main section and 2. slide-in a panel, that’s sliding from the position where it rests.

Entirely doable with Webflow IX.

Advice: as you’re going to design all the hidden panels, then move it out of the way to hide them, I recommand that you make the content of those 4 panels (on your example it’s about, portraits, landscapes and contact) symbols. You’ll then create a new page and lay those 4 symbols there so that you can edit them easily. As they’re symbols, modifications will show up on your home page too. So just to be clear, the CONTENT has to be a symbol, not the panel wrapper on which you’re going to add the transform translation.

  1. create your main section, width=100vw height=100vh position fixed, z-index 10
  2. create a model for a panel section. class=panel, width=100vw height=100vh position fixed, z-index 20 and style the background if it’s the same for all panels
  3. add a combo class pane1 to the class panel and design your about panel (for example). then use Transforms to move it on the right or left, for 100vw
  4. duplicate it, change the combo class to panel 2 and style another panel, with the same properties, move it somewhere else with the same technique. repeat for your 4 panels.
  5. select one link on the main section then create a click interaction, set the interaction to perform a 3D transform on the main section then slide in a panel, using transforms to 0vw. Repeat for all links.

If you’re new to interactions, follow the links at the top of the forum to the courses and univertsity and learn from there.

2 Likes
3

Wow! This is great! I’m getting to it right now.

Thank you very much, Vincent!

1 Like