랜딩 페이지의 '섹션'이란 무엇인가요? 섹션을 구성하는 방법은 무엇인가요?

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

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

Section > Row > Column > Elements

이 문서에서는 Section을 다룹니다. 

Section

섹션은 랜딩 페이지의 모든 접힌 부분을 의미합니다. 섹션은 행을 추가하여 랜딩 페이지를 구성할 수 있는 요소입니다. 섹션을 구성하는 방법은 다음과 같습니다.

• Section Layout : 랜딩 페이지의 모든 섹션은 세로로 정렬됩니다. 섹션을 위나 아래로 드래그하여 순서를 변경할 수 있습니다. 복사 아이콘을 클릭하여 섹션을 복제할 수도 있습니다.

            속성을 변경하려면, 새 섹션을 추가하려면 을 클릭합니다. 그러면 섹션을 구성할 수 있는 섹션 갤러리가 나타납니다. 

• Section Gallery: 두 가지 옵션 중 하나를 사용하여 섹션을 구성합니다:
  • Add a Blank Section: 폴드에 빈 섹션을 추가하려면 클릭합니다. 섹션이 추가되면 섹션에 추가할 열의 수를 구성합니다. 
    열 개수를 선택하면 요소를 추가할 수 있는 레이아웃으로 섹션이 채워집니다.
  • Choose from a Template: 섹션을 처음부터 새로 만드는 대신 웹 애플리케이션에서 제공하는 템플릿을 선택할 수도 있습니다. 다음 템플릿 중 하나를 선택할 수 있습니다. 클릭하여 선택한 템플릿을 랜딩 페이지에 추가합니다. 이제 섹션이 추가되었으므로 섹션의 속성을 구성할 수 있습니다.
• Section Settings: 각 섹션의 속성을 구성합니다. 각 섹션에 대해 수정할 수 있는 항목은 다음과 같습니다:
  • Name: 각 섹션에 이름을 추가하여 쉽게 정렬할 수 있습니다.
  • Background Color : 미리 설정된 색상 중 하나를 선택하여 배경을 변경합니다. 를 클릭하여 브랜드 테마에 맞는 색상을 선택하고 16진수 코드를 추가한 다음 클릭하여 팔레트에 색상을 추가할 수도 있습니다.
  • Background Image : 섹션에서 배경 이미지를 추가하거나 바꿀 수 있습니다. 이미지 교체를 클릭하여 새 이미지를 업로드합니다. 그러면 컴퓨터에서 이미지 또는 인터넷에서 스톡 이미지를 선택하여 랜딩 페이지에 추가할 수 있는 대화 상자가 나타납니다.
  • Stock Images : 스톡 이미지: 검색창에서 스톡 이미지를 검색하거나 드롭다운을 클릭하고 제공되는 카테고리에서 선택할 수 있습니다.이미지를 선택한 후 을 클릭하여 배경에 이미지를 추가합니다.

  • Style: 섹션의 스타일을 구성합니다. 섹션의 콘텐츠를 끝에서 끝까지 늘리고, 전체 높이를 유지하고, 배경 효과를 시차로 설정할지 여부를 선택합니다. 토글을 사용하여 이러한 스타일을 활성화 또는 비활성화합니다.

  • Spacing :  '가로'와 '세로' 사이를 전환하여 섹션의 간격을 각각 구성합니다. 가로 또는 세로 방향에서 여백과 패딩을 설정할 수 있습니다.

    https://freshsales.wistia.com/medias/pmud9h8drc

    • Margin은 섹션과 인접한 다른 섹션 사이의 간격입니다.

    • Padding은 섹션 내부의 요소 사이의 간격을 의미합니다.

                        섹션의 요소 사이에 설정할 간격을 선택합니다. 기본 설정에 따라 다음 옵션 중에서 선택할 수 있습니다:

• XS(초소형) - 576픽셀 미만의 화면용
• SM(스몰) - 너비 576픽셀 이상의 화면(휴대폰 및 태블릿)에 적합합니다.
• MD(중간) - 너비 768px 이상의 화면, 태블릿 및 소형 노트북에 적합합니다.
• LG(대형) - 너비 992px 이상의 화면 - 노트북 및 데스크톱용
• XL(초대형) - 1200px 이상의 화면용
• No Padding/No Margin - 여백 및 여백을 위한 공간을 남기지 않습니다.
• Visibility: 섹션의 표시 여부를 정의합니다. 데스크톱, 모바일 또는 둘 다에 표시하도록 선택합니다.