Divi 5의 디자인 변수로 반복 콘텐츠를 관리합니다

웹 사이트 구축을 늦추는 한 가지가있는 경우 주소, 연락처 세부 사항, 버튼 링크 또는 회사 임무 등 반복 콘텐츠를 다루고 있습니다. 일관성을 위해 반복되는 콘텐츠는 필요하지만 수동으로 관리하는 데 지루할 수 있습니다.

Divi 5의 디자인 변수는이를 해결하는 데 도움이됩니다. 페이지 전체에서 동일한 콘텐츠를 복사하고 붙여 넣는 대신 이제 텍스트, 링크, 이미지, 글꼴 및 색상과 같은 반복 요소를 삽입하고 업데이트 할 수 있습니다. 이 게시물에서는 웹 사이트에 가질 수있는 반복 콘텐츠 유형과 Divi 5의 디자인 변수로 간소화하는 방법에 중점을 둡니다. 그것에 가자!

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

Divi 5의 설계 변수는 무엇입니까?

Divi 5의 설계 변수는 재사용 가능한 값입니다. 한 번 정의하고 몇 번의 클릭으로 사이트에서 적용 할 수 있습니다. 변수 관리자 내부의 정의 된 변수를 편집하여 모든 인스턴스 (나타나는 위치)를 자동으로 업데이트 할 수도 있습니다. 텍스트 문자열에서 글꼴, 숫자 등 다양한 유형의 변수를 만들 수 있습니다.

변수 관리자를 사용하면 각 유형의 변수를 만들고 이름을 지정하고 저장할 수 있으므로 쉽게 찾을 수 있습니다. 디자인에 변수를 적용하려면 설정 옵션을 사용하여 동적 컨텐츠 아이콘을 찾으면 저장된 변수가 나타납니다.

이 작은 변경은 반복 된 컨텐츠 요소를 현명하게 사용하고 관리하여 웹 디자인 프로세스를 최적화하는 데 도움이됩니다.

설계 변수의 유형

Divi 5를 사용하면 6 가지 유형의 설계 변수를 정의 할 수 있습니다. 각각은 다른 목적을 제공합니다.

• 텍스트 변수 : 재사용 가능한 일반 텍스트 문자열. 회사 이름, 전화 번호, 태그 라인, 버튼 카피 등과 같은 텍스트 변수를 정의 할 수 있습니다.
• 글꼴 변수 : 일관된 타이포그래피를 더 쉽게 만듭니다. 예를 들어, 제목 (H1 ~ H6) 및 신체 텍스트의 글꼴 패밀리를 정의하십시오.
• 숫자 변수 : 패딩, 여백 및 라인 높이와 같은 크기를 표준화하십시오. 예를 들어, 모든 섹션에 패딩 마진 설정을 정의하고 적용하십시오.
• 색상 변수 : 현장 전체 일관성을 위해 최신의 업그레이드 된 글로벌 색상 버전.
• 링크 변수 : 소셜 링크, 버튼 또는 법적 페이지와 같은 자주 사용되는 URL을 정의하십시오.
• 이미지 변수 : 회사 로고, 배경 주제, 제품 이미지 등과 같은 일반적인 이미지를 저장하여 쉽게 재사용합니다.

디자인 변수에 대해 모든 것을 배우십시오

설계 변수를 작성하고 사용하는 방법

우리는 초보자에게도 웹 디자인에 액세스 할 수 있도록 처음부터 Divi 5를 구축하고 있습니다. 모든 기능은 사용하기 쉽고 설계 변수는 다르지 않습니다. 설계 변수 설정과 관련된 실제 단계를 빨리 살펴 보겠습니다.

새로운 변수 생성

Divi Builder 내부에서는 데이터 스택 아이콘 (빌더 도구 모음의 3 층 아이콘)을 클릭하여 변수 관리자 에 액세스하십시오.

위에서 설명한 6 가지 변수 유형이 포함 된 창이 팝업됩니다. 만들고 싶은 것을 선택하십시오. 이 예를 들어, 회사 주소를 글로벌 텍스트 변수로 저장하는 방법을 보여 주므로 텍스트 변수 옵션을 선택합니다.

글로벌 문자열 추가를 클릭하여 새 텍스트 변수를 추가하십시오.

여기에서는 해당 텍스트 변수 값과 관련된 텍스트 문자열을 지정하고 추가합니다. 먼저 텍스트 변수의 이름을 지은 다음 문자열 값을 할당하십시오.

주어진 이름에 적절한 문자열 값을 할당 한 후에는 변수 저장을 클릭하여 텍스트 변수를 저장하십시오. 문자열의 이름이 고유한지 확인하십시오.

그리고 그게 다야! 모든 웹 사이트 페이지에서 사용할 수있는 전역 텍스트 변수를 만들었습니다. 이 변수를 적용하는 것이 얼마나 쉬운 지 보자.

변수 적용

바닥 글 섹션에서 주소를 변경하고 싶다고 가정 해 봅시다.

텍스트 변수를 적용하려면 수정하려는 요소를 클릭하십시오 (당사의 경우 주소). 텍스트 변수이므로 설정 패널의 컨텐츠 로 이동하여 본문 위로 이동하여 동적 컨텐츠 아이콘을 찾으십시오.

클릭하면 저장된 모든 변수 (텍스트 변수의 경우 글로벌 문자열)가 목록 상단에 나타납니다.

우리는 주소를 주소로 저장했습니다. 주소 변수를 적용하려면 클릭하십시오.

그리고 그게 다야. 회사 주소가 텍스트 변수로 저장되면 몇 번의 클릭만으로 쉽게 삽입 할 수 있습니다.

웹 사이트의 일반적인 유형의 반복 콘텐츠

디자인 변수로 가능한 것들을 엿볼 수 있도록 매번 수동으로 수동으로 만들거나 복사/붙여 넣을 필요가없는 모든 반복 컨텐츠 요소 목록을 컴파일했습니다.

이들은 단지 콘텐츠 요소 (텍스트, 이미지 및 링크 변수 유형의 좋은 예)이지만 다른 설계 변수를 사용하면 글꼴 스타일 및 색상과 같은 일반적으로 반복되는 설정을 저장하여 작업을 더 쉽게 할 수 있습니다.

현실적인 사용 사례 : 디자인 변수는 반복 콘텐츠를 단순화합니다

또한 Divi 5의 각 설계 변수가 반복 콘텐츠 업데이트를 제거하여 워크 플로를 단순화 할 수있는 방법을 보여주기 위해 실제 예제를 수집했습니다.

1. 판매 중 버튼 사본 업데이트

버튼 사본, 제품 제목, 설명 등 업데이트는 이제 사이트 전체 변경을 반영하기 위해 한 번만 편집 할 수있는 작업이되었습니다. 온라인 상점에서 Black Friday Sale을 실행하고 있으며 각 홈페이지 버튼에 30% 할인을 표시하고 싶습니다.

텍스트 변수를 사용하여 한 번에 쉽게 할 수 있습니다. 나는 이미 문자열 값 상점 (30% 할인 !! ) 으로 버튼 (30% 할인)이라는 텍스트 변수를 이미 만들고 저장 했으므로 사본을 반영하기 위해 모든 버튼에 한 번만 적용하면됩니다.

가장 좋은 점은 판매가 끝나면 텍스트 변수의 값을 한 번만 업데이트하면 모든 버튼이 원래 사본으로 자동으로 전환된다는 것입니다.

회사 주소, 연락처 세부 사항, 태그 라인 등에 대해 유사한 텍스트 변수를 만들 수 있으며 더 자주 사용할 수 있습니다. 또 다른 예는 클라이언트 평가를 텍스트 문자열로 저장하고 가격 책정 페이지, 연락처 양식 또는 근처 서비스 버튼과 같은 주요 영역에서 재사용하는 것입니다. 이것은 미묘하게 신뢰를 쌓고 방문객들이 더 빨리 결정을 내리는 데 도움이 될 것입니다.

2. 테마 색상을 모든 버튼으로 확장합니다

블랙 프라이데이 판매 중에 모든 웹 사이트 버튼 색상을 검은 색으로 변경한다고 가정 해 봅시다. 모든 버튼이 저장 한 웹 사이트 버튼 색상 변수에서 색상을 상속하기 때문에 색상을 검은 색으로 변경하면 모든 버튼이 검은 금요일 정신을 반영합니다.

1 차 또는 보조 색상을 일시적으로 변경하는 경우 (위의 예에서와 같이) 원래 색상 육각 코드를 어딘가에 작성하여 값을 다시 변경하여 언제든지 복원 할 수 있습니다.

3. 타이포그래피의 글로벌 값 관리

새 헤딩 또는 텍스트 모듈을 추가 할 때 동일한 타이포그래피 설정을 반복 할 필요가 없습니다. 텍스트 크기 설정을 통해 각 헤어링을 수동으로 조정하는 대신, 선호하는 값을 한 번 할당하고 필요한 곳에 재사용하십시오. H1에서 H6까지의 모든 제목 레벨에 대한 글로벌 글꼴 크기를 정의하고 한 번의 클릭만으로 사이트 전체에 적용 할 수 있습니다. 요소 또는 옵션 그룹 사전 설정 내부에서 디자인 변수를 쉽게 사용할 수도 있습니다.

특히 큰 페이지에서 작업하거나 간격 장치, 테두리 너비 또는 다른 섹션에서 이미지 비율과 같은 스타일을 업데이트 할 때 큰 시간을 절약합니다. 각 요소를 개별적으로 조정하는 대신 일관된 값을 즉시 적용하여 디자인을 깨끗하고 효율적으로 유지할 수 있습니다.

4. 글로벌 글꼴을보다 효율적으로 저장하고 관리합니다

제목, 신체 및 특정 섹션의 글로벌 글꼴을 저장하고 재사용합니다. 카테고리 페이지 나 방문 페이지와 같은 섹션에 다른 서체를 할당하여 톤과 일치 할 수 있습니다.

예를 들어, "의견"또는 "편집"과 같은 블로그 카테고리 페이지에 강력한 Serif 글꼴을 사용하여 제품이나 방문 페이지에 깨끗하고 현대적인 SANS-SERIF를 사용하여 물건을 가볍고 전환 중심으로 유지하는 동안보다 진지하고 인쇄와 같은 느낌을줍니다. 회원 평가 또는 인라인 배너에 다른 글꼴을 사용하고 싶을 수도 있습니다. 여러 글꼴 변수를 추가하고 명확하게 레이블을 지정하고 수동 업데이트없이 사이트 전체에 적용하십시오.

5. 빠른 액세스를 위해 배경 주제를 저장하십시오

배경 주제를 이미지 변수로 저장하고 몇 번의 클릭으로 섹션, 행 및 모듈 배경에 적용 할 수 있습니다.

마찬가지로, 회사 로고, 제품 이미지, 개인 사진 (개인 브랜드를 구축하는 경우), 영웅 이미지 등을 이미지 변수로 저장하면 필요할 때 한 번의 클릭으로 쉽게 액세스 할 수 있습니다.

6. 구매 링크를 즉시 추가하십시오

구매 링크, 연락처 페이지 또는 개인 정보 보호 정책과 같은 주요 URL을 링크 변수로 저장하고 한 번의 클릭으로 버튼이나 텍스트에 적용하십시오. 매번 더 이상 복사 할 수 없습니다. 이것은 여러 페이지 나 템플릿에 나타나는 자주 사용되는 링크에 특히 유용합니다.

설계 변수는 Divi 5의 사전 설정 기반 설계 시스템에서 특히 반복 된 컨텐츠를 효율적으로 관리 할 때 중요한 역할을합니다. 동일한 스타일을 다시 적용하거나 페이지 전체에 정확한 텍스트를 붙여 넣는 대신 변수를 한 번 정의하고 어디서나 재사용 할 수 있습니다. 사전 설정과 결합하여 설계 변수가 더욱 도움이됩니다.

이것은 워크 플로를 속도를 높일뿐만 아니라 사이트 전체의 일관성을 보장합니다. 글꼴 크기의 숫자 변수이든 연락처 정보의 텍스트 변수이든 디자인 변수를 사용하면 모든 모듈을 파헤 치지 않고도 전 세계적으로 반복 콘텐츠를 업데이트 할 수 있습니다.

설계 변수를 효과적으로 사용하기위한 모범 사례

디자인 변수를 최대한 활용하려면 웹 사이트 디자인 프로세스의 초기 단계 (계획)에 포함 시키십시오. 다음은 도움을주기위한 몇 가지 팁입니다.

1. 작게 시작하십시오

디자인 변수로 시작하는 경우 로고, 글로벌 글꼴, 색상, 글꼴 크기 또는 버튼 패딩과 같은 재사용이 종종 재사용되는 필수품으로 시작하십시오. 이것들을 먼저 설정하면 일관된 기초가됩니다. 그런 다음 디자인이 발전함에 따라 필요에 따라 더 많은 변수를 레이어하십시오.

2. 명확한 이름 지정 협약을 따르십시오

더 많은 변수를 추가 할 때 카테고리와 함께 혼동하기 쉽습니다. 그렇기 때문에 명확한 이름 지정 컨벤션이 필수적입니다. Text1 또는 Promoa 와 같은 모호한 레이블을 피하십시오. 대신 Company_Name , main_cta 또는 booter_disclaimer 와 같은 설명 이름을 사용하여 정리하고 시간을 절약하십시오.

3. 사이트 페이지 앞에 변수를 업데이트하십시오

사이트 전체의 제안을 출시하거나 브랜딩을 업데이트하는 경우 주요 요소를 개별적으로 수정하려고합니다. 하지 않다. 변수를 먼저 조정하십시오. 그런 다음 페이지를 스캔하여 모든 것이 동기화되는지 확인하십시오. 하나의 업데이트는 전부입니다. 모든 버튼이나 섹션을 사냥하는 것은 불필요합니다.

4. 과도하게 사용하지 말고 전략적이어야합니다

모든 텍스트를 변수로 바꾸려는 유혹이지만, 특히 변수를 문맥 적으로 이름 지정하지 않는 경우 빠르게 압도 될 수 있습니다. 따라서 둘 이상의 장소에서 사용되는 문구 나 줄과 같은 패턴을 알 수 있습니다. 이들 만 변수로 변환합니다. 문구가 한 번만 나타나면 그대로 두는 것이 좋습니다.

설계 변수는 컨텐츠 관리를 단순화합니다

수십 페이지에 걸쳐 동일한 태그 라인 또는 호출 문안 업데이트와 같은 반복 콘텐츠를 수동으로 관리하는 것은 웹 디자이너의 작업의 지루한 부분이었습니다. 복사, 붙여 넣기, 이중 확인-무언가를 놓치기 쉬웠으며 좌절하기가 더 쉬웠습니다. 더 이상.

설계 변수를 사용하면 컨텐츠 설정을 중앙 집중화 할 수 있습니다. 변수를 한 번 변경하면 모든 인스턴스가 즉시 업데이트됩니다. 더 빠른 업데이트, 더 깨끗한 워크 플로 및 두통이 적은 반복 편집 또는 버전 불일치가 없습니다.

최신 Divi 5 알파를 다운로드하십시오

디자인 변수는 이제 Divi 5 Alpha로 제공되며 워크 플로를 단순화하기 위해 여기에 있습니다. 글로벌 글꼴 및 색상에서 링크 및 텍스트 변수에 이르기까지 단일 소스에서 반복 콘텐츠 및 스타일을 제어 할 수 있습니다. 기본 요소를 설정하고 섹션에 적용한 후 한 번에 모든 것을 업데이트하십시오. 클라이언트 프로젝트를 수정하거나 사이트를 재건하든이 기능을 사용하면 더 적은 오류로 더 빠르게 이동하는 데 도움이됩니다.

시도해 볼 준비가 되셨습니까? Divi 5 알파를 다운로드하고 설계 변수 실험을 시작하십시오. 글꼴, 버튼 레이블을 재사용하거나 스마트하게 글로벌 스타일을 설정하십시오. 그리고 귀하의 피드백을 Divi 팀과 공유하는 것을 잊지 마십시오. 우리는 이것을 당신을 염두에두고 있습니다.

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