Divi 5에서 다른 요소 유형으로 확장하는 유연성

디자인 업데이트를하는 것은 상자를 확인하는 것과 같은 느낌이 들지 않아야합니다. 그러나 버튼 스타일 변경 또는 글꼴 업데이트와 같은 간단한 것조차도 각 모듈을 수동으로 편집하는 것을 의미합니다. 느리고 반복적이며 엉망이됩니다.

Divi 5는 확장 속성을 사용하여 Divi 4의 확장 스타일의 업그레이드 된 버전을 수정합니다. 변경 사항을 한 번 적용하여 다른 요소 및 모듈 유형에서도 어디서나 확장 할 수 있습니다. 이 게시물에서는이 유연성이 어떻게 시간을 절약하고 워크 플로우를 정리할 수 있는지 살펴 보겠습니다.

Divi 5의 확장 속성은 무엇입니까?

속성을 확장하면 각 모듈을 수동으로 편집 할 필요없이 몇 번의 클릭만으로 스타일, 컨텐츠 또는 사전 설정을 확장 할 수 있습니다.

YouTube 채널을 구독하십시오

그러나 일반적인 카피 앤 페이스트 워크 플로가 아닙니다 (관심이 있으시면 우리도 있습니다). 속성 확장 속성은 동일한 요소뿐만 아니라 다른 요소 및 모듈 유형에 걸쳐 작동합니다. 예를 들어, 제목을 한 번 스타일로 스타일링하고 동일한 글꼴을 토글 제목, 사람 모듈 이름 또는 blurb 제목에 적용 할 수 있습니다. 텍스트와 같은 동일한 스타일 그룹을 공유하는 한 따라갈 것입니다.

그리고 그것은 거기서 멈추지 않습니다. 어디서나 모든 것을 확장 할 수 있습니다. 한 섹션에서 배경색을 복사하여 페이지의 모든 행, 섹션, 열 또는 모듈에 적용하십시오.

또는 다른 모듈에서 버튼 스타일을 재사용합니다. 스타일을 호출 항목에서 연락처 양식으로 확장 할 수 있습니다. 사용을 시작하면 업데이트에 대한 생각이 변경됩니다. 더 이상 똑같은 일을 계속해서 갇히지 않을 것입니다. 속성을 확장하면 일관성을 유지하고 시간을 절약하며 레이아웃 변경을 통해 더 빠르고 더 많은 제어를 통해 이동합니다.

Divi 5의 확장 속성 사용

확장 속성은 사용하기 쉽고 많은 유연성을 제공합니다. 시작하려면 이미 스타일링 한 요소를 마우스 오른쪽 단추로 클릭하십시오. 이것은 모듈, 열, 행 또는 전체 섹션 일 수 있습니다. 나타나는 메뉴에서 속성 확장을 선택하십시오.

(글꼴 또는 간격과 같은 특정 설정 그룹에서 직접 마우스 오른쪽 버튼을 클릭 할 수도 있습니다.이 그룹은 이미 선택한 그룹으로 확장 속성 패널을 열어서 타겟팅하는 것을 정확히 알면 프로세스가 더 정확하고 정확하게 만듭니다.)

속성 확장 패널이 열리면 확장 할 내용과 적용 위치를 결정합니다.

몇 가지 명확한 옵션이 표시됩니다.

• (1.) 요소에서 확장 : 스타일링하고 복사하려는 항목.
• (2) 위치로 확장 : 변경 사항이 얼마나 멀리 갈지 선택하십시오. 현재 섹션, 부모 행 또는 전체 페이지 만 있습니다.
• (3.) 요소 유형으로 확장 : 텍스트 모듈 또는 모든 모듈만으로 타겟팅 할 요소 유형을 선택하십시오.
• (4.) 확장 할 속성 유형 : 복사 할 내용을 선택하십시오 : 설계, 컨텐츠, 사전 설정 또는 그 혼합.
• (5) 확장 할 옵션 그룹 : 텍스트, 테두리 또는 버튼 스타일과 같은 특정 설정 그룹에 중점을 둡니다.
• (6.) 확장 할 수정 된 필드 : 변경된 필드 만 적용하거나 모든 것을 포함시킬 수 있습니다.

다음은 빠른 예입니다. 텍스트 모듈 내부의 제목을 스타일링하고 같은 섹션의 다른 제목에 동일한 글꼴을 적용한다고 가정 해 봅시다. 위치를 부모 섹션 으로 설정하고 요소 유형 으로 텍스트를 설정 한 다음 본문 옵션 그룹을 선택합니다 (바디 스타일 만 전송하려면).

일단 적용되면 해당 섹션의 모든 일치하는 텍스트 모듈은 동일한 글꼴 스타일로 업데이트됩니다.

이것이 확장 속성을 특히 유용하게 만드는 것입니다. 당신은 전체 디자인을 복사하지 않습니다. 한 번에 한 그룹 또는 여러 속성 만 확장하려는 내용을 정확하게 선택할 수 있습니다. 컨텐츠와 디자인을 완전히 다른 모듈로 전달할 수도 있습니다.

그러나 설정이 처음에 많이 느껴지면 완전히 정상이라는 것을 이해하십시오. 스코프, 요소 유형 및 설정 그룹이 어떻게 작동하는지 이해하기 위해 몇 가지 조합을 테스트해야 할 수도 있습니다. 일단 클릭하면 Divi 워크 플로에서 가장 효율적인 도구 중 하나가됩니다.

다음에 섹션에서, 우리는 실질적인 사례를 살펴보고 그것이 어떻게 결합되는지 보여줍니다. 각 설정의 작동 방식을 이해하면 속성을 확장하면 동일한 작업을 반복하지 않고 일관된 설계를 구축하기위한 강력한 도구가됩니다.

Divi 5의 확장 속성에 대한 모든 것을 배우십시오

Divi 5의 확장 속성이 Divi 4의 확장 스타일을 능가하는 방법

Divi 4를 사용했다면 확장 스타일에 익숙 할 것입니다. 디자인 설정을 한 요소에서 다른 요소로 복사 할 수 있지만 동일한 요소 유형 내에서만 복사 할 수 있습니다. 그로 인해 빠른 수정에 도움이되었지만보다 복잡한 업데이트에는 제한이있었습니다.

Divi 5의 확장 속성은 그 아이디어를 훨씬 더 많이 가져옵니다. 디자인을 복사 할뿐만 아니라 콘텐츠 및 사전 설정과 함께 작동하여 적용되는 것과 위치를 완전히 제어 할 수 있습니다. 다른 것에 영향을 미치지 않고 배경색 또는 테두리 반경 만 확장 할 특정 속성을 선택할 수도 있습니다.

더 이상 일치 모듈 유형에 잠겨 있거나 레이아웃에서 동일한 변경 사항을 반복하지 않습니다. 속성을 확장하면 섹션이든 전체 페이지에 관계없이 재사용 할 내용과 얼마나 멀리 가야하는지 정확히 선택할 수 있습니다. 워크 플로에 적응하고 스타일링을 더 빠르고 똑똑하며 일관성있게 만듭니다.

Extend 속성은 Divi 5에서 사용할 수 있습니다 - 지금 시도하려면 최신 버전을 다운로드하십시오.

확장 할 수있는 5 가지 실제 사례 (및 방법)

지금까지 우리는 속성이 무엇을 할 수 있는지에 대해 이야기했습니다. 이제 실제로 어떻게 사용할 수 있는지 살펴 보겠습니다. 이 예제는 다양한 설정 조합을 통해 시간을 절약하고 업데이트를보다 효율적으로 적용 할 수 있습니다.

1. 다른 요소 유형에 걸쳐 스타일을 확장합니다

속성을 확장해도 고정 계층 구조에 잠겨 있지 않습니다. 섹션에서 모듈로 이동하거나 행에서 열로 이동하든 다른 레이아웃 레벨의 스타일을 적용 할 수 있습니다.

이를 통해 레이아웃 전체에서 시각적 연결을 쉽게 만들 수 있습니다. 평가 모듈은 그 섹션과 일치 할 수 있습니다. Call to Action 모듈은 위의 행에서 스타일을 선택할 수 있습니다. 스타일 그룹을 공유하는 한 비슷한 요소간에 스타일을 확장하는 데 국한되지 않습니다. 디자인 요구에 따라 광범위한 곳에서 구체적으로 또는 그 반대로 이동할 수 있습니다.

섹션에서 열로 확장됩니다

레이아웃의 가장자리를 부드럽게하기 위해 섹션에 미묘한 테두리 반경을 추가했다고 가정 해 봅시다. 해당 섹션 안에는 배경 이미지가있는 열이 있으며 시각적 일관성을 위해 동일한 둥근 모서리를 반영하기를 원합니다.

반경을 수동으로 다시 신청하는 대신 섹션을 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택하고 요소 유형을 열로 설정하고 옵션 그룹에서 테두리를 선택하십시오.

열은 동일한 테두리 반경을 상속하므로 배경 이미지 또는 중첩 레이아웃은 시각적 흐름을 깨지 않습니다.

섹션에서 행으로 연장됩니다

또 다른 예는 일관된 공백을 유지하기 위해 섹션에서 행 또는 기타 섹션으로 패딩을 확장하는 것입니다. 섹션을 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택하고 요소 유형을 행 으로 설정하고 옵션 그룹에서 간격을 선택하십시오.

모든 행은 이제 동일한 패딩 값을 상속하여 페이지에 일관된 간격을 제공합니다.

섹션에서 모듈로 확장됩니다

섹션에 이미 원하는 배경, 테두리 또는 간격이 있다고 가정 해 봅시다. 다른 곳에서 해당 스타일을 재현하는 대신 내부에 중첩되거나 해당 섹션 외부에 배치하더라도 다른 요소로 직접 전달할 수 있습니다.

예를 들어, 섹션에 증언에 원하는 배경이있는 경우 확장 속성을 사용하십시오. 요소 유형으로 증언을 선택하고 범위를 전체 페이지 로 설정 한 다음 배경 속성이 선택되어 있는지 확인하십시오.

일단 적용되면, 증언은 수동 편집없이 해당 배경을 물려받습니다.

웹 디자인에서는 배경색, 경계 및 간격과 같은 일관된 시각적 세부 사항이 모든 것을 하나로 묶는 데 도움이됩니다. 확장 속성을 사용하면 레이아웃 전체의 일관성을 쉽게 전달하고 매번 처음부터 시작하지 않고 세련된 브랜드 경험을 만들 수 있습니다.

열에서 행으로 연장됩니다

예를 들어, 열에서 행으로 연장되는 역 접근 방식을 따라갈 수도 있습니다. 열을 틀어 깨끗하고 실선을 추가했다고 가정 해 봅시다. 시각적 일관성을 위해 동일한 테두리 스타일을 전달하는 행을 원한다면 해당 스타일을 즉시 재사용 할 수 있습니다. 테두리 옵션 그룹을 상위 행으로 확장하십시오.

행은 동일한 테두리 설정을 선택하여 둘 사이에 명확한 시각적 연결을 만듭니다. 이것은 일관된 윤곽선이나 분리기에 의존하는 계층화 된 섹션 또는 박스형 레이아웃을 구축 할 때 특히 잘 작동합니다.

이것들은 단지 몇 가지 조합 으로 반전 될 수 있습니다 . 실제로, 당신은 거의 모든 레이아웃 레벨에서 스타일을 확장 할 수 있습니다. 속성을 확장하면 열 간격을 적용하는 것에서부터 내부의 모듈에 이르기까지 섹션 그림자를 행이나 버튼으로 운반하는 것까지 모든 유연성을 제공합니다. 당신도 할 수 있습니다 :

• 행에서 경계 라디우스를 복사하여 모듈에 적용하십시오.
• 열에서 모듈에서 변환 애니메이션을 재사용하십시오
• 글꼴 정렬을 섹션에서 그 안의 모든 텍스트 모듈로 확장합니다.
• 일관된 스타일링을 위해 한 열에서 다른 열로 이미지 필터를 적용하십시오.
• 두 요소가 스타일 그룹과 컨텍스트를 공유하면 확장 속성이이를 처리 할 수 있습니다.

목표는 모든 조합을 암기하는 것이 아니라 레이아웃에 적합한 것을 실험하고 발견하는 것입니다. 일회성 편집 대신 재사용 가능한 디자인 동작에 대해 생각하기 시작하면 워크 플로우가 자연스럽게 더 빠르고 깨끗하며 일관되게됩니다.

2. 다양한 모듈 유형에서 스타일을 확장하십시오

속성 확장 버튼과 같은 공유 스타일 그룹을 인식하므로 몇 단계만으로도 다른 모듈에 동일한 스타일을 적용 할 수 있습니다.

예를 들어, 좋아하는 버튼을 디자인하고 연락처 양식에서 사용하고 싶다고 가정 해 봅시다. 수동으로 저장하는 대신 원래 버튼을 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택하고 버튼 옵션 그룹을 선택한 다음 요소 유형을 연락처 양식 으로 설정하십시오. 그런 다음 범위를 전체 페이지 로 설정하십시오.

디자인은 수동 조정없이 연락처 양식의 제출 버튼으로 즉시 수행됩니다.

다른 모듈의 프로세스도 반복 할 수 있습니다. 동일한 버튼 스타일을 이메일 OptIn으로 확장하려면 요소 유형을 이메일 로 변경하면 버튼이 자동으로 일치합니다.

이런 종류의 크로스 모듈 스타일링은 버튼이 많은 레이아웃으로 작업 할 때 시간을 절약합니다. Divi는 버튼을 공유 그룹의 일부로 취급하기 때문에 일관성을 깨지 않고 한 번 스타일을 한 번 스타일링하고 재사용 할 수 있습니다.

3. 옵션 그룹 사전 설정을 저장하고 확장하십시오

확장 속성은 사전 설정과 함께 작동하여 레이아웃에서 저장된 스타일을 재사용 할 수 있습니다.

예를 들어, 둥근 모서리, 미묘한 테두리 및 부드러운 그림자가있는 칼럼을 디자인했다고 상상해보십시오. 나중에 다시 사용하기 위해 국경 사전 설정 으로 저장합니다.

Extend Border Preset 옵션은 요소가 사전 설정을 저장 한 경우에만 나타납니다.

이제 사전 설정을 다른 열에 수동으로 적용하는 대신 한 단계로 확장 할 수 있습니다. 원래 열을 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택한 다음 패널에서 Presered extend를 선택하십시오.

선택되면 적용 원하는 위치에 따라 요소 유형을 열 및 부모 섹션 또는 전체 페이지 로 설정하십시오. 사전 설정 스타일링은 다시 설정하지 않고 다른 열로 즉시 운반됩니다.

이렇게하면 특히 맞춤형 테두리 스타일, 그림자 또는 사전 설정 아래 그룹화 된 기타 디자인으로 작업 할 때 레이아웃을 일관성있게 유지할 수 있습니다.

4. 한 번 스타일을 한 다음 변경 한 내용 만 확장하십시오.

처음부터 레이아웃을 구축 할 때 모든 요소를 개별적으로 스타일링하면 끝이 없을 수 있습니다. 연장은 첫 번째 섀도우, 테두리와 같은 한 번에 하나의 속성 씩 스타일을 스타일로 만듭니다.

여기에서 모든 수정 된 필드 옵션이 들어오는 곳입니다. 각 설정을 수동으로 선택하는 대신 하나의 요소를 스타일링 한 다음 나머지 변경 사항에만 적용 할 수 있습니다.

예를 들어, 갤러리의 한 이미지에 부드러운 테두리와 가벼운 그림자를 추가했다고 가정 해 봅시다.

다른 모든 이미지에 동일한 모양을 적용하려면 스타일링 된 이미지를 마우스 오른쪽 단추로 클릭하고 속성 확장을 선택하고 수정 된 필드에서 수정 된 모든 필드를 선택하여 열 을 확장하십시오 .

변경 한 속성 만 수행됩니다. 다른 모든 것은 손대지 않았습니다. 이를 통해 다른 설정을 덮어 쓰지 않고 디자인을 일관되게 유지하며 제어력을 잃지 않고 대량 스타일 속도를 높이는 가장 쉬운 방법 중 하나입니다.

5. 단일 모듈 내에서 스타일을 확장하십시오

확장 속성은 모듈뿐만 아니라 그 안에서도 작동합니다. 예를 들어 아코디언 모듈을 사용하십시오. 하나의 아이템을 스타일로 만들어서 그 변화를 5 번 더 반복해야한다면, 얼마나 지루할 수 있는지 알고 있습니다.

이제 첫 번째 아이템을 스타일링하고 스타일을 더 확장하면됩니다.

디자인을 적용한 후에는 Extend Attributes 패널을 열고 아코디언 모듈을 선택하고 나머지에 적용하려는 특정 수정 된 필드를 선택하십시오.

확인하면 동일한 모듈 내의 다른 모든 항목이 자동으로 업데이트됩니다. 스타일링을 일관성있게 유지하고 단일 작업으로 모든 항목의 변경 사항을 적용하는 빠른 방법입니다.

속성을 확장하면 진정한 설계 유연성이 잠금 해제됩니다

Divi 5의 확장 속성은 디자인을 변경하는 더 빠르고 집중된 방법을 제공합니다. 버튼과 제목에서 경계, 내용 및 중첩 요소까지, 복사하는 것과 어디로 가는지를 완전히 제어 할 수 있습니다.

워크 플로우를 부드럽고 효율적으로 유지하면서 다양한 모듈, 레이아웃 섹션 및 설계 레벨에서 작동합니다. 그러나 당신은 당신이 그것을 스스로 시도하는 경우에만 그것을 믿을 수 있습니다. 따라서 오늘 Divi 5의 확장 속성을 실험하고 아래에서 귀하의 경험을 공유하십시오!