Divi 5에 대한 설계 변수 소개

Divi의 디자인 워크 플로우를 크게 향상시키고 Divi 사용자에게 다른 빌더에 대한 심각한 다리를 제공하는 새로운 기능인 Divi 5 용 디자인 변수를 소개하게되어 기쁩니다.

색상, 글꼴, 숫자, 이미지 및 텍스트와 같은 모든 것에 대한 변수를 정의하고 디바이 요소 및 사전 설정에 연결할 수 있습니다. 변수를 업데이트하면 웹 사이트의 디자인 및 콘텐츠가 변경됩니다.

변수와 Divi의 새로운 사전 설정 기반 설계 시스템 간의 시너지 효과는 환상적입니다. 그것이 어떻게 작동하는지 보여 드리겠습니다.

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

Divi는 가변 관리와 함께“글로벌”됩니다

Divi의 글로벌 컬러 시스템 덕분에 이미 설계 변수의 개념에 익숙 할 수 있습니다. 글로벌 색상은 디자인 변수의 유형입니다. 그러나이 업데이트를 통해 우리는 글로벌 모든 것을 소개합니다! 또한 새로운 변수 관리자 덕분에 글로벌 설정을 관리하는 것이 그 어느 때보 다 쉬워집니다.

새로운 변수 생성

왼쪽 사이드 바의 변수 아이콘이 웹 사이트의 변수 관리자를 열게됩니다. 새 변수를 추가하고 이름과 값을 제공 한 다음 해당 변수를 모든 페이지의 관련 설정에 연결할 수 있습니다. Divi는 현재 Divi의 모든 기본 입력 필드를 다루는 6 가지 유형의 변수를 지원합니다.

• 색상 : 색상은 모든 웹 사이트에 필수적입니다. 대부분의 웹 사이트는 3 ~ 4 개의 기본 색상 만 사용합니다. 색상 변수를 정의하고 웹 사이트를 통해 사용하면 웹 사이트 전체 색상 팔레트를 몇 초 만에 조정할 수 있습니다.
• 글꼴 : 정적 글꼴로 작업하는 시대는 끝났습니다. 또한 테마 커스터마이저의 글로벌 글꼴 설정에 더 이상 제한되지 않습니다. 웹 사이트의 글꼴을 변수로 정의하고 한 곳에서 모두 관리 할 수 ​​있습니다.
• 숫자 : 숫자 변수를 사용하여 웹 사이트 크기 시스템을 설계 할 수 있습니다. 예를 들어, 모든 요소에서 표준 테두리-라디우스 크기를 사용할 수 있습니다. 이를 변수로 바꾸면 단일 변수를 편집하여 둥근 모서리의 크기를 조정할 수 있습니다. 다른 일상적인 용도로는 웹 사이트의 텍스트 크기 및 라인 높이 정의, 컨테이너 너비 및 간격 및 그 사이의 모든 것이 포함됩니다.
• 이미지 : 여러 페이지에서 동일한 이미지를 사용하십니까? 예를 들어, 친숙한 브랜드 모티프 역할을하는 표준 배경 이미지가있을 수 있습니다. 그것을 변수로 바꾸면 브랜드를 상쾌하게하는 것은 쉽습니다.
• 텍스트 : 변수는 디자인에만 국한되지 않습니다. 텍스트 변수를 정의 할 수도 있습니다. 예를 들어, 회사 전화 번호와 주소를 텍스트 변수로 전환하면 비즈니스 세부 사항이 변경 될 때 사용 된 모든 장소를 사냥 할 필요가 없습니다.
• URL : URL 변수도 던졌습니다. 왜 그렇지 않습니까? 연중 다른 시간 동안 다른 페이지에서 기본 Call To Action 링크를 원할 수도 있습니다 (예 : 판매 중 변경). 모든 곳에서 해당 URL을 업데이트하는 대신 단일 변수를 업데이트하십시오.

요소 및 사전 설정에 변수를 사용합니다

웹 사이트에서 관련 변수 및 동적 컨텐츠 목록에서 선택하려면 위의 변수 아이콘을 클릭하십시오.

Divi의 변수 및 동적 컨텐츠 시스템은 이전에 컨텐츠 필드에서만 사용할 수있는 모든 필드로 확장되었습니다. 즉, 변수 및 동적 컨텐츠를 숫자 필드, 글꼴 필드 등에 할당 할 수 있습니다.

변수 예제를 설계합니다

설계 변수는 도구 적이며 Divi Design 워크 플로의 핵심 구성 요소가됩니다. 그러나 개념이 클릭되지 않으면 몇 가지 예를 들어 보겠습니다.

예제 : 글로벌 글꼴을 관리합니다

설계 변수를 사용하여 워크 플로를 개선 할 수있는 방법은 무엇입니까? 먼저 글꼴 변수를 고려해 봅시다.

대부분의 웹 사이트는 2 ~ 3 개의 글꼴을 사용합니다. 당신은 아마도 다양한 요소와 사전 설정으로 원하는 신체와 제목 텍스트 글꼴을 설정하는 데 시간을 보냈을 것입니다.

그러나 당신이 물건을 바꾸고 싶다면 어떻게해야합니까? 사전 설정으로 최적으로 웹 사이트를 설계하더라도 돌아가서 글꼴을 변경하는 것이 시간이 소요될 수 있습니다. 특정 글꼴을 사용한 모든 장소를 기억하지 못할 수도 있습니다.

그것이 글꼴 변수가 들어오는 곳입니다.

제목 글꼴, 바디 글꼴 및 하이라이트 글꼴의 세 가지 글꼴 변수를 사용하여 위의 비디오에서 웹 사이트를 만들었습니다.

기본 Blurb Preset과 같은 요소에 제목 글꼴 변수를 추가하는 것은 쉽습니다. 정적 글꼴 값을 사용한 적이 없지만 변수를 연결 한 대신 내 웹 사이트의 글꼴이 전적으로 역동적입니다.

내 웹 사이트의 제목 글꼴을 변경하는 것은 제목 글꼴 변수를 업데이트하는 것만 큼 쉽습니다.

예 2 : 글로벌 크기 관리

텍스트 크기로 똑같은 일을 할 수 있습니다.

아래 비디오의 웹 사이트의 경우 다양한 제목 수준 및 바디 텍스트 스타일에 대해 일련의 8 개의 텍스트 크기를 정의했습니다. 기본 Blurb 사전 설정을 업데이트하고 중간 제목 텍스트 크기 변수를 할당하면 모든 Blurb 제목은 해당 변수에서 값을 상속합니다.

전체 웹 사이트의 텍스트 크기를 변수에 기반하기 때문에 변수 관리자에서 웹 사이트의 텍스트 크기를 전적으로 관리 할 수 ​​있습니다.

예 3 : 전체 웹 사이트를 전 세계적으로 분류하십시오

위의 비디오에서는 변수의 전체 힘을 활용하는 웹 사이트를 볼 수 있습니다. 모든 색상은 컨테이너 요소의 글꼴, 텍스트 크기, 테두리-라디우스 크기 및 간격 값과 마찬가지로 변수입니다.

뿐만 아니라 공유 콘텐츠를 변수로 전환했습니다. 내 회사 이름, 전화 번호 및 주소는 콘텐츠 변수입니다.

웹 사이트 전체에 익숙한 브랜드 모티프 인 배경 이미지조차도 쉽게 변경할 수있는 이미지 변수입니다.

오늘 Divi 5를 사용해보십시오

Divi 5의 디자인 변수는 오늘날 이용 가능하며 올해 Divi에 오는 많은 기능 중 하나입니다.

Divi 5 이상의 최종 릴리스를 통해 2 주마다 업데이트를 통해 진행할 수 있습니다. 우선 순위에 따라 Divi 5를 사용하여 새 웹 사이트를 구축하거나 더 많은 기능을 추가 할 때까지 기다릴 수 있습니다.

Divi 5의 원래 다중 단계 릴리스 일정에 요약 된 바와 같이, Divi 5 Public Alpha는 "Divi 5 Lite"와 같습니다. 몇 가지 기능이없고 기존 웹 사이트에 적합하지 않을 수 있지만 Divi 4의 경험을 선호하는 경우 새 웹 사이트에서 사용할 준비가되었습니다.

우리는 당신이 그것을 시도하기를 원하며, 당신이 그것을 좋아한다면 그것을 사용하십시오. 모두가 그것을 좋아할 때, 우리는 그것을 공식화 할 것입니다.

몰래 엿보기 : 중첩 행

우리는 기능을 빠르게 제작하고 있습니다. 새로운 기능을 완료 할 때마다 새로운 기능을 시작합니다. 새로운 기능을 시작할 때마다 몰래 엿볼 수 있습니다.

당신이 그것을 놓친 경우, 지난 주 기능 Sneak Peek을 확인하십시오. 줄의 줄! 간단한 아이디어이지만 Divi 5를위한보다 유연한 레이아웃 시스템을 만드는 데 필수적인 첫 단계입니다.

모든 세부 사항에 대해이 비디오를보십시오.

더 많은 Divi 5 업데이트가 진행 중입니다

2025는 Divi 5의 해입니다 . 지루한 일은 우리 뒤에 있습니다. 우리는 초고속 재단을 만들었고 이제 Divi가 복귀 할 때입니다.

시청해 주셔서 감사합니다. 가기 전에 물어볼 호의가 있습니다. Divi 컴백을 위해 여기에 있다면이 비디오에 대해 의견을 제시하십시오. 나는 모든 의견을 읽을 것이다. 이 비디오가 200 개의 댓글 에 도달하는 것을보고 싶습니다. 댓글 수를 확인하고 가능하다면 손을 빌려주십시오. 알고리즘을 공급하는 좋은 방법이며, 더 중요한 것은 우리와 대화하는 것을 좋아합니다.

YouTube에서 우리를 팔로우하고 Divi 뉴스 레터를 구독하여 업데이트를 놓치지 마십시오. 또 다른 Divi 5 장편 발표를 위해 곧 뵙겠습니다.