랜딩 페이지의 '요소'란 무엇인가요? 요소를 어떻게 구성하나요?
웹 애플리케이션의 랜딩 페이지 빌더는 사용자가 기존 템플릿 세트에서 맞춤형 랜딩 페이지를 디자인할 수 있도록 합니다. 그러나 사용자는 이러한 템플릿을 자신의 취향에 맞게 사용자 정의하거나 웹 애플리케이션에서 제공하는 요소를 사용하여 직접 만들 수도 있습니다. 웹 애플리케이션의 모든 랜딩 페이지는 다음과 같은 계층 구조를 따릅니다: 섹션 → 행 → 열 → 요소
이 문서에서는 랜딩 페이지에서 요소를 구성하는 방법에 대해 설명합니다. 랜딩 페이지의 다른 구조적 속성에 대해 알아보려면 각각의 문서—섹션, 행, 열을 참조하세요.
요소 구성하기
사용자는 다음 요소 중에서 선택할 수 있습니다:
- 텍스트: 텍스트 블록을 드래그 앤 드롭하여 캠페인에 텍스트를 추가합니다. 텍스트 블록에는 글꼴 크기, 글꼴 유형, 정렬 등을 사용하여 텍스트를 서식화할 수 있는 도구 모음이 포함되어 있습니다. 또한 글머리 기호 또는 번호 목록을 만들거나 링크를 삽입할 수 있습니다. 추가적으로 텍스트 색상 등으로 블록의 속성을 사용자 정의할 수 있습니다.
- 이미지: 이미지 블록을 사용하여 이메일 캠페인에 이미지를 삽입할 수 있습니다. 블록을 섹션에 드래그 앤 드롭하면 이미지에 대한 자리 표시자가 추가됩니다. 캠페인에 이미지를 추가하려면 이미지 교체를 클릭하세요. 이를 통해 세 가지 방법 중 하나로 캠페인에 이미지를 가져올 수 있습니다:
- 로컬 저장소에서 업로드합니다.
- 제공된 스톡 이미지를 검색하고 이미지를 블록에 추가하려면 클릭합니다.
- 버튼: 버튼 콘텐츠 블록을 드래그 앤 드롭하여 이메일에 CTA 버튼을 추가합니다. 편집 도구 모음을 사용하여 버튼 텍스트를 편집합니다. 버튼을 사용자 정의하려면 콘텐츠 속성 패널을 사용할 수 있습니다. 버튼의 CTA를 정의할 수 있으며, URL에 링크하거나, 버튼을 섹션에 고정하거나, 퍼널의 페이지에 링크하는 옵션 중에서 선택한 다음 정렬, 색상, 간격, 크기 등을 사용자 정의할 수 있습니다. 데스크톱이나 모바일 기기에서 버튼 섹션을 숨기거나 둘 다에서 보이도록 선택할 수도 있습니다.
- 구분선: 콘텐츠 섹션에 구분선을 추가하려면 드래그 앤 드롭합니다. 구분선을 사용하면 랜딩 페이지의 다양한 접힘 사이에 명확한 구분을 설정할 수 있습니다. 구분선의 크기(두께), 색상, 간격 등의 속성을 정의하여 사용자 정의할 수 있습니다.
- 양식: 랜딩 페이지에 양식을 추가하여 웹 애플리케이션에 연락처를 자동으로 캡처하고 관련 필드를 채울 수 있습니다. 양식 블록을 드래그 앤 드롭하여 페이지에 양식을 삽입합니다. 그런 다음 비즈니스 사용 사례에 맞게 양식을 사용자 정의할 수 있습니다. 다음은 양식을 사용자 정의하는 방법입니다:
- 연락처 필드 추가: '연락처 필드 추가' 드롭다운을 클릭하여 양식에 연락처 필드를 추가합니다. 이렇게 하면 페이지 방문자를 연락처로 변환하고 방문자로부터 관련 정보를 캡처할 수 있습니다. 여러 필드를 추가하고, 순서를 변경하고, 생성된 기록에 URL 매개변수를 추가할 수도 있습니다. 또한 양식에 숨겨진 필드를 추가할 수도 있습니다.
- 리디렉션 옵션: 양식이 작성되고 콜 투 액션이 클릭되면 두 가지 중 하나를 선택할 수 있습니다:
- 퍼널의 페이지로 리디렉션: 랜딩 페이지가 퍼널의 일부이고 방문자가 페이지를 확인하도록 하려면 이 옵션을 선택하세요. 일반적으로 홈 페이지나 감사 페이지입니다.
- 외부 URL로 링크: 방문자가 외부 페이지를 방문하도록 하려면 이 옵션을 선택하세요.
- 양식 디자인 선택: 양식 필드에 디자인을 추가합니다.
- 간격: 양식의 간격을 구성합니다.
- 양식 제출 제어: 양식에서 ReCAPTCHA를 비활성화하려면 체크박스를 클릭합니다. 그러나 스팸 또는 봇 필터가 제거되므로 주의해야 합니다.
- 버튼: 양식의 CTA 버튼을 BUTTON PROPERTIES 섹션을 사용하여 구성합니다.
- 아이콘: 랜딩 페이지에 아이콘을 추가하려면 아이콘 블록을 드래그 앤 드롭합니다. 로고를 추가하려면 아이콘 교체를 클릭합니다. 이를 통해 아이콘 라이브러리에서 원하는 아이콘을 선택할 수 있는 대화 상자가 표시됩니다. 다음은 아이콘을 사용자 정의하는 방법입니다:
- 크기 조정: 슬라이더를 사용하여 아이콘의 크기를 늘리거나 줄입니다.
- 정렬 설정: 콘텐츠 상자 내에서 아이콘의 정렬을 설정합니다. 다음 중에서 선택할 수 있습니다:
- 왼쪽 정렬
- 오른쪽 정렬
- 중앙 정렬
- 전경: 아이콘의 색상을 선택합니다. 또한 헥스 코드를 사용하여 색상을 추가할 수 있습니다.
- 하이퍼링크: 아이콘에 링크를 추가합니다.
- 비디오: 링크를 추가하여 랜딩 페이지에 비디오를 삽입합니다.
- 로고: 로고 블록을 드래그 앤 드롭하여 랜딩 페이지에 로고를 추가합니다. 섹션에 로고를 추가하거나 교체할 수 있습니다. 이미지 교체를 클릭하여 새 로고 이미지를 업로드합니다. 이를 통해 컴퓨터에서 이미지를 선택하거나 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 표시됩니다.
- 코드: 랜딩 페이지에 코드 스니펫을 추가하여 방문자가 페이지에 있을 때 프로그램을 실행합니다. 코드 스니펫을 랜딩 페이지에 드래그 앤 드롭한 다음 코드를 입력합니다. 사용자 정의 코드는 공개 페이지에서 실행됩니다. 코드는 편집기나 미리보기 모드에서는 실행되지 않으며, 라이브 환경에서만 작동합니다. 코드가 작동하는지 여부를 확인하려면 페이지를 게시하고 코드의 효율성을 확인해야 합니다.