이 페이지는

Style Manager는 코드를 작성하지 않고 웹 사이트의 모양과 느낌을 사용자 정의 할 수 있습니다. 사이트에서 볼 수있는 모든 요소를 클릭하고 색상, 글꼴, 간격, 그림자 등을 변경하십시오. 조명 모드 및 어두운 모드에 대한 다른 스타일을 만들 수 있습니다, 모바일 장치에서 무엇을보고 테스트, 특정 페이지 또는 전체 사이트로 변경 적용.

사이트 상단에 앉아있는 시각적 편집기와 같은 생각, 포인트를하자 즉시 디자인 변경을 만들 클릭.

[스크린 샷: 페이지 오버뷰]

오시는 길

바로가기 관리자 패널 > 템플릿 > 스타일 매니저

자주 묻는 질문

Style Manager를 처음 열면 두 가지 주요 영역이 표시됩니다.

왼쪽 패널 : 스타일 편집기

이것은 다른 스타일링 옵션을 위한 7개의 탭을 가진 당신의 제어반입니다:

• 색상 : - 텍스트 색상과 배경 (그라디언트 포함)
• 자료실 - 글꼴, 크기 및 텍스트 포맷
• 관련 상품 - 패딩 및 마진
• 제품정보 - 국경 작풍, 폭, 색깔 및 그림자
• 제품정보 - 디스플레이 설정, 위치 및 flexbox
• 제품정보 - Opacity, 변형 및 필터
• 크기 (mm) - 폭, 고도 및 종횡비

이 패널은 현재 스타일을 보여 주며 변경할 수 있습니다.

오른쪽 패널: 라이브 미리보기

이 미리보기 창에서 실제 웹 사이트를 보여줍니다. 당신은 할 수 있습니다:

• 다른 페이지로 이동
• 선택 및 스타일을 클릭
• 데스크톱, 태블릿 및 모바일 뷰 사이 토글
• 빛과 어두운 형태 사이 스위치
• 당신의 변화를 즉시 보고

맨 위로

헤더 바는 다음을 포함합니다:

• 가벼운 형태/짙은 형태 Button - 어떤 모드를 선택하여 편집
• 모두 저장 - 스타일 변경을 저장
• 모든 것 - 모든 사용자 정의 스타일을 제거하고 신선한 시작

일반 작업

Element를 스타일링하는 방법

이것은 당신이 모든 스타일링 작업을 사용할 수있는 기본 워크플로입니다.

1. 자주 묻는 질문 편집 모드 미리보기 도구 모음에서 버튼 (cursor icon).
2. 녹색 "Edit Mode Active" 표시기는 화면 상단에 나타납니다.
3. 미리 요소에 마우스를 이동 - 그들은 파란색 윤곽으로 강조 할 수 있습니다.
4. 을 클릭합니다.
5. 왼쪽 패널의 상단에 선택한 요소에 대한 정보를 볼 수 있습니다.
6. 탭(Colors, Typography 등)을 사용하여 어떻게 보일까요?
7. 변경 사항을 미리 볼 수 있습니다.
8. 변경 사항이 있으면 클릭 자주 묻는 질문 왼쪽 패널의 바닥에.

[Screenshot : 선택 및 편집 요소]

색상 변경 방법

요소 선택 후:

1. 자주 묻는 질문 색상 : 왼쪽 패널에서 탭.
2. 확대하기 텍스트 색상 텍스트 색상을 변경하는 섹션.
3. 컬러 스워치 (색깔의 사각형)을 클릭하여 컬러 스워커를 엽니다.
4. 색상을 선택하거나 텍스트 필드에 hex 코드를 입력합니다.
5. 요소 업데이트 즉시 미리보기.

배경을 변경하려면:

1. 내 계정 색상 : 탭, 확장 이름 * 이름 *
2. 제품 정보 사이트맵 단일 색상 또는 사이트맵 색깔 혼합을 위해.
3. 단단한 배경을 위해, 색깔 견본을 클릭하고 당신의 색깔을 선택하십시오.
4. 기타 제품정보 모든 배경을 원하지 않는 경우.

[스크린 샷: 컬러 포커 인터페이스]

Gradient 배경을 만드는 방법

Gradients는 여러 색상을 부드럽게 혼합합니다.

1. 당신의 요소를 선택하고 이동 색상 : 탭.
2. 지원하다 이름 * 자주 묻는 질문 사이트맵 버튼.
3. 8 방향 버튼 중 하나를 클릭하여 방향을 선택하십시오 (또는 사용자 지정 각도 입력).
4. 당신은 적어도 2개의 색깔 정지를 볼 것입니다. 색상을 선택하려면 각 색상 견본을 클릭합니다.
5. 위치 슬라이더 (0-100%)를 조정하여 각 색상이 나타납니다.
6. 이름 * + 스톱 추가 당신의 gradient에 더 많은 색깔을 추가하십시오.
7. 색상 중지 옆에 X 버튼을 클릭하여 제거하십시오 (최소 2).
8. gradient 미리보기 바 업데이트가 변경됩니다.

[스크린 샷 : 그라디언트 빌더]

글꼴과 텍스트를 변경하는 방법

텍스트 또는 텍스트를 선택 한 후:

1. 자주 묻는 질문 자료실 탭.
2. 지원하다 글꼴 가족 & 크기·
3. 글꼴 선택 본문 바로가기 드롭다운 (로보토, 인터, 몬세라트 등).
4. 설정하기 이름 * 숫자 입력을 사용하여 단위 (px, rem, em, 또는 %)를 선택하십시오.
5. 선택하기 연락처 text thinner 또는 bolder (400는 정상, 700는 대담합니다)를 만들기 위하여.

텍스트 형식 :

1. 확대하기 텍스트 포맷 이름 *
2. 왼쪽, 중앙, 오른쪽, 또는 justify를 정렬하는 정렬 버튼을 클릭합니다.
3. 제품 정보 텍스트 Transform 텍스트 UPPERCASE, Lowercase 또는 자본화.
4. 제품 정보 텍스트 장식 underlines, 파업, 또는 overlines를 추가합니다.

[Screenshot : 전기 옵션]

Spacing을 추가하는 방법

Spacing은 주변 공간과 내부 요소를 제어합니다.

1. 원소를 선택하고 클릭 관련 상품 탭.
2. 지원하다 회사 소개 그리고 요소 안쪽에 공간을 추가하는 번호를 입력합니다.
3. 지원하다 인기 카테고리 그리고 요소 밖에 공간을 추가할 수 있는 번호를 입력합니다.

국경과 그림자를 추가하는 방법

요소 선택 후:

1. 자주 묻는 질문 제품정보 탭.
2. 지원하다 주문하기 국경을 사용자 정의합니다.
3. 더 보기 Border 스타일 (Solid, Dashed, Dotted 등).
4. 설정하기 국경 폭 픽셀에서.
5. 자주 묻는 질문 국경 색깔 색상을 선택 swatch.
6. 설치하기 국경 반경 구석에.

그림자를 추가하려면:

1. 확대하기 박스 그림자 이름 *
2. 그림자 사전 설정 버튼을 클릭하십시오 (None, SM, MD, LG, XL) 일반적인 그림자 스타일.
3. 또는 사용자 정의 그림자 값을 입력 사용자 정의 Shadow 이름 *

[Screenshot : 국경 및 그림자 제어]

Hover 효과 스타일링 방법

누군가가 요소에 마우스를 이동 할 때 Hover 효과 트리거 (버튼처럼).

1. hover 효과를 추가하려면 원소를 선택하십시오.
2. 더 보기 국가 선택 요소 정보의 밑에 막대기.
3. 자주 묻는 질문 :오버 버튼.
4. hover 스타일을 편집하는 selector 디스플레이 업데이트.
5. 변경 사항 만들기 - 배경 색상을 변경하거나 변환을 추가하십시오.
6. 미리보기의 요소에 마우스를 이동하여 hover 효과를 볼 수 있습니다.
7. 이름 * 자주 묻는 질문 할 때.

[Screenshot : 국가 선택자 - 호버]

빛과 어두운 형태를 위해 작풍하는 방법

귀하의 사이트는 빛 모드 versus 어두운 모드에서 다른 볼 수 있습니다.

1. 이름 * 빛 형태 header에서 조명 모드 스타일을 편집합니다.
2. 요소를 선택하고 원하는대로 사용자 정의합니다.
3. 이름 * 자주 묻는 질문 각 성분을 위해.
4. 이름 * 어두운 형태 header에서 어두운 모드 편집으로 전환합니다.
5. 미리보기는 자동으로 어두운 모드로 전환하므로 편집하는 것을 볼 수 있습니다.
6. 동일한 요소를 선택하고 어두운 모드에 대해 사용자 정의합니다.
7. 어두운 모드 변경을 저장합니다.

특정 페이지로 스타일을 적용하는 방법

기본적으로 스타일은 전체 사이트에 적용됩니다. 그러나 특정 페이지에 나타나는 스타일로 만들 수 있습니다.

Style Manager는 자동적으로 보고 있는 페이지를 검출합니다:

페이지 별 스타일을 적용하려면:

1. 사용자 정의 할 페이지에 이동 미리보기 탐색을 사용합니다.
2. 이름 * 편집 모드 그리고 그 페이지의 요소를 선택합니다.
3. 당신의 작풍 변화를 만드십시오.
4. 이름 * 자주 묻는 질문·
5. 이 스타일은 특정 페이지로만 적용됩니다.

스타일 재설정 방법

단일 요소 재설정 :

1. 재설정하려는 요소 선택.
2. 이름 * 재설정 요소 왼쪽 패널의 바닥에.
3. 자주 묻는 질문 이름 * 팝업에서.
4. 그 성분을 위한 모든 주문 작풍은 제거됩니다.
5. 요소는 원래 모습으로 돌아갑니다.

모든 것을 재설정 :

1. 이름 * 모든 것 헤더에.
2. 경고를 주의 깊게 읽으십시오 -이 모든 사용자 정의 스타일을 삭제합니다.
3. 이름 * 이름 * 확인하기
4. 전체 사이트에서 모든 사용자 정의 스타일이 제거됩니다.
5. 사이트가 기본 모습으로 돌아갑니다.

미리보기 컨트롤

탐색 Toolbar

미리보기 상단의 도구 모음은 미리보기를 탐색하고 제어 할 수 있습니다.

장치 미리보기

스타일이 미리보기 헤더의 버튼을 클릭하여 다른 화면 크기에 어떻게 보일지 테스트하십시오.

미리보기는 그림자 경계로 선택한 크기로 축소되므로 모바일 사용자가 귀하의 사이트를 볼 수 있는지 정확히 알 수 있습니다.

[Screenshot : 반응 형 Preview]

다크 모드 토글

미리보기 헤더의 달 아이콘은 빛과 어두운 모드 사이의 미리보기를 견인합니다. 이것은 주 헤더의 모드 버튼에서 분리됩니다:

• 우두머리 형태 단추 - SAVING (빛 또는 어둠)
• 미리보기 달 버튼 - 당신이 조회하는 형태를 통제하십시오

스타일 탭 이해

왼쪽 패널의 각 탭은 다른 시각적 속성에 중점을 둡니다.

색깔 탭

• 텍스트 색상 - 요소 내부의 텍스트의 색상
• 이름 * - 단단한 색깔, gradient, 또는 투명한 배경
• Gradient 구조상 - 여러 색상의 정지로 부드러운 색상의 블렌드 만들기

전기 탭

• 본문 바로가기 - 전문 웹 글꼴에서 선택
• 이름 * - 유연한 단위로 텍스트 크기 (px, rem, em, %)
• 연락처 - 어떻게 얇거나 대담한 텍스트가 나타납니다
• 선 고도 - 텍스트의 줄 사이 공간
• 비밀번호 - 개별 문자 사이 공간
• 텍스트 포맷 - 정렬, 자본화, 밑줄 등

연락처

• 회사 소개 - 요소 내부의 공간 (작성 및 경계)
• 인기 카테고리 - 요소 밖에서 공간 (단부 요소와 이웃)

국경 탭

• Border 스타일 - 단단한, dashed, dotted, 또는 장식적인 선
• 국경 폭 - 국경을 두껍게하는 방법
• 국경 색깔 - 국경 선의 색깔
• 국경 반경 - 구석을 돌리는 방법
• 박스 그림자 - 깊이를 창조하는 드롭 그림자

배치 탭

• 제품정보 - (블록, 인라인, 플렉스, 그리드 등)
• 주요 특징 - 요소가 위치하는 방법 (정전, 상대, 절대 등)
• 플렉스박스 - 행 또는 열에 있는 아이 성분 배열을 위한 통제

효과 탭

• 오파시티 - 원소가 얼마나 투명합니까 (0% = 보이지 않는, 100% = 고체)
• 관련 기사 - 스케일, 회전, 또는 요소를 이동
• 필터링 - Blur, 밝기, 대비 및 회색 효과

크기 탭

• 제품 정보 - 얼마나 넓은 요소는
• 고도: - 얼마나 키 큰 요소는
• Min/Max 폭 & 고도 - 크기 제약
• 오브젝트 피트 - 어떻게 이미지와 동영상이 컨테이너 내부에 적합
• 종횡비 - 비율 유지 (사각, 16 : 9 등)

새로운 사용자를위한 팁

문제 해결

미리보기가로드되지 않거나 빈 페이지를 보여줍니다.

당신이 본: 오른쪽 패널은 빈, 흰색 또는 오류를 보여줍니다.

그것을 고치는 방법:

1. 자주 묻는 질문 지원하다 미리보기 도구 모음에서 버튼.
2. 사이트가 새 브라우저 탭에서 열리면 확인.
3. 사이트가 작동하지만 미리보기가 작동하지 않으면 사이트 관리자에 문의하십시오. - 이것은 구성 문제 일 수 있습니다.

내가 클릭 할 때 요소를 선택할 수 없습니다

당신이 본: 미리보기의 요소를 클릭하면 아무것도 할 수 없습니다.

그것을 고치는 방법:

1. 확인하기 편집 모드 단추 (cursor icon)는 녹색에서 강조됩니다.
2. 새로 고침 버튼을 사용하여 미리보기를 새로 고침하십시오.
3. 일부 매우 작은 요소 (5x5 픽셀 미만) 선택 할 수 없습니다 - 인근 요소를 클릭해보십시오.

내 변경은 라이브 사이트에 나타나지 않습니다.

당신이 본: 미리보기에서 표시를 변경하지만 실제 사이트에 없습니다.

그것을 고치는 방법:

1. 자주 묻는 질문 자주 묻는 질문 왼쪽 패널의 하단에 (모든 것을 저장하지 않음).
2. 브라우저 캐시를 정리하고 라이브 사이트를 새로 고침하십시오.
3. 다른 모드에서 사이트를 볼 경우 (빛 대 어두운), 스위치 모드가 변경이 적용되면 볼 수 있습니다.

Hover 효력은 작동하지 않습니다

당신이 본: 당신은 스타일링 : 호버 상태하지만 아무것도 당신이 호버 때 발생합니다.

그것을 고치는 방법:

1. 자주 묻는 질문 :오버 변경하기 전에 주 Selector의 버튼.
2. Hover effect only work with mouse - 모바일 사용자는 그들을 볼 수 없습니다.
3. 당신의 원본 사이트 작풍이 당신의 상향한 효력이 있는 경우에 검사하십시오.

색상이 잘못되었거나 내가 선택했는지 일치하지 마십시오.

당신이 본: 색깔 피커는 1개의 색깔을 보여줍니다 그러나 성분은 다른 것을 보여줍니다.

그것을 고치는 방법:

1. 요소를 다시 선택하고 현재의 색상 값을 새로 고침합니다.
2. 올바른 속성을 편집했는지 확인하십시오 - 텍스트 색상은 배경에서 분리됩니다.
3. 최종 결과를 보려면 미리보기를 저장하고 새로 고침하십시오.

변경 사항을 저장할 수 없습니다 (저장 버튼은 회색)

당신이 본: Save All and Reset 모든 버튼은 비활성화 및 회색입니다.

그것을 고치는 방법:
페이지 상단의 오렌지 배너는 데모 모드가 활성화됩니다. 데모 모드는 저장 변경을 방지합니다. 변경 사항을 저장해야하는 경우 사이트 관리자에게 데모 모드를 비활성화하십시오.

나의 gradient는 위로 보여주지 않습니다

당신이 본: 그라디언트를 만들었지만 요소는 여전히 단단한 색상을 보여줍니다.

그것을 고치는 방법:

1. 자주 묻는 질문 사이트맵 버튼 (Solid) 배경 섹션에서.
2. 다른 색상으로 적어도 2 색상의 중지가 있는지 확인하십시오.
3. 변경 사항을 저장하고 미리보기를 새로 고침합니다.

관련 페이지

This guide is for ComusThumbz site owners and operators. It focuses on using the Style Manager interface to customize your site's appearance without coding.