찾기 및 교체로 레이아웃 팩 스타일을 신속하게 변경하는 방법

전체 레이아웃 팩의 디자인을 업데이트하면 5-6 개의 다른 페이지에서 동일한 스타일을 변경해야한다는 것을 알 때까지 간단하게 들립니다. 이러한 스타일은 정적 값으로 적용되므로 글꼴 변경 또는 섹션 패딩 조정과 같은 작은 업데이트조차 페이지별로 페이지별로 완료되면 시간이 소요됩니다.

그러나 몇 번의 클릭만으로 반복 된 스타일을 모두 업데이트 할 수 있다면 어떨까요? 이것이 바로 Divi 5에서 찾기와 교체가하는 일입니다. 글꼴 교체, 색상 교체 또는 간격 조정에 관계 없이이 기능을 사용하면 레이아웃 전체를 즉시 변경하는 데 도움이됩니다. 전체 레이아웃 팩을 정리하고 회복하는 데 사용하는 방법을 보여 드리겠습니다.

Divi 5에서 찾아서 교체하는 것

찾기 및 교체는 Divi 5의 기능으로 레이아웃에서 반복 스타일 값을 빠르게 업데이트 할 수 있습니다. 글꼴, 색상 코드, 패딩 또는 그림자 효과에 관계없이 이제 해당 값을 한 번 변경하여 여러 요소에 적용 할 수 있습니다.

그렇다면 이것이 실제로 어떻게 작동합니까? 시각적 빌더의 모든 모듈로 시작합니다. 텍스트 색상이나 글꼴 크기와 같은 스타일 필드 위로 마우스를 사용하면 3 도트 아이콘이 표시됩니다. 이를 클릭하거나 (또는 필드를 마우스 오른쪽 버튼으로 클릭하고) 찾기 및 교체를 선택하십시오.

이를 통해 대체 할 값, 새 값이 무엇인지, 변경 사항을 적용 할 위치를 정의하는 패널이 열립니다. 해당 모듈에만 집중하거나 전체 섹션으로 확장하거나 페이지 전체에서 레이아웃 전체로 이동할 수 있습니다.

이 워크 플로를 경험하면 왜 그런 유용한 도구인지 이해할 것입니다. 동일한 색상이나 글꼴을 변경하기 위해 수십 개의 모듈을 사냥하는 대신 하나의 대상 업데이트를 만들고 몇 초 만에 전체 레이아웃에서 파문을보십시오. 그러나 찾기 및 교체 잠재력을 실제로 잠금 해제하려면 설계 변수에서 어떻게 작동하는지 확인해야합니다.

찾기 및 교체가 레이아웃 스타일을 더 빨리 업데이트하는 데 도움이되는 방법

우리는 두 가지 시나리오를 살펴볼 것입니다 : 먼저, 기본 찾기 및 교체 작업, 그런 다음 설계 변수를 사용한 동일한 작업 (이 비밀 무기).

Divi 5에서 찾기 및 교체 사용

프로세스는 간단합니다. 스타일 필드에서 트리거하고 교체 할 대상을 선택하고 여러 모듈에서 변경 사항을 적용하십시오. 진짜 예로 그것을 걸어 갑시다.

모든 페이지 제목의 글꼴 크기를 늘리고 싶다고 가정 해 봅시다. 시각적 빌더 내부의 제목 모듈을 클릭하여 시작하십시오. 설정> 디자인> 제목 텍스트> 제목 텍스트 H1 글꼴 크기로 이동하십시오. 마우스 오른쪽 버튼을 클릭하거나 호버링하여 찾기 및 교체 옵션을 찾으십시오.

이것은 많은 옵션으로 찾기 및 교체 패널을 열어줍니다.

• (1) 소스 요소 : 텍스트 크기, 색상 또는 패딩과 같은 타겟팅하는 설정을 정의합니다. 패널을 열었던 곳에 따라 자동으로 선택됩니다.
• (2) 값을 찾으십시오 : 레이아웃에서 사용 된 현재 값. 이것은 30px와 같은 글꼴 크기, #000000과 같은 색상 코드 또는 기타 디자인 설정 일 수 있습니다. 자동으로 추가됩니다.
• (3) 값 교체 : 적용하려는 새 값. Divi는 일치하는 값을 검색하고 이것으로 대체합니다.
• (4) 위치에서 찾아서 교체 : 변경 사항을 적용 해야하는 위치를 선택하십시오. 단일 모듈, 섹션 또는 전체 페이지로 제한 할 수 있습니다.
• (5) 요소 유형을 찾아서 교체하십시오. 변경에 영향을 미치는 모듈을 결정하십시오. 모든 모듈 또는 버튼, 텍스트 또는 blurb와 같은 특정 유형에만 적용 할 수 있습니다.
• (6) 동일한 필드 만 교체하십시오. 찾기 값과 정확히 일치하는 필드 만 업데이트하려면이 켜기를 켜십시오. 이것은 관련없는 요소에 대한 우발적 인 변경을 피하는 데 도움이됩니다.

예를 들어, 우리는 글꼴 크기를 30px에서 유체 클램프 (20px, 4VW, 50px)로 교체합니다. 페이지의 모든 제목을 업데이트하려면 전체 페이지 와 모든 요소를 선택했습니다.

찾기 및 교체 버튼을 클릭하고 무슨 일이 일어나는지 시청하십시오. 30px 글꼴 크기의 모든 제목에는 이제 유체 클램프 () 값이 있습니다.

Divi는 선택한 범위 내에서 정확히 일치하는 값 만 업데이트하기 때문에 다른 제목은 변경되지 않았습니다. 수동 편집이 필요하지 않으며 관련없는 요소에 대한 우발적 인 변경조차 없습니다. 이 정확도는 레이아웃 팩에서 기본 스타일을 정리하는 데 적합합니다.

Divi의 발견 및 교체에 관한 모든 것을 배우십시오

찾기 및 교체에서 설계 변수를 사용합니다

설계 변수와 쌍을 이룰 때 찾기 및 교체가 더욱 강력 해집니다. 정적 값을 다른 정적 값으로 바꾸는 대신 변수 관리자의 저장된 변수로 교체 할 수 있습니다. 이것은 나중에 업데이트하기 쉬운 일관된 설계 시스템을 구축합니다.

모든 제목 글꼴 크기를 업데이트하여 동일한 예를 계속하겠습니다. 그러나 이번에는 30px를 직접 클램프 값으로 바꾸는 대신 H3 글꼴 크기라는 변수로 교체합니다.

먼저 변수를 만듭니다. 왼쪽 사이드 바에서 변수 관리자를 열고 숫자 열로 이동하십시오. 변수의 이름을 지정하고 값을 할당하고 저장하십시오.

이로 인해 모든 글꼴 크기 필드에서 변수를 사용할 수 있습니다. 이제 마술이 온다 : 당신은 찾기 및 교체 패널에서 직접 사용할 수 있으므로 저장된 변수를 한 번에 모든 제목 글꼴 크기에 할당 할 수 있습니다.

이전과 같이 찾기 패널을 열고 교체하십시오. 값 필드 교체 에서 입력 위로 마우스를 가져 가서 변수 관리자 아이콘을 클릭하십시오. 저장된 변수, H3 글꼴 크기를 선택하고 동일한 설정을 계속하십시오.

변경 사항을 적용하려면 찾기 및 교체를 클릭하십시오. 30px를 사용하는 모든 제목은 이제 고정 번호 대신 H3 글꼴 크기 변수를 참조합니다.

여기가 흥미로워지는 곳이 있습니다. 나중에이 글꼴 크기를 조정해야합니까? 변수 관리자 로 이동하여 H3 글꼴 크기 변수를 열고 값을 변경하십시오. 클램프를 클램프 (24px, 5VW, 60px)로 업데이트 하고이 변수 업데이트를 사용하여 모든 제목을 자동으로 업데이트하십시오.

찾기 및 교체를 반복 할 필요가 없습니다. 한 번의 업데이트를 사용하면 레이아웃이 모든 곳에서 조정됩니다.

이 찾기 및 교체 및 디자인 변수의 조합은 전체 레이아웃 팩을 매우 효율적으로 업데이트 할 수 있으며이 튜토리얼 에서이 프로세스를 따라갈 것입니다. 디자인 변수를 한 번 정의 한 다음 찾기 및 교체를 사용하여 정적 값에서 모든 페이지의 저장된 변수로 전환하십시오. 그 후 업데이트는 쉽게됩니다.

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

이것을 실천할 준비가 되셨습니까? 찾기 및 교체 및 디자인 변수를 모두 사용하려면 Divi 5가 필요합니다. 건축업자는 더 빠른 성능과 더 똑똑한 워크 플로를 위해 완전히 재건되었습니다.

레이아웃 팩에서 스타일을 교체하는 방법

이제 찾기 및 교체 작업과 디자인 변수와 페어링하는 방법을 알았으므로 실제 레이아웃 팩에 작동하도록하겠습니다. 이 예를 들어, 가정, 소개, 연락처, 코스 착륙 및 가격과 같은 여러 페이지가 포함 된 학습 관리 시스템을 가져옵니다.

각 페이지는 동일한 글꼴, 색상 및 간격을 사용하지만 모두 정적 값과 같습니다. 아래 튜토리얼에서는 모든 페이지에서 이들을 업데이트하고 변수로 전환하며 모든 것을 중앙 설계 시스템에 연결합니다.

1. 레이아웃의 디자인 스타일을 감사하십시오

교체를 시작하기 전에 몇 분 동안 레이아웃 팩을 검토하는 데 몇 분이 걸립니다. 각 페이지를 열고 글꼴 크기, 버튼 색상, 텍스트 간격, 섹션 패딩 및 테두리 스타일과 같이 반복되는 모든 디자인 스타일을 빠르게 나열하십시오. LMS 레이아웃을 검토 한 후 찾은 내용은 다음과 같습니다.

• 글꼴 크기 : 30px는 모든 H3 제목에 사용되며 여러 페이지에서 H2S의 경우 48px
• 글꼴 : Poppins는 모든 제목에 지속적으로 사용됩니다
• 기본 버튼 : 배경색은 흰색 텍스트가있는 #4449E0입니다
• 패딩 : 대부분의 섹션에서는 60px 상단 및 하단을 사용합니다
• Blurb Icons : 아이콘 크기는 24px로 설정됩니다
• Blurb Borders : Blurb 모듈에는 테두리가 적용되지 않습니다
• 섹션 배경 : 녹색 #47be68은 거의 모든 페이지의 바닥 글 섹션에 나타납니다.

이들은 모두 각 모듈 내에서 정적 값으로 수동으로 입력됩니다. 예를 들어, Blurb 모듈은 아이콘 색상과 폭 24px의 #4449E0을 사용합니다.

이와 같은 반복 스타일을 식별하면 설계 변수로 무엇을 변환 해야하는지 정확히 알 수 있습니다.

이 감사 단계는 다음 모든 것을위한 기초를 만듭니다. 레이아웃을 일관되고 유지 관리 할 수있는 체계적인 접근 방식을 구축하는 데 도움이됩니다.

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

레이아웃을 감사하고 반복 스타일을 기록한 후에는 다음 단계는 선호하는 값의 설계 변수를 생성하는 것입니다. 이를 통해 하드 코딩 스타일을 재사용 가능한 토큰으로 바꿀 수 있으므로 나중에 레이아웃을보다 쉽게 업데이트 할 수 있습니다. 우리가 모든 가치를 저장 한 후에는 현재 가치를 우리의 가치로 바꿀 것입니다.

색상 변수 생성

이전의 예에서 Blurb 아이콘이 색상 #4449E0을 사용한다는 것을 알았지 만 기본 브랜드 색상 인 #6C012A로 전환하고 싶습니다. 그렇게하려면 색상 변수를 만들겠습니다.

왼쪽 사이드 바에서 변수 관리자 로 이동 한 다음 색상 열을 엽니 다.

아래로 스크롤하고 + 글로벌 색상 옵션을 추가하십시오 . 변수의 이름을 지정하고 값을 입력하십시오. 변수 저장을 클릭하면 완료됩니다.

숫자 변수 생성

다음으로 Blurbs 주위에 2px 테두리를 추가하고 싶습니다. 따라서 숫자 변수가 필요합니다. 프로세스는 비슷하지만 다른 열에 있습니다. 숫자 열로 이동하십시오. 클릭 + 전역 번호를 추가하고 변수의 이름을 지정하고 값을 할당하고 저장하십시오.

글꼴 변수 생성

또한 모든 제목 글꼴을 내 브랜드 글꼴 인 Askhar로 변경하고 싶습니다. 글꼴 변수가 필요합니다. 글꼴 열로 이동하고, 새 변수를 만들고, 이름을 할당하고, 글꼴을 선택하고, 저장하십시오.

끝났습니다. 이 글꼴은 이제 레이아웃 전체의 모든 제목 텍스트 필드에서 선택할 수 있습니다.

섹션 패딩, 기타 제목 크기 또는 추가 브랜드 색상과 같은 나머지 감사 결과에 대해 동일한 프로세스를 따르십시오. 레이아웃에서 각각의 반복 된 스타일은 변수가 될 수 있습니다.

그렇게하면 육각 코드, 글꼴 이름 또는 특정 값을 기억할 필요가 없습니다. 그들은 당신의 가변 관리자에 살고 모듈과 페이지를 통해 당신을 팔로우합니다. 그리고 무엇보다도, 당신은 찾기 및 교체를 사용하여 다음에 우리가 할 수있는 레이아웃을 적용 할 수 있습니다.

3. 찾기 및 교체를 사용하여 변수를 적용하십시오

우리가 기다리고있는 가장 흥미로운 부분은 다음과 같습니다. 변수가 저장되면이 전체 레이아웃의 스타일을 변경하는 것은 빠르고 쉽습니다. 어떻게 보자.

아이콘의 색상 변경

먼저, 아이콘의 색상을 저장된 기본 브랜드 색상 변수로 변경합시다. Blurb의 설정> 디자인> 이미지 및 아이콘으로 이동하십시오. 이제 아이콘 색상 옵션 위로 마우스를 가져 가서 세 점을 클릭하십시오. 찾기 및 교체를 선택하십시오.

찾기 및 교체 패널에서 변수 관리자 아이콘을 찾아 변수를 선택하기 위해 호버링하기 만하면됩니다.

그리고 마찬가지로 모든 아이콘은 새로운 색상을 가지고 있습니다. 디자인 변수를 저장하는 대신 브랜드 색상을 정적 값으로 할당하여 다른 방식으로 수행 할 수 있었지만 향후 업데이트를 단순화하기위한 추가 단계를 추가했습니다.

어떻게? 모든 레이아웃 페이지를 수정했지만 브랜드 색상을 전환하고 싶다고 상상해보십시오. 모든 페이지를 다시 방문하거나 모듈별로 IT 모듈을 수행하는 것에 대해 압도 당할 필요가 없습니다. 이미 브랜드 색상 디자인 변수를 저장 했으므로 사이트 전체에서 업데이트하려면 값 만 변경하면됩니다.

모든 제목 글꼴 변경

다음으로 모든 제목 글꼴을 내 브랜드 글꼴로 전환합시다. 제목 설정> 디자인> 제목 텍스트에 액세스하십시오. 타이틀 글꼴 위로 마우스를 마우고 찾아서 개방하십시오 . 대체 값 열에서 브랜드 제목 글꼴 변수를 지정하십시오.

모든 blurb 모듈의 테두리 너비 업데이트

테두리 너비 업데이트의 경우 Blurb 모듈 변수를 사용하겠습니다. 프로세스는 일관성이 있습니다. Blurb의 테두리 설정으로 이동하여 찾기 및 교체를 열고 변수를 선택하고 적용하십시오.

설계 변수로 모든 정적 값을 전환 한 후에는 레이아웃 스타일을 변수에 직접 연결할 수 있습니다. 즉, 브랜드 색상을 변경하거나 제목 타이포그래피를 조정하거나 테두리 너비를 조정하려면 교체품을 다시 만들 필요가 없습니다. 변수를 업데이트하면 모든 연결된 요소가 즉시 조정됩니다.

보너스 단계 : 사전 설정 생성 및 저장 (선택 사항)

찾기 및 교체 및 디자인 변수는 확실한 기초를 제공하지만이 시스템을 더욱 기반으로하는 선택적인 단계가 있습니다. 사전 설정을 사용하면 완전한 스타일을 패키지하고 한 번의 클릭만으로 어디서나 재사용 할 수 있습니다.

기본 변수에 만족하면 한 걸음 더 깊이 들어가서 더 세분화 된 스타일을 위해 사전 설정을 만들 수 있습니다. 이것은 방금 걸어 간 핵심 프로세스에는 필요하지 않지만 최대 효율성을 원한다면 탐색 할 가치가 있습니다.

모든 blurbs에 그림자 효과를 추가하고 싶다고 가정 해 봅시다. 매번이 스타일을 수동으로 복사하는 대신 사전 설정으로 저장할 수 있습니다.

완료. 이 사전 설정은 이제 모든 모듈의 사전 설정 드롭 다운에 나타납니다. 다른 모듈에 즉시 적용 할 수 있습니다. 간격, 테두리, 그림자 또는 기타 디자인 조정을 다시 할 필요가 없습니다.

사전 세트를 더욱 강력하게 만드는 것은 유연성입니다. 더 나은 워크 플로 최적화 및 세분화 제어를 위해 다양한 설정 조합에 대한 사전 설정 그룹을 만들 수 있습니다. 예를 들어, 기본 조명, 1 차 및 1 차 조명 개요와 같은 변형이있는 버튼 스타일에 대한 사전 설정 그룹이있을 수 있으며, 각각의 배경, 경계 및 간격을 포함하는 다른 조합을 포함합니다.

이런 식으로, 다른 상황에 대한 옵션을 갖는 동안 일관성을 유지합니다. 사전 설정은 레이아웃에 같은 스타일을 사용하는 10 개 이상의 모듈이있을 때 특히 유용합니다. 메모리 또는 수동 편집에 의존하는 대신 모든 것을 선불로 표준화합니다.

Divi의 옵션 그룹 사전 설정에 대한 모든 것을 배우십시오

저장된 모든 디자인 변수를 적용한 후 전후 버전의 모습은 다음과 같습니다.

4. 다른 페이지에 동일한 프로세스를 적용하십시오

디자인 변수와 사전 설정이 설정되면 나머지 레이아웃 팩을 업데이트하는 것이 훨씬 빨라집니다.

예를 들어 코스 방문 페이지를 사용하십시오. 여기에서 사용 된 동일한 정적 값, 제목 글꼴, 버튼 색상, 블러 브 경계, 아이콘 색상 등이 표시됩니다. 다시, 각 설정을 수동으로 조정하는 대신 관련 모듈을 열고, 찾기 및 교체를 트리거하고 일치하는 설계 변수를 할당하십시오.

모든 페이지에서 각 반복 스타일에 대해이 프로세스를 반복하십시오. 완료되면 전체 레이아웃 팩이 변수 및 사전 설정에 연결되어 향후 편집을 거의 쉽게 편집 할 수 있습니다.

Divi 's Find & Replaring 및 Design 변수를 사용하여 업데이트 된 코스 방문 페이지

찾기 및 교체로 몇 초 만에 레이아웃 전체 편집을 만듭니다

디자인 변수를 설정하고 Divi 5에서 찾기 및 대체하는 데는 약간의 시간이 걸릴 수 있습니다. 그러나 한 번의 레이아웃 팩을 위해 그것을 한 후에는 수십 개의 모듈을 수동으로 클릭하는 것으로 돌아가고 싶지 않을 것입니다.

전체 레이아웃 팩을 산란 된 정적 값에서 연결 설계 시스템으로 변환했습니다. Find & Replace에서 몇 분이 걸리는 것은 페이지별로 페이지별로 모듈별로 모듈을 수행하는 데 몇 시간이 걸렸을 것입니다.

이것은이 프로젝트에서 시간을 절약하는 것이 아닙니다. 당신은 모든 미래의 Divi 프로젝트를보다 빠르고 일관성있게 만들 수있는 설계 시스템을 구축하고 있습니다.