가이드/디자인/그룹에 스타일 추가

그룹에 스타일 추가

그룹 블록을 사용하여콘텐츠 그룹에 디자인 스타일을 추가할 수 있습니다. 이 가이드에서는 색상, 테두리와 시각적 요소로 그룹 블록의 디자인을 사용자 정의하는 방법을 알아보겠습니다.

비디오 튜토리얼

그룹에 사전 설정 스타일 적용

사전 설정 스타일은 여러 블록 테마에 포함된특성입니다. 사전 설정 스타일을 적용하는 단계는 다음과 같습니다.

  1. 편집 화면 상단의 목록 보기를 클릭합니다.
  2. 그룹 블록을선택합니다.
  3. 블록 설정 사이드바에서스타일 탭(흑백 원처럼 보이는 아이콘)을 클릭합니다.
  4. 스타일을 클릭하여 그룹 블록에적용합니다.
The Styles section of the Group block sidebar settings.

사전 설정된 스타일이 없어도 원하는 대로 그룹 블록에 스타일을 적용할 수 있습니다(아래에서 설명).

그룹 색상 변경

배경 색상, 텍스트 색상 등을 포함하여 그룹 블록의기본 색상을 변경할 수 있습니다. 그룹 블록에서 사용되는 색상을 변경하는 단계는다음과 같습니다.

  1. 편집 화면 상단의 목록 보기를 클릭합니다.
  2. 그룹 블록을선택합니다.
  3. 블록 설정 사이드바에서색상 섹션을 찾습니다.
The "Color" section of the Group block's settings sidebar.
  1. 색상을 변경할 요소의 이름을 클릭하고 새 색상을 선택합니다.
  2. 색상 옵션(⋮) 아이콘을클릭하여기본 제목과 버튼 색상을 변경하는 옵션을 활성화합니다.
  3. ‘저장’또는‘발행’을클릭하여변경 사항을 저장합니다.

색상 변경에 대해 자세히알아보세요.

배경 이미지 추가

배경 이미지를 통해 콘텐츠에 대한 시각적 흥미를 유발하고 컨텍스트를 제공할 수 있습니다. 그룹 블록에 배경 이미지를 추가하는 단계는다음과 같습니다.

  1. 편집 화면 상단의 목록 보기를 클릭합니다.
  2. 그룹 블록을선택합니다.
  3. 블록 설정 사이드바에서‘배경 이미지’섹션을찾습니다.
  4. ‘배경 이미지추가’를 클릭하여사이트의 미디어 라이브러리에서 이미지를 선택하거나 새로 하나를 업로드합니다.
The "Background image" section of the Group block's settings sidebar.

배경 이미지를 제거하려면‘배경 이미지옵션’ 아이콘(⋮)을 ‘배경 이미지’선택에서 클릭하고‘재설정’링크를선택합니다.

테두리 또는 그림자 추가

테두리와 그림자는 깊이를 만들고 콘텐츠 섹션을 시각적으로 구분하는 데 도움이 됩니다. 이러한 요소를 그룹 블록에 추가하는 단계는다음과 같습니다.

  1. 편집 화면 상단의 목록 보기를 클릭합니다.
  2. 그룹 블록을선택합니다.
  3. 블록 설정 사이드바에서테두리 및 그림자 섹션을 찾습니다.
  4. 조정하여 테두리 사용자 정의하기:
    • 폭:테두리 두께입니다.
    • 스타일:실선, 파선 또는 점선 스타일입니다.
    • 색상:사전 설정된 색상 중에서 선택하거나 사용자 정의 색상을 생성합니다.
    • 반지름:둥근 모서리를 그룹 블록에추가합니다.
  5. 테두리 및 그림자 옵션(⋮) 메뉴를 클릭하여 그림자 옵션을 표시한 후 사전 설정된 그림자 디자인 중에서 선택합니다.

테두리 및 그림자 설정에 대해자세히 알아보세요.

스타일 재사용

사이트 전체에서 일관되는 디자인을 생성하면 시간이 절약되고 시각적 응집력이 향상됩니다. 모든 그룹 블록의 기본 스타일을 설정하는 단계는다음과 같습니다.

  1. 디자인 → → 편집기 → 스타일로이동합니다.
  2. 블록 섹션에서 그룹 블록을 찾아 기본 설정 배경, 테두리 및 기타 스타일 옵션을 설정합니다.
  3. 저장을 클릭하여 이러한 기본값을 모든 그룹 블록에적용합니다.

참고: 개별 그룹 블록은 블록 설정 사이드바를 통해 계속 사용자 정의할 수 있습니다.

사이트 스타일 설정에 대해 자세히알아보세요.

Copied to clipboard!