정적 스타일을 Divi 5의 디자인 변수로 바꾸는 방법

색상, 패딩 또는 글꼴 하나를 한 번에 조정 한 적이 있다면 아마도 느리고 오류가 발생하며 지루한 수동 스타일 변경이 얼마나 느리게 될 수 있는지 깨달았을 것입니다.

Divi 5는 그것을 처리하는 더 똑똑한 방법을 소개합니다. 설계 변수 및 찾기 및 교체를 사용하면 레이아웃 전체에서 정적 스타일을 업데이트하고 몇 분 안에 재사용 가능한 설계 시스템을 구축 할 수 있습니다. 어떻게 보자.

Divi 5는 새로운 웹 사이트에서 사용할 준비가되었습니다.

"정적 스타일"이란 무엇입니까?

Divi 레이아웃을 가져 오거나 사전 디자인 된 섹션을 사용하면 글꼴, 색상, 간격 및 경계와 같은 모든 것이 이미 설정됩니다. 레이아웃이 사전 설정을 사용하지 않으면 이러한 값이 요소 레벨에 적용됨을 알 수 있습니다.

제목에는 글꼴 크기가 수동으로 입력되었을 수 있으며 버튼은 특정 색상 코드를 사용할 수 있으며 패딩 또는 간격은 고정 숫자를 사용할 수 있습니다. 직접적으로 적용된 값을 정적 스타일이라고합니다.

그리고 처음에는 무해한 것처럼 보이지만 변화를 원할 때 빠르게 문제가 될 수 있습니다. 정적 스타일의 문제는 관리하는 데 더 많은 시간이 걸린다는 것입니다. 모든 버튼의 색상을 변경하거나 섹션에서 간격을 조정하려면 각 버튼을 수동으로 편집해야합니다. 느리고 실망 스럽습니다.

이제 완전한 웹 사이트 브랜드를 수동으로 업데이트하거나 반복 스타일로 가득 찬 복잡한 레이아웃 작업을 상상해보십시오. 많은 디자이너 들이이 과정이 얼마나 실망 스러울 수 있는지 공유했습니다. 그러나 몇 년 동안 그것을 고칠 수있는 신뢰할 수있는 방법은 없었습니다. 그렇기 때문에 우리는 Divi 5에서 더 똑똑한 솔루션을 구축했습니다.

Divi 5가 정적 스타일을 쉽게 대체하는 방법

Divi 5의 목표 중 하나는 디자인 워크 플로우를 더 빠르고 반복적으로 만드는 것입니다. 이를 돕기 위해 두 가지 강력한 기능을 추가하여 스타일을 중앙 집중화하고 찾아서 교체 할 수있는 디자인 변수를 추가하여 레이아웃 전체에서 즉시 업데이트 할 수 있습니다. 자세히 이해합시다.

디자인 변수를 사용하면 글로벌 스타일을 정의 할 수 있습니다

Divi 5를 사용하면 최종적으로 자신의 디자인 프레임 워크를 시각적으로 구축하고 브랜드 스타일을 빠르게 수정할 수 있습니다.

모든 모듈에서 동일한 색상, 글꼴 또는 간격을 수동으로 적용하는 대신 Divi 5를 사용하면 해당 값을 설계 변수로 저장할 수 있습니다. 이들은 사이트 전체에서 참조 할 수있는 재사용 가능한 값입니다.

Visual Builder 내에서 변수 관리자를 사용하면 6 가지 유형의 색상, 글꼴, 숫자 (간격 또는 크기), 텍스트, 이미지 및 링크의 6 가지 유형으로 변수를 생성하고 구성 할 수 있습니다.

섹션 패딩과 같은 명확한 이름으로 각 변수를 저장할 수 있으므로 쉽게 찾아서 재사용 할 수 있습니다. CSS 변수를 수동으로 작성하는 것과 달리 Divi의 인터페이스를 사용하면 코드를 터치하지 않고도 이러한 값을 시각적으로 관리 할 수 있습니다.

이러한 저장된 변수를 적용하는 것도 더 쉽습니다. 모듈을 사용자 정의하는 동안 설정으로 이동하여 변수 관리자 아이콘을 찾아 목록에서 변수를 선택하십시오.

변경할 때가되면 진정한 이점을 볼 수 있습니다. 모든 곳에서 패딩을 바꾸고 싶다고 가정 해 봅시다. 수십 개의 모듈을 편집하는 대신 변수 관리자 에서 한 번 값을 업데이트하면 사이트 전체에서 업데이트됩니다.

응용 설정 필드에서 실시간으로 변경되는 값을 확인하십시오. 이것이 글로벌 디자인 시스템의 힘입니다.

그리고 이것은 디자인 스타일에만 국한되지 않습니다. 반복 콘텐츠를 효과적으로 관리하려면 주소, 이메일 또는 회사 태그 라인과 같은 텍스트, 이미지 및 링크를 콘텐츠 변수로 저장할 수도 있습니다. 더 이상 페이스트 할 필요가없고 동적 콘텐츠처럼 삽입하면 사이트 전체에서 일관성을 유지합니다.

디자인 변수에 대해 모든 것을 배우십시오

찾아서 교체 할 수 있습니다. 정적에서 글로벌 스타일로 전환 할 수 있습니다.

Divi 5의 FAD 색상, 글꼴, 간격 또는 단일 출발점에서 몇 번의 클릭만으로 반복되는 다른 설정과 같은 정적 값을 변경하는 데 도움이되었습니다.

사용하려면 시각적 빌더 내부의 스타일 필드를 마우스 오른쪽 버튼으로 클릭하거나 마우스 로버하고 세 점을 클릭하십시오. 드롭 다운에서 찾기 및 교체 옵션이 표시됩니다.

이것은 새로운 찾기 및 교체 패널을 열어줍니다. 여기서 원하는 변경을 수행하고 대량으로 적용 할 수 있습니다.

• (1) 소스 요소 : 타겟팅하는 설정 (예 : 텍스트, 색상 또는 간격). 드롭 다운을 열면 실제로 레이어 계층이라는 것을 알 수 있습니다.
• (2) 값 찾기 : 특정 글꼴 또는 색상 코드와 같은 교체하려는 정확한 값.
• (3) 값을 대체하십시오 : 대신 적용하려는 새 값 또는 변수.
• (4) 위치에서 찾아서 교체 : 변경 사항을 적용 할 위치를 선택하십시오. 이 모듈, 섹션 또는 전체 페이지.
• (5) 요소 유형을 찾아서 교체하십시오. 변경이 모든 요소 또는 특정 모듈 유형에만 적용되어야하는지 결정하십시오.
• (6) 동일한 필드 만 교체하십시오 : 활성화 된 경우 설정과 값이 정확히 일치하는 경우에만 교체가 발생합니다.

작동 방식은 다음과 같습니다. 페이지에서 사용 된 제목 글꼴을 변경하고 싶다고 가정 해 봅시다. 모듈별로 모듈을 사용하는 대신 찾기 및 교체 패널을 사용합니다.

제목 설정에서 열면 소스 요소가 자동으로 선택되므로 항상 수동으로 선택할 필요는 없습니다.

(다른 요소를 클릭하면 패널 옵션이 자동으로 조정됩니다.)

찾기 값 에서 교체 할 값을 입력하십시오. 이 예에서는 현재 적용된 글꼴 인 Medula One 입니다. 값을 바꾸면 적용하려는 새 값을 선택하십시오. Aclonica를 선택합시다.

그런 다음 전체 페이지 의 모든 인스턴스를 업데이트할지 또는 위치에서 찾기 및 교체의 열, 행 또는 섹션 만 업데이트할지 여부를 선택하십시오. 모든 제목 모듈을 타겟팅하려면 모든 요소 로 찾기 및 교체를 요소 유형으로 유지하십시오.

그리고 그게 다야. 찾기 및 교체를 누르면 몇 초 안에 20 개의 제목 인스턴스가 업데이트됩니다. 신체 텍스트와 버튼 글꼴이 손대지 않도록하십시오. 다른 값을 사용하기 때문입니다. 그리고 그것이 시스템이 얼마나 정확한지입니다.

Divi는 정확한 일치를 찾는 곳에서만 변경 사항을 적용합니다. 즉, 변화가 필요없는 디자인을 엉망으로 만들지 않고 정적 스타일을 자신있게 정리할 수 있습니다. 그러나 디자인 변수는 어떻게 여기에 적합합니까?

그들은 케이크의 착빙과 같습니다. 교체 값 필드에서 설계 변수를 사용할 수도 있습니다. 이 위로 가서 변수 관리자 아이콘을 클릭하고 저장된 변수를 삽입하십시오.

이는 스타일을 업데이트하기가 훨씬 쉽고 효율적인 전 세계 재사용 가능한 시스템에 연결됩니다. 이것이 바로 모든 정적 값을 디자인 변수로 대체하여 웹 사이트를 향후 준비하여 더 쉬운 업데이트를 제공 할 수있는 방법입니다.

찾기 및 교체에 관한 모든 것을 배우십시오

이 두 가지 기능 (그리고 더 많은 것)은 Divi 5 내에서 사용할 수 있습니다. 건축업자는 더 빠른 성능, 더 똑똑한 워크 플로 및 더 많은 제어를 제공하기 위해 재구성되었습니다. 솔직히 말해서, 그들에 대해 읽는 것은 흥미 진진하지만, 이러한 기능을 직접 경험할 때 실제 변화가 있음을 알 수 있습니다.

정적 스타일을 저장된 변수로 바꾸는 방법

이제 우리가 어떤 도구를 사용할 것인지 알았으므로 이제는 실제로 도구를 볼 차례입니다.

프로세스를 안내하기 위해 Pie Shop Landing Page 레이아웃을 예로 가져 왔습니다. 글꼴, 색상 및 간격과 같은이 레이아웃의 디자인 세부 사항은 정적 스타일로 적용되었습니다. 전통적인 방법은 모듈별로 IT 모듈을 사용자 정의해야합니다. 그러나이 자습서에서는 방금 다루는 워크 플로를 사용하여 단계별로 교체 할 것입니다.

그러나 다이빙하기 전에 잠시 시간을내어 레이아웃이 패턴을 스캔하십시오. 버튼에서 사용되는 동일한 색상, 제목의 유사한 글꼴 크기, 섹션 간의 일관된 간격 또는 동일한 테두리 설정과 같은 반복 스타일을 찾으십시오. 이러한 반복 값은 디자인 변수에 가장 적합한 후보자입니다. 특히 나중에 변경할 가능성이 있습니다.

1. 디자인 변수를 저장하십시오

파이 상점 레이아웃을 분석 한 후 페이지에 지속적으로 나타나는 몇 가지 값을 식별하고 선호하는 스타일로 업데이트하고 싶습니다. 여기에는 다음이 포함됩니다.

• 행 테두리 너비
• 버튼 패딩
• 제목 텍스트
• 바디 텍스트
• 바디 텍스트 색상

지금은 정적 스타일로 적용됩니다. 따라서 동일한 설정을 수동으로 반복하는 대신 설계 변수로 변환합니다. 이것은 몇 번의 클릭만으로 페이지 스타일을 업데이트 할 수있는 간단하고 재사용 가능한 프레임 워크를 제공합니다.

줄의 테두리 너비부터 시작하겠습니다. 변수를 생성하고 저장하려면 변수 관리자를 열고 유형을 선택하십시오. 행의 테두리 너비의 경우 숫자 변수를 선택하겠습니다. 다음으로 변수의 이름을 지정하여 값을 지정하십시오. 변수 저장을 클릭합니다.

일단 저장되면이 변수는 클릭으로 재사용 할 준비가되었습니다. 테두리 너비가 설정 될 수있는 곳마다 나타납니다. 제목 텍스트, 바디 글꼴, 텍스트 색상 및 버튼 패딩에 대해 동일한 프로세스를 따라갑니다. 이 저장된 변수는 이제 내 레이아웃의 디자인 언어의 기초를 형성합니다. 당신은 똑같이합니다.

이런 식으로, 버튼 간격을 조정하거나 나중에 글꼴을 변경하기로 결정하면 모든 모듈을 하나씩 업데이트 할 필요는 없습니다. 변수를 업데이트하면 나머지는 스스로 업데이트됩니다.

2. 정적 스타일을 변수로 전환하려면 찾기 및 교체를 사용하십시오.

설계 변수가 준비되면 다음 단계는 찾기 및 교체를 사용하여 레이아웃 전체의 정적 값을 교체하는 것입니다. 버튼 패딩부터 시작하겠습니다.

현재 각 버튼은 수동으로 입력 한 패딩 : 상단 및 하단의 경우 6px, 왼쪽 및 오른쪽의 경우 1px를 사용합니다. 일관성을 높이고 업데이트를 더 쉽게하기 위해 두 가지 변수를 만들었습니다.

• 상단 및 하단 패딩의 경우 Button-T = 12px.
• 왼쪽 및 오른쪽 패딩의 경우 Button-L = 32px.

이를 적용하려면 버튼 설정을 열고 디자인> 간격> 패딩 으로 이동하여 패딩 값을 마우스 오른쪽 버튼으로 클릭 한 다음 옵션에서 찾기 및 교체를 선택합니다.

찾기 및 교체 패널에서 기존 정적 값을 변수 관리자의 저장된 변수로 바꾸겠습니다.

찾기 및 교체를 클릭 한 후 페이지 전체에서 5 개의 버튼 인스턴스가 모두 새 패딩 값을 사용하도록 즉시 업데이트됩니다.

이전에 확인한 다른 정적 스타일에 대해 동일한 단계를 따라갈 수 있습니다. 찾기 및 교체를 사용하여 각각을 저장된 변수로 바꾸면 글로벌 디자인 시스템에 완전히 연결된 레이아웃으로 끝납니다.

3. 선호하는 스타일을 사전 설정으로 변환하십시오 (선택 사항)

이 단계는이 기사의 범위에 대한 선택 사항이지만 디자인 시스템을 확장하는 강력한 방법입니다.

정적 스타일을 변수로 바꾸면 해당 모듈을 옵션 그룹 사전 설정으로 저장할 수 있습니다. 예를 들어, 테두리 너비에 대한 저장된 변수를 행에 할당 한 후 해당 행을 행 테두리 사전 설정으로 저장했습니다.

사전 설정 내부에 변수를 사용한다는 것은 변수의 값을 변경하는 것과 같이 설계 시스템에 대한 향후 업데이트가 해당 사전 설정을 사용하여 모든 모듈에 자동으로 반영됩니다. 수동으로 다시 신청하거나 업데이트 할 필요가 없습니다.

따라서 몇 번의 클릭만으로 새로운 브랜딩으로 전체 페이지를 업데이트했을뿐만 아니라 향후 업데이트를 더 빠르고 쉽고 완전히 연결할 수있는 유연한 시스템을 만들었습니다. 실제 레이아웃에서 어떻게 작동합니까? 실제로 볼 시간.

페이지 스타일을 업데이트하는 것이 그 어느 때보 다 쉬워집니다

정적 스타일에서 디자인 변수로 전환하는 이유는 간단합니다. 업데이트를보다 쉽게 만듭니다. 디자인 변수가 제자리에 있으면 레이아웃을 편집하는 것이 매우 간단 해집니다.

웹 사이트에서 제목 글꼴을 변경하려면 각 모듈을 하나씩 편집 할 필요가 없습니다. 변수 관리자를 열고 앞서 저장 한 글꼴 값을 업데이트하면 변수가 사용되는 모든 곳에 변경 사항이 적용됩니다.

옵션 그룹 사전 설정은 설계 변수를 사용하는 경우 자동으로 업데이트됩니다. 이렇게하면 스타일이 연결되어 있으므로 다른 모듈이나 페이지에서 동일한 편집을 반복 할 필요가 없습니다.

파이 샵 레이아웃을 이전에 사용자 정의했을 때 각 버튼이나 제목을 수동으로 조정하지 않았습니다. 저장된 변수를 간단히 편집했습니다. 이전에 정의한 글꼴, 패딩 및 색상이 페이지에 자동으로 적용되었습니다. 레이아웃은 이미 제작 한 시스템을 따랐습니다.

물론 하나의 모듈에서 패딩을 조정하거나 색상을 변경하는 것은 어렵지 않습니다. 그러나 전체 사이트에서 수십 개의 스타일을 업데이트 할 때 차이가 크게 나타납니다. 더 빠르고, 더 깨끗하고, 더 신뢰할 수 있으며, 오류가 훨씬 덜 발생합니다.

이것은 변수로 전환하는 실제 가치입니다. 전체 설계가 관리하기가 더 쉬워집니다. 그리고 고객이 다음 달에 빠른 브랜딩 변경을 요청할 때? 그들이 커피를 마치기 전에 끝날 것입니다.

찾기 및 교체로 대량 편집을 쉽게 만듭니다

디자인이 변경 될 때마다 처음부터 시작할 필요가 없습니다. Divi 5의 시스템을 사용하면 업데이트는 집안일처럼 느껴지고 간단한 단계와 비슷합니다.

이 워크 플로는 설정 중에만 도움이되지 않습니다. 미래의 업데이트를 더 쉽게 만드는 이유입니다. 고객이 새 글꼴을 요청하든 다른 브랜드 색상을 테스트하든 한 번 변경하고 어디에서나 반사되는 것을 볼 수 있습니다.

Divi 5는 실제 사람들이 웹 사이트를 디자인하는 방법을 지원하도록 설계되었습니다. 이제 디자인 시스템은 아이디어만큼 유연 할 수 있습니다.