콘텐츠 추가 - 동적 블록

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

작성 대상:

초급
중간
사용자

동적 블록 콘텐츠 형식을 사용하여 기존 동적 블록을(를) Page Builder 단계에 추가하십시오.

상점 첫 화면의 동적 차단

NOTE

Page Builder 콘텐츠를 크게 변경하는 경우 작업하는 동안 세션이 시간 초과되지 않도록 관리 세션 수명을(를) 늘리는 것이 좋습니다.

동적 블록 도구 상자

도구

아이콘

설명

이동

{width="25"}

블록 컨테이너와 해당 콘텐츠를 스테이지의 다른 위치로 이동합니다.

설정

{width="25"}

블록을 선택하고 컨테이너의 속성을 변경할 수 있는 블록 편집 페이지를 엽니다.

숨기기

{width="25"}

현재 블록 컨테이너와 해당 콘텐츠를 숨깁니다.

표시

{width="25"}

숨겨진 블록 컨테이너와 해당 콘텐츠를 표시합니다.

복제

{width="25"}

블록 컨테이너와 해당 콘텐츠의 복사본을 만듭니다.

제거

{width="25"}

스테이지에서 블록 컨테이너와 해당 콘텐츠를 삭제합니다.

NOTE

숨겨진 요소는 데이터베이스에 저장되고 고객에게 보이지 않습니다. 그러나 이러한 요소는 검색 엔진 및 사이트를 크롤링하는 다른 봇에 표시됩니다. 또한 스테이지에서 제거하지 않는 한 invisibility 특성이 있는 API 호출을 통해 요청한 경우 콘텐츠의 일부로 반환됩니다.

스테이지에 기존 동적 블록 추가

대상 페이지, 블록, 제품 또는 범주의 Page Builder 작업 영역으로 이동합니다.
Page Builder 패널에서 Add Content 을(를) 확장하고 Dynamic Block 자리 표시자를 스테이지로 드래그합니다.

{width="600" modal="regular"}
빈 동적 블록 컨테이너에 마우스를 가져다 대고 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

{width="600" modal="regular"}
동적 블록 편집 페이지에서 Select Dynamic Block 을(를) 클릭하고 목록을 사용하여 블록을 선택합니다.

{width="600" modal="regular"}

목록에서 삽입할 동적 블록을 찾은 다음 Select 을(를) 클릭합니다. Add Selected 을(를) 클릭합니다.

{width="600" modal="regular"}

동적 블록 정보의 요약이 아래에 나타납니다.

{width="600" modal="regular"}

Template 을(를) 다음 중 하나로 설정합니다.

table 0-row-2 1-row-2 2-row-2 layout-auto
옵션	설명
`Dynamic Block Block Template`	독립형 블록을 추가합니다.
`Dynamic Block Inline Template`	블록 내용을 텍스트에 삽입합니다.

{width="200"}

필요에 따라 고급 설정을 완료합니다.
완료되면 Save 을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

고급 설정

상위 컨테이너 내에서 동적 블록의 위치를 제어하려면 Alignment 을(를) 선택하십시오.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
옵션	설명
`Default`	현재 테마의 스타일시트에 지정된 정렬 기본 설정을 적용합니다.
`Left`	지정된 패딩을 허용하여 부모 컨테이너의 왼쪽 테두리를 따라 목록을 정렬합니다.
`Center`	지정된 패딩을 허용하여 부모 컨테이너의 중앙에 있는 목록을 정렬합니다.
`Right`	지정된 패딩을 허용하여 부모 컨테이너의 오른쪽 테두리를 따라 블록을 정렬합니다.

동적 블록 컨테이너의 네 면에 모두 적용되는 Border 스타일을 설정합니다.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
옵션	설명
`Default`	연관된 스타일 시트에서 지정한 기본 테두리 스타일을 적용합니다.
`None`	컨테이너 테두리를 시각적으로 표시하지 않습니다.
`Dotted`	컨테이너 테두리가 점선으로 표시됩니다.
`Dashed`	컨테이너 테두리는 파선으로 표시됩니다.
`Solid`	컨테이너 테두리가 실선으로 표시됩니다.
`Double`	컨테이너 테두리는 이중 선으로 표시됩니다.
`Groove`	컨테이너 테두리는 홈이 있는 선으로 표시됩니다.
`Ridge`	컨테이너 테두리는 절선으로 표시됩니다.
`Inset`	컨테이너 테두리는 인세트 선으로 표시됩니다.
`Outset`	컨테이너 테두리는 외곽선으로 표시됩니다.

None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
옵션	설명
Border Color	색상 견본을 선택하거나 색상 선택기를 클릭하거나 유효한 색상 이름 또는 이에 해당하는 16진수 값을 입력하여 색상을 지정합니다.
Border Width	테두리 라인 너비의 픽셀 수를 입력합니다.
Border Radius	테두리의 각 모퉁이를 둥글게 만드는 데 사용되는 반경의 크기를 정의하려면 픽셀 수를 입력합니다.

(선택 사항) 컨테이너에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

여러 클래스 이름은 공백으로 구분합니다.

Margins and Padding 에 대한 값을 픽셀 단위로 입력하여 동적 블록 컨테이너의 외부 여백과 내부 패딩을 결정합니다.

다이어그램에 해당 값을 입력합니다.

table 0-row-2 1-row-2 2-row-2 layout-auto
컨테이너 영역	설명
Margins	컨테이너의 모든 면 바깥쪽 가장자리에 적용되는 빈 공간의 양입니다. 옵션: `Top` / `Right` / `Bottom` / `Left`
Padding	컨테이너의 모든 측면 안쪽 가장자리에 적용되는 빈 공간의 양입니다. 옵션: `Top` / `Right` / `Bottom` / `Left`

동적 블록 컨테이너 설정 편집

동적 블록 컨테이너에 마우스를 가져다 대고 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

{width="500" modal="regular"}
필요한 경우 동적 블록을 변경합니다.
- Select Dynamic Block 을(를) 클릭합니다.
  
  {width="20"}
- 활성 동적 블록 목록에서 추가할 블록에 대해 Select 을(를) 클릭합니다.
필요에 따라 나머지 설정을 업데이트합니다.
완료되면 Save 을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

동적 블록 복제

동적 블록 컨테이너에 마우스를 가져다 대고 도구 상자를 표시한 다음 복제( {width="20"}) 아이콘을 선택합니다.

복제본이 원본 바로 아래에 나타납니다.

{width="500" modal="regular"}
새 동적 블록을 다른 위치로 이동하려면 해당 컨테이너를 마우스로 가리킨 다음 도구 상자에서 이동( {width="20"})을 선택합니다.
빨간색 지침이 새 위치에 나타날 때까지 동적 블록을 선택하고 드래그합니다.

동적 블록이 이동하는 동안 각 컨테이너의 위쪽 및 아래쪽 테두리가 파선으로 표시됩니다.

스테이지에서 동적 블록 제거

동적 블록 컨테이너에 마우스를 가져다 대고 도구 상자를 표시한 다음 제거( {width="20"} ) 아이콘을 선택합니다.
확인 메시지가 표시되면 OK 을(를) 클릭합니다.

recommendation-more-help

85b60248-86a4-4d5f-9933-5179643f608d