ACF vs Divi Design 변수 : 무엇을 사용 해야하는지

Divi 5의 최신 알파 릴리스를 통해 디자인 변수는 웹 사이트에서 설계 및 컨텐츠 값을 관리하는 새로운 접근법으로 Divi 생태계에 들어갔다. 이것은 우리의 사용자들, 특히 수년간 고급 커스텀 필드 (ACF)에 의존 한 사람들을 흥분시켰다. ACF를 고수하거나 Divi의 변수로 전환해야합니까? 아니면 동시에 둘 다 사용할 수 있습니까?

이 게시물은 차이점과시기를 사용해야합니다. 그것에 가자!

Divi 5는 새로운 웹 사이트 빌드에 사용할 준비가되었습니다.

Divi Design 변수는 무엇입니까?

웹 사이트를 구축 할 때는 종종 색상에서 글꼴 스타일, 연락처 세부 사항 등 다양한 페이지에서 동일한 정보를 재사용합니다. 설계 변수는 하나의 중앙 장소에서 공유 요소를 관리하는 데 도움이됩니다. 표준 ACF 필드와 달리 설계 변수는 특정 후 컨텐츠와 관련이 없으며 동적 컨텐츠 필드가 아닌 글로벌 설계 및 컨텐츠 값 역할을합니다.

전화 번호를 변경하거나 배경색 조정과 같은 사소한 업데이트를 위해 모든 페이지를 파헤 치는 대신 한 번 변수를 업데이트하며 전체 사이트 전체에서 변경되는 변경이 자동으로 흐릅니다.

계절별 프로모션을 위해 브랜드 색상을 전환하고 싶습니까? 단일 변수를 변경합니다. 바닥 글 텍스트 나 로고를 업데이트해야합니까? 하나의 편집은 모든 인스턴스를 즉시 업데이트합니다. Divi의 디자인 변수를 사용하면 스타일이 빠르고 더 똑똑하게 구축합니다.

더 똑똑하고 업데이트하기 쉬운 웹 사이트 구축

표준 ACF 필드는 특정 게시물과 연계 된 사용자 정의 필드를 작성하여 WordPress 사용자가 설계 및 컨텐츠를 구조화하는 방법을 향상시킵니다. Divi의 디자인 변수는 완전히 다른 경로를 취합니다. 그들은 한 번에 어디에서나 업데이트하는 전 세계적으로 액세스 할 수있는 설계 값입니다. 차이는 처음에는 미묘하게 보일 수 있지만 WordPress 사이트를 구축하고 유지 관리하는 방법이 바뀝니다.

ACF가 테이블에 가져 오는 것

ACF (Advanced Custom Fields)를 사용하면 핵심 버전의 페이지와 게시물에 추가 데이터 필드를 추가 할 수 있습니다. 기본 제목과 콘텐츠 상자 이상의 것을 얻을 수 있습니다. ACF는 사진, 텍스트 블록, 파일, 드롭 다운 메뉴 등을위한 특수 필드를 제공합니다.

관련 필드를 프로젝트의 논리적 그룹으로 번들로 묶을 수 있습니다. 예를 들어, 직원, 부서, 사진 및 바이오에 대한 스팟이있는 직원 그룹을 만들 수 있습니다. 또는 사양, 가격 책정 및 기능 목록에 대한 필드로 제품 세부 사항을 만듭니다.

이 필드 그룹은 사용자 정의 게시물 유형과 잘 작동합니다. 그것들을 결합하면 팀 디렉토리, 서비스 목록 또는 속성 카탈로그와 같은 특수 콘텐츠 섹션을 구축 할 수 있습니다. 각 컨텐츠에 적합한 필드가 있습니다.

사람들은 ACF가 일반 WordPress 관리 영역에 매끄럽게 맞기 때문에 ACF를 좋아합니다. 사용자 정의 필드는 일반 편집 화면에 바로 표시되므로 기술에 정통하지 않은 고객이 컨텐츠를 업데이트 할 수 있습니다.

옵션 페이지 : 사이트 전체 제어판

ACF Pro에서 제공되는 ACF 옵션 페이지를 사용하면 특정 컨텐츠에 연결된 일반 ACF 필드와 달리 사이트 전체 정보를위한 중앙 장소를 만들 수 있습니다. 이 기능은 다음에 좋습니다.

• 연락처 정보
• 중요한 링크
• 영업 시간 및 위치
• 기본 이미지 및 로고

전화 번호와 같이 무언가가 변경되면 관리 섹션에서 한 번만 업데이트하면됩니다. 변경 사항은 귀하의 사이트의 모든 곳에서 바로 나타납니다. 옵션 페이지를 사용하려면 ACF Pro가 필요하다는 점은 주목할 가치가 있습니다.

Divi와의 깊은 통합

표준 ACF 필드는 Divi의 동적 컨텐츠 시스템을 통해 Divi와 잘 어울립니다. Divi Builder에서 페이지를 만들 때 ACF 사용자 정의 필드에서 정보를 가져올 수 있습니다. 이 팀워크를 사용하면 ACF의 컨텐츠 관리와 함께 Divi의 디자인 도구를 사용할 수 있습니다.

프로세스가 일반적으로 작동하는 방법은 다음과 같습니다.

• ACF로 사용자 정의 필드를 설정하십시오
• WordPress의 내용 으로이 필드를 채우십시오
• 페이지 레이아웃을 Divi로 설계하십시오
• ACF 콘텐츠를 Divi 모듈에 연결하십시오

이 Divi와 ACF의 조합은 유용한 분리를 만듭니다. 컨텐츠 편집기는 깨끗하고 정리 된 인터페이스로 정보를 업데이트 할 수 있으며 디자이너는 컨텐츠 관리 세부 사항에 얽매이지 않고 레이아웃을 구축 할 수 있습니다.

유연한 접근

표준 ACF 필드는 코드 또는 시각적 도구 등 기술에 대해 작동합니다. 개발자는 템플릿 함수를 사용하여 사용자 정의 테마에 필드 값을 표시 할 수 있습니다. 코드를하지 않으면 PHP를 모르고 Divi와 같은 빌더와 함께 ACF 필드를 사용할 수 있습니다.

이러한 유연성은 기본 비즈니스 웹 사이트 및 복잡한 프로젝트에 적합한 표준 ACF 필드를 만듭니다. 간단한 기능으로 시작하여 배우고 사이트가 커짐에 따라 더 고급 기능을 사용할 수 있습니다.

Divi의 디자인 변수의 유연성

Divi 5 설계 변수는 웹 사이트 관리를 더 간단하게 만듭니다. 그들은 당신이 당신의 사이트의 어느 곳에서나 사용할 수있는 디자인 선택과 재사용 가능한 컨텐츠를 저장합니다. 하나의 변수를 업데이트하면 사용한 모든 곳에서 변경됩니다.

변수 관리자는 Divi 5의 Visual Builder 사이드 바에서 변수 아이콘을 클릭하여 찾을 수 있습니다. 한 곳에서 모든 디자인 요소를 관리 할 수 ​​있습니다.

6 가지 유형의 설계 변수

Divi 5는 웹 사이트의 다양한 측면을 돕기 위해 6 가지 유형의 변수를 포함합니다.

• 색상 변수 : 브랜드 색상, 텍스트 색상 및 배경을 유지합니다.
  • "Coral Blush"또는 "Champagne Gold"처럼 명확하게 이름을 지정할 수 있습니다.
  • 버튼, 텍스트, 배경 및 경계에 사용하십시오
  • 그런 다음이 몇 가지 변수를 업데이트하여 전체 색 구성표를 변경할 수 있습니다.
• 글꼴 변수 : 테마 커스터마이저 이외의 타이포그래피 옵션을 설정합니다
  • 제목, 차체 또는 특수 영역에 대한 별도의 글꼴 설정을 만들 수 있습니다.
  • 이것은 웹 사이트에서 타이포그래피를 일관되게 유지합니다
  • 필요한 경우 한 번에 모든 글꼴을 업데이트 할 수 있습니다
• 숫자 변수 : 디자인에 사용 된 저장 측정
  • 간격, 경계, 크기 및 텍스트 차원에 적합합니다
  • 반응 형 디자인을 위해 Clamp ()와 같은 CSS 단위와 함께 작업하십시오
  • 이를 통해 모든 곳에서 간격과 크기를 일관되게 유지하는 데 도움이됩니다

Divi 5 변수는 사이트 전체에 나타나는 컨텐츠를 처리합니다.

• 이미지 변수 : 여러 장소에 사용되는 사진을 저장합니다
  • 로고, 배경 패턴 및 사진에 적합합니다
  • 모든 페이지 대신 이미지를 한 번 업데이트하십시오
  • 계절별 업데이트 또는 브랜드 변경을 훨씬 빨리 만드십시오
• 텍스트 변수 : 많은 지점에 나타나는 서면 콘텐츠 저장
  • 연락처 정보, 태그 라인 및 영업 시간에 유용합니다
  • 텍스트를 한 번 변경하여 어디에서나 업데이트하십시오
  • 세부 사항이 변경 될 때 정보를 일관되게 유지하십시오
• 링크 변수 : 버튼 및 메뉴의 URL을 저장합니다
  • 액션 버튼, 소셜 미디어 링크 및 탐색에 사용합니다
  • 웹 주소가 변경 될 때 깨진 링크를 피하십시오
  • 새 페이지를 추가 할 때 모든 관련 버튼을 한 번에 업데이트합니다.

실제 혜택

설계 변수는 시각적이기 때문에 시간을 절약하고 오류를 줄입니다. 클라이언트가 웹 사이트 색상을 변경하려면 색상 변수 만 업데이트 할 수 있으며 해당 색상 (버튼, 배경 및 텍스트)이있는 모든 것이 사이트 전체에서 즉시 변경 될 수 있습니다.

이 변수는 Divi의 사전 설정 시스템에서 잘 작동합니다. 모듈 사전 설정에 변수를 추가하고 변수를 업데이트 할 때 모든 변수가 변경되는 모든 모듈이 변경됩니다.

모든 장치에서 잘 보이는 웹 사이트의 경우 Clamp ()와 같은 CSS 기능이있는 숫자 변수는 별도의 디자인없이 레이아웃이 화면 크기에 맞는 데 도움이됩니다. 여러 사람이 웹 사이트에서 작업하면 디자인 변수는 동일한 설계 규칙을 사용하여 모든 사람을 유지합니다. 이를 통해 누가 변경하든 사이트가 일관되고 전문적인 상태를 유지하는 데 도움이됩니다.

그들이 비교하는 방법

표준 ACF 필드와 Divi의 디자인 변수를 비교할 때 웹 사이트를보다 관리하기 쉽게 만드는 두 가지 방법을 찾고 있습니다. 핵심 차이를 분류합시다.

표준 ACF 필드는 게시물과 페이지간에 변경되는 구조화 된 컨텐츠가 필요할 때 빛을 발하는 반면 Divi Design 변수는 현장 전체 설계 일관성을 유지합니다. ACF 옵션 페이지 (ACF Pro에서 제공)와 Divi Design 변수가 비슷한 몇 가지 측면이 있습니다.

Divi Design 변수는 ACF Pro가하는 모든 일을 시도하지 않는다는 것을 이해하는 것이 중요합니다. 웹 사이트에서 동일한 정보를 저장하고 사용하는 또 다른 방법을 제공합니다. ACF는 여전히 Divi 변수가 할 수없는 많은 일을 할 수 있습니다.

Divi 변수는 연락처 정보 변경, 시즌과 사진 교환 또는 브랜드 색상 업데이트와 같은 간단한 작업에 적합합니다. ACF는 사용자 정의 필드 및 게시물 유형 작성과 같은 디자인 요소 이상의 전문화 된 컨텐츠 관리가 필요한 웹 사이트에 이상적입니다. 마찬가지로 ACF Pro와 함께 제공되는 ACF 옵션 페이지는 Divi Design 변수의보다 성숙한 버전입니다.

그러나 Divi의 설계 변수는 추가 비용없이 Divi 5에 내장됩니다. 이미 사용하고있는 빌더에서 색상, 글꼴, 텍스트 및 이미지를 바로 설정할 수 있습니다. 추가 플러그인이나 새로운 시스템을 학습 할 필요가 없습니다. 프로젝트 요구 사항은 워크 플로에서 어떤 시스템이 주도적 인 역할을하는지 안내하지만, 이러한 도구는 표면 유사성에도 불구하고 근본적으로 다른 문제를 해결한다는 것을 기억하십시오.

ACF 및 Divi 변수가 함께 작동 할 수 있습니까?

예. 실제로 동일한 웹 사이트에서 표준 ACF 필드와 Divi Design 변수를 모두 사용할 수 있습니다. 그들은 귀하의 사이트의 다른 부분을 처리하기 때문에 함께 잘 작동합니다. 페어링하면 표준 ACF 필드는 에이전트, 이웃 및 가격 사용자 정의 필드에 연결되는 자산 목록 게시물 유형이있는 부동산 사이트와 같은 복잡한 데이터 관계를 처리 할 수 ​​있습니다.

한편, 디자인 변수는 모든 페이지 및 게시물 템플릿에서 브랜드 색상, 타이포그래피 및 간격을 일관되게 유지합니다. 이는 귀하의 웹 사이트에 강력한 데이터 관리 및 시각적 일관성이 있음을 의미합니다.

콘텐츠 편집자는 ACF의 친숙한 필드와 협력하여 속성 세부 정보 또는 가격을 업데이트 할 수 있으며 사이트는 Divi의 디자인 시스템을 통해 전문적인 모습을 유지합니다. 이 조합은 도구가 단독으로 제공 할 수있는 것보다 더 나은 제어를 제공합니다.

핵심은 각 작업에 어떤 도구를 사용할 것인지 아는 것입니다. 그들의 강점을 이해함으로써, 당신은 여전히 ​​응집력있는 시각적 정체성을 유지하는 정교한 컨텐츠 구조로 웹 사이트를 구축 할 수 있습니다. 이러한 도구가 일반적인 웹 사이트 문제를 함께 해결하는 방법에 대한 실제 예를 살펴 보겠습니다.

유스 케이스 #1 - 계절 변화가있는 지역 비즈니스 웹 사이트

로컬 베이커리 웹 사이트에는 구조화 된 컨텐츠 및 계절 디자인 업데이트가 필요합니다. 우리는 표준 ACF 필드와 Divi 디자인 변수를이 사이트의 실용적인 방식으로 결합했습니다.

표준 ACF 필드는 맞춤형 게시물 유형과 필드로 베이커리 제품 카탈로그를 처리합니다.

• 항목
• 항목 설명
• 성분 및 알레르겐 정보
• 가격 계층
• 가용성 상태

이러한 세부 사항은 각 제품에 대한 변경이므로 ACF의 구조화 된 접근 방식이 완벽하게 작동합니다. 베이커리 직원은 ACF의 친숙한 WordPress 인터페이스를 통해 제품 정보를 업데이트합니다.

한편, Divi Design 변수는 계절 디자인 요소를 관리합니다.

• 계절에 따라 변화하는 색 구성표
• 휴일을위한 홍보 배너 텍스트
• 홈페이지의 제품 이미지
• 매월 새로 고침되는 배경 패턴

가을이 도착하면 빵집 소유자는 단순히 여름 파스텔에서 가을 톤에 이르기까지 계절 색상 변수를 업데이트하고 전체 사이트가 즉시 새로 고침됩니다.

배경 이미지는 이미지 변수를 다음과 같이 개별적으로 편집 할 필요없이 가을 테마 장식을 표시하도록 변경됩니다.

이 설정은 베이커리가 표준 ACF 필드를 통한 구조화 된 제품 데이터와 Divi의 디자인 변수를 통한 빠른 계절 상쾌함을 제공합니다.

유스 케이스 #2 - 사진 포트폴리오 웹 사이트

사진 비즈니스 웹 사이트는 조직화 된 고객 갤러리와 일관된 비주얼 브랜드의 균형을 맞추어야합니다. 다음은 표준 ACF 필드 및 Divi 디자인 변수 가이 도전을 해결하는 방법입니다. 표준 ACF 필드 구조화 된 컨텐츠 측면을 관리합니다.

• 클라이언트 프로젝트 갤러리는 사용자 정의 게시물 유형입니다
• 사용자 정의 필드 :
  • 자세한 가격 책정 필드가있는 서비스 패키지
  • 클라이언트 이름을 가진 평가 수집
  • 프로젝트 유형
  • 장비 사양

사진 작가는 ACF의 인터페이스를 통해 각 클라이언트 갤러리를 업데이트하여 다음을 추가합니다.

• 프로젝트 날짜 및 위치
• 기본 정보
• 이미지 분류 및 분류

한편, Divi Design 변수는 브랜드 일관성을 처리합니다.

• 모든 제목 및 신체 텍스트에 대한 타이포그래피 시스템
• 브랜드 색상 팔레트는 모든 페이지에 적용됩니다
• 일관된 레이아웃 리듬에 대한 간격 값
• 균일 한 프레젠테이션을위한 갤러리 그리드 설정

브랜드 새로 고침이 필요하십니까? 사진 작가는 몇 가지 설계 변수를 업데이트하고 전체 사이트가 변경됩니다. 갤러리는 숫자 변수로 인해 간격을 유지하며 각 프로젝트는 ACF 덕분에 세부 사항을 유지합니다.

결혼식 시즌이 바쁠 때 사진 작가는 예약 상태를 위해 하나의 텍스트 변수를 변경하고 사이트의 어느 곳에서나 업데이트됩니다. 동일한 텍스트를 수정하기 위해 모든 페이지를 확인하지 마십시오. 이 조합은 사진과 클라이언트 정보 (ACF)를 사이트의 모양 (디자인 변수 포함)과 분리하여 사진 작가가 구조와 모양을 올바르게 얻을 수 있도록합니다.

프로젝트에 올바른 선택을합니다

빵집 및 사진 예제를 살펴보면 이러한 도구가 다른 웹 사이트 문제를 해결하는 것을 볼 수 있습니다. 베이커리 소유자는 계절 색상을 쉽게 바꾸는 동시에 제품 정보를 업데이트합니다. 사진 작가는 갤러리를 정리하지만 몇 번의 클릭만으로 사이트의 모양을 업데이트 할 수 있습니다.

일부 사이트는 이러한 도구 중 하나만 필요하지만 다른 사이트는 둘 다에서 더 잘 작동합니다. 한 가지 분명한 점은 표준 ACF 필드와 Divi 설계 변수 중에서 선택하는 것이 어느 중 하나나 결정 일 필요는 없습니다.

Divi 5는 툴킷에 또 다른 유용한 옵션을 추가했습니다. 단순하거나 복잡한 것을 구축하든 이제 잘 보이고 잘 작동하는 사이트를 만들 수있는 더 많은 방법이 있습니다.

더 똑똑한 건축을 시작하십시오

결론은 Divi 5의 디자인 변수와 표준 ACF 필드가 각각 다른 문제를 해결하면서 (특히 옵션 페이지와 함께) 다른 문제를 해결한다는 것입니다. 사이트 전체에서 빠른 디자인 업데이트가 필요하십니까? 디자인 변수가 빛납니다. 조건부 논리로 강력한 컨텐츠 관리를 원하십니까? 표준 ACF 필드 제공.

많은 사이트가 두 도구 모두 나란히 잘 작동합니다. ACF 옵션 페이지는 복잡한 콘텐츠 요구를 관리하는 데 더 좋습니다. 설계 변수는 옵션 페이지를 완전히 바꾸는 것이 아니라 간단한 요구 사항을 가진 대부분의 사용자에게 강력한 대안이 될 수 있습니다.

디자인 변수 기능은 이제 Divi 5 (추가 비용 없음, 코딩 필요 없음, 다음 프로젝트에 준비가되어 있습니다.

기억하십시오 : Divi 5는 새로운 웹 사이트에서 가장 잘 작동합니다. 기존 사이트를 아직 Divi 5로 옮기는 것은 권장하지 않습니다.