You can absolutely create full-height sections and a fixed arrow navigation in the lower right corner in Webflow using native features and Interactions, without any custom code.
1. Set Up Full-Height Sections
- Select a Section element on your canvas.
- In the Style panel, set its Height to 100vh — this ensures it takes up the full vertical height of the viewport.
- Repeat this for each section you want to act as a full-screen slide.
2. Create the Fixed Arrow Navigation
- Add a Div Block to your page and name it something like “Arrow Nav.”
- Place it inside the Body element (but outside individual sections).
- Set its Position to Fixed, aligned to the bottom right.
- Add Arrow Icons or Buttons inside this div (e.g., Down Arrow, Up Arrow).
- Style them as needed (size, color, hover states, etc.).
- Assign an ID (e.g.,
section-1
, section-2
, etc.) to each section in the Element Settings panel. - For the Down Arrow, create a Link Block or Button, and set its Link Setting to Page Section → select the next section’s ID.
- You can stack multiple arrows conditionally or only show a "down" arrow if you're not at the last section.
- If you want advanced transitions (e.g., fade or slide), use Page Trigger Scroll or Element Trigger While Scrolling in View to animate your content.
- For example, fade in elements inside each section as they come into view.
- You can also use Mouse Click (Tap) interactions on the arrow to trigger a Scroll to Section animation if you want smooth scrolling controlled manually.
5. Keep the Navigation Persistent
- Make sure the Arrow Nav’s Z-index is set high (e.g., 1000) to keep it above other content.
- Use Visibility: None/Block in Interactions if you want to hide arrows when reaching the last (or first) section.
Summary
You can create full-height sections and a fixed navigation arrow in the bottom-right corner entirely with Webflow's visual tools, using 100vh sections, fixed positioning, anchor links, and optional Interactions for animation. No custom code is required.