워드프레스 Tips

Divi 5 Tips & 기타

Krafter Design System
Krafter Presets

Divi 5 Presets 

배색기법의 원리와 응용

“아무도 알려주지 않는 배색 기법의 원리” 소스에서 발췌한 내용을 바탕으로, 아름다운 색채 조합을 위한 핵심 원리와 실질적인 응용 방안을 상세히 브리핑합니다.

What Is HSL And Why Designers Should Master It
Customer Interaction

Track health scores, onboard users, reduce churn.

Try All Features Free for 14 Days

Divi 5 신기능 소개

Divi 5의 새로운 기능은 무엇인가요?

 

Divi 5 는 페이지 빌더의 차기 버전으로, 현재 알파 테스트 중이며 새로운 웹사이트 프로젝트에 사용할 수 있습니다. 저희는 일상 업무 속도를 높이고 웹사이트 구축을 더욱 즐겁게 만들어 줄 실질적인 개선에 집중했습니다.

 

Divi 5의 새로운 홈페이지 스크린샷

 

현재 Divi의 가장 좋은 부분은 그대로 유지한 채 다른 모든 부분을 재구축했습니다. 새로운 인터페이스 디자인과 향상된 내부 성능이 조화를 이루었습니다. 최신 코딩 방식을 통해 전체 시스템을 강화했습니다.
페이지 로딩 속도가 이전보다 빨라졌고, 컨트롤을 클릭했을 때 반응 속도가 빨라졌습니다. 추가적인 수동 작업 없이도 사이트 전체에서 일관된 타이포그래피를 유지할 수 있습니다.

 

다음은 몇 가지 주요 내용입니다.

 

  • Complete Framework Rebuild는 기존 숏코드 시스템을 폐기합니다. 모든 기능은 브라우저가 훨씬 더 잘 처리하는 최신 블록 기반 아키텍처에서 실행됩니다.
  • Divi 5의 Flexbox 시스템을 사용하면 사용자 정의 코드 없이도 정렬, 간격, 래핑을 쉽게 관리하여 현대적이고 반응형 레이아웃을 구축할 수 있는 직접적인 제어 기능을 제공합니다.
  • HSL 색상 시스템은 디자이너의 생각에 맞춰 색상 컨트롤을 제공합니다. 16진수 코드로 추측하는 대신 색조, 채도, 명도를 조정하세요.
  • 7개의 사용자 지정 중단점이 기존의 세 가지 크기 제한을 대체합니다. 방문자가 사용하는 모든 기기에서 타이포그래피가 완벽하게 보입니다.
  • CSS 함수가 내장되어 있어 calc(), clamp(), min(), max() 함수가 시각적 편집기에서 바로 작동합니다. 코드 없이도 자연스럽게 크기가 조절되는 반응형 텍스트를 제작하세요.
  • 글로벌 디자인 변수는 글꼴, 색상, 간격을 한곳에 저장합니다. 주요 제목 글꼴을 한 번만 변경하면 사이트 전체의 모든 H1이 자동으로 업데이트됩니다.
  • 프리셋 기반 디자인 시스템 에는 개별 모듈용 요소 프리셋과 전체 타이포그래피 스타일을 위한 옵션 그룹 프리셋이 포함되어 있습니다. 일관성을 유지하려면 여러 모듈에 걸쳐 이러한 프리셋을 사용하세요.
  • 새로운 비주얼 빌더 인터페이스는 도킹 가능한 패널, 탭 창, 키보드 단축키, 그리고 브레드크럼을 포함한 향상된 레이어 뷰를 제공합니다. 탐색이 훨씬 쉬워졌습니다.
  • 중첩된 행은 복잡한 레이아웃을 위해 행 안에 다른 행을 배치합니다. 특별한 섹션 유형 없이도 고급 레이아웃을 구축할 수 있습니다.
  • 모듈 그룹은 다양한 요소를 하나의 단위로 결합합니다. 이를 통해 복잡한 텍스트 레이아웃을 더 쉽게 관리할 수 있으며, 사용자 지정 모듈을 구축할 수도 있습니다.
  • 다중 패널 작업 공간을 사용하면 패널을 가장 적합한 위치로 옮길 수 있습니다. 다른 디자인 요소를 조정하는 동안 타이포그래피 컨트롤을 열어 두세요.
  • 속성 관리는 요소 간에 타이포그래피 스타일을 복사, 붙여넣기 및 재설정합니다. 모든 속성을 복사하는 대신 특정 속성을 선택하여 전송하세요.
  • 밝음/어둠 인터페이스 모드는 장시간 디자인 작업 시 눈의 피로를 줄여줍니다.
  • 캔버스 크기 조절은 편집기를 벗어나지 않고도 다양한 화면 크기에서 타이포그래피가 어떻게 보이는지 보여줍니다.