웹 디자인의 상대 색상 이해

웹 디자인에서 가장 간단한 결정조차도 배가 될 수 있습니다. 단일 디자인 선택으로 시작하는 것은 상호 작용, 배경, 국경 등을위한 수십 개의 시각적 변화로 빠르게 확장됩니다. 일관된 시스템 없이는 빌드가 불일치 한 값과 수동 조정으로 혼란 스러울 수 있습니다.

CSS의 상대 색상 구문은 더 똑똑하고 확장 가능한 접근 방식을 제공합니다. 단일 소스를 기반으로 시각적 변형을 정의하여 디자인을 응집력 있고 관리하기 쉽습니다. 일반적으로 사용자 정의 코드를 작성해야합니다. 그러나 Divi 5를 사용하면 처음부터 이러한 현대 기술을 시각적으로 사용할 수 있습니다. 자세히 살펴 보겠습니다.

일반적인 색상 관리 문제

당신이 선택한 완벽한 브랜드 색상은 사이트 전체에 흩어져있는 수십 가지 변형에 빠르게 곱할 수 있습니다. 이 문제에 기여하는 몇 가지 문제는 다음과 같습니다.

한 색상의 변형 관리

하나의베이스 파란색으로 시작하여 수십 개의 변형이 빠르게 필요합니다. 페이지 빌더의 컬러 피커가 엉망이됩니다. 밝은 파란색, 밝은 파란색, 진한 파란색, 어두운 파란색, 희미한 파란색 - 각각 별도의 색상으로 저장됩니다.

브랜드 파란색은 사이트 전체에 20 가지 다른 색조에 걸쳐 있습니다. 일부 섹션에서는 원래 파란색을 사용하고, 다른 섹션은 3 주 전에 만든 가벼운 버전을 사용하며 버튼은 더 어두운 그늘을 사용하여 더 나은 대비를 사용합니다.

이 색상 중 어느 것도 다른 색상과 연결되지 않습니다. 고객이 파란색 대신 자주색을 원한다면 모든 색상을 손으로 업데이트합니다. 모듈을 클릭하는 데 몇 시간을 소비합니다. 당신은 각 그늘을 사냥합니다. 당신은 당신이 놓치지 않기를 바랍니다.

좌회전의 많은 유사한 파란색 음영의 컬렉션은 오른쪽에 흩어져 있고 관련이없는 퍼플로 변합니다. 하나씩 업데이트하는 것은 지루하고 일관된 일관성이 필요하기 때문입니다. 더욱이, 이러한 색상 변화는 일반적으로 안구가 있으며 아무런 연결이 없습니다.

불투명도 문제

많은 페이지 빌더에는 투명성 컨트롤이 포함되어 있으며 색상 일관성에 대한 악몽이 될 수 있습니다. 60% 불투명도로 완벽한 파란색 오버레이를 만들 수 있지만 나중에는 다른 섹션에 대해서는 동일한 See-Strough Red가 필요합니다.

페이지 빌더는 정확한 믹스를 기억하지 않으므로 불투명 슬라이더를 시선을 끄고 이전에 만든 것과 일치 시키려고합니다.

시선은 정확한 컨트롤로도 정확한 결과를 제공하지 않기 때문에 1, 2 및 3의 시도는 그늘과 투명성이 다양합니다.

일부 페이지 빌더를 사용하면 투명한 색상을 저장할 수 있습니다. 다른 사람들은 그렇지 않습니다. 당신은 비슷한 것처럼 보이는 파란색의 무리로 끝납니다.

그들은 모두 약간 다릅니다. 당신의 디자인은 일관성을 잃습니다. 다양한 모듈에서 동일한 투명한 색상을 확실하게 재현 할 수 없습니다. 투명성이 필요할 때마다 처음부터 시작합니다. 당신은 불투명도 값을 추측합니다. 기존 디자인과 일치하기를 바랍니다.

수동으로 변수 생성

대부분의 페이지 빌더는 어떤 형태의 색상 절약을 제공하지만 빠르게 관리 할 수 없습니다. "Yellow 1", "Yellow 2"및 "Yellow Light"와 같은 일반 이름으로 색상을 절약합니다.

6 개월 후, 당신은 어떤 노란색이 무엇을하는지 전혀 모른다. 저장된 색상 팔레트는 의미없는 이름으로 비슷한 색상의 엉망이됩니다. 컬러 라이브러리는 조직 시스템없이 자랍니다. 당신은 거의 동일하게 보이는 세 가지 오렌지를 가지고 있지만 다양한 목적을 제공합니다.

겹치는 음영과 일관성이없고 불분명 한 이름을 가진 많은 컬러 스와치의 그리드는 효과적으로 구성하거나 사용하기 어려운 혼란스럽고 혼란스러운 팔레트에 기여합니다.

팀원은 색상 변형을 추가하여 이름이 다른 중복 음영을 만듭니다. 당신의 브랜드 오렌지는 "오렌지", "브랜드 오렌지", "1 차 오렌지"및 "오렌지 메인"으로 존재합니다. 아무도 사용해야 할 사람을 아무도 모릅니다.

일부 개발자는 사용자 정의 CSS 변수를 작성하여이를 해결하려고합니다. 이것은 색상 관계를 더 잘 제어 할 수있게합니다.

그러나 이제 당신은 기술적 인 장애물을 만들었습니다. 비 기술 팀원은 더 이상 색상을 업데이트 할 수 없으며 고객은 간단한 색상을 스스로 변경할 수 없습니다. 모든 사소한 색상 조정에 대한 책임이 있습니다.

CSS의 상대적인 색상 (및 필요한 이유)

상대적인 색상은 색상 문제를 해결합니다. 당신은 하나의 브랜드 색상을 선택합니다. CSS는 필요한 모든 버전을 만듭니다. 배경을위한 가벼운 것. 국경을위한 어두운 것. 오버레이에 대한 명확한 것. 하나의 시작 색상에서 모두.

CSS는 동적 색상 도구로 기능합니다. 당신은“이 노란색 라이터를 만드십시오.”라고 말합니다. CSS는 작업을 수행합니다. 호버링 할 때 빨간색 버튼이 사라져야합니다. CSS는 투명성을 추가합니다. 당신의 파란 머리는 어두운 테두리가 필요합니다. CSS는 바로 그것을 만듭니다.

전통적인 워크 플로에는 더 많은 수동 노력이 필요했습니다. 디자이너는 Photoshop에서 색상 세트를 만들었습니다. 코더는 Sass와 같은 도구를 사용했습니다. 웹 사이트 빌더는 일치하는 색상을 추측해야했습니다. CSS는 이제 이것을 자동으로 처리합니다.

CSS가 색상에서 색상을 만드는 방법

"From"이라는 단어는 CSS에게 기존 색상을 시작점으로 사용하도록 지시합니다. CSS에 색상을 제공하고 사용할 수있는 조각으로 그 색을 깰 수 있습니다.

시작 색상이베이스가됩니다. CSS는 부분으로 나눕니다. 빨간 금액, 녹색 양, 청색 양. 또는 해당 컨트롤을 선호하는 경우 색조, 밝기 및 채도.

색상 형식으로 시작할 수 있습니다. #e91e63과 같은 16 진 색을 사용하십시오. 쉬운 밝기 변화를 위해 CSS에 HSL로 작업하도록 지시하십시오. 코드에 필요한 경우 RGB로 출력하십시오. CSS는 모든 것을 자동으로 변환합니다.

코드는 간단한 패턴을 따릅니다. 먼저, 당신은 색상을 어디서 얻을 수 있는지 말하고, 그것에 대해 무엇을 바꿀지 말합니다. 모든 것을 동일하게 유지하지만 투명성을 추가하거나 색조를 변경하지만 밝기를 유지할 수 있습니다. 둘 다 같은 방식으로 작동합니다.

부분으로 색상을 깨뜨립니다

다른 색상 형식은 다른 도구를 제공합니다. RGB를 사용하면 빨간색, 녹색 및 파란색을 별도로 변경할 수 있습니다. HSL은 당신에게 색조, 채도 및 가벼움 컨트롤을 제공합니다.

작동 방식은 다음과 같습니다. RGB ( #FF4081 RGB)에서 RGB를 작성합니다. CSS는 핑크색 16 진 코드를 가져 와서 빨간색, 녹색 및 파란색 숫자로 나눕니다. 그런 다음 원하는 숫자를 사용할 수 있습니다. 패턴은 동일하게 유지됩니다 : 색상 기능 (컬러 채널 1 채널 2 채널 3).

따라서 색상을 처음부터 쓰는 대신 기존 색상을 기반으로하고 변경하려는 부품 만 변경합니다.

각 부분이 선택한 내용에 맞게 변환됩니다. 핑크색 16 진수를 변환하면 r = 255, g = 64, b = 129가 제공됩니다. 그것들을 사용하거나 calc ()로 변경하십시오.

채널도 믹싱하고 일치시킬 수 있습니다. 모든 레드 픽셀이 동일하기를 원하십니까? RGB (var (–Color) GGG)에서 사용하십시오. 이것은 녹색 값을 취하고 빨간색, 녹색 및 파란색으로 사용하여 원래 색상에서 회색 톤을 만듭니다.

브라우저 지원 및 기타 고려 사항

큰 사이트는 모든 사람을 수용해야하기 때문에 방문자를 무시할 수 없습니다. Safari의 이전 버전은 다르게 작동합니다. 크롬 버전은 자신의 방식을 처리합니다. Firefox, 자체입니다. 하나의 색상 효과에 대해 세 가지 다른 코드 버전을 작성하게됩니다.

이 모든 추가 작업은 더 나은 것들에서 시간이 걸립니다. 사이트의 기능을 향상시키고 사람들이 원하는 기능을 추가 할 수 있습니다.

많은 개발자들이 상대 색상을 선택적으로 사용합니다. 내부 도구 및 개인 프로젝트는 브라우저를 제어하기 때문에 잘 작동합니다. 마케팅 사이트와 고객 작업에는보다 신중한 계획이 필요합니다.

이 기술은 지원되는 곳에서 훌륭하게 작동합니다. 문제는 추가 복잡성이 프로젝트 타임 라인과 팀 또는 고객의 기술 능력에 적합한 지 여부입니다. 그러나 대부분의 경우 대부분의 팀원에게는 과잉과 오버 헤드 일 것입니다.

이것이 바로 Divi 팀이 들어온 이유입니다. 우리는 웹 디자이너가 강력한 컬러 도구를 놓치면서 브라우저 호환성으로 어려움을 겪고있는 것을 보았습니다. Divi 5의 솔루션은 상대 색상의 가장 좋은 부분을 취하고 어디에서나 작동하며 코딩이 필요하지 않은 시스템에 랩핑합니다.

Divi 5가 상대적인 색상을 쉽게 만드는 방법

이제, 당신은 상대적인 색상의 힘을 알고 있습니다. 그러나 구현하기가 쉽지 않다는 것을 깨달았을 수도 있습니다. Divi 5는 다른 접근 방식을 취했으며 시각적 인터페이스에 바로 색상 유연성을 구축했습니다. 그러나 Divi가 정확히 무엇인지 알아 봅시다.

Divi는 무엇입니까?

Divi는 가장 인기있는 WordPress 페이지 빌더입니다. 시각적 디자인의 우선 순위를 정하고 디자인을 완전히 제어 할 수 있습니다.

변경 사항이 실시간으로 발생하고 글꼴 크기를 조정하거나 라인 간격을 조정하고 즉시 페이지의 결과를 볼 수 있습니다. 원하는 곳이 어디든 갈 수있는 200 개 이상의 모듈에 액세스 할 수 있습니다. 텍스트 블록, 제목 및 콘텐츠 작품은 팀으로서 작동합니다. 아이디어를 어색한 모양으로 짜는 견고한 템플릿이 없습니다.

Divi가 다르게 만드는 것은 다음과 같습니다. 실제 비즈니스를 위해 2000 개가 넘는 기성품 레이아웃. 이들은 기본 스타터 템플릿이 아닙니다. 각 설계는 특정 산업을 대상으로합니다. 잠재 고객의 언어를 말하고 비즈니스 요구에 맞는 레이아웃을 찾을 수 있습니다.

Divi 빠른 사이트로 빈 페이지 블루스를 건너 뜁니다

Divi 빠른 사이트는 프로젝트가 시작되기 전에 죽이는 빈 캔버스를 위협하는 것을 수정합니다. 디자인 팀이 다른 곳에서는 찾을 수없는 독창적 인 이미지와 아트 워크를 사용하여 디자인 팀을 구축하는 견고한 디자인으로 전문 스타터 웹 사이트를 얻을 수 있습니다.

보다 개인화 된 것을 원한다면 Divi Quick Site는 Divi AI와 함께 작동하여 비즈니스 세부 정보를 기반으로 사용자 정의 레이아웃을 구축합니다. 컨설팅 회사 나 레스토랑을 설명하면 업계 별 콘텐츠와 관련된 관련 페이지를 생성합니다.

이들은 기본 와이어 프레임이 아닙니다. 실제 헤드 라인, 서면 컨텐츠 및 비즈니스 유형에 맞는 이미지를받습니다. 심지어 헤더와 바닥 글, 제품 페이지 및 블로그 게시물 템플릿을 디자인합니다.

처음부터 브랜드 글꼴과 색상을 설정하거나 AI가 귀하를 선택하게 할 수 있습니다. AI는 해당 지침 내에서 작동합니다. 그 후 모든 것이 완전히 편집 가능하므로 정확한 요구와 일치 할 때까지 타이포그래피를 조정할 수 있습니다.

AI와 함께 사이트의 디자인을 완전히 제어하십시오

테마 빌더는 전체 웹 사이트에서 디자인을 담당합니다. 브랜드 성격을 반영하는 맞춤형 헤더를 만듭니다. 독자가 긴 기사에 참여하게하는 블로그 레이아웃을 구축하십시오. 404 페이지는 일치하는 글꼴과 스타일링과 함께 브랜드에 머무를 수 있습니다.

Divi ai는 앞에서 언급했듯이 AI를 디자인 워크 플로우 안에 바로 배치합니다. 자신을 작성한 것처럼 들리는 헤드 라인과 브랜드 음성을 캡처하는 제품 설명을 만듭니다.

사진 편집은 빌더 내부에서 수행 할 수 있습니다. AI에 이미지에서 원하는 변경 사항을 알려 주면 편집을 처리합니다.

신선한 이미지가 필요하십니까? 그것은 그것들을 만듭니다.

비즈니스에 완벽하게 맞는 완전한 페이지 섹션.

필요할 때 코드 스 니펫과 함께.

Divi 5 : 다음 진화

Divi 5는 웹 디자인 프로세스의 성능을 향상시키는 명확한 사명으로 알파 테스트에 들어갑니다. 우리는 당신을 느리게하는 것과 당신을 도울 수있는 것에 대한 실제 피드백을 들었습니다.

현재의 디비에 대해 당신이 좋아하는 모든 것. 우리는 방금 더 잘 작동하게했습니다. 인터페이스가 더 깨끗해 보입니다. 페이지가 이전보다 빠르게로드됩니다. 컨트롤은 클릭하면 바로 응답합니다.

우리는 오늘날의 웹 표준을 사용하여 재단을 재건했습니다. 이것은 전반적으로 이상한 버그와 더 부드러운 성능을 의미합니다.

건축업자와 싸우는 데 시간이 줄어들고 설계에 더 많은 시간을 소비합니다. 일관성이 자동으로 발생하기 때문에 사이트가 더 전문적으로 보입니다. 기술적 인 문제 대신 요구에 집중할 수 있기 때문에 고객은 더 나은 웹 사이트를 얻습니다.

Alpha 버전은 새로운 웹 사이트에서 사용할 준비가되었지만 기존 Divi 4 웹 사이트를 Divi 5로 변환하는 것은 권장하지 않습니다.

Divi 5의 새로운 것

Divi 5는 웹 사이트 구축 방법에 큰 변화를 가져옵니다. Public Alpha 버전은 현재 새로운 프로젝트에 적합합니다. 우리의 개발 팀은 2 주마다 새로운 기능을 발송하며 Alpha가 시작된 이래 몇 가지 주요 업데이트가 이미 출시되었습니다.

몇 가지 주요 업데이트는 다음과 같습니다.

• 현대식 코드베이스는 실제로 필요한 모듈 만로드하여 속도를 높이고 Divi 4가 느려지는 코드 부풀림을 제거합니다.
• 완전한 Flexbox 레이아웃 시스템에는 이제 새로운 행 템플릿, 자동 수직 센터링, 컨텐츠 포장 및 시각 제어를 통한 간격 분포가 포함됩니다.
• 동적 컨텐츠가있는 모듈, 그룹 또는 섹션을 반복하고 복잡한 데이터 구조를위한 중첩 루프를 지원하는 새로운 루프 빌더 .
• HSL을 사용한 상대 색상은 색조, 채도 및 가벼움 값을 기반으로 동적 색상 제어를 제공합니다.
• HTML-5 기반 시스템은 단축 코드를 완전히 대체하므로 버그가 적고 WordPress 호환성이 향상됩니다.
• Visual Builder 인터페이스는 밝고 어두운 모드, 도킹 가능한 패널, 탭 창, 키보드 바로 가기 및 빵 부스러기로 향상된 레이어보기로 완전한 화장을했습니다 .
• 사용자 정의 가능한 반응 형 중단 점은 Divi 4의 세 가지 고정식 브레이크 포인트를 대체하여 캔버스 스케일링으로 더 많은 컨트롤을 제공하여 디자인이 다양한 화면 크기를 어떻게 보는지 정확히 알 수 있습니다.
• 모듈 그룹은 관련 요소를 묶는 다목적 컨테이너처럼 작동하므로 관계를 잃지 않고 단위로 스타일을 지정하거나 움직일 수 있습니다.
• 디자인 변수를 사용하면 전체 사이트에서 색상, 글꼴, 숫자, 이미지, 텍스트 및 URL을 전 세계적으로 설정할 수 있습니다.
• 옵션 그룹 사전 설정은 다양한 모듈 유형에서 작동하는 타이포그래피 또는 그림자와 같은 특정 설계 속성을 저장합니다.
• 고급 CSS 단위는 이제 Clamp (), calc (), min () 및 max () 기능을 지원합니다.
• 상호 작용 시스템은 외부 플러그인없이 팝업, 토글, 스크롤 효과 및 마우스 움직임 효과를 만듭니다.

무슨 일이 일어나고 있는지…

• WooCommerce 모듈은 전체 사전 설정 및 가변 호환성을 갖춘 Divi 5 아키텍처를 사용하여 처음부터 재건되었습니다.
• 요소 검사관은 고급 사용자에게 새로운 디버깅 및 개발 도구를 제공 할 것입니다.
• 마찬가지로, Group Carousel 모듈은 그룹으로 구성된 회전 목마를 만들고 Divi의 전체 요소 세트를 사용하여 원하는 모든 스타일의 회전 목마를 설계하여 각 슬라이드의 컨텐츠를 개발하는 데 도움이 될 수 있습니다.

Divi 5로 스케일링되는 건물 팔레트

수십 개의 브랜드 색상 변형이 필요할 때 색상 선택기가 엉망이됩니다. Divi 5는 모든 그늘을 하나의 기본 색상으로 연결하여이를 수정합니다. 아래 단계는 확장 가능하고 유지 관리 가능한 색상 시스템을 구축하는 방법을 보여줍니다.

1. 기본 컬러 기초 설정

시각적 빌더를 열고 왼쪽 사이드 바에서 변수 관리자 아이콘을 찾으십시오. 사이트의 Color Foundation을 보려면 클릭하십시오. Divi 5는 이미 기다리고있는 사전 설정된 색상 변수와 함께 제공됩니다 : 1 차, 2 차, 제목 및 바디 컬러.

이러한 사전 설정 변수를 삭제할 수는 없지만 값을 변경할 수 있습니다. 이 네 가지 색상이 대부분의 웹 사이트를 처리하기 때문에 완벽하게 작동합니다. 기본 색상 변수를 클릭하고 브랜드의 기본 색상을 입력하십시오. 이것은 사이트의 다른 모든 색상 변화의 기초가됩니다.

기본 색상 변수는 가장 포화 된 브랜드 색상 버전을 반영해야합니다. 가벼운 배경을 만들거나 투명성 효과를 추가하기 전에 순수하고 희석되지 않은 버전으로 생각하십시오. 이것은 나중에 변형을 구축 할 때 가장 범위를 제공합니다.

보조 색상은 기본 브랜드 색상에서 눈에 띄는 악센트, 버튼 또는 하이라이트에 적합합니다. 제목 색상을 배경에 대해 잘 읽는 것으로 설정하십시오. 신체 색상은 일반적으로 가독성을 위해 진한 회색 또는 검은 색을 유지합니다.

이 네 가지 사전 설정 변수는 Divi의 전체 시스템에 연결됩니다. 모듈을 빌드하면 이러한 색상이 빠른 옵션으로 나타납니다. 여기에서 기본을 파란색에서 녹색으로 변경하고 해당 기본 변수를 사용하는 모든 모듈을 사이트에서 즉시 업데이트하십시오.

초기에 과도한 사용자 정의 변수를 생성하지 마십시오. 대신이 네 가지 사전 설정부터 시작하십시오. 대부분의 웹 사이트에는 Divi 5의 상대 색상 컨트롤을 통해 생성 된 변형으로 이러한 기본 색상 만 필요할 수 있습니다. 그러나 물론 필요한 경우 원하는만큼 변수를 추가 할 수 있습니다.

2. HSL 컨트롤로 색조 생성

이제 다른 색상 변수를 추가하십시오. 이번에는 새로운 기본 색상을 설정하는 대신 기본 색상에서 그늘을 만들 것입니다. 색상 선택기에서 목록에서 기본 색상 변수를 선택하십시오.

이제 당신은 색조, 채도 및 가벼움의 세 가지 슬라이더를 볼 수 있습니다. 이들은 기본 색상의 변화를 제어합니다.

색조는 컬러 휠 주위에서 0 ~ 360도 이동합니다. 같은 색상의 색조를 만들 때 이것을 내버려 두십시오. 채도는 0%에서 100%로 이동하며 색상 모양의 생생한 방법을 제어합니다. 0%로 모든 색상이 회색이됩니다. 100%로, 당신은 완전한 강도를 얻습니다.

가벼움은 0%에서 100%로 실행됩니다. 이 슬라이더는 실제 색조를 만듭니다. 0에서, 당신은 당신의 색상의 순수한 형태를 얻습니다. 가벼운 음영에 대해 최대 50%까지 이동하십시오. 어두운 색조의 경우 -20%로 떨어 뜨립니다.

이 HSL 색상을 혼합하고 일치시켜 필요에 따라 새로운 색상과 변형을 구축 할 수 있습니다.

기본 색상의 두 가지 변형을 만들어 봅시다. 변수를 추가하고 새 그늘의 이름을 "1 차 빛"또는 "1 차 어둠"과 같은 명확하게 지정하십시오. 이 과정을 반복하여 여러 가지 색조를 만듭니다. 일반적인 설정은 배경 및 그러한 배경에 대해 30% 가벼움에서 기본 1 차를 사용하고 -15% 가벼움에서 어두워집니다.

보조 색상에 더 가볍고 어두운 색조를 추가 할 수도 있습니다.

3. 중첩 색상 변수 구축

2 단계에서 1 차 빛과 1 차 어두운 어두워졌습니다. 이제 해당 그늘에서 더 많은 색상을 만들 수 있습니다.

"카드 배경 섀도우"라는 새로운 변수를 만드십시오. 목록에서 기본 조명을 선택하십시오. 불투명도는 50%로 떨어집니다. 이것은 당신에게 카드 배경에 대한 간신히 색조를 제공합니다. 다음으로 "버튼 호버"를 만듭니다. 1 차 어둠을 선택하십시오. 더 어두워지기 위해 10%를 더 떨어 뜨립니다. 이제 사람들이 버튼을 떠날 때 버튼이 어두운 색상이 될 수 있습니다.

당신은 당신의 색조에서도 맞춤형 색상을 만들 수 있습니다. 버튼 호버를 선택하여 "텍스트 섀도우"를 만듭니다. 불투명도를 15%로 설정합니다. 이제 텍스트 섀도우는 버튼 호버에 연결되어 1 차 어둠에 연결되어 기본에 연결됩니다.

1 차 조명에서 "테두리 악센트"를 시도하십시오. 더 많이 튀어 나오기 위해 포화를 100%로 범프하십시오. 이것은 여전히 브랜드와 일치하는 밝은 테두리를 제공합니다. 각 체인이 더 길어집니다. 다섯 가지 색상 모두 하나의 주요 선택으로 추적됩니다.

2 차 색상에 비슷한 색조를 추가하여 선택할 수있는 멋진 색상을 선택하십시오.

4. 사이트에 상대적인 색상을 적용합니다

당신은 당신의 컬러 파운데이션을 만들고 그 모든 색조를 만들었습니다. 이제 실용적인 부분이 있습니다 : 웹 사이트에서 구현.

시각적 빌더에서 모든 모듈을 엽니 다. 배경, 텍스트 또는 경계에 대한 색상 옵션을 클릭하십시오. 저장된 색상 변수는 색상 피커 바로 내부에 나타납니다. 이름이나 16 진 코드를 기억할 필요가 없습니다.

기본 버튼의 기본 색상을 선택하십시오. 섹션 배경에 대한 기본 표시등을 선택하십시오. 테두리에는 1 차 어두움과 CTA 버튼과 같은 미묘한 악센트를 사용하십시오. 각 선택은 기본 색상 시스템에 다시 연결됩니다.

색상 변수는 헤더, 바닥 글, 블로그 레이아웃 및 제품 페이지와 같이 어디에서나 작동합니다. 팀원과 고객은 추측없이 색상을 선택할 수 있습니다. 그들은 피커에서 임의의 16 진 코드 대신 "1 차 빛"을 봅니다. 명확한 이름은 실수가 적고 더 빠른 디자인 작업을 의미합니다. 누구나 어떤 색이 어떤 목적을 제공하는지 알고 있습니다.

이 가변 기반 시스템은 시각적 불일치를 방지합니다. 수십 개의 비슷한 블루스를 절약하거나 호버 효과에 사용할 그늘을 궁금해 할 필요가 없습니다. 변수는 설계 유연성을 유지하면서 구조를 제공합니다.

5. 필요할 때 색상 업데이트

고객은 파란색 대신 자정 파란색을 원한다고 결정합니다. 기존의 색상 관리를 통해 이는 모듈을 체로 체로 체결하고 모든 그늘을 수동으로 업데이트하거나 한 번에 많은 글로벌 색상을 업데이트하는 것을 의미합니다. Divi 5의 상대 색상을 사용하면 하나의 변수를 변경하고 다른 모든 것이 다음과 같습니다.

당신의 주요 조명 배경은 밝은 녹색이됩니다. 1 차 어두운 경계는 짙은 녹색으로 이동합니다. 버튼 호버 색상은 어두운 파란색으로 조정됩니다. 당신이 만든 모든 중첩 관계는 그대로 유지됩니다.

카드 배경 그림자는 15%의 불투명도가 1 차 빛을 가졌습니다. 당신이 그것을 만지지 않고 새로운 녹색 1 차 조명의 15% 불투명도가됩니다. 텍스트 섀도우는 버튼 호버에 연결되어 1 차 어둠에 연결되어 기본에 연결됩니다.

오래된 방식은 매번 처음부터 색조의 조화를 재현하는 것을 의미했습니다. 기초를 바꾸는 동안 관계를 보존하고 디자인은 균형을 유지합니다.

당신의 색상, 규칙

일관되지 않은 색상 사용은 좋은 디자인을 훼손합니다. 의미없는 이름으로 임의의 색조를 저장, 업데이트 모듈을 통한 사냥, 고객이 마음을 바꿀 때마다 처음부터 팔레트를 재건했습니다.

Divi 5의 상대적인 색상은이 워크 플로 악몽을 끝냅니다. 기본 색상에서 한 번 빌드하고 사이트 전체에서 모든 변형 업데이트를 자동으로 시청하십시오. 이 시스템은 브라우저 호환성을 처리하고 관계를 유지하며 컬러 피커를 구성하여 CSS를 사용하지 않아도됩니다.

다음 프로젝트는 더 나은 색상 관리가 필요합니다. Divi 5를 다운로드하고 조직화 된 디자인이 어떤 느낌인지 확인하십시오.