Divi 5 의 근본적인 재설계는 타의 추종을 불허하는 속도, 성능 및 사용의 단순성을 제공합니다. 간소화된 Visual Builder와 완전히 재구축된 백엔드로 Divi 5로 웹사이트를 구축하는 것은 그 어느 때보다 빠르고 간단합니다. Divi 5를 사용하면 경험 수준에 관계없이 시간이나 창의성을 희생하지 않고도 기록적인 시간 내에 훌륭한 사이트를 개발할 수 있습니다.
이 퍼블릭 알파 기간 동안 새로운 Divi 5 UI를 확인해 보세요. 이 반복은 아직 활발하게 개발 중이라는 점을 기억하세요. 특정 결함이 발견될 수 있지만, 아래 조언을 따르면 Divi 5로 테스트하고 개발하면서 생산성을 극대화할 수 있습니다.
Divi 5로 더 빠른 웹사이트를 만드는 10가지 최고의 방법
Divi 5 퍼블릭 알파가 출시된 이후, 많은 조정 및 개선이 구현되었습니다.
1. 원클릭으로 편집을 활용하세요
Divi 4에서는 섹션, 행 및 모듈을 수정하려면 설정 아이콘을 클릭해야 합니다. Divi 5에서는 원클릭 편집으로 이 모든 것을 없앴습니다. 모듈은 아무 곳이나 클릭하면 편집할 수 있어 디자인 프로세스의 좌절을 줄이고 속도를 높일 수 있습니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작예를 들어, 텍스트 모듈을 변경하려면 모듈의 아무 곳이나 한 번 클릭하면 설정에 즉시 액세스할 수 있습니다.
2. 빠른 조치를 취하려면 마우스 오른쪽 버튼을 클릭하세요.
Divi 5의 마우스 오른쪽 클릭 컨텍스트 메뉴는 디자인 프로세스를 위한 귀중한 새로운 단축키를 제공합니다. 모든 모듈, 섹션 또는 행을 마우스 오른쪽 클릭하여 자주 사용되는 몇 가지 활동이 포함된 빠른 작업 메뉴를 만들 수 있습니다. 이 도구를 사용하면 여러 패널을 열거나 옵션을 파헤치지 않고도 모듈 스타일을 복사하거나 설정을 복제하거나 삭제할지 여부를 빠르게 완료할 수 있습니다.
예를 들어, 고유한 스타일로 버튼을 만들었다고 가정해 보겠습니다. 빠른 작업 옵션을 사용하면 마우스 오른쪽 버튼을 클릭하고 버튼의 스타일을 복사한 다음 동일한 스타일을 적용하려는 모든 버튼 모듈에 적용할 수 있습니다.
3. 다양한 작업을 위해 여러 탭 패널 도킹
여러 패널을 동시에 열고 제어할 수 있는 멀티 패널 도킹은 Divi 5의 또 다른 환상적인 새로운 기능입니다. 이전 버전에서는 여러 패널을 볼 수 있었지만(예: 레이어 + 모듈 설정) 캔버스 주변으로만 이동할 수 있어 시야를 가리지 않았습니다. 캔버스를 깔끔하게 유지하려면 Divi 5에서 패널을 탭할 수 있습니다.
여러 패널을 나란히 문서화할 수 있으면 디자인의 여러 측면을 한 번에 수정하기가 간단합니다. Divi 5의 인터페이스를 사용하면 캔버스에 패널을 원하는 대로 배열하여 요구 사항에 맞는 이상적인 작업 공간을 만들 수 있습니다. 예를 들어 모든 패널을 캔버스 왼쪽에 두고 싶다고 가정해 보겠습니다. 자신에게 맞는 작업 공간을 만들려면 패널을 분리하여 왼쪽으로 옮긴 다음 다른 패널을 탭하면 됩니다.
4. 반응형 디자인에서 Canvas Scaling을 유리하게 활용하세요
Divi 5는 반응형 웹 페이지 생성에 완전히 새로운 접근 방식을 제공합니다. 캔버스 크기 조정 덕분에 Visual Builder를 벗어나지 않고도 작업 공간을 빠르게 확장하고 웹사이트가 다른 화면에 어떻게 표시되는지 확인할 수 있습니다. 또한 디자인 캔버스 크기를 빠르게 조정하여 레이아웃, 패딩 및 여백을 변경할 수 있습니다.
다음 시나리오를 고려해 보세요. 모바일 레이아웃에서 작업하고 있고 파트 간 거리를 변경하고 싶습니다. 캔버스 크기를 조정하려면 캔버스 가장자리를 클릭하여 원하는 크기로 드래그합니다. 그런 다음 여백과 패딩을 빠르게 조정하여 작은 디스플레이에서 디자인이 선명하게 보이도록 할 수 있습니다.
5. 호버 및 스티키 효과를 즉시 적용
Divi 5에서는 디자인에 호버 및 스티키 효과를 추가하는 것이 그 어느 때보다 쉬워졌습니다. Divi의 이전 버전에서는 사용자가 모듈의 디자인 탭으로 가서 설정을 입력해야 했습니다. 그럼에도 불구하고 Divi 5에서는 설정 메뉴에서 바로 이러한 효과를 적용할 수 있습니다. 이 혁신적인 방법 덕분에 워크플로를 방해하지 않고 역동적이고 매력적인 디자인을 만드는 것이 그 어느 때보다 간단해졌습니다.
Divi 5를 사용하면 버튼에 호버 효과를 적용하고 사용자가 탐색하는 동안 화면 상단에 헤더를 유지하는 것이 쉽고 빠릅니다. 예를 들어, CTA를 만들 때 호버에 다른 색상을 추가하고 싶다고 가정해 보겠습니다. 몇 초 만에 변경 사항을 적용하려면 설정의 드롭다운 메뉴에서 호버 상태를 선택합니다.
6. 더 효과적인 탐색을 위해 빵가루를 사용하세요
Divi 5의 새로운 브레드크럼 기능은 사용자가 모듈과 설정에 더 쉽고 빠르게 액세스할 수 있도록 해줍니다. 브레드크럼 덕분에 길을 잃지 않고 레이아웃 사이를 탐색할 수 있습니다. 설정 내에서 정확한 위치를 나타내는 시각적 가이드 역할을 합니다.
섹션 내에서 작업할 때 메뉴를 통해 돌아가거나 위치를 잃을 필요가 없습니다. 디자인 프로세스를 신속하게 진행하기 위해 각 브레드크럼은 클릭 가능한 링크를 제공하여 이전 사전 설정으로 빠르게 돌아갈 수 있습니다.
7. 모듈 간에 스타일을 복사하여 붙여넣어 시간을 절약하세요
Divi 5는 다양한 부분 간에 모듈 스타일을 복사하여 붙여넣는 것을 간편하게 만듭니다. 이를 통해 시간을 절약하고 다양한 모듈에 동일한 디자인 설정을 빠르게 적용할 수 있으므로 사이트 전체에서 일관성을 유지할 수 있습니다. Divi 5는 모든 모듈, 행 또는 섹션의 스타일을 단순화한 다음 디자인 전체에 사용합니다.
예를 들어, 웹페이지의 모든 버튼이 동일한 디자인을 갖기를 원한다고 가정해 보겠습니다. 마우스 오른쪽 버튼을 클릭하여 빠른 작업 메뉴를 열고, 스타일을 복사한 다음 마우스 오른쪽 버튼을 클릭하여 페이지의 모든 버튼에 붙여넣어 스타일을 적용할 수 있습니다.
8. 복잡한 레이아웃을 만들 때는 Wireframe View를 사용하세요.
Divi 5의 와이어프레임 뷰는 페이지의 시각적 디자인 구성 요소를 제거하여 명확하고 복잡하지 않은 레이아웃 청사진을 보여줍니다. 이 뷰에서는 색상과 글꼴과 같은 시각적 방해 요소 없이 구조에만 집중할 수 있습니다. 구조적 조정을 빠르게 해야 할 때 복잡한 레이아웃에 유용합니다.
이 간소화된 버전을 사용하면 섹션, 행 및 모듈을 배열하는 데 집중할 수 있습니다. 와이어프레임 뷰를 사용하면 미학에 대한 걱정 없이 복잡한 프로젝트의 구조를 관리할 수 있습니다.
9. 레이어 보기에서 장문 콘텐츠 사용
레이어 보기는 페이지의 섹션, 행 및 모듈을 구분합니다. 이를 통해 레이아웃의 전체 구조를 빠르게 보는 것이 더 간편해집니다. Visual Builder를 탐색하는 대신 레이어 패널에서 특정 부분 또는 모듈을 쉽게 찾을 수 있습니다.
레이아웃의 모든 요소는 빌더에서 클릭할 필요 없이 레이어 뷰에서 즉시 선택하고 편집할 수 있습니다. 이는 다른 모듈 내에 깊이 중첩되어 있거나 여러 섹션 레이어 내부의 행과 같이 숨겨진 부분에 특히 유용합니다.
10. 새로운 것을 배우는 데 열려 있어야 합니다.
Divi 5는 Visual Builder를 사용하는 데 완전히 다른 접근 방식을 제공합니다. 이러한 모든 중요한 업그레이드와 관련된 학습 곡선이 있습니다. 처음에는 약간 압도당하는 느낌이 드는 것은 정상이며, 특히 Divi의 이전 반복에 익숙하다면 더욱 그렇습니다. 좋은 소식은 Builder에 적용한 모든 수정 사항이 사용하기 간단하다는 것입니다. 따라서 UI에 익숙해지면 Divi로 웹사이트를 더 빠르고 효과적으로 만드는 데 도움이 됩니다.
마무리하기
Divi 5 의 인터페이스는 생산성을 향상하도록 설계되었지만 사용자는 여러 패널을 도킹하고, 오른쪽 클릭 단축키를 사용하고, 기존 디자인을 다시 살펴보는 등 다양한 방법으로 실험해 보는 것이 좋습니다.
Divi 5 Migrator는 디자인을 미세 조정하는 데 도움이 될 수 있습니다. 캔버스 크기 조정 및 호버 및 스티키 효과 도구와 같은 간단한 기능으로 시작합니다. Divi 5에 익숙해지면 자연스럽게 디자인 프로세스에 더 많은 기능을 통합하게 됩니다. 다양한 설정을 실험하고, 새로운 인터페이스를 가지고 놀고, 기술을 개선하여 워크플로를 더 매끄럽고 효율적으로 만드세요.
