WordPress 테마 색상을 사용자 정의하는 방법

WordPress 테마 색상을 사용자 지정하는 방법을 배우고 싶습니까? 마음에 드는 테마를 찾았지만 색상 팔레트가 브랜드에 적합하지 않을 수 있습니다. 필요에 맞게 테마 색상을 조정할 수 있는 몇 가지 방법이 있습니다.

이 게시물에서는 코드를 사용하거나 사용하지 않고 WordPress 테마 색상을 사용자 지정하는 방법을 살펴보겠습니다.

지금 WordPress 양식 만들기

WordPress에서 연락처 양식의 색상을 어떻게 변경합니까?

테마 색상을 사용자 지정한 후에는 사이트의 양식이 스타일 및 색상과 일치하기를 원할 것입니다. 가장 쉬운 방법은 WPForms를 사용하는 것입니다.

코드를 사용하거나 사용하지 않고 테마 색상을 사용자 지정하는 방법을 검토하는 것 외에도 WPForms를 사용하여 양식 스타일을 지정하는 방법도 자세히 살펴보겠습니다. 즉, 새로운 양식 스타일 기능을 사용하면 양식을 사이트에 매우 간단하게 일치시킬 수 있습니다. 방법을 알려드리겠습니다.

WordPress 테마 색상을 사용자 정의하는 방법

바로 시작하여 사용자 지정을 시작하겠습니다!

코드로 WordPress 테마 색상 사용자 지정

CSS에 정통하고 웹사이트 파일 및 스타일시트 편집에 익숙하다면 코드를 사용하여 WordPress 테마를 사용자 지정하는 옵션이 있습니다.

그러나 기존 파일을 편집하지 않는 것이 좋습니다. 대신 다른 플러그인을 사용하여 하위 테마를 만들고 사용자 지정하는 것이 좋습니다. 하위 테마는 기본적으로 모든 속성이 동일한 테마의 복사본입니다.

자식 테마를 편집하는 것은 복사본을 편집하는 것입니다. 오류가 있는 경우 대신 상위 테마로 되돌릴 수 있습니다. 또한 상위 테마에 대한 업데이트가 있는 경우 문제를 방지하는 데 도움이 됩니다.

1단계: 하위 테마 플러그인 설치

다음은 하위 테마를 만드는 데 사용할 수 있는 몇 가지 플러그인 제안입니다.

• 하위 테마 구성자
• 하위 테마 마법사
• 하위 테마 생성
• WP 하위 테마 생성기

이 예에서는 Child Theme Configurator를 사용합니다.

2단계: 자녀 테마 구성

선택한 하위 테마 플러그인을 설치하고 활성화한 후 구성을 위해 액세스해야 합니다.

워드프레스에서 자식 테마 플러그인이 나타나는 위치는 사용하는 플러그인에 따라 다를 수 있습니다. 왼쪽 사이드바의 도구 메뉴를 클릭하여 Child Theme Configurator에 액세스했습니다.

플러그인을 찾으면 하위 테마를 만들기 위한 설정 또는 옵션이 표시됩니다.

우리는 Child Theme Configurator가 도움이 되고 혼란스러운 작업을 단순화하는 프로세스를 안내한다는 것을 발견했습니다.

분석 버튼을 클릭하면 더 많은 단계가 나타납니다. 이러한 각 단계를 진행하면 마지막에 자식 테마를 만들 준비가 됩니다.

3단계: 자녀 테마 사용자 지정

새 자식 테마를 만든 후 왼쪽 사이드바 메뉴에서 모양 » 테마 파일 편집기를 클릭합니다.

테마 파일 편집기에 들어가면 편집할 테마를 선택할 수 있는 드롭다운 메뉴가 오른쪽에 표시됩니다. 자녀 테마가 해당 목록에 있어야 합니다.

하위 테마를 선택한 후 파일을 변경할 수 있는 두 가지 방법이 있습니다.

첫 번째 방법은 위에서 본 것처럼 파일 편집기에서 직접 CSS를 편집하는 것입니다. 두 번째 방법은 기본 제공 CSS 편집기를 사용하여 변경 사항을 미리 보는 것입니다.

내장된 CSS 편집기에 액세스하려면 왼쪽 사이드바 메뉴에서 모양 » 사용자 지정 으로 이동합니다.

해당 페이지에서 변경 옵션과 함께 WordPress 웹사이트의 실시간 미리보기를 볼 수 있습니다.

옵션 메뉴에서 볼 수 있듯이 코드 없이 수행할 수 있는 몇 가지 스타일 변경이 있습니다. 이는 테마와 이미 구성된 항목에 따라 달라질 수 있습니다.

이 옵션 내에서 테마 색상을 업데이트하는 설정을 찾을 수 있습니다.

예를 들어 사이트에서 사용할 버튼 스타일을 선택할 수 있습니다.

스타일을 선택한 후 버튼 텍스트, 배경 및 테두리에 대한 사용자 정의 색상 옵션을 선택할 수 있습니다.

제목 및 본문 글꼴 패밀리를 변경할 수도 있습니다.

그러나 하단에 추가 CSS 에 대한 메뉴 옵션이 있습니다. 사이트 테마 색상을 변경하려는 경우 CSS 코드가 여전히 필요하다는 것을 알 수 있습니다. 그렇다면 해당 드롭다운 아래에 필요한 CSS 코드를 입력하고 변경 사항을 실시간으로 미리 볼 수 있습니다.

코드 없이 WordPress 테마 색상 사용자 지정

테마에서 CSS를 변경하는 동안 무언가 깨지는 것이 걱정된다면 WordPress 테마 색상을 사용자 지정하는 훨씬 더 쉬운 방법이 있습니다. Thrive Themes와 같은 코드 없는 플러그인을 사용할 수 있습니다.

Thrive Theme Builder는 코드를 사용하거나 지식 없이도 자신만의 테마를 구축할 수 있는 테마 사용자 지정 프로그램입니다. 프런트 엔드 사용자 지정을 위한 끌어서 놓기 인터페이스가 있으며 모든 디자인 측면을 제어할 수 있습니다.

1단계: 플러그인 설치 및 사이트 마법사 완료

계정을 등록하고 플러그인을 설치하면 사이트 마법사가 시작됩니다.

Thrive Themes 대시보드에서 언제든지 사이트 마법사에 다시 액세스할 수도 있습니다.

사이트 마법사를 시작하면 로고를 업로드하라는 메시지가 표시되고 밝은 배경과 어두운 배경에서 어떻게 보이는지 보여줍니다. 밝은 배경을 사용하더라도 사람들이 기기에서 어두운 모드를 사용하기 때문에 어두운 배경이 중요합니다.

그런 다음 브랜드 색상을 선택할 수 있습니다. 색상 상자를 클릭하면 색상 선택기로 색상을 선택하거나 16진수 색상 코드를 사용하여 색상을 선택할 수 있습니다.

마법사의 각 단계를 진행하면서 고유한 사용자 지정 테마를 만듭니다.

나머지 사이트 마법사를 완료하면 코드 한 줄을 작성하지 않고도 웹 사이트의 모양과 느낌을 사용자 정의할 수 있습니다. Thrive Theme Builder를 사용하면 고유한 사이트 테마를 매우 쉽게 만들 수 있습니다.

2단계: 대시보드에서 추가 사용자 정의 수행

앞에서 언급했듯이 변경을 원할 경우 언제든지 마법사로 돌아갈 수 있습니다. 대시보드를 통해 이러한 기능에 액세스할 수도 있습니다. 마법사를 완료한 후 다른 옵션을 클릭하여 추가 사용자 정의를 수행하십시오.

사이트 색상 및 로고를 빠르게 변경하거나 사이트의 파비콘을 업로드하려는 경우 마법사 또는 대시보드의 브랜딩 섹션에서 액세스할 수 있습니다. 마찬가지로 여기서도 타이포그래피를 업데이트할 수 있습니다.

페이지의 모든 측면을 사용자 지정하면 테마를 저장하고 즉시 사용할 수 있습니다.

WordPress에서 연락처 양식 색상 변경

앞에서 언급했듯이 테마 색상을 업데이트한 후에는 다른 모든 항목이 일치하는지 확인하고 싶을 것입니다.

예를 들어 양식을 작성하십시오. 모서리가 둥글고 부드러운 색상이 있는 페이지가 있는 경우 직사각형 버튼과 뚜렷한 대비가 있는 상자 모양의 양식은 적어도 약간 이상하게 보일 것입니다.

WPForms를 입력하십시오. 양식 스타일 지정 옵션을 사용하면 테마에 맞게 양식을 쉽게 사용자 지정할 수 있습니다.

1단계: WPForms 설치 및 활성화

편파적일 수도 있지만 WPForms가 최고의 양식 작성 도구라고 생각합니다. 사용자 친화적인 끌어서 놓기 인터페이스를 사용하면 아름답고 전문적인 양식을 몇 분 안에 만들고 게시할 수 있습니다. 또한 양식 스타일 지정 옵션을 사용하면 양식 스타일을 WordPress 사이트 테마와 쉽게 일치시킬 수 있습니다.

WordPress 테마 색상과 일치하도록 양식 스타일 지정을 시작하려면 WPForms를 설치하고 활성화하십시오. 지침이 필요한 경우 WordPress 플러그인 설치 방법에 대한 초보자용 가이드를 확인하세요.

2단계: WPForms에서 양식 만들기

WPForms를 설치하고 활성화했으면 이제 양식을 만들 차례입니다!

새로 추가 버튼을 사용하여 시작하십시오.

필요에 맞는 완벽한 양식을 만들 수 있도록 양식 작성기가 열립니다. 처음부터 새로 만들거나 수백 개의 사용자 정의 가능한 템플릿 중에서 선택하십시오.

양식이 완성되면 임베드 버튼을 사용하여 사이트의 게시물이나 페이지에 임베드할 수 있습니다. 기존 페이지에 양식을 포함하거나 새 페이지를 만들도록 선택할 수 있습니다.

3단계: WordPress 블록 편집기에서 양식 스타일 편집

그런 다음 페이지 빌더에서 페이지 초안을 엽니다. 이 단계에서는 WordPress 블록 편집기를 사용하여 사용자 지정 옵션에 액세스해야 합니다.

포함된 양식을 클릭합니다. 양식 스타일 지정 옵션은 페이지 편집기 오른쪽의 사이드바에서 열립니다. 필드, 레이블 및 단추 스타일을 변경할 수 있음을 알 수 있습니다.

필드 스타일을 편집할 때 텍스트 영역의 크기와 테두리 반경을 조정할 수 있습니다. 테두리 반경이 높을수록 텍스트 영역이 더 둥글게 됩니다. 배경, 테두리 및 텍스트의 색상을 선택할 수도 있습니다.

다음으로 레이블 스타일을 변경할 수 있습니다. 원하는 레이블 색상을 결정한 다음 하위 레이블 및 힌트와 오류 메시지의 색상을 선택하십시오.

마지막으로 버튼 스타일을 조정할 수 있습니다.

더 쉽게 하려면 양식 스타일을 선택한 후 고급 옵션을 클릭하십시오. CSS 코드가 포함된 필드가 표시됩니다.

이것은 귀하의 양식에 대한 사용자 지정 코드입니다. WPForms는 자동으로 생성합니다. 스타일이 모두 일치하도록 모든 양식의 고급 필드에 복사하여 붙여넣을 수 있습니다.

다시 시작하려면 스타일 설정 재설정을 클릭하여 모든 서식을 지우십시오.

그런 다음 완전히 스타일이 지정된 양식을 게시할 준비가 된 것입니다.

이제 양식이 WordPress 테마 색상과 일치하므로 코드를 한 줄도 작성할 필요가 없습니다.

다음으로 완벽한 대화형 양식 만들기

양식 게임을 향상시킬 준비가 되셨습니까? 이제 WordPress 테마 색상을 사용자 지정하고 양식에 맞게 스타일을 지정하는 방법을 알았으므로 다음 단계로 넘어갈 차례입니다. 사용자의 참여를 유지하고 전환율을 높일 수 있는 완벽한 대화형 양식을 만들기 위한 몇 가지 팁이 있습니다.

거부할 수 없는 고객 설문조사를 보내고 싶으신가요? 영감을 줄 수 있는 고객 설문 조사 예를 확인하십시오!

지금 WordPress 양식 만들기

양식을 만들 준비가 되셨습니까? 가장 쉬운 WordPress 양식 빌더 플러그인으로 지금 시작하세요. WPForms Pro에는 많은 무료 템플릿이 포함되어 있으며 14일 환불 보장을 제공합니다.

이 기사가 도움이 되었다면 Facebook 및 Twitter에서 저희를 팔로우하여 더 많은 무료 WordPress 자습서 및 가이드를 확인하십시오.