Divi 웹사이트에 색상표를 적용하는 방법

인터넷에는 평범한 웹 사이트보다 더 나쁜 것이 거의 없습니다. 물론, 일부 웹사이트는 의도적으로 잔인하거나 미니멀한 모습을 취하지만(Craigslist를 보며), 그것들조차도 순박 하지 않습니다. 고체 색상 팔레트를 갖는 것은 당신의 웹 사이트가 메신저를 눌러보다 그 드를 눌러 더, 베이지 색 대중에서 그 영감을받지 않은 단색 eshops을 돋보이게 만들 수있는 확실한 방법이다. 고맙게도 Divi는 Magic Color 시스템과 Global Colors 기능의 조합을 제공합니다. Divi 웹사이트에 색상 팔레트를 쉽게 적용할 수 있습니다. 결과는 방문자에게 깊은 인상을 줄 것입니다.

색상 팔레트에 대한 일반 팁

Divi 웹사이트에 색상 팔레트를 추가하는 것이 얼마나 쉬운지에 관계없이 산업 및 브랜드에 적합한 종류의 팔레트를 사용하는 것이 중요합니다. 브랜드 색상이 이미 있는 경우 해당 색상을 선택하는 것이 좋습니다. 색상 이론에 대해 자세히 알아보는 것 외에도(매우 흥미롭습니다), 색상으로 시작할 위치를 파악하는 데 도움이 되는 몇 가지 팁이 있습니다. 새로운 색상 팔레트.

1. 어두운 색 또는 밝은 색의 웹 사이트 결정

사용하게 될 색상 팔레트에는 의심할 여지 없이 밝은 색상과 어두운 색상이 있습니다. 작성된 내용이 손실되지 않도록 대비는 색상 팔레트에서 필수입니다.

이제 웹사이트에 색상 팔레트를 적용하려고 할 때 스스로에게 물어야 하는 첫 번째 질문으로 바로 이어집니다. 어두운 색 또는 밝은 색의 웹 사이트를 만들고 싶습니까? 하나를 선택한다고 해서 결합할 수 없다는 의미는 아니지만 선택을 하면 색상 팔레트를 더 쉽게 선택하는 데 도움이 됩니다.

2. 색상 선택

이론적으로 색상 팔레트에 원하는 색상 수를 결정할 수 있습니다. 색상 팔레트를 적용하거나 결정하는 표준 방법은 없습니다. 그러나 Divi로 색상의 균형을 잘 잡기 위해서는 5가지 색상을 사용하는 것이 좋습니다.

5가지 색상의 색상 팔레트를 웹사이트에 적용하는 데 도움이 되도록 다양한 색상 팔레트를 표시할 때 동일한 레이아웃에 일관되게 적용할 한 가지 방법을 선택했습니다. 그러나 그 내용에 대해 알아보기 전에 우리의 방법을 따르고 싶다면 색상 팔레트에 있어야 하는 다양한 유형의 색상을 살펴보겠습니다.

배경색

선택한 배경색이 서로 일치하는지 확인하십시오. 이러한 배경색을 서로 가깝게 사용하여 아름다운 결과를 얻을 수 있습니다. 그들은 일정한 조화를 가져야합니다.

글꼴 색상

다음으로 선택해야 할 것은 글꼴 색상입니다. 논리적으로 글꼴 색상은 선택한 배경 색상에 따라 다릅니다. 밝은 색상의 배경색을 선택한 경우 글꼴 색상이 어두운 색상인지 확인하고 그 반대의 경우도 마찬가지입니다.

하이퍼링크 및 CTA 색상

선택한 하이퍼링크 색상은 웹사이트에 생기를 불어넣는 색상 중 하나입니다. 웹사이트에 포함하는 클릭 유도문안에서 이 색상을 사용하므로 팔레트의 다른 색상과 눈에 띄는지 확인하십시오.

최종 터치를 위한 색상

마지막으로 웹사이트에 색상을 제공하는 다른 기본 색상을 선택할 수 있습니다. 이 색상은 하이퍼링크 색상만큼 중요하지 않지만 웹사이트에서 색상 균형을 완성하는 데 도움이 됩니다.

3. 충분한 대비가 있는지 확인

앞에서 언급했듯이 색상 팔레트의 일부 색상 간에 대비를 제공하는 것이 중요합니다. 웹 사이트에 색상 팔레트를 사용하는 경우 이 대비는 주로 공유하는 서면 콘텐츠를 읽을 수 있도록 만드는 데 도움이 됩니다. 콘텐츠가 읽기 쉽지 않다면 결국 그 목적은 무엇입니까?

4. 올바른 색상 사용 균형 찾기

색상 팔레트에서 특정 색상을 얼마나 자주 사용할 것인지 결정하는 다양한 방법이 있습니다. 웹사이트에서 사용하는 색상에 압도되지 않도록 하려면 색상 균형을 잘 만드는 것이 필요합니다.

대부분의 경우 색상 팔레트에서 보다 중성적인 색상을 사용하고 다른 색상을 사용하여 제공하는 콘텐츠를 강조하는지 확인하십시오.

Divi 웹사이트에 컬러 팔레트를 추가하는 방법

이 모든 것을 염두에 두고 Divi를 살펴보고 사이트의 새로운 색상 팔레트를 적용할 시간입니다!

기본 Divi 팔레트

우선, WordPress 대시보드로 이동하여 Divi – 테마 옵션 으로 이동합니다. 일반 탭에서 색상 선택기 기본 팔레트 라는 항목을 볼 수 있습니다. 이 기능을 사용하면 Divi 빌더에서 색상 옵션을 열 때마다 빠르게 액세스할 8가지 색상을 선택할 수 있습니다. 기본적으로 이들은 많은 사람들이 사용하는 생생한 색상이지만 단일 웹사이트에서 사용해야 하는 완전한 팔레트는 아닙니다.

이것은 귀하의 사이트 자체에 색상을 적용하지 않는다는 점에 유의하십시오. 빌더에서 빠른 옵션으로만 표시됩니다.

Divi 빌더를 입력하십시오

Divi 설정에서 팔레트를 설정했는지 여부에 관계없이 사이트의 요소에 다양한 색상을 적용할 수 있습니다. 그렇게 하려면 Divi Builder로 이동하여 조정하려는 모듈의 설정을 새 팔레트에 입력하십시오.

요소에 대해 현재 선택한 색상 아래에 줄임표 아이콘(점 3개)이 표시 됩니다. 그것을 클릭하면 Divi의 Magic Color 도구가 나타납니다. 빌더는 최근에 사용한 색상과 페이지 자체의 색상을 고려하여 함께 잘 작동해야 하는 보완 색상으로 구성된 일련의 여러 팔레트를 제공합니다.

색상을 전역으로 설정

사용할 색상을 결정했으면 이제 전역 색상으로 설정할 차례입니다. 모듈 또는 요소에 관계없이 전체 페이지에서 변경되도록 전역 색상을 설정할 수 있습니다 . 즉, 5가지 색상을 교체하려는 경우 해당 색상의 인스턴스에 대해 개별적으로 100번 이상 교체할 필요가 없습니다. 5번 하시면 됩니다.

시작하려면 색상 선택기가 있는 모듈로 이동하십시오. 그 아래에 Global 이라는 링크가 표시됩니다. 클릭하면 전체 팔레트가 사라집니다. 여기에서 더하기 + 아이콘을 클릭하여 전역적으로 사용할 수 있는 색상을 설정합니다.

새 선택기가 나타나면 녹색 확인 표시 를 클릭하여 현재 색상을 전역 옵션으로 추가합니다.

흰색 원이 어디에 있는지는 중요하지 않습니다. 16진수 값은 전역 색상에 추가되는 값입니다. 이제 더하기 아이콘 옆에 기본 색상이 추가된 것을 볼 수 있습니다. 그리고 색상에 기존의 원이 아닌 물방울 모양 아이콘으로 인해 사이트에 색상이 적용된 것을 확인할 수 있습니다.

또한 선택한 색상을 마우스 오른쪽 버튼으로 클릭하고 "전역으로 변환"을 선택하여 목록에 추가할 수 있습니다.

선택한 팔레트의 각 색상에 대해 이 과정을 반복하면 결국 전체 팔레트가 글로벌 링크 아래에 저장됩니다. 이것은 페이지의 모든 요소에 새 팔레트를 적용하는 과정에서 매우 중요합니다.

전역 색상 적용

다음으로, 페이지에서 동일한 색상의 모든 인스턴스를 바꾸려는 경우 전역적으로 조정할 수 있습니다. 변경하려는 색상이 있는 요소로 이동하여 마우스 오른쪽 버튼을 클릭합니다. 그런 다음 상황에 맞는 메뉴에서 찾기 및 바꾸기 를 선택합니다. 여기에서 이 색상을 전역으로 변환하지 마십시오 . 그것은 다음 단계의 일부입니다.

다음 화면은 해당 색상을 글로벌 색상으로 대체하도록 선택하는 화면입니다. 바꿀 내용에서 전역 을 클릭한 다음 페이지 전체에 확장할 전역 색상을 선택했는지 확인합니다. "[현재 요소 유형 삽입]에 국한되지 않고 모든 옵션 유형 내에서 발견된 모든 값 바꾸기"라는 상자를 선택해야 합니다. 이렇게 하면 무슨 일이 있어도 해당 색상이 대체됩니다.

이제 특정 전역 색상을 편집할 수 있으며 편집할 때 각 인스턴스가 변경됩니다. 참고로 팔레트에서 새 색상을 선택하지 않았습니다. 그러면 현재 색상만 바뀝니다. 단일 색상의 모든 인스턴스를 전역으로 표시했기 때문에 색상을 편집 하여 모든 위치에서 변경합니다.

색상 선택기를 사용하여 집합으로 편집할 수 있습니다. 새 물방울을 선택하려면 물방울을 클릭하기만 하면 됩니다.

그런 다음 새 팔레트의 각 색상에 대해 이 과정을 반복합니다. 팔레트의 각 색상에 대해 한 번만 변경하면 됩니다. 특정 색상의 각 특정 요소를 교환하는 것이 아닙니다.

마무리

Divi 웹사이트에 글로벌 색상 팔레트를 선택하고 적용하는 것이 그 어느 때보다 쉬워졌습니다. Magic Color 기능을 사용하여 팔레트를 선택하고 사이트의 전체 색상으로 설정할 수 있습니다. 완료되면 교체할 색상을 선택하고 Divi의 내장 찾기 및 바꾸기 기능을 사용하여 페이지 전체에서 해당 색상을 교체합니다. 이 워크플로를 사용하면 다양한 웹사이트를 재설계하고 일부 무료 레이아웃 팩을 변경할 때 많은 시간을 절약할 수 있습니다.

즐기다!

기사 특집 이미지 제공: ART.ICON / Shutterstock.com