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

비즈니스를 위한 웹사이트를 구축하고 싶지만 대규모 웹사이트를 만들 시간이 없으신가요? 아니면 장기간 웹사이트 유지 관리에 전념할 준비가 되지 않았습니까?

그런 다음 한 페이지 탐색이 포함된 단일 페이지 웹사이트로 이동해야 합니다. 단일 페이지 웹사이트는 매력적인 방식으로 모든 정보를 제공하고 웹사이트를 멋지게 보이게 하여 사용자가 더 많이 참여할 수 있도록 합니다.

이 블로그에서는 WordPress에서 한 페이지 탐색으로 단일 페이지 웹사이트를 만드는 방법뿐만 아니라 보너스로 팝업에 연락처 양식을 추가하는 방법도 배우게 됩니다.

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

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

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

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

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

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

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

한 페이지 탐색이 포함된 단일 페이지 웹사이트의 이점은 무엇입니까?

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

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

• 대부분의 사람들은 불필요하게 긴 웹사이트보다는 단순하고 아름답고 핵심적인 웹사이트를 선호합니다.
• Google은 도메인 및 페이지 수준 링크 권한을 40% 정도로 계산합니다. 이것은 한 페이지 사이트가 유리할 또 다른 영역입니다.
• 단일 페이지 웹 사이트는 페이지가 많은 웹 사이트보다 빠르게 로드됩니다. 오늘날 사람들이 선택의 여지가 무제한이라는 사실을 고려할 때, 빠른 로딩 사이트를 갖는 것은 정말 타협할 수 없는 일입니다.
• 한 페이지 사이트는 유지 관리가 쉽습니다.
• 단일 페이지 웹 사이트에는 한 페이지에 모든 정보가 포함되어 있으므로 스크롤 탐색은 탐색을 훨씬 쉽게 하고 부드러운 스크롤 효과는 사용자에게 편안한 경험을 제공합니다.

시간이 더 걸릴 수 있지만 위의 정보는 귀하의 비즈니스가 작은 경우 한 페이지 탐색으로 작은 웹 사이트를 사용하여 실제로 큰 이익을 얻을 수 있다는 메시지를 전달한다고 생각합니다. 그럼 시간낭비 없이 본론으로 넘어가도록 하겠습니다.

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

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

시작하겠습니다...

1단계: 필요한 WordPress 플러그인 설치

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

• Elementor (무료 버전)
• ElementsKit (무료 및 Pro 버전 모두)
• MetForm (무료 버전)

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

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

ElementsKit은 미리 만들어진 많은 페이지와 템플릿 및 섹션을 제공하므로 사람들은 코딩 없이 원하는 디자인, 레이아웃 및 스타일로 웹사이트를 구축할 수 있습니다. 이 블로그에서는 ElementsKit의 웨딩 플래너 랜딩 페이지를 사용할 것입니다.

웹사이트를 만들려면 WordPress 대시보드에서 페이지로 이동 ⇒ 새로 추가

• Home과 같은 제목 을 지정하고 템플릿 옵션에서 Elementor Full Width 를 선택합니다.
• 게시를 클릭하고 게시 후 Elementor로 편집을 클릭합니다.

• Elementor Builder 창이 열리면 ElementsKit 버튼(EK)을 클릭하십시오.

• 페이지 탭으로 이동하여 웨딩 페이지를 검색하고 삽입 을 클릭하십시오.

이제 업데이트를 클릭 하여 저장하십시오.

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

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

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

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

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

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

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

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

참고: Onepage Scroll Setting 옵션을 찾을 수 없으면 ElementsKit Pro를 활성화 하지 않았을 수 있습니다.

3.3 탐색 스타일 선택

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

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

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

• 탐색 스타일 드롭다운에서 사용자 지정 아이콘 옵션 선택
• 탐색 아이콘을 가리키고 아이콘 라이브러리를 클릭 합니다.
• 원하는 아이콘 검색 및 삽입

3.4 기타 탐색 설정 지정

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

• 탐색 위치: 탐색 위치를 위쪽, 오른쪽, 아래쪽 또는 왼쪽으로 설정할 수 있습니다.
• 탐색 위치 오프셋: 여기에서 탐색 위치 오프셋 값을 선택할 수 있습니다.
• 탐색 간격: 각 탐색 아이콘 사이에 원하는 간격을 선택합니다.
• 탐색 색상: 탐색 아이콘의 색상을 선택합니다.
• 툴팁 타이포그래피: 여기에서 툴팁의 패밀리, 글꼴 크기, 두께 변형, 스타일, 장식 및 줄 높이를 선택할 수 있습니다.

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

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

• 섹션 위로 마우스 를 가져간 다음 섹션 편집 아이콘을 클릭합니다.
• 고급 탭 으로 이동
• ElementsKit Onpage 스크롤 옵션 확장
• 섹션을 표시하려면 섹션 활성화를 켜십시오.
• 이 섹션을 탐색 링크 중 하나로 추가하려면 활성화 옵션을 켜십시오.
• 도구 설명 텍스트 의 이름을 제공합니다. 누군가가 링크를 가리키면 도구 설명 텍스트가 표시됩니다.
• 마지막으로 업데이트를 클릭하여 저장합니다.

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

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

모든 탐색을 완료한 후 업데이트하고 클릭 하여 WordPress에서 한 페이지 탐색의 미리보기 를 보고 탐색 메뉴 링크도 확인하십시오.

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

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

ElementsKit은 선택할 수 있는 미리 만들어진 많은 머리글 및 바닥글 섹션을 제공합니다. ElementsKit 머리글 바닥글을 사용하려면:

• ElementsKit ⇒ 머리글 바닥글 로 이동 ⇒ 새로 추가 를 클릭하십시오.

• 유형을 헤더 로, 조건을 전체 사이트 로, 활성화/비활성화 옵션을 켜고 마지막으로 변경 사항 저장 을 클릭합니다.

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

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

참고: 머리글과 동일한 단계에 따라 ElementsKit의 미리 만들어진 섹션을 사용하여 웹사이트의 바닥글 섹션을 만들 수 있습니다.

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

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

모달 팝업을 추가하려면 RSVP 버튼을 팝업 모달로 바꾸고 여기에 연락처 양식을 추가하겠습니다.

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

• 전체 페이지 ⇒ 홈 페이지(또는 페이지 이름을 지정)로 이동 하여 Elementor로 편집을 클릭합니다.

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

• 모달 버튼 텍스트를 변경하려면 콘텐츠 ⇒ 토글 버튼 ⇒ 레이블로 이동하여 "모달 열기"를 RSVP(또는 원하는 무엇이든)로 변경하십시오.

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

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

• Metform 검색, 위젯 드래그 앤 드롭
• 연락처 양식을 선택하려면 편집 양식을 클릭하십시오.
• 목록에서 원하는 양식을 선택하고 저장 및 닫기를 클릭합니다.
• 마지막으로 업데이트를 클릭하여 저장합니다.

참고: 이미 Metform을 사용하여 RSVP 양식을 만들었고 우리가 사용하는 방문 페이지 템플릿과 일치하도록 색상과 스타일도 약간 변경했습니다. Metform을 사용하여 연락처 양식을 만들고 스타일을 지정하는 방법 에 대한 블로그를 확인할 수 있습니다.

Metform을 사용하여 사용자 지정 문의 양식을 작성하는 방법에 대한 지침은 아래 비디오 를 확인할 수도 있습니다.

6단계: 한 페이지 탐색으로 단일 웹사이트 미리보기 업데이트 및 보기

자, 모든 것이 완료되었습니다. 이제 가장 쉽고 흥미진진한 마지막 단계로 넘어갑니다. 위에서 언급한 모든 사용자 지정 및 단계를 완료한 후 업데이트 버튼 을 클릭하여 모든 것을 저장하고 미리보기 버튼 을 클릭하여 사이트를 확인합니다.

모든 단계를 올바르게 수행했다면 아래와 같은 WordPress의 한 페이지 탐색이 포함된 단일 페이지 웹사이트를 얻을 수 있습니다.

마무리

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

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

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