Divi 5의 사용자 정의 가능한 중단 점에 대해 알아야 할 모든 내용

웹 사이트 구축 방식을 크게 향상시킬 준비를하십시오. Divi 5에는 흥미 진진한 새로운 기능인 사용자 정의 가능한 중단 점이있어 사이트의 대응 성을 놀라운 제어 할 수 있습니다. Divi 5의 새로운 사용자 정의 가능한 중단 점을 통해 모든 장치에서 완벽한 경험을 만들 수 있습니다. 대규모 데스크탑 디스플레이 또는 가장 작은 모바일 화면을 설계하든 Divi 5는 웹 사이트가 매번 픽셀 완벽하게 보이도록 도와줍니다.

이 게시물에서는이 새로운 기능에 대해 알아야 할 모든 것을 다루고 사용 방법을 보여줍니다!

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

사용자 정의 가능한 중단 점으로 Divi 5를 다운로드하십시오

맞춤형 브레이크 포인트를 사용하면 웹 사이트의 응답 성을 미세 조정하여 다양한 화면 크기를 더 잘 맞출 수 있습니다. 초대형 데스크톱 또는 넓은 모바일 화면을 설계하든 Divi 5는 손에 제어를합니다.

내 웹 사이트에서 Divi 5를 사용할 수 있습니까?

웹 사이트에서 Divi 5를 사용할 수 있지만 가용성은 특정 사용 사례에 따라 다릅니다. Divi 5는 현재 공개 알파 단계에 있으며, 이는 여전히 적극적으로 개발되고 정제되고 있음을 의미합니다. 모든 생산 환경에서는 아직 권장되지는 않지만 문제없이 사용할 수있는 특정 시나리오가 있습니다.

로컬 및 스테이징 사이트에서 Divi 5를 사용하십시오

Divi 5는 현재 로컬 및 스테이징 환경에서 사용할 수 있으므로 사용자는 라이브 웹 사이트에 영향을 미치지 않고 새로운 기능을 안전하게 테스트 할 수 있습니다. Divi 5는 여전히 공개 알파 단계에 있기 때문에이 접근법은 사용자가 Divi 5의 개선을 실험하고, 버그를보고하며, 피드백을 제공하면서 생산 현장의 안정성을 유지할 수 있도록합니다.

새로운 생산 웹 사이트에서 Divi 5를 안전하게 사용할 수 있습니다.

Divi 5는 안정적이며 새로운 웹 사이트를 출시 할 준비가되었습니다. 처음부터 시작하는 경우 후진 호환성 문제에 대해 걱정하지 않고 빠른 성능, 모듈 식 프레임 워크 및 미래 방지 기술을 완전히 활용할 수 있습니다. 그러나 마이그레이션 전에 광범위한 타사 통합에 의존하는 기존 사이트에는 철저한 테스트 단계가 필수적입니다. 이 시점에서 우리는 여전히 기존 웹 사이트를 Divi 5로 변환하는 것이 좋습니다.

Divi의 사용자 정의 가능한 중단 점 이해

중단 점은 반응 형 디자인의 근본적인 측면입니다. 누군가가 스마트 폰, 태블릿 또는 데스크탑을 탐색하는지 여부에 관계없이 사이트 컨텐츠가 최적의 사용자 경험을 보장하기 위해 자신을 재구성하는 임계 값 역할을합니다.

Divi 5의 중단 점은 크게 개선되어 이전 버전의 Divi보다 유연성과 제어를 제공합니다. 최대 7 개의 브레이크 포인트를 사용자 정의하면 사이트의 응답 성을 미세 조정하여 더 넓은 범위의 장치 및 화면 크기를 수용 할 수 있습니다.

중단 점은 무엇입니까?

중단 점은 웹 사이트의 디자인이 다양한 장치에서 최적의 시청 경험을 제공하기 위해 적응하는 특정 화면 너비입니다. 브레이크 포인트는 화면 크기에 관계없이 콘텐츠를 읽을 수 있고 시각적으로 매력적이며 탐색하기 쉽도록 도와줍니다.

반응 형 웹 사이트는 화면이 특정 너비에 도달 할 때 다양한 스타일을 적용 할 수있는 CSS 미디어 쿼리를 사용하여 설계되었습니다. 방문자의 화면 크기가 정의 된 중단 점을 가로 지르면 웹 사이트는 유용성을 유지하기 위해 레이아웃, 글꼴, 간격 또는 기타 설계 요소를 자동으로 조정합니다.

Divi 5에 더 많은 중단 점이 도입되면 CSS 미디어 쿼리가 다른 장치의 중단 점을 정의하기위한 필요성을 제한 할 수 있습니다.

몇 개의 중단 점을 사용해야합니까?

중단 점의 수는 잠재 고객의 장치 사용에 따라 다릅니다. 사용자는 소규모 스마트 폰에서 초대형 데스크탑 화면에 이르기까지 다양한 화면 크기의 웹 사이트에 액세스합니다. 전통적으로 웹 디자이너는 데스크탑, 태블릿 및 모바일의 세 가지 표준 브레이크 포인트를 사용했지만 Divi 5는이 기능을 확장하여 최대 7 개의 사용자 정의 가능한 중단 점을 허용하여 유연성을 높일 수 있습니다.

더 많은 중단 점을 활성화하면 사이트가 속도가 느려질까요?

아니요, Divi 5에서 더 많은 브레이크 포인트를 활성화해도 웹 사이트 속도가 느려지지 않습니다. 대응 디자인을 처리하는 오래된 방법과 달리 Divi 5의 새로운 프레임 워크는 성능에 최적화되어 추가 중단 점이 사이트에 불필요한로드를 추가하지 않도록합니다.

웹 사이트 나 페이지 수준에서 중단 점이 활성화되어 있습니까?

Divi 5의 브레이크 포인트는 페이지 당이 아닌 웹 사이트 수준에서 활성화되고 적용됩니다. 브레이크 포인트를 활성화하고 사용자 정의하면 전체 웹 사이트에 영향을 미쳐 모든 페이지에서 일관되고 반응이 좋은 디자인을 보장합니다. 중단 점으로 변경하면 사이트가 개별 페이지로 제한되지 않고 다른 화면 크기에 반응하는 방식을 보편적으로 조정합니다.

Divi에서 사용자 정의 가능한 브레이크 포인트의 작동 방식

Divi 5의 매우 유연하고 직관적 인 시스템은 브레이크 포인트를 관리하는 데 적합하여 웹 사이트의 반응 형 디자인을 더 잘 제어 할 수 있습니다. 이전 버전과 달리 Divi 5를 사용하면 최대 7 개의 브레이크 포인트를 사용자 정의하여 모든 장치에서 사이트가 완벽하게 보일 수 있습니다. 이 시스템은 사용자 친화적으로 설계되면서 필요한 사람들에게 고급 옵션을 제공합니다.

중단 점을 찾는 곳

Divi 5에서는 브레이크 포인트가 페이지 설정에 통합되어 쉽게 찾아서 사용자 정의 할 수 있습니다. 시각적 빌더 내에서 직접 액세스하여 간소화 된 워크 플로우를 보장 할 수 있습니다.

중단 점을 활성화하는 방법

편집 할 페이지를 열고 Divi로 편집을 클릭하여 Visual Builder를 활성화하십시오.

Visual Builder의 기본 작업 표시 줄에 위치한 Ellipsis 메뉴 (3 개의 점)를 클릭하십시오.

설정 내부에는 필요에 따라 중단 점을 활성화하거나 비활성화 할 수있는 일련의 토글 스위치가 있습니다.

일단 활성화되면 각 중단 점은 작업 표시 줄에서 볼 수 있으므로 개별 행이나 모듈의 응답 형 컨트롤을 클릭하여 설정을 조정하지 않고 디자인 전체에서 변경할 수 있습니다.

표준 중단 점이나 자신의 것을 사용해야합니까?

Divi 5의 표준 중단 점은 전화, 태블릿 및 데스크탑을 포함한 가장 일반적인 화면 크기를 다루도록 설계되었습니다. 이 사전 정의 된 중단 점은 대부분의 사용자와 장치를 수용하기 때문에 많은 디자이너에게 충분합니다.

그러나 사용자 정의 중단 점을 만드는 것이 유리할 수있는 시나리오가 있습니다. 예를 들어, 초반 모니터, 접이식 스마트 폰 또는 작은 태블릿을 수용하려면 사용자 정의 중단 점을 사용하면 이러한 사용 사례에 대한 설계를 변경하는 데 도움이 될 수 있습니다.

Divi 5에서 사용자 정의 중단 점을 사용합니다

반응 형 중단 점 사용자 정의는 덜 일반적인 장치 또는 화면 해상도에서 설계 퀴크 또는 컨텐츠 디스플레이 문제를 해결하는 데 유용합니다. 또한 주어진 화면 크기에 필요한 스타일 만로드하여 페이지로드 시간을 줄임으로써 웹 사이트 성능을 향상시키는 데 도움이 될 수 있습니다.

고맙게도 Divi 5는 몇 번의 클릭으로 이러한 반응 형 중단 점을 사용자 정의하는 것이 매우 쉽습니다.

반응 형 장치 설정을 열면 전화 중단 점을 원하는 너비로 설정 한 다음 다른 장치의 단계를 반복하십시오. 더 작은 장치에 사이트에 액세스 할 수 있도록하려면 전화기의 경우 360px 로 설정합니다. 원하는 픽셀을 추가하면 저장 버튼을 클릭하여 계속하십시오.

Divi 5는 귀하가 귀하의 웹 사이트의 중단 점을 조정하려고한다는 것을 알려줄 것입니다. 업데이트 버튼을 클릭하여 변경 사항을 확인하십시오.

나머지 화면 크기에 대해 다음 중단 점을 추가하겠습니다.

이 중단 점은 웹 사이트가 대부분의 화면 크기 및 사용 사례를 다루는 것을 보장하기 위해 다양한 장치를 포함합니다.

• 전화 : 767px는 iPhone 8 또는 Samsung G7과 같은 이전 모델을 포함하여 대부분의 스마트 폰 화면 크기를 다룹니다.
• 전화 와이드 : 860px는 iPhone 14 Pro (및 위) 및 최신 Android 장치를 포함하여 조경 모드의 대부분의 전화 화면을 커버합니다.
• 태블릿 : 980px는 모든 iPad를 포함하여 초상화 모드의 대부분의 태블릿 화면에 적합합니다.
• 와이드의 태블릿 : 1024px는 대부분의 iPad 및 삼성 태블릿에서 조경보기의 표준입니다.
• 와이드 스크린 : 1280px는 MacBook Air, MacBook Pro 13 ″ 및 유사한 Windows 장치를 포함한 대부분의 작은 노트북 (Windows 또는 MacOS)의 폭이 좋습니다.
• Ultrawide : 2560px는 MacBook Pro 15 ″ 및 16 인치 노트북, IMAC 및 표준 고화질 모니터와 같은 더 큰 데스크톱 스크린을 포함합니다.

사전 설정 내부에서 반응 형 디자인을 사용자 정의합니다

Divi 5의 가장 강력한 측면 중 하나는 사용자 정의 가능한 중단 점이 사전 설정과 완벽하게 통합되는 방법입니다. 이를 통해 최소한의 노력으로 전체 웹 사이트에서 진정으로 반응 형 디자인을 만들 수 있습니다. 완벽한 예는 스타터 사이트의 H1 사전 설정을 수정하여 모든 H1이 모든 화면 크기를 완벽하게 보이도록하는 것입니다.

Hero Section의 H1 내 어디에서나 클릭하여 설정을 시작하십시오.

다음으로 모듈 헤더에서 헤딩 사전 설정 필드를 클릭하십시오.

사전 설정 목록이 나타납니다. 옆에 파란색 체크 마크가있는 사전 설정을 찾으십시오.

활성 사전 설정 위로 마우스 설정을 공개하십시오. 설정 아이콘을 클릭하여 편집하십시오.

디자인 탭을 클릭 한 다음 제목 텍스트 크기를 원하는 크기로 조정하십시오.

사전 설정 설정을 열어두고 Divi 5 작업 표시 줄에서 다음 화면 크기를 클릭하여 제목 크기를 조정하십시오.

나머지 화면 크기에 대한 제목 사전 설정을 조정하려면 위의 단계를 반복하십시오. 이 작업을 완료하면 사전 설정 저장 버튼을 클릭하십시오.

중단 점을 교환하면 크기 변경이 제목 사전 설정에 반영됩니다.

Divi 4 vs Divi 5의 반응 편집

Divi는 항상 반응 형 디자인의 리더 였지만 Divi 5는 완전히 새로운 차원으로 끌어 올립니다. Divi 4는 반응 형 웹 사이트를 만들기위한 탄탄한 기반을 제공했지만 Divi 5는 그 어느 때보 다 직관적이고 유연하며 강력한 반응 편집을하는 기능을 제공합니다. 다음은 Divi 4의 기능에 따라 Divi 5가 어떻게 개선되는지에 대한 자세한 내용입니다.

중단 점 사이의 손쉬운 전환

Divi 4에서는 중단 점 사이의 전환은 매우 간단하지만 더 많은 시간이 포함되며 Divi 5에서 찾을 수있는 전환만큼 원활하지 않습니다.

Divi 5는 더 부드럽고 직관적 인 인터페이스 로이 워크 플로를 향상시킵니다. 이제 중단 점 사이를 즉시 전환하여 조정할 때 설계를 미리 볼 수 있습니다. 이 새로운 버전의 Divi를 사용하면보고있는 중단 점을 기준으로 디자인을 즉시 변경할 수 있습니다. 모드 나 지속적인 토글링 사이에 더 이상 전환되지 않습니다. 이 원활한 경험은 시간을 절약하고 모든 중단 점에서보다 응집력 있고 세련된 디자인을 보장합니다.

3 ~ 7 개의 중단 점

Divi 4는 3 가지 다른 중단 점을 지원합니다. 이것들은 Divi 5에서도 찾을 수 있습니다.

• 데스크탑 : 981px 이상
• 태블릿 : <980px
• 모바일 : <767px

이 중단 점은 기본 사항을 다루지 만 현대 관객이 사용하는 다양한 장치와 스크린 크기를 수용 할 때 때때로 부족합니다. 디자이너는 때때로 다양한 화면 크기, 특히 초대형 모니터 또는 소규모 모바일 장치의 경우 CSS 미디어 쿼리가 필요할 수 있습니다.

Divi 5는 중단 점을 7 가지 사용자 정의 가능한 옵션으로 확장 하여이 제한을 해결하여 더 많은 수의 장치를 쉽게 타겟팅 할 수 있습니다.

• 전화 : <767px
• 넓은 전화 : < 860px
• 태블릿 : <980px
• 넓은 태블릿 : < 1024px
• 데스크탑 : > 981px
• 와이드 스크린 : > 1280px
• Ultra Wide : > 1440px

이러한 유연성이 향상되면 광범위한 장치의 디자인을 미세 조정할 수 있으며, 소형 스마트 폰에서 대규모 고해상도 모니터에 이르기까지 사이트가 완벽하게 보일 수 있습니다. 예를 들어, 이제 조경 모드에서 전용 태블릿 브레이크 포인트를 만들거나 전문 환경에서 사용되는 초대형 스크린을 위해 사이트를 최적화 할 수 있습니다.

완전한 제어를위한 캔버스 스케일링

Divi 5의 가장 흥미 진진한 새로운 기능 중 하나는 캔버스 스케일링으로, 디자이너는 웹 사이트가 다른 해상도에 어떻게 나타나는지 전례없는 제어를 제공합니다.

이것이 Divi 4에서 캔버스 스케일링이 보이는 것입니다.

Divi 5의 캔버스 재조정 기능은 전체 경험을 더욱 직관적으로 만듭니다. 몇 번의 클릭만으로 디자인 캔버스를 특정 화면 해상도와 일치하도록 설계 캔버스를 확장하여 사이트가 다른 장치에 어떻게 나타나는지 정확히 보여줍니다. 이 기능은 소규모 모바일 화면 또는 초대형 데스크탑 모니터를 테스트하는 데 유용하여 디자인이 완벽하게 보드를 보장합니다.

Divi 5는 Divi Lifetime 회원 자격에 영원히 포함됩니다.

Divi 5의 맞춤형 브레이크 포인트는 디자이너가 정밀한 반응 형 웹 사이트를 만들 수 있습니다. 기존 레이아웃을 정제하거나 처음부터 사이트를 구축하든이 새로운 도구를 사용하면 모든 화면 크기에 대한 픽셀-완벽한 경험을 제작할 수있는 유연성을 제공합니다.

Divi 5의 가장 중요한 부분 중 하나는 Divi 회원 자격에 영원히 포함된다는 것입니다 (추가 비용없이). 오늘 Divi Lifetime 멤버십으로 업그레이드하면 일회성 수수료로 Divi 5에 대한 액세스 (및 업데이트)를 받고 앞으로 몇 년 동안이 진화하는 제품의 혜택을받을 수 있습니다.