워드프레스에서 랜딩 페이지를 만드는 방법: 3가지 쉬운 방법 

워드프레스 웹사이트 의 인기가 높아지고 있다는 점은 워드프레스 웹사이트 소유자가 반드시 주목해야 할 사항입니다. 사용자가 웹사이트에 방문했을 때 가장 먼저 눈길을 사로잡는 것은 워드프레스 홈페이지나 랜딩 페이지의 디자인입니다.

워드프레스 웹사이트 디자인을 강조하는 것도 중요하지만 , 웹사이트에서 잠재 고객 확보와 행동 유도(CTA)에 집중하는 것 또한 중요하며, 랜딩 페이지는 바로 이러한 목적을 위해 만들어졌습니다. 마케팅 캠페인을 진행하거나 사용자가 예약, 구매를 하도록 유도하거나 단순히 사용자 정보를 얻기 위해 페이지를 방문하도록 하려는 경우, 랜딩 페이지의 중요성은 더욱 커집니다.

바로 이럴 때 랜딩 페이지가 큰 도움이 됩니다. 워드프레스 랜딩 페이지는 사용자의 관심을 사로잡고 사용자가 정말로 필요로 하는 정보를 제공합니다. 하지만 브랜드 이미지와 사용자 의도에 모두 부합하는 랜딩 페이지는 어떻게 만들 수 있을까요?

이 블로그에서는 세 가지 간단하면서도 효과적인 방법을 사용하여 랜딩 페이지를 만드는 방법을 알아보겠습니다. 자, 그럼 시작해 볼까요?.

랜딩 페이지란 무엇인가요?

우선 워드프레스에서 랜딩 페이지란 무엇인지 이해해 봅시다. 많은 사람들이 랜딩 페이지를 웹사이트의 홈페이지와 혼동하지만, 둘은 분명히 다른 개념입니다.

홈페이지는 사용자가 웹사이트 도메인을 디자인 요소 와 비즈니스/브랜드에 대한 모든 필수 정보를 통해 사용자의 관심을 사로잡도록 설계되었습니다

홈페이지는 사용자의 관심을 끌고 웹사이트 체류 시간을 늘리는 데 효과적이지만, 랜딩 페이지는 사용자가 웹사이트에서 특정 행동을 취하도록 유도하는 데 중점을 둡니다. 예를 들어 문의 양식을 , 특정 제품 또는 서비스를 구매하거나, 이메일 뉴스레터를 구독하는 등의 행동을 유도할 수 있습니다. 랜딩 페이지의 주요 목표는 사용자의 참여를 유도하고 다양한 방식으로 잠재 고객으로 전환하는 것입니다.

랜딩 페이지는 일반적으로 링크 수가 적고, 오직 한 가지, 즉 행동 유도 버튼(CTA)에 집중합니다. 목표에 맞는 CTA를 자유롭게 선택할 수 있지만, 대부분의 랜딩 페이지는 방문자가 구매를 하거나 리드 생성을 .

홈페이지는 하나만 만들 수 있는 것과 달리, 랜딩 페이지는 필요한 만큼 여러 개 만들 수 있습니다. 워드프레스에서 랜딩 페이지를 만들고 싶으신가요? 계속 읽어보세요.

참고: 최고의 SaaS 랜딩 페이지 템플릿

워드프레스에서 랜딩 페이지를 만드는 방법: 3가지 

이제 웹사이트에서 랜딩 페이지의 목적을 이해하셨으니, 워드프레스에서 랜딩 페이지를 만드는 세 가지 쉬운 방법을 살펴보겠습니다. 모든 방법에는 어느 정도의 노력이 필요하지만, 워드프레스에서 랜딩 페이지를 만드는 단계별 가이드를 따르면 완벽한 랜딩 페이지를 빠르게 디자인할 수 있을 것입니다.

방법 1: 플러그인을 사용하여 워드프레스에 랜딩 페이지 생성

워드프레스 초보자에게 랜딩 페이지 제작은 꽤 어려운 작업일 수 있습니다. 하지만 걱정하지 마세요. 워드프레스는 랜딩 페이지를 쉽게 만들고 디자인할 수 있는 다양한 방법을 제공합니다. 그중 하나가 플러그인을 활용하는 것입니다.

많은 워드프레스 플러그인에는 드래그 앤 드롭 빌더와 미리 만들어진 랜딩 페이지 템플릿이 포함되어 있어 시작하기가 매우 쉽습니다. 어떻게 하는지 살펴보겠습니다

페이지 빌더는 많지만 , 여기서는 Elementor 페이지 빌더를 사용하여 만드는 방법을 보여드리겠습니다. 마찬가지로 Divi, Seedprod 등의 페이지 빌더를 사용하여 워드프레스에서 랜딩 페이지를 만들 수도 있습니다.

Elementor와 Beaver Builder 비교

Elementor는 드래그 앤 드롭 디자인 편집기를 통해 더욱 유연하고 강력한 기능을 제공합니다. 이를 통해 디자인을 더욱 자유롭게 제어하고 랜딩 페이지의 모든 요소를 ​​원하는 만큼 창의적으로 만들 수 있습니다.

알아두세요: 비즈니스를 위한 워드프레스 웹사이트 디자인 템플릿

1단계: Elementor를 설치합니다

워드프레스 사이트 설정이 완료되면 Elementor 플러그인을 사용하여 시각적인 드래그 앤 드롭 인터페이스로 랜딩 페이지를 손쉽게 디자인할 수 있습니다. 가장 좋은 점은 Elementor가 무료이며 워드프레스에서 바로 사용할 수 있다는 것입니다.

설치하려면 WordPress 관리자 페이지로 이동하여 플러그인 → 새 플러그인 추가로 이동한 다음 "Elementor"를 검색하면 됩니다. 정말 간단하죠!

2단계: 새 랜딩 페이지 생성

시작하려면 WordPress 대시보드에서 템플릿 → 랜딩 페이지 새 랜딩 페이지 추가 버튼을 클릭하세요.

그러면 Elementor 편집기로 이동하게 되는데, 여기에서 두 가지 옵션을 선택할 수 있습니다. 다양한 사전 디자인된 랜딩 페이지 템플릿 중에서 선택하거나, 템플릿 라이브러리를 닫고 맞춤형 페이지를 처음부터 직접 제작할 수도 있습니다.

WordPress 플러그인을 사용하여 인기 게시물을 표시하는 방법을 알아보세요.

3단계: 색상, 글꼴 및 색상 선택기를 사용하여 사용자 지정

랜딩 페이지 디자인을 시작하기 전에 비주얼 편집기를 제대로 설정하는 것이 좋습니다.

Elementor에서 새 랜딩 페이지를 만들면 Elementor Canvas 헤더 없는 빈 페이지가 제공되므로 , 핵심 내용에 집중된 랜딩 페이지를 구축하기에 적합합니다.

다음으로 기본 전역 색상을 설정하겠습니다. 기본 색상은 흰색, 보조 색상과 텍스트 색상은 검정색입니다.

이러한 기본 색상 구성표는 새 위젯을 추가할 때마다 자동으로 적용되므로 디자인 프로세스가 더욱 원활하고 빨라집니다.

또한 랜딩 페이지의 상단 섹션, 헤더 및 탐색 영역, 아웃테이크, 갤러리를 디자인하고 설정할 수 있습니다. 배경색, 이미지, 정렬을 변경하여 랜딩 페이지를 브랜드 색상에 맞게 꾸밀 수 있습니다.

관련 항목: 최고의 AI 웹 디자인 템플릿

4단계: 타사 도구와 통합

웹사이트 방문자를 늘리고 수익 창출 기회를 확대하기 위해 흥미로운 도구를 활용하는 것은 언제나 좋은 선택입니다. Elemetor를 사용하면 랜딩 페이지를 인기 마케팅 도구와 통합하여 캠페인 성과를 향상시킬 수 있습니다.

예를 들어, Elementor의 시각적 양식 작성기를 사용하면 연락처 양식을 쉽게 설정하고 페이지의 나머지 부분과 일치하도록 스타일을 지정할 수 있습니다. 이메일 마케팅 서비스에 손쉽게 연결할 수 있습니다.

5단계: 랜딩 페이지 게시

랜딩 페이지 편집 및 디자인을 마쳤다면 이제 게시 버튼을 누를 차례입니다. 게시하기 전에 랜딩 페이지를 미리 보기하여 모든 것이 제대로 보이는지 확인하는 것이 좋습니다.

미리 보려면 왼쪽 하단 패널의 눈 모양 아이콘을 클릭하세요. 결과가 만족스러우면 페이지를 게시하세요. 게시 후에는 녹색 '게시' 버튼이 회색 '업데이트' 버튼으로 바뀌어 추후 수정이 필요할 때 사용할 수 있습니다.

중요 자료: 모두를 위한 접근성 높은 웹사이트: ADA(미국 장애인법)를 준수하는 웹사이트 디자인 솔루션

방법 2: 테마를 사용하여 워드프레스에서 랜딩 페이지 만들기

다음으로, 워드프레스 웹사이트에 랜딩 페이지를 만드는 또 다른 방법은 워드프레스 테마를 선택하고 랜딩 페이지의 디자인과 레이아웃을 맞춤 설정하는 것입니다. 랜딩 페이지 제작에 사용할 수 있는 무료 워드프레스 테마가 많이 있습니다.

Astra와 Neve는 가장 인기 있는 WordPress 테마 두 가지이며 WooCommerce 및 Beaver Builder와 같은 인기 있는 도구와 호환됩니다. 또는 Elementor 랜딩 페이지 템플릿을 전문가 수준의 랜딩 페이지를 쉽게 구축할 수도 있습니다.

배우기: WooCommerce 템플릿 및 제품 페이지 맞춤 설정하기

자, 이제 워드프레스 테마를 사용하여 랜딩 페이지를 만드는 방법을 살펴보겠습니다

1단계: 테마를 선택하세요

'내 사이트' → '디자인' → '테마' 로 이동하세요 . WordPress에는 방대한 테마 라이브러리가 있습니다. 마음에 드는 테마를 선택하거나 새 테마를 다운로드하세요. 테마를 찾았으면 이름 옆에 있는 점 세 개를 클릭하고 '활성화'를 .

다음도 확인해 보세요: 최고의 전자상거래 UI 디자인 테마 및 예시 사이트

2단계: 콘텐츠 편집

랜딩 페이지 디자인의 핵심은 간결함입니다. 불필요한 요소가 적을수록 사용자가 더 쉽게 탐색할 수 있습니다. 따라서 불필요한 페이지나 게시물은 모두 삭제하는 것이 좋습니다. '내 사이트' → '사이트' → '페이지' 필요 없는 페이지 옆에 있는 점 세 개(…)를 클릭한 다음 '휴지통'을 . 어떤 페이지를 남겨두든 상관없습니다.

살펴보기: 중소기업을 위한 최고의 워드프레스 테마

3단계: 고정 홈페이지 설정

다음으로, 고정 홈페이지로 사용할 페이지를 설정하세요. 페이지 옆에 있는 점 세 개를 클릭하고 홈페이지로 설정하는 옵션을 선택하면 됩니다. 이렇게 하면 방문자가 사이트를 방문할 때 항상 사용자가 지정한 페이지로 이동하게 됩니다.

4단계: 페이지를 맞춤 설정하세요

이제 나만의 페이지를 꾸밀 차례입니다! 점 세 개 아이콘을 다시 클릭하고 '편집'을 누르세요. 텍스트, 이미지, 문의 양식, 클릭 유도 버튼 등을 추가하여 나만의 페이지를 만들 수 있습니다.

계속 읽어보세요: 웹사이트용 로고를 직접 만드는 방법은?

5단계: 라이브 방송 시작!

디자인이 마음에 드시면 '게시'를 클릭하여 랜딩 페이지를 공개하세요. 이제 새로운 랜딩 페이지가 정상적으로 작동할 것입니다!

방법 3: 워드프레스에서 맞춤 랜딩 페이지 만들기

워드프레스 초보자라면 이 방법이 마지막으로 추천할 만한 방법입니다. 하지만 워드프레스 랜딩 페이지를 좀 더 개인화된 방식으로 디자인하고 싶고 코딩과 디자인 과정에 자신 있다면 이 단계를 통해 더 쉽게 작업할 수 있습니다.

어떻게 되는지 살펴볼까요?

1단계: 자식 테마 생성

먼저 워드프레스에서 자식 테마를 생성하세요. 왜냐하면 워드프레스 웹사이트의 현재 테마는 보통 "부모 테마"라고 불리기 때문에, 랜딩 페이지를 제작하는 동안 기존 테마 설정에 영향을 주지 않는 새로운 자식 테마를 만드는 것이 좋을 수 있기 때문입니다.

2단계: style.css 파일을 생성합니다

자식 테마 설정이 완료되면 style.css 파일을 다음 코드로 편집하여 사용자 지정 테마 세부 정보를 정의합니다

/* 테마 이름: 커스텀 랜딩 페이지 테마 설명: Twenty Sixteen을 기반으로 랜딩 페이지에 맞게 커스터마이징된 차일드 테마 제작자: 귀하의 이름 제작자 URI: https://yourwebsite.com 템플릿: twentysixteen 버전: 1.0 텍스트 도메인: custom-landing-page

3단계. functions.php 파일을 생성합니다

다음으로 부모 테마와 자식 테마의 스타일시트를 모두 불러와야 합니다. 이를 위해 자식 테마 폴더 안에 functions.php

먼저 PHP 시작 태그를 추가하고, 그 다음 부모 테마의 스타일시트를 불러오는 코드를 추가하세요. 다음은 추가해야 할 코드의 예시입니다

<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>

이렇게 하면 자식 테마가 부모 테마와 함께 작동할 준비가 완료됩니다.

4단계: 자식 테마를 설치하고 활성화하세요

이제 워드프레스에 자식 테마를 설치하고 활성화할 차례입니다. 모든 것이 제대로 작동하는지 확인하려면 CSS 스타일을 테스트해 볼 수 있습니다. 다음 코드를 style.css 파일에 추가하고 홈페이지를 새로고침하세요. 배경색이 변경되면 모든 설정이 완료되어 예상대로 작동하는 것입니다!

본문, #페이지 { 배경: #ECE8C1;}

더 알아보기: 가장 빠른 워드프레스 테마 (페이지 스피드 점수 포함)

5단계: 사용자 지정 페이지 만들기

테마를 활성화한 후에는 랜딩 페이지에 사용할 사용자 지정 페이지 템플릿을 만들 수 있습니다. 먼저 자식 테마 폴더에 landing-page.php라는 새 파일을 만들고 다음 코드를 추가하세요

<?php /* Template Name: Landing Page */ ?>

템플릿 이름은 원하시는 이름으로 자유롭게 변경하신 후 파일을 저장하세요.

워드프레스에서 페이지를 편집하거나 새 페이지를 만들 때, 이제 이 사용자 지정 템플릿이 사이드바 옵션으로 제공됩니다. 단, 콘텐츠를 추가하기 전까지는 비어 있다는 점을 기억하세요!

6단계. CSS를 사용하여 랜딩 페이지를 맞춤 설정하세요

랜딩 페이지 템플릿 설정이 완료되었으니 이제 맞춤 설정할 차례입니다.

• 헤더 및 반복문 코드 복사 :
  상위 테마의 page.php public_html → wp-content → Themes → yourtheme 폴더 에 위치 )을 열고 get_header();로 시작하는 코드를 복사합니다. 복사한 코드를 landing-page.php 파일에 붙여넣으면 다음과 같이 됩니다.

<?php /* Template Name: Landing Page */ ?> <?php get_header(); while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; get_footer(); ?>

• 사이드바 및 푸터 제거 :
  페이지를 깔끔하고 집중력을 방해하지 않게 유지하려면 다음 줄을 삭제하여 사이드바와 푸터를 제거하세요.

get_sidebar();get_footer();

• 사용자 정의 콘텐츠 추가 :
  WordPress 블록 편집기를 사용하여 랜딩 페이지에 콘텐츠를 추가하거나, Gutenberg Forms 플러그인을 설치하여 사용자 정의 양식을 만들 수 있습니다.

• 추가 CSS 추가 :
  더 자세한 사용자 정의를 위해 [외관] → [사용자 정의] → [추가 CSS] . 여기에서 배경, 글꼴 및 기타 요소를 수정할 수 있습니다.

• 배경색 변경:

.site-content-contain { background-color: #DEF0F5; position: relative;}

• 글꼴을 사용자 지정하세요:

p { color: teal; font-family: Georgia; font-size: 22px;} h1 { color: white; text-align: center;}

이렇게 하면 배경색이 연두색으로 바뀌고 랜딩 페이지의 글꼴 스타일과 크기가 조정됩니다. 이 방법은 초보자에게는 다소 복잡해 보일 수 있지만, 연습을 하거나 워드프레스 개발자 및 디자이너의 도움을 받으면 훨씬 쉬워집니다.

워드프레스에서 완벽한 랜딩 페이지를 만드는 팁

위에서 설명한 방법들을 따르고 자신에게 맞는 방식을 선택한다면 워드프레스에서 랜딩 페이지를 만드는 것은 상당히 간단합니다. 하지만 랜딩 페이지를 최대한 활용하려면 어떻게 최적화해야 하는지도 알아야 합니다.

동적 랜딩 페이지는 고객 데이터 및 리드 생성에 대한 유용한 정보를 제공합니다. 이러한 랜딩 페이지를 통해 유입되는 고객 데이터를 추적하면 마케팅 캠페인에 실제로 참여하는 사용자 수를 파악하는 데에도 도움이 됩니다.

때로는 랜딩 페이지를 만드는 것만으로는 충분하지 않습니다. 잠재 고객을 전환시킬 수 있는 랜딩 페이지를 디자인하는 것만으로도 웹사이트에 필요한 모든 것을 갖출 수 있습니다. 그 방법을 살펴보겠습니다

단순함이 최고다

디자인에 있어 미니멀리즘을 추구하세요 . 심플함이 새로운 스마트함이며, 랜딩 페이지는 이러한 원칙을 염두에 두고 디자인해야 합니다. 랜딩 페이지의 핵심은 잠재 고객을 전환하는 것이므로, 사용자가 쉽게 탐색할 수 있도록 만들어야 합니다. 너무 많은 정보나 요소는 오히려 사용자를 혼란스럽게 할 수 있습니다. 따라서 전환율을 극대화 .

구매 퍼널 하단 전환율을 높이는 방법을 알아보세요

랜딩 페이지를 목표에 맞춰 구성하세요

콘텐츠 전략을 명확히 정의하고 디자인과 연계해야 합니다. 매력적인 행동 유도 버튼(CTA)을 포함하든, 정보 수집을 위한 문의 양식을 활용하든, 최종 목표는 반드시 달성해야 합니다. 그래야만 랜딩 페이지를 통해 최대의 효과를 얻을 수 있습니다.

영향력을 창출하는 디자인

랜딩 페이지를 간결하게 유지하는 것도 중요하지만, 효과적인 콘텐츠를 만드는 것 또한 중요합니다. 랜딩 페이지는 사용자에게 깊은 인상을 남길 만큼 충분히 흥미로운 정보를 제공해야 합니다. 이미지나 눈길을 사로잡는 제목을 활용하여 사용자의 관심을 끌고 참여를 유도할 .

시험 보기

랜딩 페이지 테스트는 필수입니다! 직접 테스트하지 않으면 사용자들이 랜딩 페이지를 어떻게 인식하고 사용하는지 알 수 없습니다. 클릭 유도 버튼(CTA), 문의 양식 구독 버튼 등 랜딩 페이지의 모든 요소를 ​​테스트해 보세요. 이를 통해 랜딩 페이지에서 얻을 수 있는 잠재 고객을 놓치지 않을 수 있습니다.

더 읽어보기: 웹사이트 재디자인: 웹사이트 개편이 필요한 신호

모니터링 및 최적화

워드프레스에서 랜딩 페이지를 만들고 게시했다고 해서 작업이 끝나는 것은 아닙니다. 성공적인 결과를 얻으려면 정기적으로 페이지 성능을 확인하고 모니터링해야 합니다. 마치 정기적인 워드프레스 유지 관리 . 무엇이 효과가 있고 무엇이 효과가 없는지 꾸준히 점검하세요. 다양한 제목, 이미지, 요소를 사용해 보고 어떤 것이 가장 효과적인지 확인해 보세요. 페이지를 지속적으로 개선하고 최적화하십시오.

화이트 라벨 워드프레스 선택하기: 최고의 화이트 라벨 웹사이트 디자인 에이전시: 추천 업체

마무리

랜딩 페이지는 모든 워드프레스 웹사이트에서 중요한 요소이며, 전환율을 높이고 방문자 참여를 유도하는 데 도움이 됩니다. 워드프레스에서 랜딩 페이지를 만드는 방법은 사용자의 숙련도에 따라 여러 가지가 있습니다.

처음 시작하는 단계라면 플러그인이나 테마를 사용하는 것이 가장 쉬운 방법입니다. 다양한 기능이 내장되어 있어 코딩 전문가가 아니더라도 랜딩 페이지를 맞춤 설정하고 최적화할 수 있습니다.

반면, HTML, PHP, CSS에 익숙하다면 랜딩 페이지를 처음부터 직접 제작하면 디자인에 대한 유연성과 제어력이 훨씬 더 커집니다.

어떤 방법을 선택하든, 전환율을 높이는 랜딩 페이지를 만들려면 강력한 헤드라인, 깔끔한 디자인, 그리고 명확한 행동 유도 문구에 집중해야 합니다.

워드프레스 랜딩 페이지 제작 방법에 대한 FAQ