랜딩 페이지 빌더로 사용자 정의 웹페이지를 만드는 방법

웹 애플리케이션의 랜딩 페이지 빌더를 사용하면 기존 템플릿 세트에서 맞춤형 랜딩 페이지를 디자인할 수 있습니다. 그러나 사용자는 이러한 템플릿을 자신의 취향에 맞게 사용자 지정하거나 웹 애플리케이션에서 제공하는 요소를 사용하여 자신만의 템플릿을 만들 수도 있습니다.

이를 더 잘 이해하기 위해 먼저 웹 애플리케이션에서 랜딩 페이지의 구조를 이해해 보겠습니다.

웹 애플리케이션의 모든 랜딩 페이지는 이 계층 구조를 따릅니다:

Section > Row > Column > Elements

이러한 구조적 속성을 이해해 보겠습니다.

• Section

섹션은 랜딩 페이지의 모든 접힌 부분을 의미합니다. 섹션은 행을 추가하여 랜딩 페이지를 구성할 수 있는 요소입니다. 섹션을 구성하는 방법은 다음과 같습니다.

• Section Layout  : 랜딩 페이지의 모든 섹션은 세로로 정렬됩니다. 섹션을 위나 아래로 드래그하여 순서를 변경할 수 있습니다.  Copy 아이콘을 클릭하여 섹션을 복제할 수도 있습니다. 속성을 변경하려고 새 섹션을 추가하려면 을 클릭합니다. 그러면 섹션을 구성할 수 있는 섹션 갤러리가 나타납니다.

• Section Gallery: 웹 애플리케이션에서는 두 가지 옵션 중 하나를 사용하여 섹션 구성을 선택할 수 있습니다:열 개수를 선택하면 요소를 추가할 수 있는 레이아웃으로 섹션이 채워집니다.
• Choose from a Template: 섹션을 처음부터 새로 만드는 대신 웹 애플리케이션에서 제공하는 템플릿 중에서 선택할 수도 있습니다. 다음 템플릿 중 하나를 선택할 수 있습니다. 클릭하여 선택한 템플릿을 랜딩 페이지에 추가합니다.

이제 섹션이 추가되었으므로 섹션의 속성을 구성할 수 있습니다.

• Section Settings : 웹 애플리케이션에서 각 섹션의 속성을 구성할 수 있습니다. 각 섹션에 대해 수정할 수 있는 항목은 다음과 같습니다:
  
  • Name: 각 섹션에 이름을 추가하여 쉽게 정렬할 수 있습니다.
  • Background Color: 미리 설정된 색상 중 하나를 선택하여 배경을 변경합니다.를 클릭하여 브랜드 테마에 맞는 색상을 선택하고 16진수 코드를 추가한 다음 클릭하여 팔레트에 색상을 추가할 수도 있습니다.
  • Background Image: 섹션에서 배경 이미지를 추가하거나 바꿀 수 있습니다. 이미지 교체를 클릭하여 새 이미지를 업로드합니다. 그러면 컴퓨터에서 이미지 또는 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 나타납니다.
  • Stock Image: 검색창에서 스톡 이미지를 검색하거나 드롭다운을 클릭하고 제공되는 카테고리에서 선택할 수 있습니다.이미지를 선택한 후 클릭하여 배경에 이미지를 추가합니다.
  • Style: 섹션의 스타일을 구성합니다. 섹션의 콘텐츠를 끝에서 끝까지 늘리고, 전체 높이를 유지하고, 배경 효과를 시차로 설정할지 여부를 선택합니다. 토글을 사용하여 이러한 스타일을 활성화 또는 비활성화합니다.
  • Spacing: '가로'와 '세로' 사이를 전환하여 섹션의 간격을 각각 구성합니다. 가로 또는 세로 방향에서 여백과 패딩을 설정할 수 있습니다.

    https://freshsales.wistia.com/medias/pmud9h8drc

    • Margin 은 섹션과 인접한 다른 섹션 사이의 간격입니다.

    • Padding 은 섹션 내부의 요소 사이의 간격을 의미합니다.

                    섹션의 요소 사이에 설정할 간격을 선택합니다. 기본 설정에 따라 다음 옵션 중에서 선택할 수 있습니다:

• XS(초소형) - 576픽셀 미만의 화면용
• SM(소형) - 너비가 576픽셀 이상인 화면 - 휴대폰 및 태블릿에 적합합니다.
• MD(중간) - 너비가 768픽셀 이상인 화면, 태블릿 및 소형 노트북용
• LG(대형) - 너비 992픽셀 이상의 화면 - 노트북 및 데스크톱용
• XL(초대형) - 1200픽셀 이상의 화면용
• No Padding/ No Margin - 패딩과 여백을 위한 공간을 남기지 않습니다.

• Visibility: 섹션의 표시 여부를 정의합니다. 데스크톱, 모바일 또는 둘 다에 표시하도록 선택합니다.

• Row :

            행은 모든 섹션 내부의 개별 요소입니다. 행 설정을 사용하여 행을 구성할 수 있습니다. 행을 구성하는 방법은 다음과 같습니다:

• Background Color
• Spacing
• Visibility
• 고급:
  • Hide Gutters: 여백은 열 사이의 패딩입니다. 반응형으로 공간을 추가하고 콘텐츠의 정렬을 설정하는 데 사용할 수 있습니다. 여백을 숨기면 열 사이의 간격을 없애고 행을 더 간결하게 만들 수 있습니다. 
  • Border Radius: 슬라이더를 사용하여 모서리 반경을 늘리거나 줄입니다.

• Column:
  열은 행 내부의 수직 하위 섹션입니다. 열에 다음과 같은 사용자 지정을 수행할 수 있습니다:

• Style
• Background Image
• Background Color
• Spacing
• Visibility
• Alignment
  행 내부에서 열의 정렬을 설정하도록 선택할 수 있습니다. 다음 중에서 선택할 수 있습니다:
  • 왼쪽 정렬
  • 오른쪽 정렬
  • 가운데 정렬

• Element : 사용자는 다음 요소 중에서 선택할 수 있습니다:
  • Text: 텍스트 블록을 드래그 앤 드롭하여 캠페인에 텍스트를 추가합니다. 텍스트 블록에는 글꼴 크기, 글꼴 유형, 정렬 등을 사용하여 텍스트 서식을 지정할 수 있는 툴바가 제공됩니다. 글머리 기호 또는 번호 매기기 목록을 만들거나 링크를 삽입하도록 선택할 수도 있습니다. 또한 텍스트 색상 등을 사용하여 블록의 속성을 사용자 지정할 수 있습니다.
  • Image: 이미지 블록을 사용하면 이메일 캠페인에 이미지를 삽입할 수 있습니다. 블록을 섹션으로 끌어다 놓으면 이미지의 자리 표시자가 추가됩니다. 캠페인에 이미지를 추가하려면 이미지 바꾸기를 클릭합니다. 그러면 다음 세 가지 방법 중 하나로 캠페인에 사용할 이미지를 가져올 수 있습니다:
    • 로컬 저장소에서 Upload하세요.
    • 
    • 제공되는 스톡 이미지를 검색하고 을 클릭하여 블록에 이미지를 추가합니다.

이미지가 업로드되면 오른쪽 패널에서 이미지 표시 및 크기를 사용자 지정할 수 있습니다. 이미지 너비를 사용자 지정하고, 간격을 구성하고, 정렬을 설정하고, 이미지에 링크를 추가하는 등의 작업을 할 수 있습니다. 이미지에 그림자를 추가할 수도 있습니다.

• Button : 버튼 콘텐츠 블록을 끌어다 놓아 이메일에 CTA 버튼을 추가합니다. 편집 툴바를 사용하여 버튼 텍스트를 편집합니다. 버튼을 사용자 지정하려면 콘텐츠 속성 패널을 사용하면 됩니다. URL 링크, 섹션에 버튼 고정, 퍼널의 페이지 링크 중에서 선택하여 버튼의 CTA를 정의한 다음 정렬, 색상, 간격, 크기 등을 사용자 지정할 수 있습니다. 또한 데스크톱 또는 모바일 디바이스에서 버튼 섹션을 숨기거나 옵션을 선택하여 두 디바이스 모두에 표시되도록 할 수도 있습니다.
• Divider: 콘텐츠 섹션에 디바이더를 추가하려면 드래그 앤 드롭하세요. 디바이더를 사용하면 랜딩 페이지의 여러 접힌 부분 사이의 경계를 명확하게 설정할 수 있습니다. 디바이더를 사용자 지정하여 크기(두께), 색상, 간격 등의 속성을 정의할 수 있습니다.
• 

  Form: 랜딩 페이지에 양식을 추가하여 연락처를 자동으로 웹 애플리케이션으로 캡처하고 관련 필드를 채울 수 있습니다. 양식 블록을 드래그 앤 드롭하여 페이지에 양식을 삽입하세요. 그런 다음 비즈니스 사용 사례에 맞게 양식을 사용자 지정하여 후속 조치를 취할 수 있습니다. 양식을 사용자 지정하는 방법은 다음과 같습니다.
  

  • Adding a Contact Field: 'Add a contact field' 드롭다운을 클릭하여 양식에 연락처 필드를 추가합니다. 이렇게 하면 페이지 방문자를 연락처로 전환하고 방문자로부터 관련 정보를 캡처할 수 있습니다. 여러 필드를 추가하고, 순서를 바꾸고, 생성된 레코드에 URL 매개변수를 추가할 수도 있습니다. 또한 양식에 숨겨진 필드를 추가할 수도 있습니다.

  • Redirect options : 양식을 작성하고 콜투액션을 클릭하면 다음 두 가지 중 하나를 선택할 수 있습니다:

    • Redirect to a page in the funnel : 페이지가 퍼널의 일부이며 방문자가 해당 페이지를 확인하도록 하려는 경우 이 옵션을 선택합니다. 이 페이지는 일반적으로 홈페이지 또는 감사 페이지입니다.

    • Link to an external URL: 방문자가 외부 페이지를 방문하도록 하려면 이 옵션을 선택합니다.

    • Choose form design: 양식 필드에 디자인을 추가합니다.

    • Spacing: 양식의 간격을 구성합니다.

    • Form Submissionn Controls: 확인란을 클릭하여 양식에서 보안 문자를 비활성화합니다. 단, 스팸이나 봇에 대한 필터가 제거되므로 주의하세요.

    • Button : BUTTON PROPERTIES 섹션을 사용하여 양식의 CTA 버튼을 구성합니다.

• Icon: 아이콘 블록을 드래그 앤 드롭하여 랜딩 페이지에 아이콘을 추가합니다. 로고를 추가하려면 아이콘 바꾸기를 클릭합니다. 그러면 아이콘 라이브러리에서 원하는 아이콘을 선택할 수 있는 대화 상자가 나타납니다.

  
  

  아이콘을 사용자 지정하는 방법은 다음과 같습니다:

  • Resize: 슬라이더를 사용하여 아이콘의 크기를 늘리거나 줄입니다.

  • Set Alignment: 콘텐츠 상자 안에서 아이콘의 정렬을 설정합니다. 다음 중에서 선택할 수 있습니다:

    • 왼쪽 정렬

    • 오른쪽 정렬

    • 가운데 정렬

  • Forground: 아이콘의 색상을 선택합니다. 16진수 코드를 사용하여 색상을 추가할 수도 있습니다.

  • Hyperlink: 아이콘에 링크를 추가합니다.

• Video: 링크를 추가하여 랜딩 페이지에 동영상 임베드하기

• Logo: 로고 블록을 드래그 앤 드롭하여 랜딩 페이지에 로고를 추가합니다. 섹션에서 로고를 추가하거나 바꿀 수 있습니다. 이미지 교체를 클릭하여 새 로고 이미지를 업로드합니다. 그러면 컴퓨터에서 이미지를 선택하거나 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 나타납니다.

• Code : 방문자가 페이지에 머무는 동안 프로그램을 실행하려면 랜딩 페이지에 코드 스니펫을 추가하세요. 코드 스니펫을 랜딩 페이지로 끌어다 놓은 다음 코드를 입력합니다.