Elementor로 원페이지 웹사이트를 만드는 방법(무료 방법)

한 페이지 웹 사이트는 특정 작업을 잘 수행: 그들은 방문자가 하나의 스크롤에 필요한 정보의 모든 조각을 넣어. 주위를 클릭하지 않습니다. 두 번째 페이지가 없습니다. 그냥 영웅,에 대한, 서비스, 연락처, 완료.

이 가이드는 무료 플러그인을 사용하여 Elementor 로 한 페이지 웹 사이트를 만드는 방법,경량 테마 및 무료 Elementor 세트가 실행되는 Master Addon 의 몇 가지 위젯을 통해 걸어갑니다. 결국에는 새 페이지를로드하는 대신 각 섹션으로 점프하는 탐색 링크와 함께 위에서 아래로 깔끔하게 스크롤되는 사이트가 있습니다.

급한 경우 하단 부근의 템플릿 키트 바로가기로 건너뛰고, 실제로 만들고 있는 내용을 이해하고 싶다면 위에서부터 시작하세요.

한 페이지 웹사이트란 무엇이며 실제로 작동하는 경우

한 페이지 웹 사이트는 단일 URL 에 모든 콘텐츠를 넣습니다. 로 이동하는 대신 /about 또는 /services메뉴는 같은 페이지의 고정 섹션으로 이동합니다.

그것은 잘 작동합니다:

• 작은 포트폴리오를 선보이는 프리랜서
• 이벤트 랜딩 페이지 (웨딩, 컨퍼런스, 제품 출시)
• 소규모 서비스 기업(컨설턴트, 이발사, 디자이너)
• 곧 페이지 또는 MVP 공지사항
• 개인 이력서 및 포트폴리오

그것은 덜 잘 작동합니다:

• SEO를 위해 별도의 게시물 URL이 필요한 블로그
• 소수의 제품이 포함된 온라인 상점
• 여러 개의 롱테일 키워드를 대상으로 하는 사이트

콘텐츠가 꽉 차는 느낌 없이 대략 7-12개의 섹션에 들어갈 수 있다면 호출기 하나가 올바른 형식일 것입니다.

시작하기 전에 필요한 것

세 가지 재료:

1. WordPress 설치(자체 호스팅 또는 즐겨찾는 호스트).
2. 무료 엘리멘터 그리고 무료 안녕하세요 Elementor 테마입니다. 안녕하세요 어떤 스타일링 없이 배송, 이는 Elementor가 모든 것을 그릴 때 원하는 정확히 것입니다.
3. 무료 마스터 애드온 플러그인 위젯의 경우 Elementor에는 포함되지 않습니다(필터링 가능한 갤러리, 가격표, 정보 상자, 팀 캐러셀, 문의 양식 7 스타일링).

이 중 대부분은 무료 Elementor만으로 빌드할 수 있지만,몇 개의 섹션은 여분의 위젯 없이 어색해집니다. 진행하면서 플래그를 지정하겠습니다.

올바른 테마와 페이지 템플릿을 선택하세요

에서 Hello Elementor 를 설치합니다 외관 > 테마 > 새로 추가니다. 백지 상태입니다: 사이드바도 없고,기본 스타일도 없고,의견도 없습니다. Elementor 는 전체 페이지를 그립니다.

일단 활성화되면:

1. 새 페이지 만들기 (페이지 > 새로 추가).
2. Elementor 에서 열기.
3. 왼쪽 하단의 설정 기어를 클릭하고 다음으로 이동합니다 페이지 레이아웃, 그리고 선택하세요 엘리멘터 캔버스.

캔버스는 워드 프레스 헤더와 바닥 글을 벗겨. 당신의 하나의 호출기는 전체 페이지가됩니다.

테마 옵션을 비교하려면 elementor를위한 최고의 경량 WordPress 테마 라운드업은 대안을 다루지만 Hello가 기본값인 데에는 이유가 있습니다.

한 페이지 요소 레이아웃의 11개 섹션

대부분의 괜찮은 하나의 호출기는 같은 리듬을 따릅니다. 여기 제가 사용하는 스택이 있습니다:

1. 탐색 메뉴 (끈적임)
2. 영웅 섹션
3. 대한
4. 서비스 또는 기능
5. 팀
6. 포트폴리오 또는 사례 연구
7. 가격
8. 사용후기
9. 문의 양식
10. 소셜 아이콘
11. 바닥글

모든 사이트가 열한 가지를 모두 필요로하는 것은 아닙니다. 솔로 프리랜서는 아마도 팀을 건너 뛸 것입니다. B2B 컨설턴트는 가격을 건너 뛸 수 있습니다. 방문자가 실제로 연락에 더 가까워지는 것을 선택하고 나머지는 떨어 뜨리십시오.

탐색 메뉴를 빌드합니다

먼저, WordPress:에서 메뉴를 만듭니다 모양 > 메뉴 > 새 메뉴 만들기.

자리 표시자 URL 로 사용자 지정 링크를 추가합니다. 지금은 해시 (#) 뒤에 섹션 이름: 을 사용합니다 #about, #services, #pricing니다. 당신은 그들을 제대로 마지막에 배선, 각 섹션이 일치하는 ID를 한 번.

메뉴 저장.

이제 Elementor 내부에서 두 개의 열이 있는 섹션을 상단에 놓습니다. 왼쪽 열에 로고를 넣습니다. 오른쪽 열의 경우 두 가지 옵션이 있습니다:

• 무료 요소: WP 메뉴 위젯을 사용하세요.
• 마스터 애드온: 를 이용하세요 탐색 메뉴 위젯. 그것은 메가 메뉴,호버 효과,모바일 토글 스타일링을 지원하고 추가 구성없이 방금 구축 한 메뉴를 선택합니다.

섹션을 끈적하게 만드십시오 섹션 설정 > 고급 > 모션 효과 > 끈적임: 상단. 전체 연습을 원한다면 elementor 가이드의 스티커 헤더 그것을 분해합니다.

영웅 섹션을 디자인하세요

영웅은 톤을 설정합니다. 짧게 유지하십시오: 약속,지지 라인,버튼.

메뉴 바로 아래에 새 섹션을 추가합니다. 섹션 설정 열기 및 설정:

• 콘텐츠 너비: 전체 너비
• 높이: 화면에 맞습니다
• 수직 정렬: 중간

큰 제목,설명 텍스트 한 줄 및 버튼을 드롭합니다. 섹션 스타일에서 배경 이미지 또는 단색을 사용합니다. 어두운 오버레이는 배경 사진이 통화 중일 때 텍스트 가독성을 돕습니다.

먼저 시작하려면 Master Addon이 영웅 섹션 템플릿을 배송합니다 템플릿 라이브러리. 하나를 가져 와서 복사본과 이미지를 바꾸면 몇 분 안에 완료됩니다.

정보 섹션을 추가합니다

아무것도 여기에 공상 없습니다. 두 개의 열이있는 표준 섹션:

• 왼쪽 열: 사진 (귀하의,귀하의 팀 또는 귀하의 작업 공간)
• 오른쪽 열: 제목 + 텍스트 편집기 + 버튼

아래 서비스 섹션에서 버튼의 앵커 링크를 가리키면 (“내가 하는 일 보기”) About을 스크롤하는 방문자는 여전히 앞으로 나아갈 명확한 경로를 갖게 됩니다.

서비스 섹션을 구축하세요

Infobox 위젯이 그 자리를 차지하는 곳입니다. Free Elementor 에는 Icon Box 가 있지만 제한되어 있습니다. 마스터 애드온 Infobox 위젯 전체 카드를 클릭할 수 있도록 전체 상자에 여러 레이아웃, 아이콘 위치 지정, 호버 상태 및 URL 필드를 제공합니다.

섹션을 만들고 제목 (“서비스” 또는 “내가 하는 일”) 을 추가한 다음 내부 섹션을 3 개 또는 4 개의 열로 분할합니다. 열당 하나의 Infobox 를 삭제합니다.

각 상자는 하나의 질문에 답해야합니다: 서비스가 무엇인지,누구를위한 것인지,어떤 결과를 제공하는지. 여기에 기능 목록을 덤프하지 마십시오. 그것은 전용 서비스 페이지의 용도이며,한 호출기에 하나가 없습니다.

팀 섹션을 추가합니다

솔로라면 이 섹션을 건너뛰세요.

1-4 인의 경우: 팀원 위젯을 사용하십시오. 각 회원은 사진,이름, 역할,짧은 약력 및 소셜 아이콘이있는 카드를 얻습니다.

더 큰 팀의 경우: 팀원 회전목마를 사용하십시오. 한 번에 서너 명의 멤버를 보여주고 가로로 스크롤하여 섹션을 시각적으로 유지합니다.

모든 팀 사진을 동일한 자르기 및 종횡비로 유지하십시오. 그리드에서 일치하지 않는 헤드 크기는 예상보다 엉성 해 보입니다. 문서: 팀원 위젯 그리고 팀원 회전목마. 독립형 가이드는 다음을 참조하세요 팀원 섹션을 만드는 방법.

필터링 가능한 포트폴리오를 추가합니다

Free Elementor의 이미지 갤러리는 정적 그리드에 적합하지만 카테고리별로 필터링하지 않습니다.

방문자가 “브랜딩” 또는 “웹”을 클릭하고 그리드 개편을 원할 경우 필터링 가능한 갤러리가 필요합니다. 마스터 애드온에는 하나가 있습니다. 카테고리 탭,팝업 라이트박스,리본 (“NEW” 또는 “FEATURED” 배지 등) 및 호버의 메타데이터 오버레이를 지원합니다.

설정: 드롭인 필터링 가능한 갤러리 위젯, 이미지를 업로드하고, 각각에 카테고리와 스타일을 태그하세요. 더 많은 컨텍스트가 있습니다 Elementor 필터링 가능한 갤러리 플러그인 검거 대안과 어떻게 겹쳐지는지 보고 싶다면.

가격표를 추가하세요

제품화 된 서비스 또는 구독을 판매하는 경우 가격 책정 섹션이 모호한 “인용 연락처.”보다 더 잘 변환됩니다

Free Elementor 에는 가격 위젯이 없으므로 Master Addons 영역입니다. The 가격표 위젯 무료 버전에 있으며 제목, 가격, 체크 또는 크로스 아이콘이 포함된 기능 목록, 권장 요금제 배지 및 CTA 버튼을 제공합니다.

세 개의 열은 하나의 호출기에 대한 달콤한 장소입니다. 방문자는 눈 - 스캔 왼쪽에서 오른쪽으로,그리고 중간 열은 당신이 실제로 그들이 선택하고자하는 계획을 넣어 곳입니다. 리본으로 “가장 인기”를 표시하고 약간 다르게 스타일 (굵은 테두리,채워진 버튼). 더 많은 패턴 팁에 Elementor 가격표 위젯 포스트.

클라이언트 사용후기를 추가합니다

두세 개의 실제 증언이 가짜처럼 보이는 증언의 벽을 무너뜨렸습니다.

무료 Elementor 의 사용후기 캐러셀은 기본 레이아웃을 처리합니다. 더 깔끔한 단일 열 버전 (회전하는 하나의 큰 견적) 을 원한다면,Master Addon 의 Team Members 캐러셀도 이상하게도 여기에서 잘 작동합니다: 고객 사진을 회원 슬롯에 떨어 뜨리고 견적을 바이오 필드에 넣으십시오.

일반적인 칭찬 (“함께 일하기 좋음”) 이 아닌 특정 결과 (“첫 달에 3 명의 고객을 확보했습니다”) 를 언급하는 평가를 요청하십시오. 구체적인 내용은 설득력이 있습니다. 모호한 형용사는 필러입니다.

문의 양식을 추가하세요

무료 설치 문의 양식 7 플러그인 플러그인 디렉토리에서. 양식을 만들고 단축 코드를 잡으십시오.

Elementor 에서 Text Editor 위젯을 삭제하고 단축 코드를 붙여 넣습니다. 양식이 렌더링되지만 평범하게 보일 것입니다.

바로 이 부분에서 Master Addons Contact Form 7 위젯이 대신합니다. 단축 코드를 붙여넣는 대신 레이블,필드, 테두리,오류 메시지 및 Elementor 패널의 제출 버튼에 스타일을 지정할 수 있습니다. 사용자 지정 CSS 없음.

전체 연습 문의 양식 7 사용자 정의 문서니다. 제출 버튼 안에 Font Awesome 아이콘을 원하시면 에 별도의 글이 있습니다 글꼴 적용하기 CF7 버튼에 멋진 아이콘.

소셜 아이콘 추가

무료 Elementor 는 소셜 아이콘 위젯을 포함합니다. 그것은 페이스 북,X (이전 트위터), 링크드 인, 인스타그램, YouTube, 그리고 다른 사람의 소수. 당신은 색상 (브랜드 또는 사용자 정의), 크기, 모양 (둥근 사각형 또는 원), 그리고 간격을 제어합니다.

이것들을 바닥글 위나 안에 넣으세요. 실제로 활동하는 서너 개의 플랫폼으로 카운트를 유지하세요. 죽은 계정의 절반인 열두 개의 아이콘은 건강한 세 개보다 더 나빠 보입니다.

바닥글을 배열합니다

한 호출기에서 바닥글은 한 줄일 수 있습니다.

연락처 양식 아래에 섹션을 추가,단일 열,중앙. 짧은 저작권 라인 (© 2026 귀하의 이름. 판권 소유.) 작업을 수행합니다. 개인 정보 보호 정책이나 약관 링크가 필요한 경우 여기에도 드롭하십시오. 다른 것은 하나의 호출기 바닥 글에 속하지 않습니다.

메뉴를 각 섹션에 연결하세요(대부분의 사람들이 잘못 생각하는 부분)

초보자를 넘어뜨리는 단계입니다. 시작 시 설정한 메뉴 항목 (#about, #services등등) 아직 아무것도 하지 마세요. 섹션에 일치하는 ID가 없기 때문입니다.

여기 수정, 섹션 당 한 번 수행:

1. 섹션 위로 마우스를 가져가서 중간에 있는 6점 핸들을 클릭하여 선택합니다.
2. 로 이동 고급 왼쪽 패널에 있는 탭.
3. 로 스크롤 CSS ID.
4. 해시 없이 ID 를 입력합니다. 그래서 about, 아니다 #about.

저장. 메뉴를 점프하려는 모든 섹션에 대해 반복합니다. 손으로 앵커를 연결하지 않으려면 — 방문 페이지 대신 긴 블로그 게시물에 말하십시오 — a 목차 플러그인 자동으로 이러한 점프 링크를 구축합니다.

그럼 다시 로 돌아가 외관 > 메뉴 그리고 각 메뉴 항목의 링크가 해시 버전인지 확인합니다 (#about, #services, #pricing). 메뉴를 저장합니다.

프런트 엔드를 다시 로드하고 메뉴 항목을 클릭하면 페이지가 일치하는 섹션으로 스무드스크롤되어야 합니다. 스크롤하는 대신 갑자기 점프하면 테마에 스무드스크롤 CSS 규칙이 누락됩니다. 에 추가 사용자 지정 > 추가 CSS:

html { scroll-behavior: smooth; }

완료.

수동 작업 건너뛰기: 템플릿 키트에서 시작합니다

처음부터 열한 섹션을 구축 할 기분이 아니라면, 마스터 애드온은 30 + 전체 배송 템플릿 키트그리고 그 중 다수는 특정 산업(대행사, 레스토랑, 포트폴리오, SaaS, 컨설턴트)을 위한 하나의 호출기입니다.

키트를 가져오고,이미지를 교환하고 복사하고,브랜드에 맞게 색상을 조정하고,일주일이 아닌 오후에 살고 있습니다. The elementor 템플릿을 가져오는 방법 post는 가져 오기 단계를 한 번도 해본 적이 없다면.

초보자에게도 이렇게 시작하는 것이 좋습니다. 작업 템플릿에서 빌드하고 각 섹션이 어떻게 구성되어 있는지 학습한 다음 거기에서 조정합니다.

한 페이지 사이트의 속도 및 성능 팁

전체 사이트가 하나의 URL 에 살고 있기 때문에 해당 URL 은 모든 방문자에 대해 모든 이미지,글꼴 및 스크립트를로드해야합니다. 부풀어 오른 한 호출기는 변환 킬러입니다.

빠른 승리:

• 업로드하기 전에 모든 이미지(TinyPNG, Squoosh 또는 Imagify와 같은 플러그인)를 압축하세요.
• 가능한 경우 WebP 형식을 사용하십시오. The 최고의 워드 프레스 이미지 최적화 플러그인 라운드업은 옵션을 다룹니다.
• Lazy-load below-the-fold 이미지 (Elementor 는 현대 버전에서 기본적으로 이를 처리합니다).
• 웹 글꼴을 두 가지 제품군으로 제한합니다.
• 캐싱 플러그인(LiteSpeed Cache, WP Rocket 또는 Autoptimize)으로 CSS 및 JS를 축소합니다.

더 많은 것을 elementor 웹사이트의 속도를 높이는 방법. Master Addons v3는 v2보다 3배 빠르며 실제로 사용 중인 위젯에 대해서만 위젯 CSS 및 JS를 로드합니다. 이는 여러 페이지로 구성된 사이트보다 단일 URL 사이트에서 더 중요합니다.

FAQ

감싸는 중

Elementor 가있는 한 페이지 웹 사이트는 어렵지 않습니다. Hello Elementor 를 선택하고 페이지를 Canvas 로 설정하고 열한 개의 섹션 (또는 그 이하) 을 빌드하고 CSS ID 를 할당하고 메뉴를 해시 링크에 연결했습니다.

마스터 애드온이 속도를 높이는 곳:

• 메가 메뉴와 모바일 토글이 포함된 탐색 메뉴 위젯
• 서비스용 Infobox 위젯
• 포트폴리오를 위한 필터링 가능한 갤러리
• 리본과 기능 목록이 내장된 가격표(무료)입니다
• CSS를 작성하지 않고 양식 7 스타일링에 문의하세요
• 팀원 및 팀원 회전목마
• 수동 빌드를 건너뛰고 싶을 때 30+ 전체 템플릿 키트

다운로드 the 무료 마스터 애드온 플러그인 그리고 처음부터 가장 자신감이 없는 구간부터 시작하세요. 거기서 바깥쪽으로 일하세요.

관련 읽기: 100 최고의 Elementor 애드온 · Elementor 템플릿을 가져오는 방법 · 위젯 및 확장 · 마스터 애드온 가격