Divi 5의 속성 관리에 대해 알아야 할 모든 내용

Divi 5는 웹 사이트 구축에 대한 간소화 된 접근 방식을 소개합니다. 글꼴에서 색상, 간격에 이르기까지 모든 디자인 조정은 사이트에서 쉽게 흐르고 반복적 인 작업을 절약합니다. Divi 5의 속성 관리 기능을 사용하면 웹 사이트를 더 빠르고 유연성을 높이면 Divi 5 Alpha 단계의 실용적인 새로운 기능 롤아웃이 될 수 있습니다.

이 게시물에서는 Divi 5의 속성 관리에 대해 알아야 할 모든 내용, 즉 디자이너에게 도움이되는 것, 응집력 있고 전문적인 웹 사이트를 더 빠르고 효율적으로 구축하는 방법을 사용하는 방법에 대해 알아야합니다.

Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 기존 사이트를 Divi 5로 변환하는 것은 권장하지 않습니다.

다이빙합시다.

Divi 5의 속성 관리 란 무엇입니까?

Divi 5의 속성 관리는 웹 디자이너가 웹 사이트에서 스타일, 사전 설정 및 컨텐츠를 관리하고 적용하는 방식을 향상시킬 수있는 기능입니다. 버튼의 타이포그래피 스타일을 변경하든 전체 CTA 모듈의 스타일을 복제하거나 섹션의 기본값을 기본값으로 재설정하면 프로세스가 더 쉽고 빠르며 직관적입니다.

이 기능은 비주얼 빌더에 통합되며 메뉴와 설정 패널을 마우스 오른쪽 버튼으로 클릭하여 액세스 할 수 있습니다. 이 접근법은 Divi의 사전 설정 기반 설계 접근법의 초석입니다.

속성 관리의 주요 구성 요소

속성 관리는 세분화 제어와 사전 설정 통합의 두 가지 주요 기둥에 구축됩니다.

속성에 대한 과립 제어

디자이너는 전체 CTA 모듈, 옵션 그룹 사전 설정 (타이포그래피 또는 테두리 스타일), 탭 (디자인, 컨텐츠 또는 고급) 또는 개별 필드 (버튼의 배경색)와 같은 여러 레벨에서 속성을 관리 할 수 ​​있습니다. 이 유연성은 광범위하고 정확한 조정을 허용합니다. 예를 들어, 모듈의 모든 속성을 복사하거나 테두리 스타일 만 다른 요소에 붙여 넣어 원치 않는 변경없이 필요한 것을 정확하게 적용 할 수 있습니다.

옵션 그룹 및 요소 사전 설정과 통합

속성 관리는 Divi 5의 사전 설정 시스템과 함께 작동합니다. 옵션 그룹 사전 설정은 사이트 전체의 일관성을 위해 여러 모듈에 적용 할 수있는 배경, 테두리 또는 패딩 스타일과 같은 재사용 가능한 스타일 세트입니다.

반면에 요소 사전 설정은 Blurb, CTA, Actorion 또는 Slider와 같은 설계 모듈과 함께 작동하는 사전 스타일의 설계 패키지입니다. 속성 관리를 통해 이러한 사전 설정 또는 해당 속성을 복사하여 붙여 넣을 수 있으므로 웹 사이트에서 복잡한 디자인을 쉽게 복제하거나 특정 스타일을 업데이트 할 수 있습니다.

속성 관리가 중요한 이유

Attribute Management는 디자이너와 개발자가 Divi를 통해 웹 사이트를 더 빠르고 효율적으로 구축 할 수 있도록합니다. 단일 클릭으로 사전 설정을 적용하거나 속성을 복사하면 정밀도를 유지하면서 빠른 프로토 타이핑 및 대규모 스타일 변경이 가능합니다. Divi 5의 사전 설정 중심의 프레임 워크의 중추로서 아름답고 응집력있는 웹 사이트를 쉽게 만드는 데 집중할 수 있습니다.

Divi의 사전 설정 이해 5

사전 설정은 Divi 5의 효율적인 설계 워크 플로의 초석으로 일관되고 확장 가능한 웹 사이트를 쉽게 할 수 있습니다. 속성 관리를 어떻게 향상시키는 지 살펴 보겠습니다.

속성 관리로 기능이 향상되었습니다

사전 설정을 카피 및 페이스트 워크 플로에 통합하여 Divi 5는 디자이너가 다음을 수행 할 수 있도록합니다.

재현 디자인은 효율적으로 디자인합니다

Element Presets를 사용하면 사용자가 완전한 모듈 디자인 (예 : 완전히 스타일링 된 CTA 모듈)을 복사하여 다른 곳에 붙여 넣어 단일 작업으로 동일한 스타일과 콘텐츠를 보장 할 수 있습니다. 요소 사전 설정을 붙여 넣으면 CTA의 배경, 타이포그래피 및 버튼 스타일을 다른 모듈에 즉시 적용 할 수 있습니다.

대상 스타일을 적용하십시오

옵션 그룹 사전 설정과 같은 타겟팅 스타일을 복사하여 붙여 넣을 수 있습니다. 단일 디자인 요소를 복사하고 붙여 넣는 기능을 통해 세분화 된 제어를 가능하게하여 디자이너는 테두리, 그림자 또는 제목의 디자인 설정과 같은 여러 요소에서 특정 스타일 속성을 복사하여 붙여 넣을 수 있습니다. 이를 통해 콘텐츠 나 레이아웃과 같은 관련없는 속성을 덮어 쓰지 않고 사이트 전체의 일관성을 보장합니다.

사전 설정 수동 ​​스타일을 줄임으로써 속성 관리를 간소화하여 웹 사이트 전체에서 응집력있는 디자인을 유지할 수 있습니다. 개별 요소와 글로벌 디자인 시스템을 연결하여 빠른 업데이트와 일관된 스타일을 가능하게합니다.

실용적인 예

CTA 모듈에서 일관된 버튼 스타일이있는 다중 페이지 웹 사이트를 디자인하는 시나리오를 고려하십시오. 사전 설정 및 속성 관리가 함께 작동하는 방법은 다음과 같습니다.

먼저 브랜딩 버튼 이라는 옵션 그룹 사전 설정을 정의하십시오. 속성 관리를 사용하면 CTA의 버튼 에서이 사전 설정을 복사하여 페이지에있는 섹션, 영웅 또는 페이지의 다른 버튼에 버튼에 붙여 넣을 수 있습니다. 이렇게하면 모든 버튼이 사전 설정 설정을 그대로 유지하면서 전체 웹 사이트에서 동일한 모양과 느낌을 공유 할 수 있습니다.

속성 관리의 작동 방식

Divi 5의 속성 관리 시스템은 모듈, 열, 행 및 섹션에서 속성을 복사, 붙여 넣기 및 재설정하는 도구를 사용하여 스타일링 및 디자인 요소를 단순화합니다.

속성을 복사합니다

프로세스는 간단합니다. 모든 요소 (모듈, 열, 행 또는 섹션)를 마우스 오른쪽 버튼으로 클릭하고 속성 사본을 선택하십시오. 이렇게하면 컨텐츠, 스타일 및 모듈과 관련된 사전 설정을 포함한 모든 속성이 캡처됩니다. 또는 Mac의 키보드 단축키 ( Shift + Command + C 또는 Windows 컴퓨터의 Shift + Alt + C를 사용하여 모듈 설정에 액세스하지 않고 스타일을 복사 할 수 있습니다.

보다 세분화 된 제어를 위해보다 정확한 제어를 위해 현장, 옵션 그룹 또는 요소 사전 설정 레벨에서 속성을 복사 할 수 있습니다. 예를 들어 특정 필드 그룹 위에서 마우스 오른쪽 버튼을 클릭하여 제목 모듈의 컨텐츠 탭으로 가서 제목, 링크, 배경 또는 관리자 레이블 속성을 복사 할 수 있습니다.

디자인 탭에서 속성을 복사 할 수 있으므로 글꼴, 텍스트 크기, 문자 간격 등에 대한 옵션 그룹 사전 설정 또는 설정을 쉽게 복사 할 수 있습니다. 속성을 복사하는 덮어 쓰기 설정에 대해 걱정하지 않고 원하는 스타일 만 복사 할 수 있습니다.

고급 탭에서 속성을 복사하여 한 번의 클릭으로 CSS 스 니펫, 디스플레이 조건, 전환, 스크롤 효과 및 위치를 쉽게 복제 할 수 있습니다.

붙여 넣기 속성

이 개념은 속성을 붙여 넣을 때 동일하지만 더 많은 옵션이 있습니다. Divi 5에서는 모든 컨텐츠, 스타일 및 관련 사전 설정을 소스 모듈의 설정에서 새 속성으로 붙여 넣는 모든 속성을 붙여 넣을 수 있습니다. 속성 복사와 마찬가지로 키보드 단축키를 사용하여 페이스트를 사용하여 Mac의 Shift + Command + V 또는 Windows의 Shift + Alt + V를 한 번 클릭하여 설정을 적용 할 수 있습니다.

또한 제목 모듈의 디자인 설정과 같은 특정 속성 만 붙여 넣을 수 있으며,이 디자인 태그의 모든 설정을 텍스트 그림자, 글꼴, 제목 크기, 간격, 국경 등을 복사합니다.

마찬가지로 간격 (패딩 또는 마진) 및 크기를 포함한 모듈의 스타일 설정 만 붙여 넣을 수 있습니다.

단순히 한 모듈에서 다른 모듈에서 동일한 콘텐츠를 다른 모듈로 붙여 넣으려면 붙여 넣기 내용 속성을 선택하면 Divi가 모듈의 기존 콘텐츠를 이전 컨텐츠에서 복사 한 컨텐츠로 대체합니다.

마지막으로, 소스 모듈에 관련 사전 설정이 있으면 페이스트 헤드링 사전 설정을 선택하면 관련 사전 설정이 모듈에 적용되어 사전 설정 드롭 다운 메뉴에 할당됩니다.

붙여 넣기 스타일, 디자인 설정 및 사전 설정 외에도 페이스트 할 특정 속성을 선택할 수 있습니다. 예를 들어, 선택 디자인, 스타일 또는 컨텐츠 속성을 붙여 넣을 수 있으며 Divi 5는 추가 메뉴에서 옵션을 채우므로 붙여 넣을 특정 설정을 선택할 수 있습니다.

속성을 재설정합니다

Divi 5의 속성 관리 시스템을 사용하면 모든 모듈에 대한 모든 모듈에 대한 속성을 완전히 또는 특정 요소에 재설정 할 수 있습니다.

예를 들어, 모든 컨텐츠, 스타일 및 한 번의 클릭으로 모든 컨텐츠, 스타일 및 관련 사전 설정을 제거하는 모든 속성 (Windows에서 Shift + Command + R) 을 재설정 할 수 있습니다.

그러나 스타일링 또는 디자인 설정과 같은 특정 속성을 재설정 할 수 있습니다. 더욱 구체적으로, 간격, 스크롤 애니메이션 또는 CSS 스 니펫과 같은 스타일, 디자인 또는 응용 콘텐츠 설정 만 재설정 할 수 있습니다.

실제 응용 및 혜택

속성 관리가 Divi 5에 필요한 추가 인 이유를 보여주었습니다. 아래에서 주요 사용 사례를 탐색하고 기능의 이점을 강조하며 간소화 된 워크 플로우를 육성하는 데 미치는 영향을 설명하는 실용적인 예를 제공합니다.

사용 사례

속성 관리는 디자이너가 여러 페이지에서 스타일을 복사하고 붙여 넣을 수 있도록하여 브랜드 일관성을 보장합니다. 예를 들어, 브랜드에 모든 아코디언 모듈에 특정 글꼴 및 아이콘 색상이 필요한 경우 하나의 아코디언 모듈에서 속성을 복사하여 모든 인스턴스에 적용 할 수 있습니다.

속성 관리를 통해 사전 설정을 신속하게 복제하고 수정하여 설계 변형을 테스트 할 수 있습니다. 예를 들어, CTA 모듈의 요소 사전 설정을 복사하고 색상이나 레이아웃을 조정 한 다음 다른 모듈에 적용하여 처음부터 시작하지 않고 디자인을 비교할 수 있습니다. 이것은 설계 과정에서 실험과 반복 속도를 높입니다.

특정 속성을 재설정하여 업데이트 된 설계 지침에 맞게 선택적 업데이트를 수행 할 수도 있습니다. 예를 들어, 클라이언트가 버튼에 대한 새로운 배경색을 요청하는 경우 CTA에서 버튼의 버튼 속성을 재설정하고 새 스타일을 만들고 페이지의 다른 버튼에 붙여 넣어 타이포그래피 나 테두리와 같은 다른 스타일을 손대지 않을 수 있습니다.

이익

속성 관리를 사용하여 Divi 5에 웹 사이트를 구축하면 다음을 포함하여 몇 가지 이점이 있습니다.

• 속성 관리는 대규모 웹 사이트의 주요 시간 인 반복적 인 수동 스타일을 제거 합니다. 요소에 걸쳐 속성 또는 사전 설정을 복사하고 붙여 넣는 데 몇 초가 걸리므로 디자이너는 지루한 작업보다는 창의성에 집중할 수 있도록합니다.
• 디자인을 확장 가능하게 만듭니다. 사전 설정 및 속성 관리는 사이트 전체의 업데이트를 쉽게 만듭니다. 옵션 그룹 사전 설정으로의 단일 변경은 모든 연결된 요소에 걸쳐 전파 될 수있어 수십 페이지가있는 거대한 사이트에서도 일관성을 보장 할 수 있습니다.
• 속성은 정밀도를 제공합니다. 속성 관리의 세분화 제어는 원하는 속성 만 복사, 붙여 넣기 또는 재설정되도록합니다. 이 정밀도는 스타일 사전 설정을 적용 할 때 컨텐츠를 덮어 쓰는 것과 같은 원치 않는 변경을 방지하고 디자이너에게 편집에 대한 신뢰를 제공합니다.

팁과 모범 사례

속성 관리의 잠재력을 극대화하려면 스마트 전략과 모범 사례를 채택하는 것이 중요합니다. 이 팁은 속성 관리를 효과적으로 활용하여 효율적인 워크 플로우, 일관된 설계 및 원활한 설계 프로세스를 보장하는 데 도움이됩니다.

속성 관리 인터페이스를 배우십시오

속성 관리의 가장 좋은 측면 중 하나는 시각적 빌더 내에 얼마나 깊이 통합 된 지입니다. 각 바로 가기가 수행하는 작업을 실험하고 사용하는 방법을 배우십시오. 각 옵션에는 특정 목적이 있습니다. 예를 들어 제목 모듈 위로 마우스 오른쪽 버튼을 클릭 할 때 속성을 복사 할 수 있습니다.

해당 속성을 붙여 넣으려면 몇 가지 옵션을 선택할 수 있습니다. 예를 들어, 디자인, 스타일 및 컨텐츠 포함)의 모든 제목 속성을 붙여 넣거나 제목이있는 모든 모듈에서 선택적으로 특정 속성 또는 사전 설정을 붙여 넣을 수 있습니다.

변수와 사전 설정으로 시작하십시오

프로젝트 초기에 글로벌 디자인 변수, 기본 사전 설정, 요소 사전 설정 및 옵션 그룹 사전 설정을 설정하여 강력한 설계 기반을 설정하십시오. 예를 들어, 이미지 바꾸기에 대한 옵션 그룹 사전 설정과 이미지 모듈에 대한 기본 요소 사전 설정을 만들어 처음부터 일관된 스타일을 보장합니다. 이 사전 예방 접근 방식은 재 작업을 최소화하고 모든 요소를 ​​브랜드의 정체성과 조정합니다.

사전 설정을 구성하십시오

속성 관리 작업 중에 혼란을 피하기 위해 사전 설정을 명확하고 묘사 적으로 이름을 지정하십시오. 예를 들어, 옵션 그룹 사전 설정을 스타일 1 과 같은 일반 이름이 아닌 둥근 테두리 15px 로 표시하십시오. 명확한 이름 지정을 사용하면 모듈에 걸쳐 사전 설정 속성을 복사하거나 붙여 넣을 때 올바른 사전 설정을보다 쉽게 ​​식별하고 적용 할 수 있습니다.

중단 점을 확인하십시오

반응 형 스타일과 같은 복사 된 속성이 데스크탑, 태블릿 및 모바일에 대한 Divi 5의 사용자 정의 가능한 응답 형 중단 점과 일치하는지 확인하십시오. 예를 들어, 텍스트 스타일을 복사 할 때는 다른 곳에서 붙여 넣기 전에 Visual Builder의 반응 형 뷰의 모든 장치에서 올바르게 렌더링되는지 확인하십시오. 이를 통해 디자인은 모든 화면 크기에서 세련되고 기능적으로 유지됩니다.

이러한 모범 사례에 따라 속성 관리를 활용하여 Divi 5에서 일관되고 효율적이며 전문적인 설계를 만들 수 있습니다.

Divi 5의 응용 프로그램 관리의 힘을 발휘하십시오

Divi 5의 속성 관리 기능은 디자이너가 일관된 브랜딩을위한 모듈, 열, 행 또는 섹션에서 속성을 복사, 붙여 넣기 및 재설정 할 수 있도록하여 웹 디자인의 효율성을 재정의합니다. 세분화 된 제어와 직관적 인 인터페이스는 현대적인 웹 디자인의 초석이되어 복잡한 작업을 정확한 작업으로 단순화합니다.

직접 속성 관리를 경험할 준비가 되셨습니까? 최신 Divi 5 Public Alpha를 다운로드 하고이 새로운 기능을 다이빙하여 Divi로 웹 사이트를 구축하는 방법을 변경하는 방법을 확인하십시오. 빠른 참고 사항 : Divi 5는 새 웹 사이트에서 빛날 준비가되었지만 아직 기존 사이트를 마이그레이션하는 것이 좋습니다.

Divi 5가 Query Loop Builder 및 Flexbox 컨트롤과 같은 흥미로운 기능으로 계속 발전함에 따라 이제 속성 관리를 활용하고 웹 디자인을 다음 단계로 끌어 올릴 때입니다.

우리는 당신의 생각을 듣고 싶습니다. 아래의 의견 섹션에서 귀하의 경험을 공유하거나 좋아하는 플랫폼에 우리를 태그하여 소셜 미디어에서 대화에 참여하십시오.