웹사이트 검색

처음부터 WordPress로 랜딩 페이지를 구축하는 방법

랜딩 페이지는 주로 리드 양식을 통해 방문자의 관심과 세부 정보(예: 이메일 주소)를 포착하도록 설계된 웹 페이지입니다. 마케팅하는 제품에 따라 특정 잠재고객을 타겟팅하도록 설계되었습니다.

랜딩 페이지는 트래픽을 기본 웹사이트로 리디렉션하는 데 사용되는 스퀴즈 페이지일 수도 있습니다. 귀하의 사이트에는 원하는 만큼 많은 랜딩 페이지를 가질 수 있습니다. 실제로 랜딩 페이지가 많을수록 더 많은 리드를 얻을 수 있습니다.

예를 들어, 이메일 캠페인을 통해 신제품을 마케팅하는 경우 타겟 이메일 캠페인의 트래픽을 특별히 디자인된 제품 방문 페이지로 리디렉션할 수 있습니다. 이메일이나 기타 수단을 통해 수행하는 모든 프로모션에도 동일하게 적용됩니다. 중요한 것은 시작하는 모든 캠페인에 대해 고유한 랜딩 페이지를 만드는 것입니다.

랜딩 페이지 기본 사항

랜딩 페이지가 어떤 모습이어야 하는지, 어떤 모습이어야 하는지에 대한 서면 규칙은 없습니다. 그러나 수년간 다양한 랜딩 페이지 스타일을 실험한 결과 랜딩 페이지를 디자인할 때 특정 핵심 측면을 고려해야 한다는 결론에 도달했습니다. 상위 4개는 다음과 같습니다.

  1. 구체성: 방문 페이지를 디자인할 때 제공하는 제품을 구체적으로 작성하세요. 당신은 또한 그 안에 무엇이 당신을 위해 있는지 알아야합니다. 예를 들어 사용자가 방문 페이지에 가입할 때 무료 정보를 제공하는 경우입니다. 어떻게 혜택을 받을 수 있나요?
  2. 이점: 최고의 마케팅 용어는 방문자의 관심을 끌 수 있습니다. 그러나 어떤 이점을 얻게 될지 명확하게 설명하지 않으면 전환율이 낮을 수 있습니다. 좋은 랜딩 페이지는 사용자가 제안으로부터 어떤 이점을 얻을 수 있는지 명확해야 합니다.
  3. 긴급성: 방문 페이지의 문구는 긴급성을 조성해야 합니다. 페이지 방문자가 나중에가 아니라 지금 제안을 받아야 하는 이유를 설명하세요.
  4. 전환: 이제 방문자의 관심을 끌고 훌륭한 제안에 대해 설득했습니다. 그러면 그들은 그것을 어떻게 얻나요? 랜딩 페이지는 리드 전환을 최대한 간단하게 만들어야 합니다.

WordPress로 랜딩 페이지 만들기

WordPress는 멋진 랜딩 페이지를 구축할 수 있는 다양한 방법을 제공합니다. 방문 페이지를 만드는 데 사용할 수 있는 두 가지 옵션과 코딩 지식이 있는 개발자나 고급 WordPress 사용자에게만 권장되는 세 번째 옵션에 대해 논의하겠습니다.

1. WordPress 테마로 랜딩 페이지를 만드는 방법

방문 페이지 제작을 위해 특별히 설계된 수많은 WordPress 테마가 있습니다. 이러한 단일 페이지 테마에는 로컬 스크롤, 눈길을 끄는 슬라이더, 기능 상자 등과 같은 훌륭한 기능이 포함되어 있어 나만의 랜딩 페이지를 쉽게 만들 수 있습니다. 다음은 우리가 가장 좋아하는 몇 가지입니다.

Zerif Pro WordPress 테마

Zerif Pro는 매우 인기 있는 Zerif 라이트 단일 페이지 비즈니스 WordPress 테마의 프리미엄 버전입니다. 드래그 앤 드롭 페이지 섹션, 사이트 출처 페이지 빌더, 맞춤설정 가능한 색상, 슬라이더 등 전문 웹사이트를 만들기 위한 사용하기 쉬운 옵션이 포함되어 있어 방문 페이지를 위한 훌륭한 옵션입니다.

총 WordPress 테마

물론 전체 WordPress 테마(40개 이상의 빠른 시작 데모 포함)는 특히 랜딩 페이지에 탁월한 옵션입니다. 테마에는 500개 이상의 라이브 테마 사용자 정의 디자인 옵션(색상, 글꼴, 페이지 너비 등), 프런트 엔드 드래그 앤 드롭 페이지 빌더, 100개 페이지 빌더 요소, 사용자 정의 게시물 유형(직원, 포트폴리오 및 추천서용), 사용자 정의 가능한 헤더가 있습니다. 바닥글과 그 이상. Total로 만들 수 없는 것은 없습니다.

하지만 마음에 드는 테마를 결정했다면 설치하고 활성화하세요! 새 테마를 추가하려면 외관 > 테마 > 새로 추가로 이동한 다음 WordPress.org 저장소에서 멋진 무료 테마를 찾아보거나 업로드 링크를 클릭하여 설치하세요. 다른 곳의 프리미엄 또는 무료 테마.

테마로 홈페이지 만들기

이 예에서는 웹사이트나 WordPress 대시보드에서 얻을 수 있는 ThemeIsle의 Zerif Lite를 사용합니다. 시작하려면 테마를 간단히 설치하고 활성화하세요.

대부분의 단일 페이지 WordPress 테마는 “홈” 페이지 템플릿을 사용하여 쉽게 시작할 수 있습니다. 템플릿을 사용하려면 페이지 > 새로 추가로 이동하여 페이지 이름을 지정한 다음 사이드바의 페이지 속성 섹션에서 페이지 템플릿을 선택하세요. Zerif에서는 프런트페이지 템플릿입니다. 그런 다음 페이지를 게시하세요.

홈페이지가 게시되면 방문자가 귀하의 URL을 방문할 때 표시되도록 홈페이지를 첫 페이지로 설정해야 합니다. 설정 > 읽기로 이동하여 첫 페이지 표시 > 정적 페이지에서 방금 만든 페이지를 선택하세요. 그런 다음 변경 사항을 저장합니다.

이제 랜딩 페이지 콘텐츠 사용자 정의를 시작할 수 있습니다. Zerif Lite는 "프론트 페이지 섹션" 옵션(외관 > 사용자 정의에서 액세스 가능) 아래 사용자 정의 도구의 테마 옵션을 사용합니다. 파란색 연필 아이콘을 클릭하면 일부 페이지 콘텐츠를 빠르게 편집할 수도 있습니다. 완료되면 저장만 하면 랜딩 페이지를 시작할 수 있습니다!

모든 랜딩 페이지 테마가 첫 페이지 옵션에 WordPress Customizer를 사용하는 것은 아닙니다. 일부 테마는 WordPress 대시보드(일반적으로 게시물, 미디어, 페이지 등 옵션 근처)에 표시되는 맞춤 게시물 유형을 사용하고, 일부 테마에는 홈 템플릿 전용 드래그 앤 드롭 요소가 내장되어 있고, 다른 테마에는 페이지 빌더(우리가 제공하는)가 포함되어 있습니다. 다음에 얘기하겠습니다.) 테마 사용 방법에 대해 궁금한 점이 있으면 설명서를 참조하거나 프리미엄 테마인 경우 지원팀에 문의하세요.

2. WordPress 플러그인으로 랜딩 페이지를 만드는 방법

테마는 훌륭하지만 WordPress로 랜딩 페이지를 구축하는 가장 쉬운 방법 중 하나는 플러그인을 사용하는 것입니다. 무료 및 프리미엄 버전 모두에 랜딩 페이지 플러그인이 많이 있습니다. 모두 거의 동일한 방식으로 작동합니다. 일반적으로 다양한 목적을 위한 랜딩 페이지 템플릿 모음을 제공합니다.

설치 및 활성화한 후 플러그인의 설정 페이지를 사용하여 페이지 사용자 정의를 관리할 수 있습니다. 일부 플러그인은 후크, 필터 및 작업을 사용하여 랜딩 페이지에 추가 사용자 정의 및 기능을 추가할 수 있는 타사 확장 기능을 허용합니다. 고려해야 할 몇 가지 주목할만한 WordPress 랜딩 페이지 플러그인이 있습니다.

  • 성공적인 방문 페이지
  • WordPress 랜딩 페이지
  • 시차 중력 랜딩 페이지
  • 프레스 최적화

하지만 다음과 같은 일반 페이지 작성 플러그인도 고려해 보는 것이 좋습니다.

  • WP 베이커리 페이지 빌더
  • 비버 빌더
  • 엘레멘터

개인적으로 가장 좋아하는 것은 WP Bakery Page Builder로, 최고 판매율을 자랑하는 Total WordPress 테마와 함께 무료로 제공됩니다.

플러그인을 사용하여 랜딩 페이지를 구축하는 방법

페이지 빌더 플러그인을 사용하려면 먼저 호환되는 테마를 설치하고 활성화해야 합니다. 대부분의 테마에는 문제가 없지만, 선호하는 플러그인과 작동하도록 특별히 제작되었거나 테스트된 테마를 찾는 것이 항상 더 좋습니다. 이 예에서는 권장 플러그인을 설치하고 활성화하라는 메시지가 표시되는 Total 테마와 함께 WP Bakery Page Builder를 사용합니다.

테마에 프롬프트가 포함되어 있지 않으면 설명서를 확인하여 포함된 플러그인을 설치하는 방법을 알아보세요. 또는 페이지 빌더를 직접 구매한 경우 플러그인 > 새로 추가 > 플러그인 업로드로 이동하여 설치하고 활성화하세요.

페이지 빌더 플러그인이 활성화되면 페이지 > 새로 추가로 이동하여 구축을 시작하세요.

Total에는 '방문 페이지' 페이지 템플릿에 대한 특별 옵션이 포함되어 있습니다. 페이지를 구축할 때 이 템플릿은 머리글과 바닥글 섹션을 제거합니다(이 영역은 페이지 간을 탐색해야 하는 여러 페이지로 구성된 웹사이트에 더 적합하기 때문에 의미가 있습니다). 템플릿을 선택하려면 페이지를 저장하세요.

페이지가 준비되면 이제 구축을 시작할 시간입니다. Visual Composer를 사용하는 경우 이제 백엔드 편집기 또는 라이브 프런트엔드 편집기를 사용할 수 있는 옵션이 제공됩니다. Total은 프런트엔드 편집기를 완벽하게 지원하며 제작하는 동안 각 요소를 볼 수 있으므로 사용을 적극 권장합니다. 편집을 마친 후에는 반드시 페이지를 업데이트하거나 게시하세요. 이 특정 페이지 빌더 사용에 대해 자세히 알아보려면 Visual Composer 가이드를 살펴보세요.

다음으로 첫 페이지를 방금 생성한 페이지로 설정해야 합니다. 대부분의 테마에서는 이 설정을 편집해야 하므로 이 단계는 다소 익숙하게 들릴 것입니다. 따라서 설정 > 읽기 > 첫 페이지 표시 > 정적 페이지로 이동하여 새 홈페이지를 선택하세요.

보너스: 기성 템플릿 가져오기

아, 그리고 Total WordPress 테마를 사용하는 경우 미리 만들어진 랜딩 페이지(또는 다중 페이지 사이트 디자인)를 가져와 시작하는 옵션도 있습니다. Total에는 테마 패널 > 데모 가져오기에 수많은 가져오기가 포함되어 있습니다.

가져오기를 시작하려면 클릭하세요. Total은 가져오려는 특정 데모에 필요한 플러그인을 설치하고 활성화하라는 메시지도 표시합니다.

여기에서 XML 콘텐츠, 이미지, 테마 사용자 정의 설정, 위젯, 슬라이더(해당하는 경우)까지 가져올 수 있는 옵션이 제공됩니다. 가져오기가 완료되면 원하는 대로 페이지를 편집하고 맞춤설정할 수 있습니다.

변경하려면 페이지로 이동하여 편집하려는 페이지를 찾아 마우스를 놓고 "페이지 빌더로 편집" 옵션을 클릭하세요. 그러면 프런트엔드 편집기가 열립니다. 간단히 가리키고 클릭하여 편집한 다음 화면 상단의 "업데이트" 버튼을 클릭하여 변경 사항을 저장하세요. 정말 쉽지 않습니다!

기타 온라인 도구

플러그인과 마찬가지로 방문 페이지를 만드는 데 사용할 수 있는 온라인 도구가 많이 있습니다. Google에서 빠르게 검색하면 직접 확인할 수 있습니다. 이는 기본적으로 WYSIWYG 웹 사이트 빌더처럼 작동하므로 사용자 인터페이스 구성 요소를 선택하고 사용하여 즉시 랜딩 페이지를 만들 수 있습니다. 그러나 제한 사항이 있으며 일부는 유연하지 않습니다. 적절하게 디자인되고 직접 코딩된 페이지는 종종 훨씬 우수하고 훨씬 더 유연합니다.

3. WordPress 페이지 템플릿을 사용하여 랜딩 페이지를 구축하는 방법(고급)

개발자이거나 지식이 풍부하고 고급인 WordPress 사용자인 경우 현재 WordPress 테마를 편집하여 랜딩 페이지에 대한 사용자 정의 페이지 템플릿을 추가할 수 있습니다. 많은 상업용 WordPress 테마에는 각각 특정 목적을 가진 다양한 페이지 템플릿이 함께 제공됩니다. 테마에는 하나 이상의 템플릿이 있을 수 있습니다. 고품질 테마는 다양한 목적을 위해 사전 구축된 여러 랜딩 페이지 템플릿을 제공합니다.

즉, 빈 페이지 템플릿에서 나만의 랜딩 페이지를 만들 수 있습니다. CSS 기술과 디자인에 대한 안목만 있으면 됩니다. 설명을 위해 <i>TwentyThirteen 테마의 빈 페이지 템플릿을 사용하여 간단한 랜딩 페이지를 만들어 보겠습니다. 저는 빈 페이지 템플릿에 큰 버튼과 함께 눈길을 끄는 큰 제목을 넣을 것입니다.

이 방법은 전용 도메인을 갖게 될 랜딩 페이지를 구축하는 경우에 이상적입니다. 즉, 해당 랜딩 페이지는 기본 웹사이트의 일부가 아닙니다. 멀티사이트는 디자인에 많은 유연성을 제공하지 않지만 전용 도메인을 사용하면 다른 페이지에 대해 걱정할 필요 없이 원하는 방식으로 테마를 자유롭게 해체할 수 있습니다.

참고: 이 옵션은 지식이 풍부하고 경험이 풍부한 코더인 개발자 또는 고급 WordPress 사용자에게만 권장됩니다. WordPress를 처음 사용하는 경우 방문 페이지를 구축할 때 테마와 플러그인을 사용하는 것이 좋습니다.

1단계: 하위 테마 폴더 만들기

다른 테마를 변경할 예정이므로 먼저 하위 테마를 만드는 것이 중요합니다. 이렇게 하면 핵심 테마가 업데이트될 때 테마에 대한 모든 변경 사항이 손실되지 않습니다.

시작하려면 먼저 FTP를 통해 웹사이트에 연결하고 wp-content/themes 디렉토리에 하위 테마를 위한 새 폴더를 만들어야 합니다. 편집 중인 테마 끝에 'child'를 추가하는 것이 좋습니다(예: 2011child 또는 이와 유사한 항목). 여기에서 핵심 테마를 변경하기 위해 새 파일을 추가할 수 있습니다.

2단계: 하위 테마에 대한 새 style.css 파일 만들기

방금 만든 하위 테마 폴더를 열고 style.css라는 새 파일(새 스타일시트가 됨)을 추가합니다. 다음으로 WordPress 대시보드에서 외관 > 편집기로 이동하세요. 편집기 창에 테마의 기본 스타일시트가 열려 있는 것을 볼 수 있습니다.

원본 테마 파일을 가이드로 사용하여 방금 생성한 하위 테마의 style.css 파일에 대한 제목 섹션을 만듭니다. 이는 다음과 같습니다.

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen WordPress theme
Version: 1.0.0
*/

새 스타일시트가 준비되면 다음 단계는 상위 스타일시트를 대기열에 추가하여 로드하는 것입니다.

3단계: 하위 테마용 function.php 파일 만들기

하위 테마를 활성화하면 웹사이트에 스타일이 로드되지 않으므로 상위 테마의 스타일시트를 로드해야 합니다. 이렇게 하려면 하위 테마 폴더에 functions.php라는 이름의 빈 파일을 새로 만드세요. 그런 다음 다음 코드를 추가합니다.

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentythirteen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentythirteenchild-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

그러면 상위 테마 스타일시트 다음에 편집된 하위 테마 스타일이 로드됩니다. 이제 TwentyThirteen 테마에 대해 작동하는 하위 테마가 생겼습니다. 변경할 시간입니다!

4단계: 스타일 맞춤설정

하위 테마가 준비되면 랜딩 페이지 사용자 정의를 시작할 수 있습니다. 먼저 랜딩 페이지를 만드는 중이므로 기본 탐색 기능을 제거하고 싶을 수도 있습니다. 이렇게 하려면 하위 테마 style.css 파일에 다음 코드를 추가하세요. (참고: 탐색 요소 이름은 Google과 다를 수 있습니다. 요소 이름을 찾으려면 다음을 사용할 수 있습니다. 브라우저 검사기 도구를 사용하거나 header.php 파일을 확인하세요):

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

지금 사이트를 보면 탐색 기능이 사라집니다. 대신 등록 페이지로 리디렉션되고 나중에 기본 웹사이트로 리디렉션되는 큰 CTA 버튼을 삽입하겠습니다.

다음으로 글꼴 크기를 변경하여 스타일시트의 사이트 헤더(h1)를 간단히 사용자 정의하겠습니다. 사이트 헤더는 .site-title 클래스로 식별됩니다. 다시 한 번, 헤더가 사용하는 요소 이름이 예제의 이름과 다를 수 있으므로 자신의 테마를 다시 확인하여 헤더가 사용하는 요소 이름을 확인하세요. 글꼴 크기를 확대하려면 다음 코드의 마지막 줄을 하위 테마의 스타일시트에 추가하세요.

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

페이지를 저장하고 새로 고치세요. 더 큰 제목이 표시됩니다.

5단계: 빈 페이지 템플릿을 만들고 이름을 <i>front-page.php로 지정합니다.

WordPress 편집기에서 페이지 템플릿(page.php)을 클릭하여 해당 코드를 확인하세요. 다음과 유사해야 하는 get_header()까지 첫 번째 줄을 복사합니다.

<?php
/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

코드 편집기를 열고 front-page.php 라는 새 파일을 만듭니다. 이전 단계에서 복사한 줄을 붙여넣습니다. 이 새 파일을 하위 테마 폴더에 저장하세요.

왜 front-page.php인가요? 이는 정적 프론트 페이지가 될 것이므로 항상 선택되어 먼저 표시되고 front-page.php가 WordPress 템플릿 계층 구조에서 가장 높은 우선순위를 갖는지 확인하고 싶습니다. 또한 템플릿 파일에 바닥글을 삽입할 수도 있고 하지 않을 수도 있습니다(get_footer() 함수 사용). 생략했습니다.

댓글 섹션의 첫 번째 줄을 제거하고 이를 내 방문 페이지라고 하는 템플릿 이름으로 바꿉니다.

변경 사항을 저장합니다. 지금 사이트를 보려고 하면 수정된 헤더만 있는 빈 페이지가 나타납니다. 이것이 front-page.php 템플릿입니다. 아직 콘텐츠를 넣지 않았기 때문에 비어 있습니다.

6단계: 랜딩 페이지에 대한 사용자 정의 콘텐츠 마크업 삽입

이제 헤더를 편집하고 빈 페이지 템플릿을 만들었으므로 랜딩 페이지에 실제 콘텐츠를 추가할 차례입니다. 남은 것은 큰 버튼을 새로운 첫 페이지 템플릿에 넣는 것입니다. 이 코드를 파일에 붙여넣고 저장하면 됩니다. 그것은 단지 div에 싸인 링크일 뿐이고 그게 전부입니다.

/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

    <div class="landing-page">
        <a href="#" class="button"> Big button here</a>
    </div>

사이트를 보면 버튼의 링크 텍스트와 함께 페이지의 콘텐츠 부분에 방금 삽입한 제목이 표시됩니다.

이제 CSS 스타일을 사용하여 페이지에 생기를 불어넣을 차례입니다. <i>외관 > 편집기로 이동하세요. <i>스타일시트를 클릭하여 편집할 <i>style.css 파일을 엽니다. 이 코드를 붙여넣고 저장하세요.

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

.landing-page {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.button {
    display: block;
    width: 50%;
    background: #FF6600;
    border: 2px solid #FF8533;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font: bold 3.2em/100px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 100px auto auto auto;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 3px 3px rgba(255, 255, 255, 0.2);
}

a.button { text-decoration: none }

a.button:hover {
    color: #fff;
    background: #FF8533;
    background: -webkit-linear-gradient(top, #FF8533, #FF8533);
    background: -moz-linear-gradient(top, #FF8533, #FF8533);
    background: -o-linear-gradient(top, #FF8533, #FF8533);
    background: -ms-linear-gradient(top, #FF8533, #FF8533);
    background: linear-gradient(top, #FF8533, #FF8533);
}

이제 귀하의 페이지는 다음과 같이 보일 것입니다:

축하해요! 방금 WordPress를 사용하여 사용자 정의 랜딩 페이지를 구축했습니다. 매우 기본적이므로 실제 생활에서는 사용하지 않을 수도 있지만 페이지 템플릿을 사용하여 이를 수행하는 방법을 보여 주는 것이 아이디어였습니다. 이 방법으로 모든 테마의 페이지를 편집하고 사용자 정의 랜딩 페이지를 만들 수 있습니다.

결론

우리는 WordPress 랜딩 페이지를 구축하는 세 가지 일반적인 방법을 살펴보았습니다. 테마나 플러그인을 사용하는 것이 좋습니다. 하지만 DIY 경로로 가고 싶다면 먼저 코딩 기술을 익히세요.

마케팅 캠페인에 방문 페이지를 사용하고 계십니까? 그 과정에서 발견한 경험, 성공 또는 어려움을 공유할 수 있습니까? 이에 대한 모든 것을 듣고 싶습니다!