Archived topic
Make section fullscreen with smooth scroll
9 replies · Started by Rodrigo on August 28, 2019
I have a one-page layout for the website's frontpage. The menu has 3 items, each one with with its proper section's anchor. What I am trying to do is to show each section as a fullscreen block, just like the page header.
Looking around the Support forums for a solution I found this website: https://gsolution.co, and the feature I actually want is the same one. I just want that each text looks on a sole page, and when I click on a menu item the page scroll smootly to the next section.
I have tried to do this with Gutenberg blocks and the Sections module, and I believe it's gonna be easier with the last one, but still can't figure it how to do it.
Hi there,
I don't believe that can be done easily with Sections or Gutenberg currently.
The example site you linked is using Elementor to create the effect.
Would you consider it?
Yes. I was using Elementor on other websites and now I'm trying to avoid using such Builder. I feel is very heavy.
I do would need to use javascript, right?
How do you make the smooth scrool on your webiste?
We have built-in smooth scroll script:
https://docs.generatepress.com/article/smooth-scroll/
Alright. Implemented! Thanks. Now... should I use JS for the fullscreen effect?
Yup if you can find a script that works.
This post offers some info:
https://generatepress.com/forums/topic/full-page-sections-with-snap-points/#post-481863
This helped a lot! I added an anchor link for each section and then added a CSS rule to each section:
#section {
height:100vh;
display: flex;
align-items: center;
}This way the content is also centered vertically on page.
Awesome :)
I'd like to add a smooth-scroll that works via mouse, not via links. Is that possible via generatepress? See https://www.allangray.co.za/ as an example.
Thanks,
Hi Warren,
GP doesn't have a built-in function like this, it will require custom development or using a plugin :)
