Page Builder Workspace
Page Builder 이(가) 활성화되면 Content 섹션 및 콘텐츠 만들기 프로세스가 수정되어 CMS 페이지, 제품 및 범주 페이지, 블록 및 동적 블록용 고급 Page Builder 도구를 사용합니다. 이 섹션에는_콘텐츠 제목_필드, 콘텐츠 미리 보기 및 전체 화면 Page Builder 작업 영역에 대한 쉬운 액세스 권한이 포함됩니다.
Page Builder 미리 보기가 있는
컨텐츠 제목
검색 엔진은 수준 1(H1) 제목을 검색하므로 수준 1 제목을 추가하면 페이지가 올바르게 색인화됩니다.
모든 수준의 머리글 위치 및 형식을 가장 잘 제어하려면 Content Heading 필드를 비워 두고 Page Builder 머리글 콘텐츠 형식을 사용하는 것이 좋습니다.
미리보기
Content 섹션을 확장하고 Page Builder (으)로 만든 기존 콘텐츠가 있으면 페이지에 나타나는 대로 콘텐츠 미리보기가 표시됩니다. 필요한 업데이트를 수행할 수 있는 Page Builder 작업 영역을 열려면 Edit with Page Builder 또는 콘텐츠 미리 보기 영역 내부를 클릭하십시오.
단계
미리 보기에서 Page Builder 작업 영역을 열면 스테이지는 콘텐츠를 만들고 형식을 지정하며 라이브 콘텐츠를 빠르게 편집할 수 있는 기본 작업 영역입니다. 스테이지는 처음에 비어 있으며 왼쪽 패널에서 행, 열 및 탭을 드래그할 수 있는 디자인 화면을 제공합니다.
뷰포트
뷰포트 은(는) 사용자에게 표시되는 웹 페이지의 표시 영역입니다. 전체 화면 디자인 모드에서 뷰포트 단추는 Page Builder 단계 위에 표시되어 사이트 사용자가 상점에서 콘텐츠를 볼 때 사용자에게 표시됩니다.
Page Builder은(는) 뷰포트에 대한 중단점도 정의합니다. 중단점은 특정 스타일이 적용되는 최소 및 최대 폭을 정의합니다. Page Builder 뷰포트는 다음 콘텐츠 중단점을 제공합니다.
- 데스크톱 중단점—
min-width: 1024px. 이 중단점은 1024픽셀 및 더 넓게 측정되는 뷰포트 너비에 대해 정의된 스타일을 적용합니다. - 모바일 중단점—
max-width: 768px, min-width: 640px. 이 중단점은 768픽셀과 640픽셀 사이의 뷰포트 너비에 대해 정의된 스타일을 적용합니다.
Page Builder 뷰포트는 콘텐츠 미리 보기 및 중단점 설정 의 두 가지 기능을 제공합니다.
콘텐츠 미리보기
기본적으로 Page Builder은(는) 두 개의 뷰포트 미리 보기를 제공합니다.
-
데스크톱 — 미리 정의된 너비 없이 콘텐츠 미리 보기를 표시합니다. 데스크탑 정의 스타일(중단점 최소 너비 1024픽셀 사용)은 여전히 페이지에 적용됩니다. 그러나 데스크톱 뷰포트 너비는 행과 같은 컨테이너 콘텐츠 유형에 대한 설정으로 정의됩니다. 데스크탑 뷰포트를 선택하면 브라우저 페이지 너비가 1024픽셀 이상일 때 컨텐츠가 상점 첫 화면에서 어떻게 스타일링되는지 보여줍니다.
-
모바일 — 미리 정의된 너비 768픽셀로 콘텐츠 미리 보기를 표시합니다. 데스크탑 뷰포트와 달리 모바일 뷰포트에는 768픽셀(최대) 및 640픽셀(최소)의 중단점 너비에 대해 정의된 스타일과 함께 768픽셀 너비의 페이지 콘텐츠가 표시됩니다.
중단점 설정
뷰포트 버튼은 선택한 뷰포트를 기반으로 다양한 중단점 스타일을 콘텐츠 유형에 적용하는 옵션을 제공합니다. 기본적으로 Page Builder은(는) 행, 열, 탭, 탭 항목, 배너, 슬라이더 및 슬라이드의 Minimum Height 필드에 대한 중단점 설정을 제공합니다. 모바일 뷰포트를 선택한 다음 이러한 컨텐츠 유형 중 하나에 대한 편집기를 열면 모바일 뷰포트 중단점과 관련된 필드 값을 입력할 수 있습니다. 특정 중단점 설정을 허용하는 콘텐츠 유형 필드는 행의 다음 예제와 유사하게 필드 오른쪽에 아이콘을 표시합니다.
패널
Page Builder 패널은 단계 왼쪽에 있으며 단계로 끌 수 있는 콘텐츠 형식을 포함합니다. 그런 다음 콘텐츠 유형에 해당하는 컨테이너가 옵션 도구 상자와 함께 표시됩니다. 컨텐츠 유형은 다음과 같이 패널에 구성됩니다.
레이아웃
Page Builder 패널의 Layout 섹션은 행, 열 또는 탭을 단계에 추가하는 데 사용됩니다. 패널에서 스테이지로 콘텐츠 유형을 드래그하면 콘텐츠 유형에 해당하는 옵션 도구 상자가 있는 컨테이너가 나타납니다.
기본적으로 Page Builder 단계는 비어 있습니다. 패널에서 스테이지로 레이아웃 콘텐츠 유형을 드래그할 때 페이지의 다른 레이아웃 컨테이너 위, 아래 또는 내부에 배치할 수 있습니다. 행은 스테이지에 직접 추가될 수만 있습니다.
레이아웃 콘텐츠 형식 및 단계
요소
Page Builder 패널의 Elements 섹션을 사용하여 Page Builder 단계의 모든 레이아웃 컨테이너에 텍스트, 제목, 단추, 분할자 및 HTML 코드를 추가합니다. 패널에서 콘텐트 유형을 행이나 열 또는 스테이지의 탭 세트로 드래그하면 컨테이너가 나타납니다. 콘텐츠 유형 도구 상자를 사용하여 해당 유형과 관련된 설정에 액세스합니다.
요소 콘텐츠 형식이 있는
미디어
Page Builder 패널의 Media 섹션을 사용하여 Page Builder 단계의 모든 레이아웃 컨테이너에 이미지, 비디오, 배너, 슬라이더 및 Google Maps을(를) 추가하십시오. 미디어 콘텐츠 유형을 패널에서 스테이지로 드래그하면 콘텐츠 유형에 해당하는 옵션 도구 상자가 있는 컨테이너가 표시됩니다.
미디어 콘텐츠 형식이 있는
콘텐츠 추가
Page Builder 패널의 Add Content 섹션을 사용하여 기존 콘텐츠를 Page Builder 단계에 추가하십시오. 패널에서 미디어 콘텐츠 유형을 스테이지로 드래그하면 컨테이너가 나타납니다. 콘텐츠 형식 도구 상자를 사용하여 해당 형식에 해당하는_설정_에 액세스합니다.
콘텐츠 형식이 추가된
Toolbox
스테이지의 각 콘텐츠 컨테이너에는 옵션 도구 상자가 있습니다. 옵션은 콘텐츠 유형에 따라 다르지만, 일반적으로 이동, 설정, 숨기기/표시, 복제 및 제거를 포함합니다.
도구 상자 표시
도구 상자를 표시하고 옵션을 선택하려면 컨테이너 위로 마우스를 가져갑니다.
도구 상자 옵션
