랜딩 페이지의 'Elements'란 무엇인가요? Eliments를 구성하는 방법은 무엇인가요?

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

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

Section > Row > Column > Elements

이 문서에서는 Landing Page서 Elements를 구성하는 방법에 대해 설명합니다.

요소 구성

사용자는 다음과 같은 요소 중에서 선택할 수 있습니다:

• Text: 텍스트 블록을 드래그 앤 드롭하여 캠페인에 텍스트를 추가합니다. 텍스트 블록에는 글꼴 크기, 글꼴 유형, 정렬 등을 사용하여 텍스트 서식을 지정할 수 있는 툴바가 제공됩니다. 글머리 기호 또는 번호 매기기 목록을 만들거나 링크를 삽입하도록 선택할 수도 있습니다. 또한 텍스트 색상 등을 사용하여 블록의 속성을 사용자 지정할 수 있습니다.
• Image: 이미지 블록을 사용하면 이메일 캠페인에 이미지를 삽입할 수 있습니다. 블록을 섹션으로 끌어다 놓으면 이미지의 자리 표시자가 추가됩니다. 캠페인에 이미지를 추가하려면 이미지 바꾸기를 클릭합니다. 그러면 다음 세 가지 방법 중 하나로 캠페인에 사용할 이미지를 가져올 수 있습니다:
  • 로컬 저장소에서 업로드하세요.
  • 제공되는 스톡 이미지를 검색하고 Use this Image클릭하여 블록에 이미지를 추가합니다.이미지가 업로드되면 오른쪽 패널에서 이미지 표시 및 크기를 사용자 지정할 수 있습니다. 이미지 너비를 사용자 지정하고, 간격을 구성하고, 정렬을 설정하고, 이미지에 링크를 추가하는 등의 작업을 할 수 있습니다. 이미지에 그림자를 추가할 수도 있습니다.
  • Button : 버튼 콘텐츠 블록을 끌어다 놓아 이메일에 CTA 버튼을 추가합니다. 편집 툴바를 사용하여 버튼 텍스트를 편집합니다. 버튼을 사용자 지정하려면 콘텐츠 속성 패널을 사용하면 됩니다. URL 링크, 섹션에 버튼 고정, 퍼널의 페이지 링크 중에서 선택하여 버튼의 CTA를 정의한 다음 정렬, 색상, 간격, 크기 등을 사용자 지정할 수 있습니다. 또한 데스크톱 또는 모바일 디바이스에서 버튼 섹션을 숨기거나 옵션을 선택하여 두 디바이스 모두에 표시되도록 할 수도 있습니다.
  • Divider: 콘텐츠 섹션에 디바이더를 추가하려면 드래그 앤 드롭하세요. 디바이더를 사용하면 랜딩 페이지의 여러 접힌 부분 사이의 경계를 명확하게 설정할 수 있습니다. 디바이더를 사용자 지정하여 크기(두께), 색상 및 간격과 같은 속성을 정의할 수 있습니다.
  • Form : 랜딩 페이지에 양식을 추가하여 연락처를 자동으로 웹 애플리케이션으로 캡처하고 관련 필드를 채울 수 있습니다. 양식 블록을 드래그 앤 드롭하여 페이지에 양식을 삽입하세요. 그런 다음 비즈니스 사용 사례에 맞게 양식을 사용자 지정하여 후속 조치를 취할 수 있습니다. 양식을 사용자 지정하는 방법은 다음과 같습니다.
    • Adding a Contact Field: 'Adding a Contact Field' 드롭다운을 클릭하여 양식에 연락처 필드를 추가합니다. 이렇게 하면 페이지 방문자를 연락처로 전환하고 방문자로부터 관련 정보를 캡처할 수 있습니다. 여러 필드를 추가하고, 순서를 바꾸고, 생성된 레코드에 URL 매개변수를 추가할 수도 있습니다. 또한 양식에 숨겨진 필드를 추가할 수도 있습니다.
    • Redirect options: 양식을 작성하고 클릭 유도 문안을 클릭하면 다음 두 가지 중 하나를 선택할 수 있습니다:
      • Redirect to a page in the funnel: 랜딩 페이지가 퍼널의 일부이며 방문자가 해당 페이지를 확인하도록 하려는 경우 이 옵션을 선택합니다. 이 페이지는 일반적으로 홈페이지 또는 Thank you 페이지입니다.
      • Link to an external URL: 방문자가 외부 페이지를 방문하도록 하려면 이 옵션을 선택합니다.
    • Choose form design: 양식 필드에 디자인을 추가합니다.https://freshsales.wistia.com/medias/dwdmie545d
    • Spacing: 양식의 간격을 구성합니다.
    • Form Submission Controls: 확인란을 클릭하여 양식에서 보안 문자를 비활성화합니다. 단, 스팸이나 봇에 대한 필터가 제거되므로 주의하세요.
    • Button: 버튼 속성 섹션을 사용하여 양식의 CTA 버튼을 구성합니다.
• Icon : 아이콘 블록을 드래그 앤 드롭하여 랜딩 페이지에 아이콘을 추가합니다. 로고를 추가하려면 아이콘 바꾸기를 클릭합니다. 그러면 아이콘 라이브러리에서 원하는 아이콘을 선택할 수 있는 대화 상자가 나타납니다.
• 아이콘을 사용자 지정하는 방법은 다음과 같습니다:
  • Resize: 슬라이더를 사용하여 아이콘의 크기를 늘리거나 줄입니다.
  • Set Alignment: 콘텐츠 상자 안에서 아이콘의 정렬을 설정합니다. 다음 중에서 선택할 수 있습니다:
    • 왼쪽 정렬
    • 오른쪽 정렬
    • 가운데 정렬
  • Forground : 아이콘의 색상을 선택합니다. 16진수 코드를 사용하여 색상을 추가할 수도 있습니다.
  • Hyperlink: 아이콘에 링크를 추가합니다.
• Video : 링크를 추가하여 랜딩 페이지에 동영상 임베드하기
• Logo: 로고 블록을 드래그 앤 드롭하여 랜딩 페이지에 로고를 추가합니다. 섹션에서 로고를 추가하거나 바꿀 수 있습니다. 이미지 교체를 클릭하여 새 로고 이미지를 업로드합니다. 그러면 컴퓨터에서 이미지를 선택하거나 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 나타납니다.
• Code: 방문자가 페이지에 머무는 동안 프로그램을 실행하려면 랜딩 페이지에 코드 스니펫을 추가하세요. 코드 스니펫을 랜딩 페이지로 끌어다 놓은 다음 코드를 입력합니다. 사용자 지정 코드는 공개 페이지에서 실행됩니다. 편집기나 미리 보기 모드에서는 코드가 실행되지 않습니다. 라이브 환경에서만 작동합니다. 코드가 작동하는지 확인하려면 페이지를 게시하고 코드의 효과를 확인해야 합니다.