웹 애플리케이션의 랜딩 페이지 빌더를 사용하면 사용자가 기존 템플릿 세트에서 맞춤형 랜딩 페이지를 디자인할 수 있습니다. 그러나 사용자는 이러한 템플릿을 자신의 취향에 맞게 사용자 정의하거나 웹 애플리케이션에서 제공하는 요소를 사용하여 자신만의 페이지를 만들 수도 있습니다.
이를 더 잘 이해하기 위해 먼저 웹 애플리케이션의 랜딩 페이지 구조를 이해해 봅시다.
웹 애플리케이션의 모든 랜딩 페이지는 다음과 같은 계층 구조를 따릅니다:
섹션 → 행 → 열 → 요소
이러한 구조적 속성을 이해해 봅시다.
섹션
섹션은 랜딩 페이지의 각 접힌 부분을 나타냅니다. 섹션은 랜딩 페이지를 구성하기 위해 행을 추가할 수 있는 요소입니다. 섹션을 구성하는 방법은 다음과 같습니다.
섹션 레이아웃 : 랜딩 페이지의 모든 섹션은 세로로 배열됩니다. 섹션의 순서는 위아래로 드래그하여 변경할 수 있습니다. 또한 복사 아이콘을 클릭하여 섹션을 복제할 수 있습니다.
속성을 변경하려면 새 섹션을 추가하려면 를 클릭합니다. 그러면 섹션 갤러리가 나타나며, 여기서 섹션을 구성할 수 있습니다.
섹션 갤러리: 웹 애플리케이션은 두 가지 옵션 중 하나를 사용하여 섹션을 구성할 수 있도록 합니다:
빈 섹션 추가: 빈 섹션을 추가하려면 를 클릭하세요. 섹션이 추가되면 섹션에 추가할 열의 수를 구성합니다.
열의 수를 선택하면, 섹션은 요소를 추가할 수 있는 레이아웃으로 채워집니다.
템플릿에서 선택: 섹션을 처음부터 만들지 않고 웹 애플리케이션에서 제공하는 템플릿 중 하나를 선택할 수 있습니다. 다음 템플릿 중 하나를 선택할 수 있습니다
선택한 템플릿을 랜딩 페이지에 추가하려면 를 클릭하세요.
이제 섹션이 추가되었으므로, 섹션의 속성을 구성할 수 있습니다.
섹션 설정: 웹 애플리케이션은 각 섹션의 속성을 구성할 수 있도록 합니다. 각 섹션에 대해 수정할 수 있는 항목은 다음과 같습니다:
이름: 더 쉽게 정렬할 수 있도록 각 섹션에 이름을 추가합니다.
배경 색상: 미리 설정된 색상 중 하나를 선택하여 배경을 변경합니다.
브랜드 테마에 맞는 색상을 선택하려면 을 클릭하고 Hex 코드를 추가한 다음, 을 클릭하여 팔레트에 색상을 추가합니다.배경 이미지: 섹션에 배경 이미지를 추가하거나 교체할 수 있습니다. 새 이미지를 업로드하려면 이미지 교체 를 클릭합니다. 그러면 컴퓨터에서 이미지를 선택하거나 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 나타납니다.
스톡 이미지: 검색창에서 스톡 이미지를 검색하거나 드롭다운을 클릭하여 제공된 카테고리에서 선택할 수 있습니다.
이미지를 선택한 후, 를 클릭하여 이미지를 배경에 추가합니다.
스타일: 섹션의 스타일을 구성합니다. 섹션의 콘텐츠를 끝에서 끝까지 늘릴 것인지, 전체 높이를 유지할 것인지, 배경 효과를 패럴랙스로 설정할 것인지 선택합니다. 이 스타일을 활성화하거나 비활성화하려면 토글을 사용하세요.
간격: 섹션의 간격을 각각 '수평'과 '수직'으로 전환하여 구성합니다. 방향–수평 또는 수직–에서 여백과 패딩을 설정할 수 있습니다.
https://freshsales.wistia.com/medias/pmud9h8drc여백 은 섹션과 다른 인접 섹션 사이의 간격입니다.
패딩 은 섹션 내부 요소들 사이의 간격입니다.
섹션의 요소들 사이에 설정할 간격의 양을 선택하세요. 다음 옵션 중에서 선호에 따라 선택할 수 있습니다:
XS (초소형) - 576px 미만의 화면용
SM (소형) - 576px 이상의 화면용 - 주로 휴대폰과 태블릿
MD (중간) - 화면이 768px 이상인 경우, 태블릿 및 작은 노트북
LG (대형) - 화면이 992px 이상인 경우 - 노트북 및 데스크탑
XL (초대형) - 화면이 1200px 이상인 경우
여백 없음/간격 없음 - 여백과 간격을 위한 공간이 없음
가시성: 섹션의 가시성을 정의합니다. 데스크톱, 모바일 또는 둘 다에서만 표시하도록 선택합니다.
행:
행은 각 섹션 내의 개별 요소입니다. 행 설정을 사용하여 행을 구성할 수 있습니다. 다음은 행을 구성하는 방법입니다:배경 색상
간격
가시성
고급:
거터 숨기기: 거터는 열 사이의 여백입니다. 반응형으로 공간을 추가하고 콘텐츠의 정렬을 설정하는 데 사용할 수 있습니다. 거터를 숨기면 열 사이의 간격을 제거하고 행을 더 컴팩트하게 만들 수 있습니다.
테두리 반경: 슬라이더를 사용하여 모서리 반경을 증가 또는 감소시킵니다
- 열:
열은 행 내부의 수직 하위 섹션입니다. 열에 다음과 같은 사용자 정의를 할 수 있습니다:- 스타일
배경 이미지
배경 색상
간격
가시성
정렬
열의 정렬을 행 내부에서 설정할 수 있습니다. 다음 중에서 선택할 수 있습니다:왼쪽 정렬
오른쪽 정렬
가운데 정렬
Element: 사용자는 다음 요소를 선택할 수 있습니다:
텍스트: 캠페인에 텍스트를 추가하려면 텍스트 블록을 드래그 앤 드롭하세요. 텍스트 블록에는 글꼴 크기, 글꼴 유형, 정렬 등을 포맷할 수 있는 도구 모음이 포함되어 있습니다. 또한, 글머리 기호 또는 번호 목록을 생성하거나 링크를 삽입할 수 있습니다. 추가적으로, 텍스트 색상 등으로 블록의 속성을 사용자 정의할 수 있습니다.
이미지: 이미지 블록을 사용하면 이메일 캠페인에 이미지를 삽입할 수 있습니다. 블록을 섹션에 드래그 앤 드롭하면 이미지에 대한 자리 표시자가 추가됩니다. 캠페인에 이미지를 추가하려면 이미지 교체를 클릭하세요. 이를 통해 세 가지 방법 중 하나로 캠페인에 이미지를 가져올 수 있습니다:
업로드 them from your local storage.
제공된 스톡 이미지를 검색하고 를 클릭하여 이미지를 블록에 추가합니다.
이미지가 업로드되면 오른쪽 패널에서 이미지 표시와 크기를 사용자 정의할 수 있습니다. 이미지 너비를 조정하고, 간격을 설정하고, 정렬을 설정하고, 이미지에 링크를 추가하는 등의 작업을 할 수 있습니다. 또한 이미지에 그림자를 추가할 수도 있습니다.
버튼: 드래그 앤 드롭으로 버튼 콘텐츠 블록을 추가하여 이메일에 CTA 버튼을 추가하세요. 편집 도구 모음을 사용하여 버튼 텍스트를 편집할 수 있습니다. 버튼을 사용자 정의하려면 콘텐츠 속성 패널을 사용할 수 있습니다. 버튼의 CTA를 정의할 수 있으며, URL로 연결하거나, 버튼을 섹션에 앵커링하거나, 퍼널의 페이지로 링크할 수 있습니다. 그런 다음 정렬, 색상, 간격, 크기 등을 사용자 정의할 수 있습니다. 또한 옵션을 선택하여 데스크톱 또는 모바일 장치에서 버튼 섹션을 숨기거나 둘 다에서 보이도록 선택할 수 있습니다.
구분선: 드래그 앤 드롭하여 콘텐츠 섹션에 구분선을 추가하세요. 구분선을 사용하면 랜딩 페이지의 다양한 접힘 사이에 명확한 경계를 설정할 수 있습니다. 구분선을 사용자 정의하여 크기(두께), 색상 및 간격과 같은 속성을 정의할 수 있습니다.
폼: 랜딩 페이지에 폼을 추가하여 웹 애플리케이션에 연락처를 자동으로 캡처하고 관련 필드를 채울 수 있습니다. 드래그 앤 드롭으로 폼 블록을 페이지에 삽입하세요. 그런 다음 비즈니스 사용 사례에 맞게 폼을 사용자 정의할 수 있습니다. 폼을 사용자 정의하는 방법은 다음과 같습니다.
연락처 필드 추가: ‘연락처 필드 추가’ 드롭다운을 클릭하여 양식에 연락처 필드를 추가하세요. 이렇게 하면 페이지 방문자를 연락처로 변환하고 방문자로부터 관련 정보를 수집할 수 있습니다. 여러 필드를 추가하고, 순서를 재정렬하며, 생성된 기록에 URL 매개변수를 추가할 수도 있습니다. 또한, 양식에 숨겨진 필드를 추가할 수도 있습니다.
리디렉션 옵션: 양식이 작성되고 콜 투 액션이 클릭되면 다음 두 가지 중 하나를 선택할 수 있습니다:
퍼널 내 페이지로 리디렉션: 랜딩 페이지가 퍼널의 일부이며 방문자가 해당 페이지를 확인하도록 하려면 이 옵션을 선택하세요. 이는 보통 홈페이지나 감사 페이지입니다.
외부 URL로 링크: 방문자가 외부 페이지로 이동하도록 하려면 이 옵션을 선택하세요.
간격: 양식의 간격을 구성합니다
양식 제출 제어: 체크박스를 클릭하여 양식에서 ReCAPTCHA를 비활성화합니다. 그러나 스팸 또는 봇에 대한 필터가 제거되므로 주의하십시오.
버튼: BUTTON PROPERTIES 섹션을 사용하여 양식의 CTA 버튼을 구성합니다.
아이콘: 아이콘 블록을 드래그 앤 드롭하여 랜딩 페이지에 아이콘을 추가하세요. 로고를 추가하려면 아이콘 교체를 클릭하세요. 그러면 아이콘 라이브러리에서 원하는 아이콘을 선택할 수 있는 대화 상자가 나타납니다.
아이콘을 사용자 정의하는 방법은 다음과 같습니다:크기 조정: 슬라이더를 사용하여 아이콘의 크기를 늘리거나 줄이세요.
정렬 설정: 콘텐츠 상자 내에서 아이콘의 정렬을 설정하세요. 다음 중에서 선택할 수 있습니다:
왼쪽 정렬
오른쪽 정렬
중앙 정렬
전경: 아이콘의 색상을 선택하세요. 또한, 색상을 헥스 코드로 추가할 수 있습니다.
하이퍼링크: 아이콘에 링크를 추가하세요.
비디오: 링크를 추가하여 랜딩 페이지에 비디오를 삽입합니다.
로고: 로고 블록을 드래그 앤 드롭하여 랜딩 페이지에 로고를 추가합니다. 섹션에 로고를 추가하거나 교체할 수 있습니다. 클릭하여 이미지 교체 를 통해 새 로고 이미지를 업로드합니다. 이를 통해 컴퓨터에서 이미지를 선택하거나 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 표시됩니다.
Code: 방문자가 페이지에 있을 때 프로그램을 실행하기 위해 코드 스니펫을 랜딩 페이지에 추가하세요. 코드 스니펫을 랜딩 페이지로 드래그 앤 드롭한 후 코드를 입력하세요.
