Divi 5로 디자인 프레임 워크 구축

Bootstrap과 같은 CSS 프레임 워크와 함께 일한 적이 있다면 왜 인기있는 이유를 알 수 있습니다. 디자인 프레임 워크를 사용하면 빠르고 일관된 레이아웃을 설계 할 수있는 재사용 가능한 기초를 제공하므로 페이지 스타일마다 처음부터 처음부터 구축하지 않습니다.

대부분의 프레임 워크는 Prewritten 클래스에 의존하지만 여전히 더 깊은 커스터마이징을 위해 사용자 정의 CS를 작성하여 비 코더에게 까다로워 질 것으로 기대합니다. 그것이 Divi 5가 다른 곳입니다.

CSS를 설계 변수, 옵션 그룹 사전 설정 및 요소 사전 설정과 같은 도구로 대체하는 시각적 최초의 접근 방식이 필요합니다. 한 줄의 CSS를 쓰지 않고 프레임 워크의 모든 힘을 얻습니다. 이 게시물에서는 Divi 5를 사용하여 비 코드 디자인 프레임 워크를 구축하는 방법을 보여줍니다.

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

Divi 5가 No-Code Design Framework를 구축 할 수있는 방법

Divi 5는 처음부터 재건되어 모든 사람이 고급 웹 디자인에 액세스 할 수 있도록합니다. 코딩 수준에 관계없이 현대적인 맞춤형 레이아웃을 시각적으로 구축 할 수 있습니다. 디자인 프레임 워크 구축은 다르지 않습니다.

YouTube 채널을 구독하십시오

디자인 변수를 사용하면 글로벌 디자인 값을 정의 할 수 있습니다

디자인 변수를 사용하면 브랜드 색상, 글꼴, 간격 등과 같은 반복 가능한 값을 중앙 위치에서 정의 할 수 있습니다. 저장되면 웹 사이트 전체에서 이러한 값을 재사용하여 일관된 브랜드 시각적 외관을 제공 할 수 있습니다.

Visual Builder 내부에서 변수 관리자를 찾으십시오. 다른 변수 유형 (숫자, 텍스트, 이미지, 링크, 색상 및 글꼴)을 체계적으로 정의하고 저장하십시오.

디자인 변수는 CSS 사용자 정의 속성의 코드가없는 버전과 같지만 훨씬 더 유연성이 있습니다. 예를 들어, 일반적으로 다음과 같은 CSS 변수를 선언합니다 . root {–primary-color : #1A73E8; } , 그러나 Divi의 디자인 변수를 사용하면 색상을 기본 색상 으로 만 저장합니다.

업데이트를하는 동안 그들의 진정한 힘을 볼 수 있습니다. 스타일 시트를 통과 할 필요가 없습니다. 가변 관리자 에서 저장된 변수 값을 한 번 수정하여 웹 사이트 전체에서 모든 인스턴스를 업데이트하십시오. 그들은 여러 스타일의 규칙을 사냥하지 않고 아이디어를 신속하게 시각화 할 수 있도록합니다.

또한 주소, 이메일, 링크, 배경 주제 등과 같은 일반적으로 반복되는 컨텐츠 요소를 콘텐츠 변수로 정의 할 수 있습니다. 여러 번 수동으로 삽입 할 필요가 없습니다. 한 번의 클릭 및 이러한 요소가 귀하의 페이지에 나타납니다. 예를 들어, 회사 주소를 텍스트 변수로 저장하고 사용하십시오.

디자인 변수를 적용하려면 옵션을 호버하고 동적 컨텐츠 아이콘을 찾으십시오.

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

옵션 그룹 사전 설정으로 공통 스타일 조합을 저장하십시오

옵션 그룹 사전 설정을 사용하면 매번 재건 할 필요없이 간격, 테두리, 그림자, 텍스트 스타일 및 배경과 같은 자주 사용되는 설계 설정을 저장하고 재사용 할 수 있습니다. 모듈 내부의 특정 옵션 그룹에 중점을 두므로 해당 부분을 스타일링하고 한 번의 클릭으로 어디서나 적용 할 수 있습니다.

예를 들어, 모든 평가 섹션에서 항상 동일한 40px 패딩과 10px 마진을 사용한다고 가정 해 봅시다. 해당 설정을 간격 사전 설정으로 저장하십시오. 새로운 평가 모듈을 추가하면 사전 설정을 선택하면 완료됩니다.

옵션 그룹 사전 설정을 강력하게 만드는 것은 설계 변수와 혼합 할 수 있다는 것입니다 . 기본 색상이 변수로 저장되면 배경 사전 설정 내부에서 사용할 수 있으므로 브랜드 색상이 변경되면 전체 사전 설정이 업데이트됩니다. 모든 페이지의 배경은 한 번의 클릭으로 변경됩니다.

옵션 그룹 사전 설정은 전체 모듈을 무시하지 않으며 선택한 스타일 그룹에만 적용됩니다. 그러나 항상 모듈 별 설정으로 사전 설정을 재정의하여 특정 모듈을 사용자 정의 할 수 있습니다. 이를 통해 사이트 전체에서 일관된 시각적 스타일을 보장하면서 레이아웃과 컨텐츠를 고유하게 유지할 수 있습니다.

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

요소 사전 설정으로 완전히 설계된 요소를 저장하십시오

Divi 사용자라면 이미 Element Presets에 익숙합니다. 텍스트, 간격, 색상, 아이콘, 호버 효과 등 요소 사전 설정을 포함하여 모듈의 모든 사용자 정의 스타일을 저장할 수 있으므로 처음부터 구축하지 않고 어디서나 재사용 할 수 있습니다. 당신은 기본적으로 가장 많이 사용되는 모듈의 준비된 버전을 만들고 있습니다.

빠른 사용 사례는 다음과 같습니다. Blurb Preset를 사용자 정의하고 저장 한 다음 다른 디스형화되지 않은 Blurbs에 적용하여 빠르게 스타일을 지정하십시오.

이러한 도구가 Frontend HTML에 반영되는 방법

Divi 5는 코드가없는 도구처럼 보일 수 있지만 실제로는 깨끗하고 구조화 된 코드를 백그라운드에서 작성하고 있습니다. Spacing Preset을 선택하거나 Variable Manager에서 브랜드 색상을 적용하는 등 설정을 시각적으로 조정하면 모듈 스타일링이 아닙니다. 당신은 또한 코드를 작성하고 있습니다.

모든 설계 결정은 적절한 프론트 엔드 출력으로 변환됩니다. Divi는 디자인에 집중하는 동안 코딩 부분을 처리합니다.

이것이 얼마나 강력한 지 보여주기 위해 Divi 5의 시각적 최초 워크 플로를 Bootstrap과 같은 전통적인 CSS 프레임 워크를 사용하여 수동 접근 방식과 비교할 것입니다.

첫 번째 부트 스트랩 :

부트 스트랩에서 코드를 사용하여 디자인 시스템을 수동으로 구축합니다

이 예에서는 UndersTrap 테마가 설치된 WordPress 설정을 사용했습니다.

일반적인 코드 기반 워크 플로에서는 글로벌 디자인 값을 CSS 변수로 정의하는 것으로 시작합니다. 다음은 다음과 같습니다.

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

연락처 양식과 사용자 정의 스타일 버튼이있는 간단한 연락처 페이지 레이아웃을 구축한다고 가정 해 봅시다. 모든 것을 일관되고 재사용 할 수 있도록하기 위해 Bootstrap의 유틸리티 클래스와 자체 CSS 변수를 혼합하여 사용합니다.

먼저 Bootstrap의 내장 양식 클래스를 사용하여 연락처 양식에 대한 사용자 정의 코드를 추가하여 레이아웃 및 입력 스타일을 처리합니다.

그런 다음 스타일링 된 버튼에 대한 코드를 추가합니다. 여기에서는 Bootstrap 유틸리티 클래스를 배경, 테두리 반경 및 그림자에 대한 맞춤형 CSS 변수와 결합했습니다. 이것은 우리에게 외모와 느낌을 완전히 제어 할 수있게합니다. 변경하려면 변수를 업데이트 할 수 있습니다.

보시다시피, 훌륭하고 효율적이지만 모든 것이 수동으로 제작되었습니다. 우리는 변수를 정의하고 클래스를 적용했으며 전체 코드를 스스로 작성했습니다. 그리고 이것은 간단한 레이아웃입니다.이 접근법을 사용하여 복잡한 페이지를 구축하는 것을 상상해보십시오!

이제 코딩없이 Divi 5를 사용하여 같은 페이지를 작성하겠습니다.

Divi 5로 같은 페이지를 시각적으로 재현합니다

우리는 사이트 전체 설계 시스템의 일부가되는 글로벌 디자인 변수를 정의하는 것으로 시작합니다. 먼저 변수 관리자> 색상 으로 이동합니다. 그런 다음 기본 색상 (#e91e63) 에 대한 16 진 코드를 작성하고 저장하십시오.

마찬가지로, 테두리 반경 {6px} 및 간격에 대한 숫자 변수를 저장할 수도 있습니다. 다음으로 연락처 양식 모듈을 추가하고 제출 버튼을 선호하는 스타일로 사용자 정의합니다.

이제이 버튼 설정을 나중에 사용하기 위해 버튼 사전 설정 으로 저장합니다.

다른 버튼을 추가하고 사전 설정된 버튼을 선택하면 어떻게되는지 확인하십시오. 자동으로 스타일이됩니다.

옵션 그룹 사전 설정을 적용하려면 설정을 통해 호버링하고 설정 아이콘을 찾으십시오.

또한 한 줄의 코드 라인을 터치하지 않고 한 번의 클릭으로 여러 사용자 정의 스타일을 버튼에 적용하는 방법을 알았습니까? 이것이 우리가 디자인 환경 설정을 시각적으로 저장한다고 말할 때 우리가 의미하는 바입니다. 워크 플로 Divi 5의 종류입니다. 빠르고 일관되며 완전히 시각적입니다.

무대 뒤에서 일어나는 일은 마법입니다. Divi는 맹목적으로 스타일을 쌓는 것이 아닙니다. 모든 디자인 변수, 사전 설정 및 적용 설정은 프론트 엔드에서 렌더링 된 깨끗하고 효율적인 코드로 구성됩니다.

위의 디자인 된 페이지의 페이지 소스는 기본 색상이 CSS 변수와 마찬가지로 루트 섹션에 저장되었음을 보여줍니다.

프론트 엔드에서 옵션 그룹 사전 설정은 적절한 클래스 (.et_pb_button, .et_pb_contact_submit)를 대상으로 깨끗한 CSS로 자동 저장 및 출력됩니다.

두 페이지 모두 동일하게 보이지만 구축 및 유지 관리 방법은 완전히 다릅니다.

부트 스트랩에서는 유틸리티 클래스의 혜택을 받았지만 여전히 코드를 작성해야했습니다. 그러나 Divi 5를 사용하면 디자인 변수 및 옵션 그룹 사전 설정과 같은 강력한 기능 만 사용하여 코드 라인을 만지지 않고 동일한 결과를 얻었습니다.

각 변경은 불일치의 위험이없는 몇 번의 클릭으로 적용되었지만 프론트 엔드 코드는 깨끗하게 유지되었습니다. Divi는 불필요한 마크 업이나 인라인 스타일을 추가하지 않고 구조적이고 재사용 가능한 형식으로 스타일을 저장합니다.

Divi 5로 디자인 프레임 워크를 구축하는 방법

Divi 5는 확장 가능한 디자인 시스템을 구축하기위한 모든 도구를 제공하지만 전통적인 개발과 마찬가지로 이러한 도구를 사용하는 순서가 중요합니다. 단계를 살펴보고 더 중요한 이유를 이해합시다.

1. 글로벌 디자인 변수를 정의하십시오

페이지를 디자인하기 전에 글로벌 디자인 변수를 정의하여 시작하십시오. 색상, 글꼴, 크기, 간격 장치 등과 같이 전체 사이트가 의존 할 핵심 가치입니다. 일단 사이트의 빌딩 블록을 정의하면 모든 곳에서 재사용하여 모든 것을 일관되고 깨끗하며 관리하기 쉽게 유지할 수 있습니다.

Divi 5에는이를 생성하고 구성 할 변수 관리자 가 있습니다.

강조 표시된 가변 유형이 역할을하는 방법은 다음과 같습니다.

• 색상 : 브랜드의 기본, 보조 및 악센트 색상을 저장하여 육각 코드를 입력하거나 그늘을 일치시킬 필요가 없습니다. 색상 변수를 저장하고 한 번의 클릭으로 적용하십시오.
• 글꼴 : 제목, 신체 텍스트 또는 평가에 사용하는 정확한 글꼴을 정의합니다. H2를 만들 때마다 팝핀을 대담하게 선택하는 대신 글꼴 변수 로 저장하십시오. 모듈에서 동일한 스타일을 쉽게 재사용 할 수 있습니다.
• 숫자 : 숫자 변수 로 카드 용 8px 테두리 반경 또는 이미지 모듈의 32px 패딩과 같은 이동 설계 값을 저장하십시오. 내부의 고급 단위를 사용하여 동적 디자인을 만들 수도 있습니다.

핵심 변수가 설정되면 구축 한 모든 사전 설정 및 페이지가 이에 의존합니다. 또한 디자인 방향이 나중에 변경되면 (예를 들어, 기본 간격을 조정하려면) 한 곳에서 변수를 업데이트하면됩니다.

디자인 변수를 올바르게 정의한 후에는 모든 인스턴스를 사냥하고 수정할 필요가 없습니다. 변수 관리자 자체에서 값을 한 번만 변경하십시오.

2. 전 세계적으로 반복되는 컨텐츠를 저장하십시오

가변 관리자를 사용하면 사이트에서 종종 반복되는 링크, 텍스트 및 이미지와 같은 컨텐츠 값을 저장할 수도 있습니다. 당신은 일반적으로 이러한 값을 매번 복사하여 붙여 넣지 만 Divi 5를 사용하면 한 번 정의하고 어디서나 재사용 할 수 있습니다.

이는 소셜 미디어 링크, 회사의 연락처 세부 정보 및 수동으로 추가 해야하는 기타 반복 컨텐츠를 저장하는 데 특히 도움이됩니다.

나머지 세 가지 변수를 통해 컨텐츠를 저장할 수 있습니다.

• 텍스트 : 회사 주소가 바닥 글, 연락처 페이지 및 홈페이지의 영웅 섹션에 표시되어 있다고 가정 해 봅시다. 텍스트 변수 로 저장하고 주소가 나타나기를 원하는 곳으로 선택하십시오.
• 링크 : 링크 변수로서 ABSING 페이지, 제품 컬렉션, 소셜 프로파일 또는 이용 약관에 URL을 저장합니다.
• 이미지 : 여러 페이지에서 브랜드 로고 또는 배경 이미지를 사용하는 경우 이미지 변수 로 저장하십시오. 클릭으로 템플릿의 자리 표시 자 이미지를 교체한다고 상상해보십시오!

Divi 5를 사용하면 텍스트, 링크 및 이미지를 재사용 가능한 빌딩 블록으로 취급 할 수 있습니다. 이러한 컨텐츠 변수는 작지만 속도, 정확도 및 장기 유지 보수에 큰 영향을 줄 수 있습니다. 시간을 절약하고 오류를 줄이며 사이트를 지속적으로 업데이트합니다.

3. 옵션 그룹 사전 설정으로 핵심 스타일 작성 및 저장

설계 변수가 설치되면 다음 단계는 옵션 그룹 사전 설정을 사용하여 사이트의 핵심 스타일 패턴을 정의하는 것입니다. 일반적으로 사용되는 설계 설정을 사전 설정으로 저장하고 모든 모듈에서 재사용하십시오.

다음은 옵션 그룹 사전 설정을 최대한 활용하는 방법입니다.

1. 일반적인 스타일을 위해 사전 설정을 저장하십시오

테두리 반경, 배경색 또는 간격과 같이 가장 자주 사용하는 설정에 대한 사전 설정을 저장하십시오. 평가에 항상 40px 상단 패딩과 10px 하단 여백을 사용하여 그 값을 간격 사전 설정으로 저장했다고 가정 해 봅시다.

나는 그 간격을 내 평가자 (및 원하는 경우 다른 모듈) 에 즉시 적용 할 수 있습니다. 경계, 상자 그림자, 버튼 배경 등을 지속적으로 재사용하면 페이지를 만들 때 재사용 할 수 있습니다.

2. 디자인 변수를 사전 설정과 결합하십시오

다음으로 설계 변수를 옵션 그룹 사전 설정과 결합하여 프레임 워크를 강화하십시오. 6px 테두리 반경을 숫자 변수 로 저장하고 옵션 그룹 사전 설정을 작성하는 동안 사용했다고 가정 해 봅시다. 나중에 변수를 변경하면 사전 설정이 사이트 전체에서 자동으로 업데이트됩니다.

마찬가지로 응답 텍스트에 대한 클램프 () 값으로 유체 타이포그래피를 만들 수 있습니다. H1 사전 설정 안에 저장하고 레이아웃 전체의 제목에 일관되게 적용하십시오. 사전 설정과 변수의 조합은 시각적 프레임 워크가 실제로 모듈 식, 확장 가능하며 유지 관리가 쉬워지기 시작하는 곳입니다.

옵션 그룹 사전 설정을 기본값 으로 저장할 수도 있습니다. 즉, 스타일이 새 모듈에 자동으로 적용됩니다. 공통 사전 설정에 기본값을 적용하여 매번 사전 설정을 선택하지 않아도됩니다.

4. 요소 사전 설정을 만듭니다

요소 사전 설정 디자인 프레임 워크를 완료합니다. 선호하는 스타일을 사전 설정으로 저장 한 후 모듈 스타일을 요소 사전 설정으로 저장해야합니다.

이것은 특히 CTA, 평가, 블러 브 및 접촉 양식과 같이 자주 사용하는 모듈에 특히 도움이됩니다. 예를 들어, 브랜드 색상, 부드러운 그림자 및 특정 패딩으로 CTA 버튼을 스타일링 한 경우 해당 전체 디자인을 기본 조명이라는 사전 설정으로 저장할 수 있습니다. 나중에 한 번의 클릭으로 새 버튼에 즉시 적용하십시오.

요소 사전 설정을 기본값으로 설정하십시오

모든 요소 사전 설정을 기본값 으로 설정할 수도 있으므로 해당 유형의 모든 새 모듈은 저장된 설계 스타일을 자동으로 따릅니다. 위의 1 차 조명 버튼을 기본적으로 저장하면 스타일을 상속하는 새 버튼이 표시됩니다.

기본값은 워크 플로를 가속화하고 필요한 경우에도 여전히 재정의 할 수 있습니다. 그러나 대부분의 경우 잘 정의 된 사전 세트를 사용하면 반복적 인 작업이 줄어들고 설계 추측을 제거합니다. 이 세 가지 기능을 결합하면 웹 사이트 구축이 완전히 코드를 사용하지 않는 사전 설정 기반 설계 프레임 워크를 따릅니다.

디자인 프레임 워크를 기반으로 새 페이지를 디자인합니다

선호하는 디자인 변수, 옵션 그룹 사전 설정 및 요소 사전 설정을 모두 저장 했으므로 프레임 워크를 테스트합시다.

새로운 페이지를 구축하는 것은 훨씬 빠르고 쉬운 경험이되었습니다. 처음부터 시작하거나 모든 모듈을 수동으로 재임 할 필요가 없습니다. 내가 필요한 모든 것이 이미 설정되었습니다.

보시다시피, 몇 번의 클릭만으로 여러 디자인 변경을 적용했습니다. 예, 사전 제작 된 디비 레이아웃을 가져 왔지만 저장된 프레임 워크를 사용하여 몇 초 안에 사용자 정의했습니다.

글꼴을 선택하거나 간격을 조정하거나 수동으로 조정하는 대신 저장된 사전 설정을 간단히 적용했습니다. 버튼 디자인, 텍스트 크기, 배경 스타일 및 이미지 테두리는 모두 이전에 제작 한 프레임 워크 설정을 따랐습니다.

해당 스타일을 하나의 모듈에 수동으로 적용하는 것은 큰 문제가되지 않을 수 있습니다. 그러나 전체 페이지를 사용자 정의 할 때 차이가 명확합니다. 내가 모든 변화를 한 편의성과 속도를 알 수 있습니다. 이것은 디자인 프레임 워크를 만드는 데있어 진정한 이점입니다. 품질이나 일관성을 희생하지 않고 워크 플로우를 가속화합니다.

가장 중요한 부분은 업데이트를하는 동안 온다. 글로벌 값이 변경되면 변수 관리자를 통해 저장된 설계 변수 만 수정하면됩니다. 작은 설정 아이콘을 클릭하여 옵션 그룹과 요소 사전 설정을 수정할 수도 있습니다.

이것이 Divi 5가 당신에게 가져 오는 힘입니다. 한 줄의 코드를 만지지 않고 전체 디자인 프레임 워크를 작성, 저장 및 사용자 정의 할 수 있습니다.

No-Code 디자인 프레임 워크 구축

디자인 프레임 워크 작성은 더 이상 개발자만을위한 것이 아닙니다. 올바른 도구를 사용하면 이전 코드를 만난 적이 없어도 누구나 할 수 있습니다. 이 게시물에서 보았 듯이, 자신만의 디자인 시스템을 만들기위한 몇 가지 현명한 단계 만 있으면됩니다. 어떻게? Divi 5를 사용하여.

Divi 5는 당신에게 그것을 가능하게하는 도구를 제공합니다.

Divi 5는 복잡성을 처리하고 고급 기능을 통해 완전히 제어합니다. 더 빠르게 구축하고 일관성을 유지하며 시각적 빌더를 떠나지 않고도 글로벌 업데이트를 할 수 있습니다. 멋져요? 그러나 그것은 빙산의 일각 일뿐입니다. 우리는 방금 시작하고 있습니다!

우리는 릴리스를 위해 줄을 서서 더 많은 놀라운 기능을 가지고 있으며, 당신이 시도하기를 기다릴 수 없습니다. 오늘 공개 알파를 다운로드하고 코딩 제한없이 고유 한 디자인 프레임 워크를 구축하십시오.

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