미디어 - 배너

Page Builder 패널에서 Media ​을(를) 확장하고 Banner 자리 표시자를 스테이지로 드래그합니다.

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

Upload Image ​및_Select from Gallery_ 버튼이 포함되어 있으므로 스테이지에서 직접 배너 콘텐츠를 빠르게 변경할 수 있습니다. Edit Banner ​페이지에서 내용을 변경할 수도 있습니다.

배너 자리 표시자를 클릭하여 텍스트 편집기를 표시하고 배너의 콘텐츠를 입력합니다.

콘텐츠 설정을 사용하여 보다 복잡한 배너 콘텐츠를 포함할 수도 있습니다.

도구 상자를 표시하고 설정( ) 아이콘을 선택하려면 배너 컨테이너 위로 마우스를 가져갑니다.

사용 가능한 설정 업데이트에 대한 자세한 내용을 보려면 다음 섹션을 사용하십시오.

• Appearance
• Content
• Background
• Advanced

완료되면 오른쪽 상단의 Save ​을(를) 클릭하여 Edit Banner ​페이지를 닫습니다.

오른쪽 상단 모서리에서 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

자리 표시자 텍스트를 클릭하고 배너에 표시할 텍스트를 입력합니다.

편집기 도구 모음이 텍스트 상자 위에 나타납니다.

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

편집기 도구 모음을 사용하여 텍스트를 입력하고 서식을 지정할 수 있을 뿐만 아니라 링크, 이미지 및 위젯과 같은 요소를 삽입할 수 있습니다.

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

도구 상자를 표시하고 설정( {width="25"} ) 아이콘을 선택하려면 배너 컨테이너 위로 마우스를 가져갑니다.

Content ​섹션까지 아래로 스크롤한 다음​ Message Text ​편집기를 사용하여 배너 텍스트를 입력하고 서식을 지정합니다.

텍스트 링크, 이미지 및 위젯과 같은 요소를 삽입할 수도 있습니다.

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

필요한 경우 배너에 대해 Link ​을(를) 지정하십시오.

링크는 고객이 배너 단추 또는 영역을 클릭할 때 나타나는 대상 페이지입니다. 다음 세 가지 링크 유형 중 하나를 사용할 수 있습니다.

• URL - 상대 URL 또는 정규화된 URL에 연결된 링크입니다.
• Product - 제품 이름 또는 SKU를 기반으로 대상 페이지를 식별합니다. 부분 또는 전체 이름을 기반으로 이름으로 제품을 검색합니다. 검색 결과 목록에서 제품을 선택합니다.
• Category - 대상 페이지를 범주 트리에서 특정 범주 또는 하위 범주로 식별합니다. 부분 이름 또는 전체 이름을 기반으로 범주를 검색합니다. 표시된 트리의 확장된 섹션에서 범주를 선택합니다.
• Page - 대상 페이지를 특정 콘텐츠 페이지로 식별합니다. 부분 이름 또는 전체 이름을 기반으로 페이지를 검색합니다. 검색 결과 목록에서 페이지를 선택합니다.

note note
NOTE
2.4.1 릴리스부터 Page Builder은(는) 상점에서의 표시 문제로 인해 더 이상 배너 및 중첩된 텍스트 내의 링크 연결을 지원하지 않습니다. Message Text ​에서 링크를 사용하는 경우​_Link_ 옵션을 구성할 수 없습니다. 전체 배너에 대해 하나의 링크를 사용하려는 경우 텍스트에서 모든 링크를 제거할 수 있습니다.
{width="200"}

필요한 경우 고객에게 링크를 따라가라는 메시지를 표시하는 버튼을 추가합니다.

배너 모양 설정은 텍스트 아래에 단일 링크 또는 단추를 배치합니다. 추가하려는 링크 또는 버튼의 속성을 완료합니다.

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

• Show Button ​을(를) 다음 중 하나로 설정합니다.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  옵션	설명
  Always	배너에 항상 단추가 표시됩니다.
  On Hover	단추를 마우스로 가리키면 배너에 단추가 표시됩니다.
  Never Show	배너에 단추가 표시되지 않습니다.

• 단추에 표시할 Button Text ​을(를) 입력하십시오.

• Button Type ​을(를) 다음 중 하나로 설정합니다.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  옵션	설명
  Primary	현재 스타일 시트의 기본 단추 스타일을 적용합니다.
  Secondary	해당하는 경우 현재 스타일 시트의 보조 단추 스타일을 적용합니다.
  Link	단추가 아닌 하이퍼링크를 만듭니다.

  현재 테마의 단추 스타일에 따라 단추 형식이 결정됩니다. 일반적으로 기본 단추는 보조 단추보다 배경색이 더 두드러집니다.

Show Overlay ​을(를) 다음 중 하나로 설정합니다.

오버레이를 사용하여 Appearance 설정으로 정의된 활성 콘텐츠 영역에 배경색을 적용할 수 있습니다. 배너 배경 이미지는 배너의 전체 너비에 대해 계속 표시됩니다.

오버레이를 표시하도록 선택한 경우 Overlay Color ​을(를) 설정합니다.

• 색상 없음 견본을 클릭하고 견본을 선택합니다.
• 색상 없음 필드에 올바른 색상 이름 또는 16진수 값을 입력하십시오.

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

오른쪽 상단 모서리에서 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

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

배너에 추가된 콘텐츠 컨테이너의 가로 위치를 제어하려면 Alignment ​을(를) 선택하세요.

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

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

• Border Color - 견본을 선택하거나, 색상 선택기를 클릭하거나, 올바른 색상 이름 또는 이에 해당하는 16진수 값을 입력하여 색상을 지정합니다.

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

• Border Width - 테두리 라인 너비의 픽셀 수를 입력합니다.

• Border Radius - 테두리의 각 모퉁이를 둥글게 만드는 데 사용되는 반경의 크기를 정의할 픽셀 수를 입력합니다.

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

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

Margins and Padding ​에 대한 값을 픽셀 단위로 입력하여 배너의 외부 여백과 내부 패딩을 지정합니다.

배너 컨테이너 다이어그램에 해당하는 각 값을 입력합니다.