미디어 - 배너

다음에서 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 를 클릭하여 배너의 외부 여백과 내부 패딩을 지정합니다.

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