Divi 5 용 CSS 그리드 소개

이것은 큰 것입니다. 우리는 최고의 CSS 그리드 빌더를 구축했으며 오늘 Divi 5에서 사용할 수 있습니다. 요소보다 낫습니다. 벽돌보다 낫습니다. 그리드를 마스터하거나 단순히 Divi의 새로운 그리드 템플릿을 사용하든이 업데이트를 좋아할 것입니다.

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

모든 사람을위한 CSS 그리드

Divi 5는 전임자와는 거리가 멀다. Flexbox, Advanced Units, Presets 및 Design 변수와 같은 새로운 기능을 통해 Divi를 웹 디자인 강국으로 전환했습니다. CSS 그리드는 다음으로 큰 발전입니다.

동시에, 우리는 기존 사용자가 새로운 설정에서 길을 잃거나 묻히는 느낌을 갖기를 원하지 않습니다. 우리는 고급 사용자에게 필요한 도구를 제공하면서 그리드 레이아웃을 초보자에게 액세스 할 수 있도록하는 것 사이의 올바른 균형을 유지했습니다.

모든 경우에 대한 그리드 템플릿

CSS 그리드에 대해 들어 본 적이없고 그리드 레이아웃의 내부를 배우고 싶지 않다면 걱정하지 마십시오. 새 사전 제작 된 그리드 템플릿을 즐기십시오!

그리드 템플릿을 사용하는 것의 장점은 그리드가 컨테이너 레벨에서 제어되며 새 항목을 추가하면 그리드를 자동으로 준수한다는 것입니다. 훨씬 직관적이며 새로운 다양한 디자인을 잠금 해제합니다.

Divi에는 모든 상황에 대한 그리드 템플릿이 있으며 기존 컨텐츠에 적용하는 것은 쉽습니다.

그리드 전문가를위한 완전한 제어

노련한 CSS 그리드 전문가 인 경우 Divi의 그리드 옵션은 당신을 막지 않습니다. 포인트로 바로 가서 열 및 행 그리드 템플릿을 수동으로 정의하고 오프셋 편집을 사용하여 다양한 그리드 레이아웃을 생성 할 수 있습니다. 나중에 터치합니다.

물론 사용자 정의 CSS 패널을 사용하여 인터페이스를 포기하고 그리드 규칙을 적용 할 수 있습니다. 당신에게 가장 적합한 것은 무엇이든.

웹 어셈블러를위한 직관적 인 그리드 옵션

당신이 그 사이에 있다면, Divi 5의 그리드 빌더는 정말로 빛납니다.

CSS 그리드 매개 변수를 설정으로 변환하여 수직 또는 수평 그리드를 생성하고 열 및 행 치수를 사용자 정의, 그리드 방향, 요소 정렬 및 정당화 등을 만들었습니다.

또한 사이징 옵션 그룹에는 그리드의 개별 그리드 항목의 너비, 높이 및 위치를 조정할 수있는 새로운 열 및 행 옵션이 포함되어 있습니다.

그리드 오프셋 편집

Divi 5의 그리드 빌더의 가장 고유 한 측면 중 하나는 오프셋 편집기입니다.이 편집기는 컨테이너 레벨에서 반복 비대칭 그리드 패턴을 생성하는 데 사용할 수 있습니다. 실제 예를 들어 보겠습니다.

아래 비디오에서 Divi 5의 루프 빌더를 사용하여 블로그 템플릿을 만들었습니다. 각 열은 동적 콘텐츠로 채워진 루프 항목입니다. 모 컨테이너에서 그리드 레이아웃 스타일을 활성화하면 열은 자동으로 그리드를 준수합니다.

열 수를 조정하고, 사용자 정의 열 또는 행 패턴을 입력하고, 갭 크기를 변경하고, 다른 많은 일을 할 수 있습니다.

또한 오프셋 편집기를 사용하여 그리드의 특정 항목에 규칙을 적용 할 수 있습니다.

각 행에서 반복되는 표준 열 패턴 대신, 예를 들어 4 번째 항목마다 두 번째 및 세 번째 항목에서 시작하여 두 개의 열에 걸쳐 오프셋 패턴을 만들 수 있습니다. 이러한 오프셋 패턴은 Divi 5의 사전 구축 된 행 템플릿에 매우 다양합니다.

CSS 그리드 데모 (무료 다운로드)

이전에는 불가능한 CSS 그리드를 사용하여 화려한 레이아웃을 만들 수 있습니다. 영감을 얻으려면 최신 버전의 Divi 5를 사용하여 디자인 팀이 만든 놀라운 레이아웃을 살펴보십시오.

무료로 다운로드하여 직접 테스트 할 수 있습니다.

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

Divi 5의 CSS 그리드는 오늘 이용할 수 있으며 올해 Divi에 오는 많은 기능 중 하나입니다.

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

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

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

Divi 5에 대한 사용자 정의 속성을 사용해 보셨습니까?

당신이 그것을 놓친 경우, 우리는 최근에 Alt, Title, Rel 및 Aria-Label과 같은 모든 속성을 요소 및 대부분의 하위 요소에 추가 할 수있는 새로운 사용자 정의 속성을 발표했습니다.

Divi는 클래스 및 ID와 같은 특정 속성을 지원했지만 이제 모든 요소에 속성을 추가 할 수 있습니다. 이것은 접근성에 특히 중요하며, 예를 들어 이미지에 Alt 텍스트를 추가하고 아이콘 기반 버튼과 같은 비성인 요소에 역할과 레이블을 추가 할 수 있습니다.

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

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

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

Divi 컴백을 위해 여기에 있다면, 우리에게 큰 호의를 베풀고이 비디오를 좋아하고 의견을 남겨서 알려주십시오. 그것은 당신이 Divi를 응원하는 것을 보는 것을 우리에게 의미하며, 알고리즘을 공급하고 단어를 전파하는 것이 필수적입니다.

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