다음을 통해 공유


사이트 스타일 지정

Power Pages에는 사이트 스타일을 지정하는 데 사용할 수 있는 강력한 테마 및 도구 세트가 포함되어 있습니다. 포털에 적용할 수 있는 여러 사전 설정 테마 중에서 선택합니다. 이러한 테마를 시작점으로 사용하고 스타일 메뉴로 추가 사용자 지정을 적용하십시오.

스타일링 작업 영역을 통해 전역 사이트 스타일을 적용할 수 있습니다. 기업 브랜딩 업데이트를 적용하고 앱 창 오른쪽의 미리 보기에서 변경 사항을 검토할 수 있습니다. 스타일링은 13가지 사전 설정 테마를 제공합니다. 각 테마에 대해 색상 팔레트, 배경색, 글꼴 스타일, 버튼 스타일 및 섹션 여백을 사용자 지정할 수 있습니다.

  1. 디자인 스튜디오를 엽니다.

  2. 왼쪽 창에서 스타일링을 선택합니다.

    스타일링 작업 영역 메뉴 옵션이 선택된 GUI.

    스타일링 작업 영역에서 테마 목록을 확인합니다. 스타일 메뉴에서 사이트의 색상 및 글꼴과 같은 특정 요소를 추가로 사용자 지정할 수 있습니다. Power Pages는 기본 글꼴과 선택할 수 있는 30개 이상의 Google 글꼴을 제공합니다.

  3. 사전 설정 테마 중 하나를 선택하여 오른쪽의 캔버스 작업 영역에 스타일이 어떻게 반영되는지 확인합니다.

    • 각 테마에는 고유한 색상 팔레트가 있습니다.

    • 스타일 메뉴를 조정하여 각 테마를 조정할 수 있습니다. 텍스트 옵션에는 글꼴, 두께, 크기 및 색상이 포함됩니다.

  4. 편집한 후 변경 사항 저장 또는 변경 사항 취소 중에서 선택합니다.

    수정된 테마는 변경 사항을 유지하기 위해 테마를 재설정하지 않는 한 테마 이름 옆에 표시됩니다.

테마 초기화

테마를 원래 상태로 초기화하려면 줄임표(...)를 선택한 다음 기본값으로 초기화 옵션을 선택합니다.

기본 옵션으로 초기화가 강조 표시된 GUI.

페이지 보기

디자인 스튜디오에서 전체 페이지를 보려면 전체 페이지 아이콘을 선택합니다.

전체 페이지 아이콘이 강조 표시된 GUI.

프로덕션에 표시되는 사이트를 보려면 미리 보기 아이콘을 선택합니다.

미리 보기 아이콘이 강조 표시된 GUI.

뷰포트 선택기를 사용하여 작업 영역의 웹, 태블릿 및 모바일 보기 중에서 선택할 수도 있습니다.

테마 매핑

팔레트의 각 색상은 페이지의 특정 요소에 매핑됩니다. 사전 설정 테마는 9개의 색상과 사용자가 선택한 색상을 위한 3개의 슬롯으로 구성됩니다. 요소를 사용자 지정하면 테마가 재설정될 때까지 매핑이 올바르지 않습니다.

새 색상을 추가하거나 기존 색상을 변경하려면 색상 팔레트에서 더하기 기호(+)를 선택하고 Color Picker, 16진수 값 또는 RGB 값을 사용하여 색상을 선택합니다.

포털 내의 Color Picker 기능.

색상 팔레트에 새 색상이 추가되면 컨텍스트 메뉴에서 구성 요소의 색상을 지정하는 데 사용할 수 있습니다.

노트

2022년 9월 23일 이전에 Power Pages를 사용하여 만든 사이트의 경우 테마와 관련된 알려진 문제가 있습니다. 추가 정보: Power Pages 사이트의 배경색 조정

취소/다시 실행

스타일링 작업 영역에서 실행 취소다시 실행 아이콘을 선택하여 현재 선택된 테마 변경과 관련된 모든 시나리오에 대한 테마 업데이트를 되돌릴 수 있습니다.

  1. 추가 메뉴(...) 옵션에서 기본값으로 재설정 테마를 포함하여 선택한 테마의 모든 스타일 설정에 실행 취소/다시 실행 옵션을 적용할 수 있습니다.

  2. 새 테마로 전환할 때 저장되지 않은 변경 사항을 저장하거나 취소하라는 대화 상자가 표시됩니다. 작업 중 하나를 선택하면 실행 취소/다시 실행 스택이 지워집니다.

실행 취소/다시 실행의 예상되는 경험은 무엇입니까?

실행 취소다시 실행 옵션은 스타일링 작업 영역에서 변경한 사항만 지원합니다. 다른 작업 영역으로 이동하거나 다른 테마로 전환하면 작업 기록이 즉시 지워집니다.

기본적으로 다음과 같은 일부 일반 디자인 스튜디오 작업은 지원되지 않습니다.

  • 동기화, 저장, 미리 보기, 확대/축소, 캔버스 크기 조정, 작업 공간과 웹 페이지 간 탐색, 미디어 및 CSS 파일 업로드.

  • 다른 테마로 전환하여 스타일 변경 없이 새로 선택한 테마를 저장합니다.

  • 사용자 지정 CSS 패널 작업(예: 업로드, 활성화/비활성화)을 우선 순위에 따라 위/아래로 이동합니다.

참조 항목