글꼴을 Divi 5의 글꼴 디자인 변수로 대체하는 방법

글꼴 업데이트는 두통이 될 수 있습니다. 제목 글꼴을 변경하면 갑자기 나타나는 모든 지점을 추적하고 있습니다. 제목을 놓치면 디자인이 즉시 느껴집니다. 수동으로 글꼴을 업데이트하면 불일치가 초대됩니다.

Divi 5는 글꼴 변수 및 사전 설정으로이를 해결합니다. 모든 인스턴스를 쫓는 대신 글꼴을 한 번 설정하고 시스템이 나머지를 처리하도록 할 수 있습니다. 타이포그래피는 얼마나 많은 모듈을 사용하든 깨끗하고 통합됩니다. 얼마나 간단한 지 살펴보십시오.

정적 글꼴이 문제를 일으킬 수있는 이유

정적 글꼴 설정은 시간이 지남에 따라 악화되는 합병증의 웹을 만듭니다. 각 요소에 글꼴을 직접 추가하면 수백 개의 다른 장소에서 타이포그래피 선택을 산란시킵니다.

제목 용 PlayFair 디스플레이 및 바디 텍스트 용 Poppins를 사용하여 사이트를 구축합니다. 몇 달 후, 당신은보다 현대적인 글꼴 스택으로 전환하고 싶습니다. 이제 모든 모듈, 모든 사전 설정, 모든 사용자 정의 설정을 통해 글꼴이 사는 곳을 찾을 수 있습니다. 하나의 제목조차도 회원 증권 섹션에 깊이 묻히면 디자인이 부러 질 수 있습니다.

글꼴을 하나씩 수동으로 업데이트하면 실수로 다른 크기 나 무게를 사용할 수 있습니다. 대부분의 제목을 32px로 업데이트하지만 28px에 머무르는 몇 가지를 놓치게됩니다. 한 번 조정 된 디자인은 이제 불균형을 느낍니다.

이 흩어진 방법은 간단한 글꼴 변경을 주요 프로젝트로 바꿉니다. 몇 시간이 걸리는 것은 지루한 사냥과 업데이트로 몇 시간이 걸립니다. 실제로 디자인하는 것보다 타이포그래피를 관리하는 데 더 많은 시간을 소비합니다.

대신 사용해야 할 사항 : Divi 5의 디자인 변수 및 사전 설정

디자인 변수는 디자인 설정을 저장하여 어디서나 재사용 할 수 있습니다. 글꼴을 한 번 설정하고 설계 변수로 저장 한 다음 사이트에서 사용하십시오. 나중에 변수를 변경하고 IT를 사용하는 모든 요소를 자동으로 업데이트하십시오.

Divi는 숫자, 텍스트, 이미지, 링크, 색상 및 글꼴의 6 가지 변수 유형을 제공합니다. 두 개의 기본 글꼴 변수를 사용할 준비가되었습니다. 하나는 제목과 신체 텍스트 용입니다. 변수 관리자는 데이터베이스 아이콘 아래 왼쪽 사이드 바에 있습니다.

이 변수는 숫자 필드, 글꼴 필드 및 간격 설정과 같이 지원하지 않는 필드에서 작동합니다. 지원되는 필드 옆의 변수 아이콘을 클릭하여 옵션을 확인하십시오.

어떤 옵션 그룹 사전 설정

옵션 그룹 사전 설정은 전체 모듈이 아닌 타이포그래피, 경계 또는 간격과 같은 특정 스타일 그룹을 저장합니다. 예를 들어, 글꼴과 크기를 제목하기 위해 사전 설정을 만들 수 있습니다.

옵션 그룹 사전 설정을 적용하면 해당 스타일 영역 만 변경됩니다. 나머지 모듈은 동일하게 유지됩니다. 문제없이 한 요소의 다른 사전 설정을 결합 할 수 있습니다. 더 많은 유연성을 위해 옵션 그룹 사전 설정과 디자인 변수를 혼합하십시오. 변수를 사용하는 사전 설정을 만듭니다. 변수를 업데이트하면 업데이트를 사용하여 모든 사전 설정도 업데이트됩니다.

Divi 5로 동적 글꼴 시스템을 만드는 단계별 가이드

글꼴 변수를 설정하는 데 약 20 분이 걸립니다. 일단 작업하면 글꼴 변경이 전체 사이트에서 즉시 발생합니다. 여기에가는 방법은 다음과 같습니다.

1. 새 시스템에 대한 글꼴 변수를 만듭니다

왼쪽 사이드 바에서 데이터베이스 아이콘을 클릭하여 변수 관리자를 엽니 다. 글꼴 탭으로 이동하십시오. 두 가지 기본 변수가 표시됩니다 : 하나는 제목과 하나는 바디 텍스트입니다.

• 메인 글꼴 설정 : 제목 변수를 클릭하십시오. 글꼴 가족과 체중을 선택한 다음 저장하십시오. 신체 텍스트에 대해서도 똑같이 수행하지만 깨끗하고 읽기 쉬운 것을 선택하십시오.
• 필요한 경우 더 많은 글꼴 추가 : 일부 디자인에는 인용문, 평가 또는 특수 텍스트에 대한 추가 글꼴이 필요합니다. "새 변수 추가"를 클릭하고 명확한 이름을 지정하십시오.
• 모든 세부 사항을 채우십시오 : 각 변수는 글꼴 제품군, 체중, 스타일 및 기타 설정을 유지합니다. 헤드 라인에 대담한 가중치, 신체 텍스트의 일반 무게 및 강조를 추가하려면 이탤릭체를 사용하십시오.
• 이름을 간단하게 유지하십시오 : 라벨을 혼란스럽게하는 대신 "QUOTE FONT"또는 "Highlight Font"라고 부릅니다.
• 저장을 기억하십시오 : 저장 버튼을 누르기 전까지는 변경 사항이 고수되지 않습니다.

대부분의 웹 사이트에는 제목과 신체 글꼴 만 있으면됩니다. 작은 텍스트 조정이 아닌 특수 설계 요구에 대한 추가 변수 만 추가하십시오. 변수가 적어 새로운 컨텐츠를 훨씬 쉽게 만들 수 있습니다.

2. 글꼴 크기의 숫자 변수를 추가하십시오

가변 관리자의 숫자 탭으로 전환하십시오. 여기에서는 글꼴과 함께 작동하는 크기 변수를 만듭니다. 이것을 타이포그래피 척도로 생각하십시오.

제목 크기로 시작하십시오. H1, H2, H3 등이라는 변수를 만듭니다. 디자인에 적합한 다른 크기로 각각을 설정하십시오. 다른 화면에 적응하는 크기에 대해 32px와 같은 일반 픽셀 값 또는 Clamp ()와 같은 응답 유닛을 사용할 수 있습니다.

바디 텍스트에는 크기가 필요합니다. "바디 크기"와 같은 것을 부르고 편안한 읽기 크기, 일반적으로 약 16px에서 18px로 설정하십시오.

특수 텍스트 요구에 대한 변수를 만들 수도 있습니다. 아마도 캡션의 "작은 텍스트"변수 또는 평가에 대한 "큰 텍스트"변수를 원할 수도 있습니다. 나중에 그들이 무엇을 할 것인지 기억하도록 명확하게 지정하십시오.

이 숫자 변수는 일관된 크기가 필요한 곳마다 작동합니다. 라인 높이, 간격 또는 사이트에 여러 번 나타나는 측정에 사용하십시오. 숫자 변수를 업데이트하면이를 사용하는 모든 것이 자동으로 변경됩니다.

대부분의 웹 사이트에는 제목과 신체 글꼴 만 있으면됩니다. 작은 텍스트 조정이 아닌 특수 설계 요구에 대한 추가 변수 만 추가하십시오. 변수가 적어 새로운 컨텐츠를 훨씬 쉽게 만들 수 있습니다.

3. 정적 글꼴을 교체하려면 찾아서 교체하십시오

모듈 설정의 글꼴 필드를 마우스 오른쪽 버튼으로 클릭하여 찾기 및 교체 옵션을 확인하십시오. Divi가 현재 글꼴 설정을 자동으로로드하는 패널이 열립니다. 이제 해당 정적 글꼴을 디자인 변수 중 하나로 바꿀 수 있습니다.

소스 요소 필드는 어떤 모듈에서 시작했는지 보여줍니다. 이를 변경하여 페이지의 다른 요소를 시작점으로 선택할 수 있습니다.

찾기 값은 교체하려는 글꼴을 표시합니다. 다른 정적 글꼴을 선택하는 대신 대체 값을 글꼴 디자인 변수 중 하나로 설정하십시오.

글꼴 크기에 대한 작업을 찾고 교체하십시오. 글꼴 크기 필드를 마우스 오른쪽 버튼으로 클릭하여 동일한 교체 패널에 액세스하십시오. 이렇게하면 24px와 같은 요소 수준 크기를 숫자 변수로 바꿀 수 있습니다.

글꼴 크기를 수동으로 설정하는 텍스트 모듈을 찾으십시오. 이러한 산란 된 크기 설정은 정적 글꼴과 동일한 문제를 만듭니다. 타이포그래피 척도를 조정하려면 각 모듈을 통해 각 크기를 찾기 위해 사냥을하게됩니다. 이 정적 크기를 H1, H2, 신체 크기 또는 기타 숫자 변수로 교체하십시오.

교체 경계를 설정하십시오

변경이 발생하는 위치 컨트롤을 찾고 교체하십시오. 전체 레이아웃에서 글꼴을 업데이트하려면 "전체 페이지"를 선택하십시오. "현재 요소와 어린이"를 선택하여 해당 특정 섹션의 변경 사항과 그 안에 중첩 된 내용을 제한하십시오.

부모 컨테이너 또는 특정 페이지 영역을 타겟팅 할 수도 있습니다.

요소 유형을 찾고 교체하면 특정 모듈에 집중할 수 있습니다. 전체 글꼴 스왑을 위해 "모든 요소"를 선택하거나 컨테이너 및 구조 요소를 건너 뛰려면 "모듈"을 선택하십시오. 특정 모듈 유형 만 타겟팅하여 더 구체적으로 얻을 수 있습니다.

우발적 인 교체를 피하십시오

"동일한 필드 만 교체"옵션은 원치 않는 변경을 방지합니다. 동일한 값을 공유 할 수있는 다른 설정에 영향을 미치지 않고 글꼴을 교체하려는 경우이 켜기를 켜십시오.

이렇게하면 "10px"또는 이와 유사한 글꼴을 교체 할 때에도 국경 반경을 10px로 유지합니다.

이 설정이 없으면 어디에서나 대상 값을 찾아 교체하십시오. IT가 활성화되면 시스템은 실제 글꼴 필드 만 변경하여 다른 디자인 설정 만 남습니다.

4. 글꼴 시스템을 통해 작업하십시오

다른 글꼴 무게와 스타일에 대한 별도의 찾기 및 교체 작업이 필요합니다. 귀하의 사이트는 규칙적이고 대담한 무게로 동일한 글꼴 제품군을 사용할 수 있습니다. 각 변형을 개별적으로 처리하여 이전에 만든 적절한 설계 변수로 교체하십시오.

매번 프로세스는 동일합니다. 글꼴 필드를 마우스 오른쪽 버튼으로 클릭하고 교체 값을 설계 변수로 설정하고 범위를 선택한 다음 변경 사항을 적용하십시오. 업데이트가 필요한 각 정적 글꼴에 대해 반복하십시오.

5. 변수로 사전 설정을 만듭니다

텍스트 모듈에 액세스하고 설계 탭으로 이동하십시오. 타이포그래피를 찾아 사전 설정 아이콘을 클릭하십시오. 드롭 다운 메뉴에서 헤딩 글꼴 변수를 선택하십시오. 크기 크기에 H1 번호 변수를 적용하십시오.

라인 높이 및 간격 값을 구성하십시오. 사전 설정된 "메인 헤딩"의 이름을 지정하여 저장하십시오. 별 아이콘을 클릭하여 기본값으로 설정하십시오. 새로운 텍스트 모듈은 이러한 설정을 자동으로 채택합니다. 동일한 제목 태그와 스타일이없는 모든 기존 모듈도 이러한 설정을 상속합니다.

각 제목 수준에 대해이 프로세스를 반복 할 수 있습니다. 각 사전 설정은 다른 목적을 제공하면서 일관성을 유지합니다.

이 타이포그래피 사전 설정은 텍스트 필드가 포함 된 모든 모듈에서 작동합니다. Blurb 모듈, 아코디언 컨텐츠, 평가 및 연락처 양식은 모두 동일한 사전 설정을 허용합니다. 이 교차 모듈 호환성은 반복 스타일링 작업을 제거합니다.

옵션 그룹 사전 설정은 특정 스타일 범주를 대상으로합니다. 버튼의 배경과 테두리 설정을 그대로 유지하면서 버튼 텍스트에 제목 사전 설정을 적용하십시오.

6. 모든 요소에서 새 변수를 확장합니다

새 변수를 사용하여 요소를 마우스 오른쪽 버튼으로 클릭하십시오. 메뉴에서 "속성 확장"을 선택하십시오. 소스 요소를 최근에 업데이트 된 모듈로 구성하십시오.

완전한 업데이트를 위해 위치를 "전체 페이지"로 설정하십시오. 속성 유형에서 디자인 요소에만 초점을 맞추려면 "스타일"을 선택하십시오.

패딩, 여백 또는 글꼴 크기와 일치 할 수있는 기타 숫자 값에 대한 원치 않는 변경을 방지하기 위해 "동일한 필드 만 교체하십시오"를 활성화하십시오. "모든 요소"를 선택하여 모듈 및 컨테이너를 업데이트하거나 "모듈"을 선택하여 컨텐츠 요소를 구체적으로 대상으로합니다.

사이트 전체 업데이트가 아닌 작은 섹션에서 복잡한 페이지를 처리합니다. 한 번에 한 영역으로의 변경 사항을 제한하려면 "현재 섹션"을 선택하십시오. 헤더 섹션으로 시작하십시오. 가변 확장을 적용하고 결과를 검토하고 주요 컨텐츠 영역으로 진행하십시오. 바닥 글을 마지막으로 완료하십시오.

이 체계적인 접근 방식은 형식 충돌을 조기에 식별하고 업데이트 프로세스를 제어합니다.

Divi 5는 타이포그래피를 더 쉽게 만듭니다

Playfair 디스플레이에서 현대적인 내용으로 전환하고 대부분의 제목을 업데이트했지만 3 페이지의 증언을 놓치게되었습니다. 귀하의 사이트는 몇 주 동안 일방적으로 보였습니다.

Divi 5의 변수는 웹 사이트 타이포그래피를 간소화합니다. 사이드 바의 데이터베이스 아이콘에서 제목 변수를 변경하고 모든 텍스트 모듈이 즉시 업데이트됩니다. 연락처 양식 바닥 글이 포함되어 있습니다.

다음에 브랜드를 바꾸면 50 개의 모듈을 클릭하는 대신 두 가지 변수를 업데이트합니다. 찾기 및 교체 도구는 일반적으로 놓친 것을 포착합니다. 타이포그래피는 꽉 조여지고 주말에는 당신의 주말이 남아 있습니다.