확장 속성으로 5 분 안에 웹 사이트를 브랜딩합니다

웹 사이트를 바꾸는 것은 종종 그렇게 느끼지만 전체 재건이 필요하지는 않습니다. 글꼴은 별도의 부품에 갇히고, 색상은 섹션에 걸쳐 퍼지고, 간격은 개별 설정에 숨겨져 있습니다. 홈페이지를 업데이트 한 후 다른 페이지에 동일한 변경 사항이 필요한 것을 찾을 수 있습니다. 일반적인 일상이지만 더 빠른 방법이 있습니다.

Divi 5의 확장 속성을 사용하면 단일 요소를 스타일링하고 행, 섹션 및 전체 페이지에 걸쳐 모든 유사한 모듈에 즉시 적용 할 수 있습니다. 몇 시간 만에 몇 분 안에 전체 웹 사이트를 브랜드화하는 방법을 사용해 보겠습니다.

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

속성 확장은 한 모듈의 디자인을 가져 와서 주변의 다른 요소 또는 모듈에 적용 할 수있는 Divi 5 기능입니다. 즉, 버튼, 제목 또는 텍스트 블록을 스타일로 만들면 다른 요소로 확장 할 수 있기 때문에 해당 스타일을 처음부터 재현 할 필요가 없습니다.

실제로 작동하는 방식은 다음과 같습니다. 시각적 빌더의 모듈을 편집하는 것으로 시작합니다. 그런 다음 모듈별로 변경 모듈을 반복하는 대신 모듈을 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택하십시오.

Divi는 그 스타일이 어디로 가고 싶은지 묻습니다. 일단 확인되면 모든 일치하는 모듈은 동일한 스타일을 채택합니다. extend 속성은 일치하는 것을 찾지 않지만 현재 모양을 복사하여 선택한 대상에 적용합니다.

이로 인해 각 블록을 미세 관리하지 않고 디자인 변경 사항을 출시하는 가장 빠른 방법 중 하나입니다. 그것은 당신이 처음부터 처음부터 건축하거나 전체 레이아웃을 브랜드화하든 반복 스타일링을 단일 액션으로 바꾸는 데 도움이됩니다.

속성을 확장하면 웹 사이트를 더 빨리 브랜드 변경하는 데 도움이됩니다

Extend 속성 만 사용하는 방법과 옵션 그룹 사전 설정을 사용하여 웹 사이트 브랜드 변경 프로세스 속도를 높이는 방법을 살펴 보겠습니다.

Divi 5의 확장 속성 사용

프로세스는 간단합니다. 스타일 하나의 모듈, 마우스 오른쪽 버튼을 클릭하여 속성 확장을 선택하고 단일 설정 패널을 두 번 열지 않고도 모든 유사한 모듈로 해당 설계 선택을 확장하십시오. 실제 예제를 사용하여 걸어 가자.

모든 호환 호환 버튼을 브랜딩하고 싶다고 가정 해 봅시다. 시각적 빌더 내부의 하나의 버튼 모듈을 스타일링하여 시작하십시오.

완료되면 마우스 오른쪽 버튼을 클릭하고 속성 확장을 선택하십시오. (우리는 컨텐츠가 아닌 스타일 만 확장하기를 원하기 때문에 확장 버튼 디자인 속성을 선택했습니다. 또한 많은 옵션을 알 수 있으므로 특정 특성을 미세 선택하는 데 도움이됩니다.)

Extend Attributes 패널이 열리고 여러 다른 옵션 중에서 선택하여 디자인 변경 사항을 어떻게 그리고 어디에 적용 해야하는지 결정할 수 있습니다.

• (1) 요소에서 확장 : 우리의 경우 버튼과 같이 확장하는 모듈. 마우스 오른쪽 버튼을 클릭 한 내용에 따라 자동으로 채워집니다.
• (2) 위치로 확장 : 디자인이 얼마나 멀리 가야하는지 선택하십시오. 페이지의 모든 버튼이 변경되기 때문에 전체 페이지를 선택했습니다.
• (3) 요소 유형으로 확장 : 새로운 스타일을 수신 해야하는 모듈 유형을 선택하십시오. 예를 들어 버튼 모듈 또는 모든 유사한 모듈 만.
• (4) 확장 할 속성 유형 : 복사 할 것을 지정하십시오. 우리는 디자인 속성을 선택하고 다른 사람들을 남겼습니다.
• (5) 확장 할 옵션 그룹 : 적용 할 옵션 그룹을 결정하십시오 : 텍스트, 버튼, 테두리, 간격 등.
• (6) 확장 할 수정 된 필드 : 선택을 하나의 스타일 속성으로만 제한하거나 모든 수정 된 필드를 선택하여 모든 변경 사항을 확장 할 수 있습니다.

기본 설정을 선택하면 속성 확장을 클릭하면 새 스타일이 페이지의 다른 모든 버튼에 적용됩니다.

일치하는 값을 검색 할 필요가없는 방법을 알았습니까? 확장 속성은 원래 스타일이 무엇인지 신경 쓰지 않기 때문입니다. 선택한 모듈에서 현재 모양을 복사하고 선택한 위치의 모든 유사한 모듈에 직접 페이스트합니다.

이것이 레이아웃 팩과 기존 웹 사이트에 유용한 이유입니다. 속성을 확장하면 글꼴 크기를 조정하거나 색상 업데이트 또는 조정 간격을 조정하든 하나의 스타일 모듈과 한 번의 클릭으로 전체 제어를 제공합니다.

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

확장 속성이있는 옵션 그룹 사전 설정을 사용합니다

여러 페이지가있는 웹 사이트에서 작업 할 때는 스타일을 시각적으로 복사하는 것만으로는 충분하지 않습니다. 당신은 붙어있는 시스템을 원하며, 사전 설정이 들어오는 곳입니다.

사전 설정을 사용하면 모든 모듈 내에 스타일 그룹을 저장하고 사이트 전체에서 재사용 할 수 있습니다. 이를 확장 속성과 결합하면 한 페이지뿐만 아니라 전체 웹 사이트를 바꾸는 빠르고 유연한 방법이 있습니다. 이 조합은 또한 웹 사이트를 미래 방지하는 데 도움이되므로 다시 브랜드를 변경 해야하는 경우 사전 설정을 쉽게 수정하고 사용하는 모든 모듈도 업데이트됩니다.

버튼 예제로 돌아가서 이것이 어떻게 작동하는지 이해합시다.

우리는 새로운 모습으로 하나의 버튼을 스타일로 만들었습니다. 이제 설정을 정적 값으로 확장하는 대신 사전 설정으로 저장합니다.

여기에 확장 속성이 등장하는 곳이 있습니다. 속성 확장을 클릭하면 저장된 사전 설정이 나타납니다. 선택한 사전 설정 만 확장하려면 개별적으로 선택하거나 모든 것을 전달할 확장 버튼 사전 설정을 선택하십시오.

확장 할 때 Divi는 단지 모양을 복사하지 않습니다. 저장된 사전 설정이 무대 뒤에서 적용됩니다. 따라서 터치하는 다른 버튼은 이제 동일한 사전 설정을 사용합니다.

다른 단계를 추가하는 이유는 무엇입니까? 이곳은 미래에 웹 사이트 혜택을 제공하는 곳입니다. 다음 몇 달 안에 버튼 스타일을 나중에 조정하기로 결정했다고 가정 해 봅시다. 스타일을 다시 확장하고 싶습니까? 아니요?

글쎄, 당신은 사전 설정을 한 번만 업데이트하면 될 필요조차 없습니다. 모든 버튼 모듈은 동일한 사전 설정으로 구축되었으므로 IT를 사용하는 모든 인스턴스는 자동으로 업데이트됩니다.

또한 저장되면 옵션 그룹 사전 설정은 다른 페이지에서도 사용할 수 있습니다. 따라서 홈페이지 브랜드를 변경하고 다른 사람에게 이동하면 저장된 사전 설정을 적용하여 몇 분 안에 연장 할 수 있습니다.

그렇기 때문에 확장 속성이있는 옵션 그룹 사전 설정을 사용하는 것이보다 혁신적인 브랜드를 변경하는 방법입니다. 시각적 일관성과 작업을 다시 시작하지 않고 쉽게 업데이트 할 수있는 시스템을 얻습니다.

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

직접 시도해보고 싶습니까? 확장 속성, 옵션 그룹 사전 설정 및 더 많은 기능을 새 빌더에 제공하는 Divi 5가 필요합니다. 속도, 제어 및 더 부드러운 디자인 워크 플로우를 위해 처음부터 재 설계되었습니다.

확장 속성으로 웹 사이트를 브랜드 변경하는 방법

이제 속성의 작동 방식과 옵션 그룹 사전 설정과 어떻게 짝을 이루는지를 보았으므로 실제 웹 사이트에 적용 할 때입니다.

이 연습의 경우 AI 소프트웨어 레이아웃 팩을 사용하겠습니다. 집, 소개, 연락처 및 가격과 같은 페이지가있는 완전한 웹 사이트입니다. 우리는 여기서 완전한 점검을 목표로하지 않습니다. 그것은 단지 가벼운 브랜드 일 뿐이며, 우리가 월별 업데이트에서 일반적으로하는 종류입니다.

시작하려면 버튼, 제목, 블러스 및 신체 텍스트와 같이 사이트의 시각적 정체성을 정의하는 요소를 살펴보십시오. 이 모듈은 여러 페이지에 걸쳐 나타나고 브랜드의 성격의 대부분을 전달합니다. 몇 가지만 재조정되면 속성을 확장하면 나타나는 곳마다 변경 사항을 푸시 할 수 있습니다.

무엇을 업데이트 해야하는지 정확히 살펴 보겠습니다.

레이아웃 전체의 키 모듈을 시각적으로 브랜드로 변경합니다

우리는 홈페이지로 시작합니다. 사이트의 나머지 부분의 톤을 설정하므로 우리는 우리는 우리는 홈페이지로 시작합니다. 대부분의 웹 사이트는 여러 페이지에서 동일한 디자인 패턴을 반복하므로 홈페이지를 업데이트하면 다른 모든 것에 대한 기초가 있습니다.

레이아웃을 스캔 한 후 브랜드의 모양과 느낌을 형성하는 가장 눈에 띄는 요소를 식별했습니다. 버튼, 제목, 블러가, 신체 텍스트 및 이미지입니다. 우리는 이미 버튼을 바꾸었기 때문에 제목으로 시작할 것입니다.

헤딩 모듈의 브랜드 변경

먼저, 새로운 브랜딩을 반영하도록 제목 모듈을 사용자 정의하십시오. H4S부터 시작하겠습니다.

스타일에 만족하면 모듈을 마우스 오른쪽 단추로 클릭하고 속성 확장을 선택하십시오. 전체 페이지 및 모듈 유형의 ​​텍스트 범위를 선택하십시오. 페이지의 모든 H4 모듈에 변경 사항을 적용하십시오.

마찬가지로, H1, H2 및 H4S를 브랜드로 변경하여 타이포그래피를 통합하고 각 헤딩 모듈을 수동으로 재조정하지 않고 몇 번의 클릭만으로 사이트에 일관된 음성을 제공합니다.

더 나은 가독성을 위해 바디 텍스트 브랜드 변경

이제 바디 텍스트를 업데이트합시다. 단락 블록이있는 텍스트 모듈을 선택하여 시작하십시오. 브랜드의 톤에 맞게 사용자 정의하십시오. 변경 사항에 만족하면 모듈을 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택하십시오. 페이지의 모든 텍스트 모듈에서 업데이트를 적용하도록 선택하십시오.

이것은 단락에 몇 초 만에 일관된 스타일을 제공하고 각각을 개별적으로 편집 할 필요가 없습니다.

브랜딩 브랜드 브랜드 블러 러브 경계

다음으로, 모든 blurb 모듈을 간소화하기 위해 테두리를 추가하고 싶습니다. 따라서 하나의 열을 스타일링 한 다음 행의 디자인 탭에서 열을 마우스 오른쪽 버튼으로 클릭하고 스타일을 선택하십시오. 그런 다음 스타일을 다음 열에 붙여 넣습니다 .

행의 레이아웃을 Flex 및 Divi로 변경하여 컬럼 높이를 자동으로 균등하게 변경하여 Blurbs가 컨텐츠를 얼마나 많이 포함하든 정렬 상태로 유지했습니다. Divi는 이제 Flexbox 기능을 지원하므로 반응 형 지능형 레이아웃을 더 빨리 구축하는 데 도움이됩니다.

저장된 사전 설정을 사용하여 다른 페이지를 브랜드로 변경합니다

이제 홈페이지가 업데이트되었으므로 처음부터 프로세스를 반복 할 필요가 없습니다. 섹션이나 행을 다른 페이지로 복제 할 수 있습니다. 또는 새로운 스타일을 옵션 그룹 사전 설정으로 저장 했으므로 이미 설정되었습니다.

저장된 사전 설정은 모든 페이지에 나타납니다.

필요한 경우 적용하고 확장 속성을 사용하여 스타일을 즉시 밀어 넣기 만하면됩니다. 수동 편집과 반복 디자인 작업이 없습니다.

동일한 프로세스를 따라 웹 사이트의 다른 페이지를 브랜드화 할 수 있습니다.

속성을 확장하면 다시 브랜드 변경을 즐길 수있는 유연성을 제공합니다. 한 페이지에서 모듈을 시각적으로 복원하고 싶을 때 좋습니다.

그러나 다른 모듈에서 16 진 코드, 글꼴 크기 또는 간격 장치와 같은 특정 값을 교체 해야하는 경우 찾아서 교체하려고합니다. 하드 코딩 값을 사용하는 레이아웃 팩에 특히 적합합니다. 찾기 및 교체를 사용하여 저장된 디자인 변수로 교체하여 향후 업데이트에 대한 유연성을 높일 수 있습니다.

전문가 팁 : 설계 변수와 함께 확장 속성을 사용하십시오

속성 확장 속성은 정적 스타일을 복사하지 않습니다. 또한 저장된 디자인 변수를 인계 할 수도 있습니다. 예를 들어, 헤딩 글꼴 변수를 하나의 텍스트 모듈에 할당 한 경우 해당 모듈 설정을 페이지의 다른 모든 텍스트 모듈로 확장 할 수 있습니다. 하드 코딩 된 값을 전달하는 각 제목 대신 모두 동일한 변수를 상속합니다.

이는 향후 업데이트가 더 쉽다는 것을 의미합니다. 변수 관리자에서 변수를 한 번 조정하고 모든 확장 된 모듈 업데이트가 자동으로 업데이트됩니다. 확장 속성을 Divi 5의 가변 시스템과 결합하는 강력한 방법입니다.

속성을 확장하면 재건없이 브랜드를 변경할 수 있습니다

브랜드 변경이 재건을 의미 할 필요는 없습니다. 속성을 확장하면 하나의 모듈을 스타일링하고 나머지 모듈에 적용하여 몇 시간을 몇 초로 줄입니다.

레이아웃 팩으로 작업하든 라이브 사이트를 업데이트하든 Divi 5는 모든 요소를 ​​만지지 않고 디자인을 새로 고칠 수있는 가장 빠른 방법을 제공합니다.