사전 설정 기반 디자인이 Divi Design 패러다임을 변화시키는 방법

Divi의 디자인 기능은 Divi 5에 옵션 그룹 사전 설정을 도입함으로써 진화했습니다. 요소 사전 설정은 오랫동안 완전히 스타일링 된 요소를 쉽게 저장하고 재사용 할 수 있었지만 새로운 옵션 그룹 사전 설정은 다양한 요소에 걸쳐 설계 속성을 재사용 할 수있게하여 유연성 층을 추가합니다.

이러한 내장 된 Divi 기능은 함께 디자이너가 일관성과 효율성에 접근하는 방법을 재구성하여 더 빠른 디자인 반복과 더 쉬운 글로벌 업데이트를 가능하게합니다. 이 게시물에서는이 사전 설정이 어떻게 협력하여 Divi 5 디자인 워크 플로우를 변화시킬 것입니다!

사전 설정 기반 디자인의 두 기둥

세부 사항을 살펴보기 전에 Divi의 사전 설정 기반 디자인을 강력하게 만드는 두 가지 주요 구성 요소를 이해하는 것이 중요합니다. 요소 사전 설정과 옵션 그룹 사전 설정을 결합하면보다 효율적이고 일관되며 확장 가능한 설계 프로세스를 만들 수 있습니다. 이 두 기둥과 디자인 워크 플로우를 높이기 위해 어떻게 협력하는지 살펴 보겠습니다.

요소 사전 설정 : 재사용 가능한 설계 패키지

요소 사전 설정은 특정 디비 요소에 대한 전체 설계 구성을 저장합니다. Divi에는 현재 모듈, 열, 행 및 섹션의 4 가지 요소 유형이 있습니다. 모듈과 관련하여 요소 사전 설정은 모듈 유형 (버튼, 텍스트, CTA 등)에 고유합니다. 요소 사전 설정을 적용하면 타이포그래피, 색상, 간격 및 효과와 같은 모든 관련 설정이 적용될 때 즉시 상속됩니다. 요소 사전 설정의 초점은 다음과 같습니다.

• 페이지 전체에서 시각적 일관성을 보장하십시오
• 반복 스타일 작업을 줄입니다
• 더 빠른 편집을 위해 글로벌 업데이트를 허용합니다

옵션 그룹 사전 설정 : 모듈 식 설계 제어

옵션 그룹 사전 설정은 타이포그래피, 박스 그림자, 국경 및 스크롤 효과와 같은 스타일링 속성에 중점을 둡니다. 그들은 여러 요소에 걸쳐 일하면서 디자이너가 단일 요소 유형에 묶이지 않고 스타일을 믹싱하고 일치시킬 수 있습니다. 예를 들어 행과 모듈 모두에서 동일한 Box Shadow Preset을 사용할 수 있습니다. 옵션 그룹 사전 설정 사용의 주요 이점은 다음과 같습니다.

• 공유 스타일을 다른 요소에 적용하십시오
• 고급 사용자 정의를 위해 쌓을 수 있습니다
• 개별 모듈에 영향을 미치지 않고 실시간 글로벌 편집을 허용합니다

사전 설정으로 구조화 된 워크 플로 생성

이제 우리는 Divi의 두 가지 사전 설정 기둥을 보여 주었고 차이점을 간단히 설명했습니다. 구조화 된 워크 플로우를 만들기위한 몇 가지 팁을 살펴 보겠습니다.

1 단계 : 옵션 그룹 사전 설정으로 핵심 스타일을 정의하십시오

웹 사이트의 핵심 디자인 원칙을 설정하여 시작하십시오. 여기에는 타이포그래피, 색상, 버튼 스타일, 간격 등이 포함됩니다. 이러한 기본 요소는 웹 사이트 전체에서 일관성을 유지하는 데 필수적입니다.

지속적으로 반복되는 설정의 경우 옵션 그룹 사전 설정을 기본값으로 설정하도록 선택할 수 있습니다. 이에 대한 좋은 예는 단락 텍스트를 스타일링하고 기본값으로 사용하는 것입니다.

옵션 그룹 사전 설정은 다재다능하고 재사용 가능하므로 여러 요소에 이러한 설정을 적용 할 수 있습니다. 예를 들어, 텍스트 -Shadow 사전 설정을 정의하면 웹 사이트의 모든 요소 유형에 걸쳐 사전 설정을 적용 할 수 있습니다. 이 단계에서는 나머지 디자인의 토대를 마련하고 있으며이 사전 설정은 웹 사이트의 빌딩 블록 역할을해야합니다.

2 단계 : 특정 모듈에 대한 요소 사전 설정을 만듭니다

핵심 스타일을 정의한 후에는 다음 단계는보다 구체적인 디자인 요소에 대한 요소 사전 설정을 만드는 것입니다. 이 순서를 따르는 것은 이론적으로 가장 논리적이지만, 종종 동시에 두 가지를 만들게 될 것입니다. 요소 사전 설정은 개별 요소 (섹션, 행, 열, 모듈)에 대한 완전한 설계 패키지이며 사이트 전체에서 일관된 스타일을 빠르게 적용 할 수 있습니다.

사전 정의 된 옵션 그룹 사전 설정을 사용하여 사전 스타일의 CTA 버튼을 설계하여 버튼의 타이포그래피, 배경색 및 호버 효과에 중점을 둡니다.

이것을 향후 사용하기위한 요소 사전 설정으로 저장하십시오. 평가 모듈, 특징 섹션 또는 가격표와 같은 다른 반복 요소를 구축하고 그에 따라 스타일링하십시오. 이러한 사전 스타일 모듈 각각은 필요할 때마다 적용 할 수있는 요소 사전 설정으로 저장할 수 있습니다.

디자인 할 때 Divi 라이브러리에 이러한 사전 설정이 포함 된 레이아웃을 저장하는 방법을 생각해보십시오. 이를 통해 모든 디자인의 개요를 유지하여 만든 모든 사전 설정 스타일을 추적 할 수 있습니다. 처음부터 모든 것을 완벽하게 만드는 것에 대해 걱정할 필요가 없습니다. 사이트를 구축 할 때 이러한 요소를 조정하면 가능합니다.

3 단계 : 필요에 따라 구현 및 조정

옵션 그룹과 요소 사전 설정을 만든 후에는 웹 사이트에 적용 할 수 있습니다. 디자인 소프트웨어를 미리 사용하지 않고 처음부터 웹 사이트를 작성하는 경우 첫 페이지 빌드에서 이미 사전 설정을 적용 할 가능성이 높습니다.

작업 할 때 요소 레벨에서 조정해야 할 수도 있습니다. 예를 들어, 증언 모듈에 사전 설정을 적용하지만 특정 페이지에서 간격을 변경 해야하는 경우 사이트의 나머지 부분에 영향을 미치지 않고도 그렇게 할 수 있습니다. 이 유연성을 통해 갈 때 조정할 수 있으므로 설계가 확장 가능하고 적응력이 유지 될 수 있습니다.

여기서 핵심은 사전 설정을 정확하게 따라야하는 엄격한 프레임 워크보다는 유연하고 응집력있는 디자인 시스템을 만드는 도구로 생각하는 것입니다. 계속 구축 할 때 스타일을 조정해야하므로 필요할 때는 사전 설정을 자유롭게 수정하고 요소 레벨에서 비정시하십시오. 디자인을 계속 수정하고 Divi의 실시간 편집을 최대한 활용하여 이러한 조정을 즉시 조정하십시오.

4 단계 : Divi Library 내에서 스타일을 구성하십시오.

모든 요소 사전 설정 및 레이아웃을 추적하려면 Divi 라이브러리에 보관할 수있는 레이아웃에 저장하십시오.

사이트가 성장함에 따라 저장된 사전 설정을 조정하여 디자인을 개선 할 수 있습니다. 작업중 인 요소 내부에서 항상 사전 설정을 수정할 수 있습니다. 사전 설정을 업데이트하면 전체 웹 사이트 전체에서 업데이트됩니다.

5 단계 : 반복 및 개선

Divi의 사전 설정 시스템의 가장 큰 장점 중 하나는 디자인을 지속적으로 개선하고 개선하는 능력입니다. 더 많은 페이지와 레이아웃을 구축 할 때 옵션 그룹과 요소 사전 설정을 다시 방문하여 전역 조정을 수행하십시오.

기본 버튼 색상을 변경하거나 모든 제목의 글꼴 크기를 업데이트하기로 결정한 경우 한 번 수행 할 수 있으며 사전 설정이 적용되는 모든 인스턴스에서 사이트 전체에 반사 할 수 있습니다.

계속 일할 때 어떤 요소가 함께 잘 작동하고 추가 조정이 필요한지 더 깊이 이해할 수 있습니다. 갈 때 사전 설정을 수정하는 것을 두려워하지 말고 진화하는 디자인 비전에 맞는 작은 변화를 만들기 위해 Divi의 유연성을 활용하지 마십시오.

사전 설정을 지속적으로 반복하고 개선함으로써, 응집력이있을뿐만 아니라 향후 변화 또는 설계 트렌드에도 적응할 수있는 사이트를 만들게됩니다. 사전 설정 시스템은 프로세스를 간소화하는 데 도움이되는 도구입니다. 첫날부터 엄격하게 따라야하는 일련의 규칙이 아닙니다.

사전 설정 기반 워크 플로의 이점

이제 우리는 Divi Presets를 사용하여 구조화 된 워크 플로우를 만드는 기본 사항을 살펴 보았 으므로이 접근 방식과 함께 제공되는 몇 가지 이점을 살펴 보겠습니다.

속도 : 즉시 사용 가능한 사전 설정으로 설계 시간을 줄입니다

Divi의 사전 설정 시스템을 사용하면 웹 사이트를 디자인하는 데 걸리는 시간을 크게 줄일 수 있습니다. 요소를 설계해야 할 때마다 처음부터 시작하는 대신 요소와 옵션 그룹 사전 설정을 작성하고 재사용하십시오. CTA 버튼, 제목 스타일 또는 평가 모듈이든,이 사전 설정을 사용하면 한 번의 클릭으로 완전한 디자인 패키지를 적용 할 수 있습니다.

예를 들어, 옵션 그룹 사전 설정으로 테두리 스타일을 설계 한 후에는 작업을 다시 할 필요없이 모든 페이지에 지속적으로 적용 할 수 있습니다.

요소 사전 설정은 전체 프리 스타일 모듈을 재사용하여 더 많은 시간을 절약합니다. 한 번의 클릭만으로 완전히 설계된 모듈을 배포하여 레이아웃이 비전과 즉시 일치하도록 할 수 있습니다.

디자인에 대한 즉시 사용 가능한 접근 방식을 사용하면 개별 요소를 스타일링하는 반복적 인 작업 대신 더 빠르게 구축하고 프로젝트의 창의적인 측면에 집중할 수 있습니다.

일관성 : 페이지 전체에서 균일 한 스타일을 유지합니다

사전 설정 기반 워크 플로의 주요 장점은 일관성입니다. 요소 및 옵션 그룹 사전 설정을 사용하면 웹 사이트의 모든 페이지가 타이포그래피에서 간격에 이르기까지 동일한 설계 규칙을 준수해야합니다.

단일 옵션 그룹 사전 설정을 버튼 기본값으로 설정하면 사이트의 글꼴 크기 및 스타일이 나타나더라도 균일하게 유지되도록합니다. 이 일관성은 사이트의 시각적 정체성을 강화하고 세련되고 응집력있는 모습을 제공합니다.

다른 페이지에서 일관되지 않은 스타일을 다루지 않고 사용자 경험을 향상시키고 사이트를보다 전문적으로 보이게하는 통합 설계 시스템을 유지할 수 있습니다.

확장 성 : 사이트 설계를 쉽게 확장 및 업데이트합니다

사전 설정은 웹 사이트가 성장함에 따라 매우 쉽게 확장 할 수있게합니다. 새 페이지를 추가하거나 기존 페이지의 디자인을 수정하든 디자인을 빠르고 효율적으로 업데이트 할 수 있습니다. 새 페이지를 추가 해야하는 경우 기존 요소 및 옵션 그룹 사전 설정을 적용하여 새 페이지가 사이트 디자인의 나머지 부분에 완벽하게 맞는지 확인하십시오.

글로벌 업데이트를해야합니까? Divi의 사전 설정 시스템을 사용하면 사전 설정을 한 번 변경하고 해당 사전 설정이 적용되는 모든 인스턴스에서 자동으로 반영 할 수 있습니다. 예를 들어, 사이트의 모든 버튼 색상을 변경하려면 사전 설정된 버튼을 업데이트하면 사전 설정에 링크 된 모든 버튼이 즉시 업데이트됩니다.

이 확장 성은 사이트가 발전함에 따라 각 요소를 개별적으로 재 작업하지 않고도 설계를 계속 성장시킬 수 있음을 의미합니다. 블로그, 신제품 또는 완전히 새로운 섹션을 추가하더라도 디자인은 응집력 있고 일관되게 유지됩니다.

유연성 : 시스템을 깨지 않고 개별 요소를 무시합니다

사전 설정은 웹 디자인에 대한 구조화 된 접근 방식을 제공하지만 여전히 유연성을 허용합니다. 특정 요소를 조정 해야하는 경우 나머지 디자인에 영향을 미치지 않고 해당 요소의 사전 설정을 무시할 수 있습니다.

예를 들어, 요소 사전 설정을 Blurb 모듈에 적용하지만 특정 인스턴스에 대한 아이콘 크기 또는 간격을 조정 해야하는 경우 사이트의 다른 곳에서 사전 설정된 다른 인스턴스에 영향을 미치지 않고 모듈에서 직접 변경할 수 있습니다. 옵션 그룹 사전 설정을 사용하면 사이트 전체의 핵심 스타일을 유지하면서 특정 요소에 대해 글꼴 크기 또는 버튼 색상과 같은 개별 설정을 조정할 수 있습니다.

이 유연성은 사이트의 고유 한 섹션에 대한 맞춤형 모양을 달성하는 데 핵심입니다. 사전 설정이 제공하는 일관성과 구조를 깨지 않고 세부적인 사용자 정의를 허용합니다. 디자인이 발전함에 따라 필요에 따라 미세 조정 요소를 계속 유지하여 제어 균형과 편의성을 제공하여 프로세스를 더 매끄럽고 적응력있게 만듭니다.

Divi 5의 사전 설정으로 더 똑똑한 설계를 시작하십시오

사전 설정 기반 워크 플로를 수용하면 Divi로 웹 사이트를 구축하는 방법을 재정의합니다. 요소 사전 설정 및 옵션 그룹 사전 설정을 함께 활용하면 시각적으로 놀랍고 적응력이 풍부하며 관리하기 쉬운 웹 사이트를 만들 수 있습니다. 옵션 그룹 사전 설정은 Divi 5에서 독점적으로 사용할 수 있으므로 이제 Divi 5 인터페이스에 익숙해지기 가장 좋은시기입니다!