‘섹션’이란 무엇인가요? 랜딩 페이지에서 섹션을 어떻게 구성하나요?
랜딩 페이지 빌더는 사용자가 기존 템플릿 세트를 활용하여 맞춤형 랜딩 페이지를 디자인할 수 있도록 합니다. 그러나 사용자는 이러한 템플릿을 자신의 취향에 맞게 커스터마이징하거나 웹 애플리케이션에서 제공하는 요소를 사용하여 직접 만들 수도 있습니다. 모든 랜딩 페이지는 다음과 같은 계층 구조를 따릅니다: 섹션 > 행 > 열 > 요소
이 문서에서는 섹션에 대해 다룹니다. 다른 구조적 속성에 대해 알아보려면 각각의 문서— 행, 열, 및 요소를 참조하세요.
섹션
섹션은 랜딩 페이지의 각 접힘 부분을 의미합니다. 섹션은 랜딩 페이지를 구성하기 위해 행을 추가할 수 있는 요소입니다. 다음은 섹션을 구성하는 방법입니다.
섹션 레이아웃 :
랜딩 페이지의 모든 섹션은 수직으로 배열됩니다. 섹션의 순서를 위아래로 드래그하여 변경할 수 있습니다. 또한 복사 아이콘을 클릭하여 섹션을 복제할 수 있습니다.
새 섹션을 추가하려면 여기를 클릭하세요. 그러면 섹션 갤러리가 나타나고, 여기서 섹션을 구성할 수 있습니다.
섹션 갤러리:
섹션을 구성하는 두 가지 옵션 중 하나를 사용하세요:
- 빈 섹션 추가: 여기를 클릭하여 접힘 부분에 빈 섹션을 추가하세요. 섹션이 추가되면 섹션에 추가할 열의 수를 구성하세요.
- 열의 수를 선택하면, 섹션은 요소를 추가할 수 있는 레이아웃으로 채워집니다.
- 템플릿에서 선택: 섹션을 처음부터 만들지 않고, 웹 애플리케이션에서 제공하는 템플릿 중 하나를 선택할 수도 있습니다. 다음 템플릿 중 하나를 선택할 수 있습니다.
- 여기를 클릭하여 선택한 템플릿을 랜딩 페이지에 추가하세요. 이제 섹션이 추가되었으므로 섹션의 속성을 구성할 수 있습니다.
섹션 설정:
각 섹션의 속성을 구성하세요. 각 섹션에 대해 수정할 수 있는 사항은 다음과 같습니다:
- 이름: 정렬을 쉽게 하기 위해 각 섹션에 이름을 추가하세요.
- 배경 색상: 미리 설정된 색상 중 하나를 선택하여 배경을 변경하세요. 브랜드 테마에 맞는 색상을 선택하려면 여기를 클릭하고, Hex 코드를 추가한 후 여기를 클릭하여 팔레트에 색상을 추가하세요.
- 배경 이미지: 섹션에 배경 이미지를 추가하거나 교체할 수 있습니다. 이미지 교체를 클릭하여 새 이미지를 업로드하세요. 그러면 컴퓨터에서 이미지를 선택하거나 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 나타납니다.
- 스톡 이미지: 검색창에서 스톡 이미지를 검색하거나 드롭다운을 클릭하여 제공된 카테고리에서 선택할 수 있습니다.
- 이미지를 선택한 후 여기를 클릭하여 이미지를 배경에 추가하세요.
스타일:
섹션의 스타일을 구성하세요. 섹션의 콘텐츠를 끝에서 끝까지 늘릴지, 전체 높이를 유지할지, 배경 효과를 패럴랙스로 설정할지를 선택하세요. 토글을 사용하여 이러한 스타일을 활성화하거나 비활성화할 수 있습니다.
간격:
‘수평’과 ‘수직’ 간의 토글을 사용하여 각각의 섹션 간격을 구성하세요. 방향–수평 또는 수직–에 따라 여백과 패딩을 설정할 수 있습니다.
- 여백 은 섹션과 다른 인접 섹션 사이의 간격입니다.
- 패딩 은 섹션 내부의 요소 간의 간격입니다.
섹션의 요소 간에 설정할 간격의 양을 선택하세요. 다음 옵션 중에서 선호에 따라 선택할 수 있습니다:
- XS (매우 작음) - 576px 미만의 화면용
- SM (작음) - 576px 이상의 화면용 - 이상적으로는 휴대폰 및 태블릿
- MD (중간) - 768px 이상의 화면용, 태블릿 및 작은 노트북
- LG (큼) - 992px 이상의 화면용 - 노트북 및 데스크탑
- XL (매우 큼) - 1200px 이상의 화면용
- 패딩 없음/ 여백 없음 - 패딩과 여백에 공간을 남기지 않음
가시성:
섹션의 가시성을 정의하세요. 데스크탑, 모바일 또는 둘 다에서만 표시되도록 선택할 수 있습니다.