Streaming live at 10am (PST)

'Simple' beautiful execution questions


#1

Hi everyone. I am a new user and looking to understand how to bulid a simple ‘about page’ that can help the user consume section is a very simple but controlled way.

My reference website: www.grfn.com

My main issue is I don’t know the vocabulary of what you call a few of the features that I see on GRFN.

My few questions:

  • What do you suggest be the The GRFN.com structure?

  • Its a one page site, but seems to be simply an ‘index’ that is accordian’d open at the start… its not clear to me if each section of the index would be a DIV or a SECTION? (basically a fundamental suggestion to building the site structure)

  • The viewport locking… I really like this… as it slows the viewer down to view each section… (when you scroll is locks to the next section) . What is that called and how can I do this?

  • Lastly the header or what looks like a header, the title changes based on the section in view… this is another aspect I really would like to achieve.

THANK YOU for insights… very happy to meet you all and appreciate your support.



#2

red = menubar
blue= sections
green= containers

You don’t care if it’s a div or a section, primarily. A section is just a div with the name “section”. In webflow, a section also have special properties, like not being able to nest it. to begin with, you can ditch sections and only use divs. You’ll mind about sections when you progress into HTML. At the moment, only use divs and containers, you can. When I said blue=sections above, that’s for saying sections are big chunks of informations on a page. But once again, at the moment, you couldn’t care less.

The page isn’t an accordion of things, it’s a pile of sections.

This is a “scroll hack” that allows foe an esay scroll to next section when one is finished scrolling. Not possible with Webflow at the moment but you can use fullpage.js to achieve that. It’s going to be a bit complicated, it requires a special structure and some custom code use. https://alvarotrigo.com/fullPage/

The menu is fixed at the top, and the title of the menu changes depending on what section is on screen. This is easily achiveable with Interactions. Basically, you’re going to have all titles in your header menu, and will display and hide them depending on sections entering and leaving the screen. I could go into details, but it’s preferable you start watching the interaction tutorial videos, try for yourself and come back for further help :slight_smile:

Here’s a good place to start: https://university.webflow.com/courses/interactions-and-animations-course


#3

Thank you @vincent!!!

I’ll give this a look.

Had you noticed if you click on the logo the page collapses as a sort of index… would your approach consider this function?

Are you available for freelance?

Happy holidays and THANK YOU for your detailed input.


#4

It’s simple: a section that is zero pixel height, and an interaction that makes it grow and shrink, pushing down the rest of the content naturally.

I am! Please approach me with an as clear as possible idea of your budget :slight_smile: Makes thing very much easier.


#5

@vincent Where are your based? Would be great to go through things if ever possible
fave to face!

I’m in brooklyn. Have a small design studio and looking to tell our
narrative of what we do and show cases for the work.

I am hoping to have a site made and that we can evolve it over time. It
will also have a sister site that is callled rethinking.

You can see what I do here: toddbracher.com and rethinking.design is
attached to that site.

My budget is unknown since I’ve not done this before and my current site
though not perfectly telling the story and a bit generic is not terrible
either.

Thinking $2000 as a not to exceed budget for the two? I’d like to keep it
in the realm of the reference site I shared you however with the ability to
see our projects as cases and a news page. Both of course present featured
content to the one page landing.

Needs a mock-up for sure before it’s deep dive.


#6

Email me directly to discuss freelance. Easier.

Todd@toddbracher.com


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.