Divi 5의 옵션 그룹 사전 설정에 대해 알아야 할 모든 것

Divi 5의 옵션 그룹 사전 설정 스타일 관리 스타일을 단순화하여보다 효율적이고 확장 가능한 설계 접근 방식을 제공합니다. 더 이상 동일한 스타일을 여러 요소에 적용 할 필요가 없습니다. 옵션 그룹 사전 설정을 사용하면 여러 요소에 걸쳐 테두리, 그림자 및 간격과 같은 옵션 그룹 사전 설정을 생성하고 적용 할 수 있으며, 혼합 및 일치 시키며 글로벌 업데이트를 쉽게 만들 수 있습니다.

이 게시물에서는 옵션 그룹 사전 설정이 Divi 5에서 디자인하는 방식을 변경 하고이 새로운 접근 방식의 이점을 탐색하며 사용 방법을 보여줍니다. 워크 플로를 간소화하고보다 관리 가능한 디자인 시스템을 구축하려는 경우, 이것은 놓치고 싶지 않은 게임 체인저입니다.

새로운 기능을 보려면 다음 비디오를 확인하십시오.

옵션 그룹 사전 설정의 기본 사항 이해

옵션 그룹 사전 설정의 구현을 시작하기 전에이 새로운 고급 기능을 더 잘 이해하는 데 도움이되는 몇 가지 기본 사항을 논의 해 봅시다.

옵션 그룹 사전 설정이 설명되었습니다

Divi 5의 옵션 그룹 사전 설정을 통해 사용자는 웹 사이트의 여러 요소에 적용 할 수있는 재사용 가능한 디자인 스타일을 만들 수 있습니다. 요소 사전 설정 (한동안 Divi에 있었음)과 달리,이 사전 설정은 모든 요소에서 작동하여 배경, 국경, 타이포그래피 등을위한 일관된 스타일을 가능하게합니다.

전 세계적으로 계층화, 결합 및 업데이트 될 수있어 응집력있는 디자인 시스템을 더 쉽게 유지하면서 반복적 인 스타일링 작업을 줄일 수 있습니다.

더욱 글로벌 제어

옵션 그룹 사전 설정 전에 Divi의 스타일링 요소는 수동 조정 또는 특정 요소 (섹션, 행, 열, 모듈)의 모든 설계 설정을 제어하는 ​​요소 사전 설정을 적용해야했습니다. 요소 사전 설정은 여전히 ​​중요하고 일관성을 유지하는 데 도움이되지만 주로 스타일 자체 대신 전체 요소에 중점을 둡니다. 그리고 그 스타일은 모든 요소에 적용될 수 있습니다. 하나의 특정 소스에서 철회 할 수 있으므로 각 요소의 스타일을 더 이상 반복 할 필요가 없습니다.

옵션 그룹 사전 설정을 사용하면 요소 사전 설정이 더욱 효율적입니다. 가장 효과적인 결과를 얻기 위해 결합 할 수 있습니다.

옵션 그룹 사전 설정은 언제 만들어야합니까?

옵션 그룹 사전 설정을 구현하는 방법에는 여러 가지가 있지만 일반적으로 더 빨리 생성할수록 좋습니다. 웹 사이트 빌드에서 옵션 그룹 사전 설정으로 일찍 시작하면 편집 할 때 시간을 절약 할 수 있습니다.

곧 옵션 그룹 사전 설정은 요소 사전 설정 내부에서도 살 수 있으므로 요소 사전 설정을 만들기 전에 자연스럽게 만듭니다. 이제 처음부터 새로운 웹 사이트를 구축한다고 가정 해 봅시다. 이 빌드에 접근 할 수있는 방법은 다음과 같습니다.

1. 첫 페이지를 디자인하십시오
2. 스타일을 옵션 그룹 사전 설정으로 바꿉니다
3. 요소 사전 설정 안에 옵션 그룹 사전 설정을 포함하십시오

이 프로세스는 선형이 아니며 첫 페이지 초안에 만족할 때까지 옵션 그룹 사전 설정과 요소 사전 설정 사이를 오가는 것을 알 수 있습니다.

옵션 그룹 사전 설정을 사용할 수있는 스타일

오른쪽 상단 모서리에 옵션 그룹 사전 설정 아이콘이있는 모든 스타일은 하나로 바꿀 수 있습니다.

옵션 그룹 사전 설정은 타이포그래피, 색상, 배경, 국경, 간격, 그림자, 효과, 사이징, 레이아웃, 위치 및 애니메이션을 포함한 다양한 설계 설정에서 생성 및 적용 할 수 있습니다. 이러한 사전 설정은 디자이너가 반복적 인 수동 조정없이 구조화되고 재사용 가능한 설계 시스템을 만들 수 있습니다.

Divi의 옵션 그룹 사전 설정에 대한 가장 큰 장점 중 하나는 경쟁 업체와 강력하게 설정하는 CSS에만 초점을 맞추는 것이 아니라는 것입니다. 또한 스크립트를 사용하여 구축 된 효과도 포함됩니다. 조건 옵션, HTML 백그라운드 비디오, 스크롤 효과 등과 같이 Divi가 제공하는보다 대화 형 기능에서이를 알 수 있습니다.

두 번 이상 사용할 디자인 인스턴스는 사전 설정으로 바꿀 가치가 있습니다. 따라서 디자인을보다 쉽게 ​​업데이트 할 수 있습니다.

옵션 그룹 사전 설정을 구현하는 방법

기본 사항에 대해 이야기 했으므로 옵션 그룹 사전 설정의 구현에 중점을 두겠습니다. 모든 것을 가능한 한 간단하고 간단하게 유지하기 위해 간단한 테두리 사전 설정을 만드는 데 중점을 둘 것입니다. 다른 사전 설정을 만드는 방법은이 사용 사례와 동일합니다.

예 : 국경 사전 설정 만들기

옵션 그룹 사전 설정을 만드는 것은 매우 간단합니다. 국경 사전 설정을 단계별로 만드는 과정을 살펴 보겠습니다. 우리는 설계 포트폴리오 레이아웃 팩과 함께 제공되는 홈페이지 레이아웃을 사용하고 있지만 원하는 다른 레이아웃을 자유롭게 사용하십시오.

1 단계 : 요소 설정 열기 (열 설정)

Divi Builder에서 스타일을 유지하려는 모듈 (예 : 열)을 선택하십시오.

2 단계 : 디자인 탭으로 이동합니다

모듈 설정 내에서 디자인 탭을 클릭하십시오. 아래로 스크롤하여 테두리 섹션을 찾으십시오.

3 단계 : 테두리를 추가하십시오

사용 가능한 옵션에서 테두리 스타일을 선택하십시오. 일을 단순하게 유지하기 위해 우리가 할 수있는 유일한 일은 1px 테두리를 검은 색으로 추가하는 것입니다.

4 단계 : 옵션 그룹 사전 설정으로 저장하십시오

테두리 설정의 오른쪽 상단에있는 아이콘을 클릭하여 새 사전 설정을 만듭니다. 사전 설정에 설명 이름을 부여하십시오 (예 : 국경 - 줄 지어). 사전 설정 저장을 클릭하여 마무리하십시오.

다른 요소에 사전 설정된 테두리를 적용합니다

옵션 그룹 사전 설정을 만들었으므로 이제 다른 요소에 적용 할 때입니다. 스타일링 섹션, 행, 열 또는 모듈을 사용하든 사전 설정을 사용하면 최소한의 노력으로 균일 한 디자인을 달성 할 수 있습니다. 다음 단계를 따라 저장된 테두리 사전 설정을 적용하십시오.

1 단계 : 다른 요소를 선택하십시오

스타일을 유지하려는 다른 모듈 (예 : 이미지 모듈)을 엽니 다. 디자인 탭에서 국경 설정으로 이동하십시오.

2 단계 : 국경 사전 설정을 적용하십시오

옵션 그룹 사전 설정 아이콘을 찾아이 게시물의 이전 부분에서 만든 사전 설정을 선택하십시오.

옵션 그룹 사전 설정을 요소 사전 설정과 결합하십시오

경우에 따라 요소 레벨에만 특정 설정을 적용 할 수 있습니다. 서로 옆에 2 개의 열이 있다고 가정 해 봅시다. 그리고 동일한 설정을 모두 공유하지만 같은 테두리를 공유하고 싶다고 가정 해 봅시다. 이 경우 두 열 모두에 공유 열 사전 설정을 사용할 수 있지만 각각 다른 테두리 사전 설정을 적용 할 수 있습니다.

1 단계 : 새 열 사전 설정을 만듭니다

첫 번째 열을 열고 오른쪽 상단에 현재 스타일에서 새 사전 설정을 만듭니다. 설명 이름을 지정하고 설정을 저장하십시오.

2 단계 : 열 사전 설정과 함께 테두리 사전 설정을 활성화합니다

이제 행의 두 번째 열로 이동하십시오. 열 2에 우선적 인 요소 수준 설정이 없는지 확인했습니다. 일단 거기에 있으면 이전 단계에서 사전 설정을 활성화하십시오.

이 시점에서 두 열 모두 동일한 요소 사전 설정을 공유하지만 첫 번째 열에 만 추가 테두리 사전 설정이 포함되어 있습니다 (향후 다른 요소에서도 사용할 계획).

옵션 그룹 기본값을 기본값으로 할당합니다

옵션 그룹 사전 설정의 또 다른 훌륭한 옵션은 기본값으로 만드는 기능입니다. 즉, 특정 스타일링 기능이 포함 된 요소를 추가하자마자 선택한 기본 스타일이 적용됩니다. 이것은 특히 타이포그래피, 색상 및 버튼에 유용합니다.

예를 들어 버튼을 가져 가자. 버튼 스타일은 연락처 양식 모듈, CTA 모듈, 이메일 optin 모듈 등을 포함한 여러 모듈의 일부입니다. 하나의 특정 스타일 이이 모든 버튼에 자동으로 적용하려면 옵션 그룹 사전 설정에서 가능합니다. 어떻게 보자.

1 단계 : 연락처 페이지 내에서 연락처 양식 모듈을 엽니 다.

이 특정 예에서는 설계 포트폴리오 레이아웃 팩에 포함 된 연락처 페이지를 사용하겠습니다. 새 페이지를 만들면이 레이아웃 (또는 다른 연락처 레이아웃)을 업로드하십시오. 그런 다음 해당 레이아웃 내부에서 찾을 수있는 연락처 양식 모듈의 설정을 엽니 다.

2 단계 : 정적 스타일에서 옵션 그룹 사전 설정을 만듭니다

옵션 그룹 사전 설정을 만드는 것은 쉽습니다. 두 가지 옵션이 있습니다. 처음부터 하나를 만들거나 기존 정적 스타일을 옵션 그룹 사전 설정으로 바꿀 수 있습니다. 연락처 양식 모듈 안에 설계된 버튼이 있으므로 다시 스타일링 할 필요가 없으며 대신 옵션 그룹 사전 설정에 대한 이러한 설정을 재사용 할 수 있습니다. 디자인 탭으로 이동하여 버튼 설정을 엽니 다.

이 설정 그룹의 오른쪽 상단 모서리를 마우기하면 아이콘이 나타납니다. 이 아이콘을 클릭하십시오.

"현재 스타일에서 새로운 사전 설정"을 선택하고 버튼에 "기본 버튼"과 같은 설명 이름을 제공하십시오.

3 단계 : 버튼 스타일을 기본값으로 할당합니다

이 버튼 스타일을 웹 사이트의 모든 버튼의 기본값으로 만들려면 "기본값으로 할당"옵션을 전환하고 사전 설정 설정을 저장하십시오.

4 단계 : 결과를 확인하려면 새롭지 않은 이메일 Optin 모듈 추가

버튼 설정이있는 모듈을 추가하자마자 새 기본값이 적용됩니다. 이는 초기 옵션 그룹 사전 설정을 생성하는 연락처 양식 모듈 만으로만 국한되지 않지만 버튼 설정이있는 모든 요소로 확장됩니다. 버튼 설정이 포함 된 모듈 중 하나는 Call To Action 모듈입니다.

새로운 사전 설정이 작동하는 것을 보려면 연락처 양식 모듈 바로 아래에 새롭지 않은 새로운 이메일 Optin 모듈을 추가하십시오.

이 새로 추가 된 모듈 내부의 버튼에는이 튜토리얼의 이전 부분에 적용한 새로운 기본 스타일이 포함되어 있음을 알 수 있습니다.

전 세계적으로 사전 설정 편집

버튼 사전 설정의 예를 계속하겠습니다. 이것은 전체 웹 사이트의 모든 버튼의 기본값 이므로이 버튼의 스타일을 업데이트하면 엄청난 시간을 절약 할 수 있습니다. 우리는 한 번만 편집하면되며 변경 사항은 전체 웹 사이트 전체에 적용됩니다.

기존 사전 설정을 편집하려면 모듈 중 하나 내부를 찾으십시오.

버튼을 사전 설정하고 기어 아이콘을 클릭하십시오. 이렇게하면 모든 수정이 발생할 수있는 화면이 열립니다. 예를 들어 테두리 반경을 5px로 변경합시다. 이 버튼 사전 설정이 사용 된 모든 인스턴스에서 어떻게 즉시 적용되는지 알 수 있습니다.

항상 "사전 설정 저장"을 클릭하십시오.이 사전 설정을 사용한 모든 인스턴스에 영향을 줄 수 있다는 경고가 제공됩니다.

옵션 그룹 사전 설정 사용의 주요 이점

옵션 그룹 사전 설정을 사용하기 시작하면 과거에 어떻게 사용한 적이 없는지 상상하기가 어렵습니다. 오늘 새로운 옵션 그룹 사전 설정으로 Divi 5를 탐색 해야하는 이유에 대해 논의 해 봅시다.

1. 더 빠르고 효율적인 설계 워크 플로우

옵션 그룹 사전 설정을 사용하면 더 이상 다른 요소에서 디자인 변경을 수동으로 반복 할 필요가 없습니다. 사전 설정을 만들면 보편적으로 적용 할 수 있습니다. 설계 업데이트가 필요한 경우 사전 설정을 수정하면 사용하는 모든 요소가 자동으로 업데이트되어 시간과 노력을 절약하십시오.

2. 확장 성

웹 사이트가 성장함에 따라 일관된 디자인을 유지하는 것은 어려운 일이 될 수 있습니다. 옵션 그룹 사전 설정을 사용하면 모든 요소가 통합 된 스타일을 따를 수 있도록 설계를 효율적으로 확장 할 수 있습니다. 소기업 웹 사이트 나 대기업 프로젝트를 관리하든 사전 설정은 깨끗하고 구조화 된 설계 시스템을 유지하는 데 도움이됩니다.

3. 더 쉬운 협업

옵션 그룹 사전 설정은 동일한 프로젝트에서 작업하는 디자이너들 사이에서 협업을 더 매끄럽게 만듭니다. 여러 요소를 수동으로 업데이트하는 대신 팀원은 사전 설정을 사용하여 표준화 된 스타일을 신속하게 적용 할 수 있습니다. 또한, 변경을 요청하는 클라이언트는 개별 요소를 개별적으로 수정하지 않고도 사전 설정 수준에서 편집 할 수 있기 때문에보다 간소화 된 프로세스의 혜택을받을 수 있습니다.

4. 현장 요소에 걸친 일관성

설계 일관성은 전문 웹 사이트의 경우 중요합니다. 옵션 그룹 사전 설정을 사용하면 모든 버튼, 제목 및 배경이 동일한 설계 규칙을 따를 수 있습니다. 이는 불일치를 제거하고 모든 페이지에서 브랜드 아이덴티티를 유지하는 데 도움이됩니다.

5. 최소한의 노력으로 쉬운 글로벌 업데이트

각 요소의 스타일을 수동으로 업데이트하는 대신 옵션 그룹 사전 설정을 사용하면 전역 변경을 쉽게 변경할 수 있습니다. 사전 설정에 대한 단일 조정은이를 사용하는 모든 요소를 ​​즉시 업데이트하여 수정에 소요 된 시간을 줄이고 전체 웹 사이트에서 균일 성을 보장합니다.

오늘 Divi 5부터 시작하십시오

옵션 그룹 사전 설정은 Divi 5에 강력한 추가 기능으로 웹 사이트 디자인을 관리하는 유연하고 효율적인 방법을 제공합니다. 이러한 사전 설정을 활용하면 워크 플로를 간소화하고 설계 일관성을 유지하며 글로벌 업데이트를 쉽게 업데이트 할 수 있습니다. 오늘 옵션 그룹 사전 설정 사용을 시작하고 웹 디자인 프로젝트에서 새로운 수준의 제어 및 효율성을 경험하십시오.