Full Page Scroll with Elementor and addon plugin

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on print
Print

Full Page Scroll이란 마우스를 살짝만 스크롤해도 화면이 마치 페이지를 넘기듯 다음 페이지로 넘어가는 효과를 말한다. One Page Scroll이라고 검색되기도 한다. 어떤 화면인지는 다음 Sample 화면을 보면 바로 알 수 있다.

https://demo.briefcasewp.com/fullpage/#m3d-pro


Full Page Scroll 기능의 필요성

  • Landing Page에서 웹사이트에 대해 단계별 설명이 필요하다.
    사용자가 웹사이트를 볼 때 내용이 섞이지 않고 하나씩 전달되었으면 한다.
  • 꽤 긴 내용이 들어가는 경우, 사용자의 스크롤하는 노력을 최소화 시켜주고 싶다.
  • 우리는 파워포인트식의 페이지 단위 내용 작성에 익숙하다.
    그 내용을 그대로 한 화면씩 옮기고 싶다. 1 2

Full Page Scroll 구현 방법

구글링을 해보면 여러가지 방법들이 나오는데, Elementor 플러그인만 사용하는 방법은 찾지 못했다. 대부분은 별도 addon 플러그인을 사용하는데 다음과 같은 플러그인들이 검색된다.

  • JetElements plugin : $15 유료 플러그인 3
  • Briefcase Elementor Widgets : 위의 예시 화면을 구현한 플러그인이다. 4
  • Premium Addons for Elementor : 그대로 따라하기 좋은 강좌들이 많이 있다. 무료 버전으로 Full Page Scroll 구현 가능하다.

그 외에 fullpage.js 를 이용한 구현이 있는데, 일반적인 웹개발에 많이 활용되는 것으로 보인다.

위 4가지 방법 중 Premium Addons for Elementor 또는 fullpage.js를 후보로 생각하고, 강좌들을 자세히 살펴보면 공통점은 Elementor Template에 각 Page들을 저장하고, 각 Page들을 지정해서 Scroll 한다는 점이다. 5 6

여기서 중요한 Point는 ① 전체 Landing Page를 1페이지로 먼저 구현하고 (물론 넘기고자 하는 Page별 Section으로 구현), ② 그 Page의 각 Section을 Template으로 저장하고, ③ Full Page Scroll을 적용한 Page를 마지막으로 구현할 수 있다는 것이다.

즉, 처음부터 복잡한 기능에 연연하지 말고, 처음엔 컨텐츠에 집중해서 Landing Page를 만들고 나중에 멋진 Scroll 기능을 적용해도 된다는 뜻이다.

그럼… 삼천포로 그만 빠지고 Landing Page를 만들어 보자. 다 만들면 이 Page를 다시 Update하려고 한다.


Footnotes

  1. 웹툰이 처음 나왔을 때 옛날의 페이지 단위 만화에서 길게 스크롤 해나가는 방식의 이야기 전개에 많이 놀랐었다. Full Page Scroll은 시대의 흐름을 역행하는 느낌도 조금은 들지만… 익숙하고 편한 방법을 택해보자.
  2. 이 list의 list item간 줄간격을 늘려주기 위해 30분 정도 삽질했다. 난 이런 식으로 삼천포로 새는 경우가 많아 큰일이다. 어쨋건 30분 삽질하는 동안 ① child theme의 style.css가 parent theme의 style.css를 override하지 않아, https://wordpress.stackexchange.com/questions/177852/child-themes-css-priority-problems-without-using-important 내용대로 priority를 PHP_INT_MAX로 주고, style.css 대신 styles/child-style.css 파일을 만들어줬고, ② 이 list block에 별도 css class를 지정하고, 앞서 만든 child-style.css에 ul.li-margin-bigger li {margin: 10px 0;} 코드를 추가했다.
  3. https://www.templatemonster.com/blog/full-page-scroll-effect-elementor-free/
  4. https://briefcasewp.com/how-to-create-fullpage-scrolling-websites-with-elementor/
  5. Premium Addons for Elementor 강좌
    https://www.youtube.com/watch?v=QsMO2zL-Vig
    https://www.youtube.com/watch?v=N9S6VUL04b4
  6. fullpage.js 강좌
    https://www.youtube.com/watch?v=CDTsVrajj-Y
    https://picnature.de/en/creating-full-screen-scrolling-websites-in-elementor-no-addons/ 위 강좌의 블로그

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다

  • 카테고리

  • Count per Day

    • 477This post:
    • 106611Total reads:
    • 60710Total visitors:
    • 26Reads today:
    • 26Visitors today:
    • 2019년 3월 10일Counter starts on: