WordPress에서 한 페이지 탐색 기능을 갖춘 단일 페이지 웹사이트 만들기(보너스 포함)

귀하의 비즈니스를 위한 웹사이트를 구축하고 싶지만 큰 웹사이트를 만들 시간이 없습니까? 아니면 오랜 시간 동안 웹사이트를 유지 관리할 준비가 되지 않으셨나요?

그렇다면 단일 페이지 탐색 기능이 있는 단일 페이지 웹사이트로 이동해야 합니다. 단일 페이지 웹사이트는 모든 정보를 매력적인 방식으로 제공하고 사용자가 더 많이 참여할 수 있도록 웹사이트의 멋진 모습을 제공합니다.

이 블로그에서는 방법을 배우는 것뿐만 아니라 WordPress에서 단일 페이지 탐색 기능을 갖춘 단일 페이지 웹 사이트 만들기 보너스로 팝업에 문의 양식을 추가하는 방법도 있습니다.

대부분의 사람들은 소유자에게 연락할 적절한 방법을 찾지 못하면 웹사이트를 떠나므로 이 보너스 팁은 귀하의 웹사이트에 특별한 가치를 더해줄 것입니다.

더 이상 시간을 낭비하지 말고 멋진 웹사이트를 만드는 과정을 시작해 보세요. Elementor 한 페이지 탐색. 아래 버튼을 통해 사이트의 최종 모습을 확인할 수 있습니다.

한 페이지 탐색이란 무엇입니까?

이름에서 알 수 있듯이 단일 페이지 탐색은 단일 페이지 웹사이트의 다른 부분을 탐색하도록 특별히 설계된 탐색 메뉴입니다. 부드러운 스크롤 효과를 갖춘 단일 페이지 탐색을 통해 다양한 섹션으로 쉽고 사용자 친화적인 환경을 탐색할 수 있습니다.

"단순함은 궁극의 정교함이다." - 레오나르도 다빈치

그리고 이러한 단순성은 단일 페이지 웹사이트에 다른 웹사이트보다 필요한 우위를 제공합니다. 한 페이지 웹사이트는 웨딩 플래너, 사진, 소규모 미용실, 레스토랑 등과 같은 소규모 비즈니스에 적합합니다.   

그러나 너무 많은 제품을 판매하거나 여러 서비스를 제공하고 더 많은 고객을 수용해야 하는 대규모 전자 상거래 비즈니스가 있는 경우 단일 페이지 웹사이트는 적합하지 않습니다.

단일 페이지 탐색 기능을 갖춘 단일 페이지 웹사이트의 이점은 무엇입니까?

귀하의 비즈니스가 작다고 해서 귀하의 비즈니스를 위한 단일 페이지 웹사이트를 얻는 것을 생각해서는 안됩니다. 한 페이지 웹사이트, 특히 한 페이지 WordPress 웹사이트를 운영하면 다른 많은 이점이 있습니다. 몇 가지 장점을 살펴보겠습니다.

• 첫째, 모바일 친화적이다. 이는 웹사이트 SEO(검색 엔진 최적화)와 관련하여 고려해야 할 중요한 사항입니다. 2021년 현재, 미국 시민의 70%는 모바일 기기를 사용하여 인터넷 검색을 합니다.. 이와 같은 데이터가 이유입니다. Google은 모바일 친화적인 웹사이트를 우선시합니다.. 단일 페이지 디자인을 사용하면 귀하의 웹사이트가 처음부터 Google의 좋은 책에 포함됩니다.

• 대부분의 사람들 단순하고 아름답고 요점이 분명한 웹사이트를 선호합니다. 불필요하게 긴 내용보다는. 
• 구글은 중요하다 도메인 및 페이지 수준 40% 정도의 링크 권한. 이는 단일 페이지 사이트가 이점을 누릴 수 있는 또 다른 영역입니다.
• 단일 페이지 웹사이트는 페이지 수가 많은 웹사이트보다 더 빠르게 로드됩니다. 요즘 사람들에게는 무제한의 옵션이 있다는 사실을 고려할 때, 빠르게 로드되는 사이트를 갖는 것은 실제로 협상할 수 없습니다.
• 단일 페이지 사이트는 유지 관리가 쉽습니다.
• 단일 페이지 웹사이트는 한 페이지에 모든 정보를 담고 있기 때문에 스크롤 내비게이션을 사용하면 탐색이 훨씬 쉬워지고 부드러운 스크롤 효과로 인해 사용자 경험이 편안해집니다.

좀 더 이야기할 수 있지만, 위의 정보는 귀하의 사업이 소규모라면 실제로 크게 성장할 수 있다는 메시지를 전달한다고 생각합니다. 작은 웹사이트를 이용하면 큰 혜택을 누릴 수 있습니다 하나의 페이지 탐색으로. 그럼 시간을 낭비하지 않고 메인 프로세스로 넘어가겠습니다.

한 페이지 탐색으로 단일 웹 웹사이트를 만드는 방법 워드프레스에서

이 블로그에서는 웹 사이트를 구축하는 방법뿐만 아니라 잠재 고객에게 깊은 인상을 줄 WordPress의 현대적인 한 페이지 탐색 방법을 보여 드리겠습니다. 이 튜토리얼에서는 인기 웹 사이트 빌더인 WordPress를 사용하겠습니다(제목에 나와 있습니다!).

 자, 시작해 봅시다…

#1단계: 필수 WordPress 플러그인 설치 Elementor 한 페이지 스크롤을 생성하려면

시스템에 WordPress가 설치되면. WordPress를 만들려면 다음 WordPress 플러그인을 설치해야 합니다.

웹사이트 Elementor 한 페이지 스크롤:

• 엘레멘터 (무료 버전)
• ElementsKit (무료 및 Pro 버전 모두)
• MetForm (무료 버전)

필수 WordPress 플러그인 설치 및 활성화가 완료되면 이제 사이트를 구축할 차례입니다.

#2단계: ElementsKit 사전 제작 페이지를 사용하여 웹사이트 만들기

ElementsKit은 다양한 기능을 제공합니다. 미리 만들어진 페이지 및 템플릿 사람들이 코딩 없이도 원하는 디자인, 레이아웃, 스타일로 웹사이트를 구축할 수 있는 섹션이 있습니다. 이 블로그에서는 웨딩 플래너 방문 페이지 ElementsKit 제작.

웹사이트를 만들려면 WordPress 대시보드에서 다음으로 이동하세요. 페이지 ⇒ 새로 추가

• 줘 제목 홈과 같은 선택 요소 전체 너비 템플릿 옵션에서
• 게시하려면 클릭하세요. 게시한 후 다음을 클릭하세요. Elementor로 편집

• Elementor Builder 창이 열리면 ElementsKit 버튼(EK)을 클릭하세요.

• 로 이동 페이지 탭, 검색 혼례 페이지를 클릭하고 끼워 넣다

지금 딸깍 하는 소리 업데이트 시 저장

#3단계: Elementor 한 페이지 탐색을 추가하는 방법 ElementsKit 사용

이제 웹사이트가 생겼으니 Elementor의 한 페이지 스크롤 탐색 기능을 추가하는 재미있는 부분을 살펴보겠습니다. ElementsKit Onepage 스크롤 탐색은 사용하기 쉽고 사이트에 멋진 모습을 제공합니다. ElementsKit만큼 좋은 한 페이지 스크롤 Elementor 애드온을 찾을 가능성은 거의 없습니다.

이제 WordPress 사이트에 한 페이지 스크롤 탐색 링크를 추가하는 단계별 프로세스를 살펴보겠습니다.

3.1 한 페이지 스크롤 모듈 켜기

WordPress 사이트에 스크롤 탐색을 추가하려면 먼저 Onepage Scroll Module을 활성화해야 합니다.

• 이동 : WordPress 대시보드 ⇒ ElementsKit ⇒ 모듈 
• 켜다 한 페이지 스크롤
• 클릭 변경 사항을 저장하다 업데이트하다

3.2 페이지 설정에서 한 페이지 스크롤 활성화

• Elementor 패널의 왼쪽 하단에 있는 설정 아이콘을 클릭하세요.
• ElementsKit 설정 탭을 엽니다.
• 한 페이지 스크롤 옵션 활성화

메모: 한 페이지 스크롤 설정 옵션을 찾을 수 없다면 아마도 아직 찾지 못한 것입니다. ElementsKit Pro를 활성화했습니다

3.3 탐색 스타일 선택

이제 탐색 스타일을 선택할 차례입니다. ElementsKit은 다양한 탐색 옵션을 제공합니다. 예를 들어 원 아래에는 확대, 채우기, 채우기 등이 있습니다. 사각형 패턴의 경우 확대와 같은 옵션이 있고 선의 일부로 성장할 선, 선 채우기와 같은 옵션이 제공됩니다. , 줄 축소 등

원하는 스타일을 선택할 수 있습니다. 이 블로그에서는 사용자 정의 아이콘을 선택하겠습니다. 사용자 정의 아이콘을 선택하면 한 페이지 스크롤 탐색 스타일 옵션에 대한 아이콘을 선택할 수 있는 옵션이 제공됩니다. 다음 중 하나에서 아이콘을 선택할 수 있습니다. 아이콘 라이브러리 또는 맞춤 업로드 SVG 아이콘. 

사용자 정의 아이콘을 선택하려면

• 맞춤 아이콘 선택 탐색 스타일 드롭다운의 옵션
• 호버 탐색 아이콘과 딸깍 하는 소리 아이콘 라이브러리에서
• 검색 및 삽입 당신이 좋아하는 아이콘

3.4 기타 내비게이션 설정

탐색 스타일을 선택하면 다음 설정에 액세스할 수 있습니다.

• 탐색 위치: 탐색 위치를 위쪽, 오른쪽, 아래쪽 또는 왼쪽으로 설정할 수 있습니다. 
• 탐색 위치 오프셋: 여기에서 탐색 위치 오프셋 값을 선택할 수 있습니다.
• 탐색 간격: 각 탐색 아이콘 사이에 원하는 공간을 선택하세요.
• 탐색 색상:  탐색 아이콘의 색상을 선택합니다.
• 도구 설명 입력 체계: 여기에서 도구 설명의 계열, 글꼴 크기, 가중치 변환, 스타일, 장식 및 줄 높이를 선택할 수 있습니다.

3.5 탐색 링크에 페이지 섹션 추가

이제 모든 설정이 완료되었으므로 탐색에 표시할 섹션을 추가할 차례입니다. 그렇게 하려면

• 호버 해당 섹션에서 섹션 편집 상
• 로 이동 고급 탭
• 확장하다 ElementsKit 온페이지 스크롤 옵션
• 섹션 활성화를 켜세요. 섹션이 보이도록
• 활성화 활성화 켜기이 섹션을 탐색 링크 중 하나로 추가하는 옵션
• 이름을 입력하세요. 툴팁 텍스트. 누군가가 링크 위에 마우스를 올리면 도구 설명 텍스트가 표시됩니다.
• 마지막으로 업데이트를 클릭하여 저장하세요.

위에서 언급한 동일한 프로세스를 반복하여 탐색에 원하는 모든 섹션을 추가할 수 있습니다.

메모:  내부 섹션이 아닌 탐색에 섹션을 추가할 수 있습니다. 따라서 내부 섹션이나 다른 위젯의 고급 탭에서는 ElementsKit Onpage Scroll 옵션을 찾을 수 없습니다.

내비게이션을 모두 마친 후, 업데이트하고 클릭하세요 보기 위해 시사 WordPress의 한 페이지 탐색 기능과 탐색 메뉴 링크를 확인하는 방법도 있습니다.

#4 단계: ElementsKit에서 미리 만들어진 머리글 바닥글 섹션을 사용하여 머리글 바닥글 추가

이제 WordPress에 웹사이트 한 페이지 탐색 기능이 있지만 웹사이트를 완성하려면 여전히 머리글 바닥글이 필요합니다. 웹사이트의 머리글과 바닥글 섹션은 고객이 쉽게 볼 수 있도록 로고와 중요한 정보를 표시하는 데 매우 중요합니다.

ElementsKit은 다양한 기능을 제공합니다. 미리 만들어진 헤더 그리고 바닥글 섹션 에서 고르다. ElementsKit 머리글 바닥글을 사용하려면:

• 이동 ElementsKit ⇒ 머리글 바닥글 ⇒ 클릭 새로운 걸 더하다

• 유형을 다음으로 선택하세요. 머리글, 조건은 다음과 같습니다 전체 사이트, 켜다 활성화/비활성화 옵션을 선택하고 마지막으로 변경 사항을 저장하다.

• 이제 헤더 섹션을 추가하려면 생성한 메뉴에서 편집을 클릭하세요.
• 콘텐츠 편집을 클릭하세요
• EK 버튼을 클릭하고 섹션 탭으로 이동합니다.
• 원하는 헤더 디자인을 선택하고 삽입을 클릭하세요. 

아래 비디오를 따라 웹 사이트에 대한 아름다운 머리글 바닥글을 만들 수 있습니다.

메모: ElementsKit의 Premade 섹션을 사용하여 웹사이트에 대한 바닥글 섹션을 만들려면 헤더와 동일한 단계를 수행할 수 있습니다.

#5단계: 연락처 양식을 모달 팝업으로 추가 (보너스)

이제 잠재 고객이 귀하와 더 쉽게 소통할 수 있도록 웹사이트에 문의 양식을 추가할 차례입니다. 팝업을 사용하여 문의 양식을 추가하면 필요한 양식과 함께 한 페이지 웹사이트가 더욱 매력적으로 보일 것입니다.

모달 팝업을 추가하기 위해 RSVP 팝업 모달이 있는 버튼을 클릭하고 여기에 문의 양식을 추가하세요.

• ElementsKit으로 이동 ⇒ 위젯 ⇒ 팝업 모달 켜기 ⇒ 변경 사항 저장 클릭

• 모든 페이지 ⇒ 홈 페이지(또는 페이지 이름을 지정한 페이지)로 이동하여 다음을 클릭하세요. Elementor로 편집

• 편집 모드에서 RSVP 섹션으로 스크롤하여 RSVP 버튼을 삭제하세요.
• RSVP 버튼 위치에 드래그 앤 드롭 모달 팝업이 나타납니다.

• 모달 버튼 텍스트를 변경하려면 Content ⇒ Toggler Button ⇒ Label로 이동하여 “Open Modal”을 RSVP(또는 원하는 대로)로 변경하세요.

• 스타일 탭 ⇒ 토글러 버튼으로 이동하여 버튼 배경색, 텍스트 색상, 테두리 반경 및 일반 뷰와 호버 뷰 모두에 대한 기타 설정을 변경하세요.

• 이제 콘텐츠로 이동하여 템플릿 활성화 모드를 켜서 연락처 양식을 추가할 수 있습니다.
• 팝업 버튼을 클릭하세요. 열리면 본문의 편집 아이콘을 클릭하여 Elementor 편집기를 엽니다.

• Metform을 검색하고 위젯을 드래그 앤 드롭하세요.
• 편집 양식을 클릭하여 문의 양식을 선택하세요. 
• 목록에서 원하는 양식을 선택하고 저장 후 닫기를 클릭하세요.
• 마지막으로 업데이트를 클릭하여 저장하세요.

메모: 저는 이미 Metform을 사용하여 RSVP 양식을 만들었고 우리가 사용하는 랜딩 페이지 템플릿과 일치하도록 색상과 스타일도 약간 변경했습니다. 블로그에서 확인하실 수 있습니다 Metform을 사용하여 문의 양식을 만들고 스타일을 지정하는 방법. 

당신은 또한 확인할 수 있습니다 지침은 아래 비디오 Metform을 사용하여 맞춤형 문의 양식을 작성하는 방법에 대해 알아보세요.

#6 단계: 단일 페이지 탐색이 포함된 단일 웹사이트 미리보기 업데이트 및 확인

글쎄, 모든 것이 끝났습니다. 이제 가장 쉽고 흥미로운 마지막 단계로 넘어갑니다. 위에서 언급한 모든 사용자 정의 및 단계를 완료한 후 업데이트 버튼 모든 내용을 저장하고 다음을 클릭하세요. 미리보기 버튼 귀하의 사이트를 보려면.

모든 단계를 올바르게 수행했다면 WordPress에서 아래와 같이 하나의 페이지 탐색이 있는 단일 페이지 웹사이트를 얻게 될 것입니다.

Elementor One Page Scroll 웹사이트의 마지막 말

등을 두드려주세요! Elementor와 ElementsKit을 사용하여 단일 페이지 탐색 기능을 갖춘 현대적이고 아름다운 웹사이트를 성공적으로 만들었기 때문입니다. 단일 페이지 웹사이트를 사용하면 고객이 웹사이트의 다양한 섹션으로 쉽게 이동하여 비즈니스에 대해 알아볼 수 있습니다. 그리고 문의 양식이 포함된 원클릭 모달 팝업을 통해 단 한 번의 클릭만으로 의사소통이 가능합니다! 

귀하가 구축한 내용에 깊은 인상을 받았다면 ElementsKit은 WordPress 및 Elementor 사용자가 멋진 웹사이트를 실험하고 구축할 수 있는 무한한 가능성을 열어주기 때문에 훨씬 더 놀랄 준비를 하십시오. 그러니 시간을 내서 다른 것을 확인해 보세요. 고급 위젯 및 모듈 ElementsKit의

WordPress, Elementor 및 마법의 ElementsKit을 사용한 웹사이트 구축에 대해 자세히 알아보려면 당사 소셜 미디어 계정을 팔로우하세요.