WordPress 웹 사이트 색상을 사용자 정의하는 방법

웹사이트나 블로그의 전체적인 모양이 마음에 들고 완벽한 웹 호스팅 제공업체를 찾았으며 선택한 테마에 만족한다고 가정해 보겠습니다. 작지만 여전히 중요한 변경 사항이 하나 있습니다. 넌 할 수 있을 것 같아 WordPress 사이트에 더 개인적인 터치를 추가하십시오. 색 구성표를 변경하여. 이 프로세스를 더 쉽게 하기 위해 Qode Interactive의 WordPress 테마에서 수행하는 방법을 포함하여 WordPress 색상을 조정하는 몇 가지 다른 방법을 보여줍니다.

기본 사용자 정의 옵션을 통해 색상 변경

사용자 정의 옵션을 사용하여 색상을 변경하는 방법을 보여드리기 전에 다음 사항에 유의해야 합니다. 이러한 특정 옵션은 사용 중인 테마에 따라 다릅니다. 이 기사의 목적으로 Twenty Twenty-One 기본 WordPress 테마를 사용했으므로 사이트에서 다른 테마를 사용 중이거나 테마에 이러한 옵션이 없는 경우 대신 플러그인 방법을 항상 확인할 수 있습니다. (이에 대해서는 잠시 후에 다루겠습니다).

1 단계

먼저 첫 번째 것들, 이동 외관 >> 사용자 정의.

2 단계

일단 거기, 을 선택 색상 및 다크 모드 탭.

3단계

여기에서 사이트의 배경색을 변경하는 옵션을 찾을 수 있습니다. 색상 선택. 이 옵션을 클릭해야 합니다.

4단계

이렇게 하면 사용할 수 있는 색상 패널이 열립니다. 사용자 정의 색상을 추가하거나 팔레트에서 선택하십시오.. 후자의 옵션을 사용하려면 다음을 수행할 수 있습니다. 팔레트에서 원하는 곳을 클릭하거나 작은 원을 드래그하십시오. 당신의 필요에 가장 잘 맞는 색상을 만들 때까지. 또는 다음을 수행할 수도 있습니다. 오른쪽 입력 필드에 RGB 코드를 입력합니다.

5단계

팔레트 바로 옆에는 더 밝거나 더 어두운 색조로 갈 것인지 결정하십시오. 슬라이더를 위나 아래로 끌어 이 작업을 수행할 수 있습니다.

6단계

선택에 만족하면 다음을 클릭하십시오. 색상 선택 다시 한번.

사이트의 요소는 선택한 배경색에 따라 항상 자동으로 계산되고 설정됩니다. 이는 사용자가 쉽게 볼 수 있도록 배경과 요소 간의 대비가 항상 충분히 높기 때문에 좋습니다.

7단계

사이트 배경에 밝은 색상을 사용하려는 경우 다크 모드 지원 옵션도 사용할 수 있습니다. 이 설정을 사용하면 사이트 방문자가 사이트를 어두운 모드로 볼 수 있습니다. 간단히 “다크 모드 지원”옵션을 표시하십시오. 귀하의 사이트는 어두운 배경과 밝은 텍스트로 표시됩니다.

8단계

또한 어두운 구성표를 미리 보려면 다음을 수행할 수 있습니다. 클릭 다크 모드: 끄기 단추 (화면의 오른쪽 하단 모서리에 위치). 이 작업은 다크 모드를 켭니다:

9단계

색상 설정이 끝나면 게시 버튼을 누르면 모든 설정이 완료됩니다.

10단계

마지막으로 사용자 대시보드로 돌아가려면 간단히 클릭 엑스 단추 왼쪽 상단 모서리에 사용자 정의 화면.

플러그인으로 색상 변경하기

대부분의 프리미엄 WordPress 테마를 사용하면 색상을 쉽게 변경할 수 있습니다. 그러나 모든 테마에서 동일한 수준의 사용자 지정을 허용하는 것은 아닙니다. 테마에 많은 사용자 지정 옵션이 제공되지 않는 경우 웹에서 찾을 수 있는 도구 및 플러그인 중 하나를 사용하여 언제든지 사용자 정의 CSS를 추가할 수 있습니다. 필요한 모든 것을 변경합니다. 의 도움으로 색상을 변경하는 방법은 다음과 같습니다. SiteOrigin CSS 플러그인.

1. 먼저, 액세스 플러그인 화면 관리자 패널에서. 그런 다음 SiteOrigin CSS 플러그인을 찾은 후 설치 및 활성화.

2. 로 이동 모양 > 사용자 정의 CSS.

3. CSS 편집기가 열리면 눈 아이콘을 클릭하십시오 편집기의 오른쪽 상단에 있습니다.

4. 이제 눈을 클릭하면 새 화면이 나타납니다. 왼쪽에 보면 제어판화면 오른쪽에는 페이지가 어떻게 보일지 실시간 미리보기 편집하는 동안.

5. 페이지에서 마우스를 움직이면 페이지의 요소 위에 마우스를 가져가면 강조 표시된 요소가 표시됩니다.

6. 그냥 변경하려는 요소를 클릭하십시오 (예를 들어 페이지 배경색과 같은) 컨트롤 패널의 왼쪽 상단 모서리에 추가된 요소 이름을 볼 수 있습니다.

7. 지금, 클릭 장식 탭.

8. 몇 가지 새로운 옵션이 나타나고 배경색이 그 중 하나입니다.

9. 입력 필드를 클릭하십시오, 그리고 다시 색상 선택기를 만나게 됩니다. 작은 원을 움직이거나 입력 필드에 색상 RGB 코드를 입력하여 원하는 색상을 선택할 수 있습니다. 오른쪽에서 모든 변경 사항을 미리 볼 수 있습니다.

10. 색상을 선택했으면 체크박스를 표시.

11. CSS 편집기 화면으로 돌아가서 CSS가 추가되었음을 알 수 있습니다. 당신이해야 할 모든 CSS 저장 클릭.

12. 플러그인은 사이트가 업데이트되었음을 ​​알려줍니다. 라이브로 보려면 간단히 페이지 새로고침.

이것이 SiteOrigin CSS 플러그인을 사용하여 웹사이트의 색상을 변경하는 방법입니다.

Qode 테마의 색상 변경

Qode Interactive의 각 테마에는 다양한 색상 사용자 정의 옵션 사이트의 다양한 부분에 대해 사이트의 색 구성표를 변경할 수 있는 두 가지 주요 위치가 있습니다. 일반 테마 설정그리고 각각에 페이지/게시물 자체.

일반 설정에서 사용자 정의한 옵션이 무엇이든 전체 웹사이트에 적용되는 반면 페이지 또는 게시물에 설정한 요소는 (자연스럽게) 해당 페이지/게시물에만 적용됩니다.

1. 일반 테마 설정

각 테마에는 테마 자체에 대해 지정할 수 있는 옵션이 있는 고유한 일반 설정이 있습니다.

옵션은 사이트의 특정 부분과 관련된 각 그룹과 함께 그룹으로 정렬됩니다. 이것은 더 쉬운 웹사이트 관리를 제공합니다. 모든 테마에서 사용할 수 있는 특정 옵션 그룹이 있지만 일부 옵션은 테마마다 약간 다릅니다. 테마가 가질 수 있는 옵션은 테마의 목적과 요구 사항에 따라 크게 달라집니다.

1. 일반적인 옵션

여기에서 할 수 있습니다 사이트에서 일반적으로 가장 지배적인 색상을 설정합니다.처럼 첫 번째/두 번째 기본 색상 (테마의 주요 색상) 및 페이지 배경색. 일반 옵션에서 조정한 모든 사항이 전체 웹사이트에 적용된다는 사실을 잊지 말도록 해야 합니다.

여기에서 텍스트 선택 색상(페이지에서 텍스트를 선택할 때 사용자에게 표시되는 색상 선택) 및 페이지 로더 배경 색상(페이지가 로드되기 전에 볼 수 있는 색상)과 같은 옵션도 찾을 수 있습니다.

2. 글꼴

테마를 사용하면 글꼴 색상을 매우 쉽게 변경할 수 있습니다. 에서 글꼴 옵션 패널의 섹션에서 모든 제목(1~6), 단락, 링크 및 호버 색상을 설정할 수 있습니다.

삼. 헤더 옵션

헤더 옵션은 모든 헤더 관련 설정을 찾을 수 있는 곳, 헤더 유형 및 모양과 같은. 색상은 다음과 같이 조정할 수 있습니다.

4. 모바일 헤더 옵션

일부 테마에는 모바일 장치에서 사이트를 볼 때 표시되는 헤더에 대해 별도의 색상 옵션이 있습니다. 여기에서 할 수 있습니다 배경, 텍스트 및 탐색 색상 조정.

5. 제목 옵션

이것은 당신이 할 수있는 곳입니다 에서 찾을 수 있는 모든 색상을 설정합니다. 제목 지역 – 배경, 텍스트 제목, 부제그리고 빵 부스러기사용할 수 있는 경우.

6. 콘텐츠 하단 옵션

그만큼 콘텐츠 하단 표시되는 위젯 영역입니다. 페이지 콘텐츠 아래. 에서 콘텐츠 하단 테마의 일반 옵션 섹션에서 이 영역의 배경색을 설정할 수 있습니다.

7. 보행인 옵션

달리 제목 그리고 헤더 텍스트 색상을 조정할 수 있는 옵션에서는 바닥글의 배경색만 설정할 수 있습니다. 바닥글의 텍스트 색상은 바닥글에 사용 중인 위젯에서 가져옵니다.

8. 집단

일부 테마에는 특정 테마 요소/짧은 코드에 대한 일반 옵션이 있습니다. 여기에서 이러한 요소의 기본 색상을 설정할 수 있습니다.

9. 측면 영역 옵션

에서 사용할 수 있는 일부 옵션 측면 영역 탭 포함 콘텐츠 오버레이 배경색 그리고 콘텐츠 오버레이 배경 투명도. 측면 영역이 활성화되면 이 두 옵션은 배경에서 페이지의 색상을 어둡게 하거나 변경하는 데 사용됩니다.. 이 두 가지 옵션 외에도 여기에서 측면 영역을 열고 닫는 아이콘의 색상 옵션을 찾을 수 있습니다.

10. 찾다 옵션

이러한 옵션은 일반적으로 다음 용도로 사용됩니다. 열기/닫기 검색 아이콘의 색상 설정그러나 테마에 따라 일부 다른 옵션도 나타날 수 있습니다.

11. 문의 양식 7

여기에서 Contact Form 7 플러그인과 관련된 모든 색상을 사용자 정의할 수 있습니다(정보를 수집하고 방문자에게 이메일 목록에 추가하도록 요청할 수 있는 훌륭한 도구 등). 여러 스타일을 사용할 수 있으며 각 스타일에 대해 텍스트, 배경, 테두리 및 버튼 색상을 선택할 수 있습니다.

페이지/게시물 설정

앞서 언급했듯이 특정 페이지나 게시물의 색상 옵션을 변경하려면 페이지나 게시물 자체에서 변경할 수 있습니다.

각 페이지/게시물의 편집기 영역 아래에는 해당 페이지 또는 게시물의 특정 부분에 대한 옵션. 물론 일부 일반 옵션(예: 측면 영역 옵션)은 페이지에서 개별적으로 설정할 수 없습니다.

백엔드에 이러한 옵션 중 일부가 표시되지 않는 경우 해당 옵션을 켜야 함을 의미합니다. 당신은 쉽게 이것을 할 수 있습니다 액세스 화면 옵션, 페이지의 오른쪽 상단에 있습니다. 여기에서 선택되지 않은 모든 필드를 확인할 수 있으며 해당 옵션은 페이지/게시물 설정에 나타납니다.

결론

이것으로 WordPress 웹 사이트 색상을 조정하는 방법에 대한 가이드를 마칩니다. 보시다시피 WordPress에서 색상을 사용자 정의할 수 있는 다양한 방법이 있습니다. 전반적인, 가능성은 테마 옵션의 범위에 따라 달라집니다.. 이런 식으로 제한을 받고 싶지 않다면, 당신은 항상 색상 사용자 정의 플러그인을 설치할 수 있습니다 원하는 방식으로 웹사이트의 색상을 개인화할 수 있는 더 많은 자유를 줄 것입니다. 그러나 Qode Interactive의 WordPress 테마 중 하나를 사용 중이거나 사용할 계획이라면 색상 사용자 정의가 진행되는 한 거의 다룹니다. 여기에는 WordPress 텍스트 색상, 머리글 및 바닥글 색상, 기타 웹사이트 섹션 및 요소를 변경하는 기능도 포함됩니다.

마지막으로, 추가 영감이 필요할 경우를 대비하여 항상 좋은 시작을 위해 사용 가능한 다양한 색상 조합 중 일부를 확인할 수 있습니다.