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