Divi 5의 고급 단위에 대해 알아야 할 모든 것

훌륭한 디자인 도구를 사용하면 웹 사이트의 모든 측면을 제어 할 수 있습니다. 완벽한 패딩을 못 박거나 장치에서 텍스트 스케일을 완벽하게 보장하든 모든 세부 사항이 중요합니다. Divi는 수년간 디자이너들에게 신뢰할 수있는 동반자였으며, 전문 웹 사이트 구축을위한 탄탄한 토대를 제공했습니다. Divi 5는 Advanced Units라는 기능을 도입하여 더욱 발전합니다.

Divi 5의 고급 단위는 웹 사이트 구축 방법을 개선하는 데 도움이됩니다. calc ()의 동적 계산에서 클램프 ()의 유체 스케일링, VW 및 REM과 같은 모든 CSS 장치 및 CSS 변수의 유연성. 이 게시물에서는 고급 유닛, 시각적 빌더에서 사용하는 방법 및 모든 Divi 사용자에게 필요한 이유를 심층적으로 다룰 것입니다. 레이아웃을 미세 조정하든 대담한 새로운 디자인을 꿈꾸 든 고급 유닛은 디자인의 대응 성을 훨씬 더 많이 제어 할 수 있습니다.

다이빙합시다.

Divi 5의 고급 단위는 무엇입니까?

Divi 5의 고급 장치를 사용하면 다기능 장치 필드로 설계 요소를 제어 할 수 있습니다. CSS 단위, 함수 및 변수의 전체 스펙트럼을 수용하는 단일의 강력한 입력 필드입니다.

Fit-Content, Unset, calc (), clamp () 및 CSS 변수에 대한 새로운 지원을 통해 모든 CSS 장치를 지원하는 Visual Builder의 작은 변화입니다.

고급 유닛은 정적 값의 제약으로부터 자유롭게합니다. 고정 된 픽셀 크기를 추측하거나 브레이크 포인트로 씨름하여 원하는 것과 같은 물건을 맞출 필요가 없습니다. 시각적 빌더를 떠나지 않으면 유체 타이포그래피, 적응 형 간격 및 뷰포트 인식 설계를 통해 쉽게 구부리고 확장하는 레이아웃을 구축 할 수 있습니다. 더 많은 옵션이 아닙니다. 더 똑똑하고 확장 가능한 창의성에 관한 것입니다.

Divi 5에서 고급 유닛 탐색

Divi 5의 Advanced Units 기능은 다양한 디자인 옵션을 제공하며, 각각의 독특한 레이아웃을 형성하는 방법을 제공합니다. 주요 플레이어를 살펴보고 어떻게 작동하는지 살펴 보겠습니다.

Divi 5의 CSS 단위

고급 장치는 픽셀과 백분율을 훨씬 뛰어 넘는 CSS 장치의 전체 팔레트를 열어줍니다. 예를 들어, 뷰포트 너비 (VW)를 사용하여 섹션의 너비를 80VW 로 설정하면 뷰포트 너비의 80%를 차지하며 데스크탑에서 모바일로 완벽하게 확장됩니다.

루트 EM (REM)은 크기를 사이트의 루트 글꼴 크기 에 연결합니다.

컨텐츠를 기반으로 요소 크기 인 Fit-Fontent를 시도 할 수도 있습니다. 예를 들어, 헤더 너비에 맞는 콘텐츠를 사용하면 완벽하게 적응할 수 있습니다. 연마 된 외관을 유지하면서 과도한 공간이나 오버플로를 피하기 위해 너비 필드에 적합 함량을 연속으로 추가하여 헤더를 컴팩트하고 비례합니다.

이 단위는 스크린 크기 및 컨텍스트에 적응하여 고정되지 않고 살아있는 느낌의 레이아웃을 제공합니다.

calc ()는 동적 계산기입니다

caCl () 함수는 Divi에 내장 된 미니 계산기와 같습니다. 동적 결과를 위해 유닛을 추가, 뺄셈, 곱셈 및 분할과 혼합 할 수 있습니다. 전형적인 예는 Calc (100% - 50px) 이며 섹션의 너비를 100%로 설정하고 50 픽셀을 빼냅니다. 요소가 중앙에 정렬되면 양쪽에서 25px가 줄어 듭니다.

섹션 또는 행 너비를 설정하여 양쪽에 완벽한 홈통을 남기기 위해 Calc ()를 사용하여 반응 형 간격을 사용할 수 있습니다. calc ()는 뷰포트가 변경됨에 따라 즉시 조정하여 수동 조정없이 디자인의 균형을 유지하도록합니다.

유체 제어 용 클램프 ()

Clamp () 기능을 사용하면 화면 크기에 걸쳐 원활하게 조정되는 크기를 제어하는 ​​데 도움이됩니다. 최소 크기, 선호하는 크기 및 최대 크기의 세 가지 값을 사용합니다. 좋은 예는 클램프 (36px, 4VW, 48px) 입니다.

이는 크기가 36px에서 시작하여 뷰포트 너비의 4%를 기준으로 증가하지만 48px 이상으로 진행되지 않음을 의미합니다. 작은 전화기와 큰 화면 모두에서 잘 보이는 제목 모듈처럼 텍스트에 좋습니다. 클램프 ()는 장치에 관계없이 설계 균형을 유지하고 읽을 수 있도록합니다.

글로벌 유연성을위한 CSS 변수

CSS 변수 (또는 사용자 정의 속성)를 사용하면 Divi의 테마 옵션 또는 페이지 설정 CSS 필드에서 –font-size : 5em 과 같은 재사용 가능한 값을 정의 할 수 있습니다. Divi 5에 CSS 변수를 추가 할 때는 다음과 같은 부모 요소에 포함시켜야합니다.

:root {
--font-size:5em;
}

정의되면 var (–font-size)를 제목의 텍스트 크기 필드로 삭제하여 적용 할 수 있습니다.

디자인을 일관되고 편집 할 수 있도록하는 타임 절약입니다.

단위가없는 값

Divi 5의 고급 단위에는 초기, 비 설정 및 자동 값도 포함됩니다. 초기 속성은 CSS 사양에 의해 정의 된대로 CSS 속성을 기본값으로 재설정합니다. 예를 들어, 설정 색상 : 단락의 이니셜은 사용자 정의 또는 상속 스타일을 무시하고 검은 색으로 되돌립니다. Unset은 재산을 자연 상태로 되돌려 놓고, 상인되지 않은 속성의 초기 처럼 행동하거나 해당되는 경우 상속 된 값으로 되돌아갑니다. 한편, Auto는 브라우저가 컨텐츠에 맞게 섹션의 높이 스트레칭과 같은 컨텍스트를 기반으로 값을 결정할 수 있도록합니다.

Divi 5에서 고급 단위의 작동 방식

Divi 5의 고급 유닛은 새로운 수준의 제어를 시각적 빌더로 직접 가져 와서 반응 형 동적 디자인을 쉽게 만들 수 있습니다. VW, calc () 또는 clamp ()와 같은 CSS 단위, 기능 또는 변수에 즉시 입력하고 결과를 볼 수 있습니다. 다음은 Divi에서 Advanced Units의 작동 방식입니다.

calc ()가있는 반응 섹션 너비

뷰포트 높이의 80%에 걸쳐 있지만 상단과 하단에서 일부 패딩을 제거하는 섹션을 원한다고 가정 해 봅시다. 섹션의 디자인 탭으로 이동하여 높이 필드를 찾은 다음 Calc (80vh - 60px)을 필드에 추가하십시오.

이 계산을 통해 섹션은 뷰포트로 유동적으로 확장하여 뷰포트 높이의 80%를 유지하면서 상단과 하단에서 30px를 빼냅니다.

클램프 ()가있는 유체 타이포그래피

클램프 ()는 화면 크기로 성장하지만 읽을 수있는 제목이 필요한 경우 유용 할 수 있습니다. 제목 모듈의 디자인 탭에서 제목 텍스트 크기를 클램프 (52px, 2VW, 36px) 로 설정하십시오.

이로 인해 텍스트는 52px로 설정하고 뷰포트 너비의 2%를 기준으로 스케일링하며 36px 크기를 캡처합니다.

가변 구동 글꼴 크기

Divi 5의 CSS 변수는 간격, 텍스트 및 기타 영역에서 균일 성을 얻는 좋은 방법입니다. 변수를 한 번 설정 한 다음 모듈, 열, 행 또는 섹션 유닛 필드에 추가하여 디자인 전체에 걸쳐 반복적으로 사용할 수 있습니다. 예를 들어, 수동으로 설정하거나 옵션 그룹 사전 설정을 사용하여 정의하지 않고 일관된 제목 크기를 원한다고 가정 해 봅시다.

Advanced> Custom CSS 에서 테마 옵션 또는 페이지 설정 에 다음을 추가 할 수 있습니다.

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

거기에서 모든 제목 모듈의 제목 텍스트 크기에 변수를 추가하십시오. 예를 들어,이 영웅 섹션 에서이 제목의 경우 var (–Text-Size-H1) 를 추가합니다. Divi는이를 변수로 인식하고 제목에 적절한 스타일을 할당합니다.

고급 장치의 모범 사례

Divi 5에서 고급 유닛을 최대한 활용하려면 사려 깊은 접근 방식은 시간을 절약하고 디자인이 빛을 발할 수 있습니다. 다음은 귀하를 안내하기위한 모범 사례입니다.

간단하게 시작하십시오

CSS 기능 및 변수를 처음 사용하는 경우 픽셀 (PX) 또는 백분율 (%)과 같은 친숙한 유닛을 쉽게 사용하고 기본 동적 조정을 위해 calc ()를 실험하십시오. 예를 들어, 클램프 () 또는 CSS 변수로 다이빙하기 전에 섹션 너비에 대해 calc (100% - 40px)을 사용해보십시오. 이것은 당신을 일찍 압도하지 않고 자신감을 쌓습니다.

일반적인 스타일에 대한 변수를 활용하십시오

사이트 전체의 일관성을 위해 테마 옵션에서 CSS 변수를 정의하십시오. 예를 들어, 설정 –Gutter : 30px를 사용하면 섹션, 행 및 모듈에서 간격을 재사용 할 수 있습니다. CSS 변수는 모든 제목에 균일 한 텍스트 크기를 설정하는 데 좋습니다. 하나의 편집은 모든 것을 업데이트하여 설계 프로세스 속도를 높이고 디자인을 응집력있게 유지합니다.

테스트 대응 성

Divi의 반응 형 뷰 시스템은 여러 화면 크기에 걸쳐 디자인을 설계하는 좋은 방법입니다. VW 또는 Clamp ()와 같은 장치를 적용한 후 데스크탑, 태블릿 및 모바일 뷰 사이를 전환하여 레이아웃이 원활하게 적응되도록합니다. 클램프로 설정된 제목 (20px, 3VW, 40px)은 데스크탑에서 완벽하게 보일 수 있지만 작은 화면을 조정해야 할 수도 있으므로 테스트하십시오.

너무 복잡하지 마십시오

calc (clamp (20px, 5vw, 50px) - 10px)와 같은 기능을 중첩 할 수는 있지만 적어도 학습 중에 간단한 공식을 고수해야합니다. 과도한 복잡성으로 인해 성능이 느려지고 상황이 나타나지 않을 때 문제를 해결하기가 더 어려워 질 수 있습니다. 깨끗하고 의도적 인 계산을 고수하여 삶을 더 편하게 만들 수 있습니다.

고급 유닛이 Divi 5를 높이는 이유 5

고급 장치는 설계 프로세스를 간소화하는 데 적합합니다. 이 새로운 기능과 함께 제공되는 주요 장점은 다음과 같습니다.

• 창의적 자유 : 혼합 장치, 기능 및 변수는 이전 버전의 Divi에서 달성하기에 더 많은 시간이 걸리는 레이아웃을 잠금 해제합니다. 간단한 공식을 사용하면 높이, 너비, 글꼴 크기 등을 조정할 수 있습니다. 이 유연성을 통해 시각적 빌더 내에서 더 나은 구축과 더 빠르게 실행할 수 있습니다.
• 더 나은 반응 형 디자인 : 고급 유닛은 쉽게 적응하는 유체 설계로 Divi를 이동합니다. VW 또는 Clamp ()를 사용하면 모든 장치에서 사이트가 자연스럽게 느껴지므로 수동 재정의 필요성을 줄이고 세련된 경험을 제공합니다.
• 미래 방지 : 고급 유닛은 오늘날 웹의 시각적 빌더를 현대화하기위한 Divi 5의 임무와 일치합니다. CSS의 전체 힘을 수용함으로써 Divi 5는 최신 웹 사이트를 구축하는 데 필요한 도구를 제공합니다. 그것은 단지 유지에 관한 것이 아닙니다. 전문 개발자가 사용하는 것을 반영하는 도구로 곡선보다 앞서 있어야합니다.

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

Advanced Units는 최근 Divi 5에 추가 된 유용한 기능입니다. calc ()의 정밀도에서 clamp ()의 유동성에 이르기까지 CSS 변수의 효율성으로 인해 이러한 도구는 그 어느 때보 다 간격, 크기 및 확장 성을보다 직관적으로 만듭니다. Divi를 몇 년 동안 사용했거나 방금 발견하든, 노력이 적은 반응 형 역동적 인 웹 사이트를 구축 할 수 있습니다.

직접 볼 준비가 되셨습니까? 지금 Divi 5 알파를 다운로드하고 고급 장치를 실험 해보십시오. 뷰포트 간격, 타이포그래피의 테스트 클램프 ()를 위해 VW 및 VH와 함께 플레이하거나 구축 방법을 다시 생각하기 위해 변수를 설정하십시오. 디자인을 더욱 밀고 가능한 것이 무엇인지 발견 할 수있는 기회입니다.