Divi의 새로운 높이 및 너비 옵션을 사용하여 반응형 디자인 만들기

일반적으로 방문자가 웹사이트에 대해 가장 먼저 알아차리는 것은 아니지만 너비 및 높이 CSS 속성은 웹사이트를 함께 유지하고 멋지게 보이게 하는 데 도움이 됩니다. 이제 Divi의 새로운 드래그 가능한 크기 조정 옵션을 사용하여 빌더 자체 내에서 모든 요소의 너비, 최대 너비, 최소 높이, 높이 및 최대 높이를 말 그대로 제어할 수 있습니다. 이를 통해 다양한 화면 크기에서 반응성이 뛰어난 웹 사이트를 자유롭게 만들 수 있습니다.

이제 이 모든 것이 훌륭하게 들리지만 이것이 실제로 어떻게 아름다운 웹사이트로 번역됩니까? 이것이 바로 우리가 이 포스트에서 이야기할 내용입니다. 먼저 Divi 설정 내에서 사용할 수 있는 모든 높이 및 너비 속성의 차이점을 설명한 다음 다양한 시나리오에서 이를 사용하여 페이지 디자인이 원하는 방식으로 정확하게 작동하도록 할 것입니다.

가자!

YouTube 채널 구독

속성의 차이점 이해

일상적인 디자인 프로세스에서 너비와 최대 너비를 사용하기 전에 그들이 하는 일을 이해하는 것이 중요합니다. 이론적 설명은 이렇습니다.

너비 – 디자인 요소의 실제 너비입니다. 이것이 100%이면 컨테이너가 허용하는 만큼 넓습니다. 너비는 일반적으로 %를 사용하여 표시됩니다. 너비의 백분율이 낮을수록 디자인 요소가 더 좁아집니다.

최대 너비 – 최대 너비는 너비보다 더 강력합니다. 모듈의 너비가 100%로 설정된 경우 최대 너비 값 미만으로 유지되는 한 해당 값 을 준수합니다. 최대 너비 값에 도달하면 이를 초과하지 않습니다.

그러나 이것이 어떻게 반응형 디자인으로 변환됩니까? 차이점을 설명하는 데 도움이 되도록 새 페이지에서 Visual Builder를 활성화하여 시각적 비교를 만들겠습니다. 한 열 행이 있는 섹션을 추가합니다. 그런 다음 일부 콘텐츠, 배경색 및 일부 사용자 정의 패딩이 있는 텍스트 모듈을 삽입합니다.

너비 변경

텍스트 모듈의 너비를 80%로 변경하면 텍스트 모듈의 크기가 축소되는 것을 볼 수 있습니다. 원하는 대로 모듈을 정렬할 수 있는 가능성도 나타납니다.

최대 너비 변경

최대 너비를 변경하면 실제 너비가 최대 너비 값을 초과하는 순간부터 할당된 값이 적용되기 시작합니다. 정말 빠르게 보여드리겠습니다.

초과하지 않음

초과

너비 및 최대 너비 외에도 각 요소의 크기 설정에서 최소 높이, 높이 및 최대 높이를 찾을 수 있습니다. 이것은 다음 용어에서 이론적으로 이해할 수 있는 것입니다.

최소 높이 – 요소에 할당하려는 최소 높이입니다. 이 값이 높이 입력보다 크면 최소 높이 입력이 우선합니다.

높이 – 요소에 할당하려는 실제 높이를 정의합니다.

최대 높이 – 높이가 높이에 할당된 값을 초과하면 이 값이 새 높이가 됩니다.

최소 높이 변경

요소의 최소 높이를 변경하면 해당 값이 표준이 됩니다. 테스트할 때 텍스트 모듈의 높이가 실시간으로 변경되는 것을 자동으로 확인할 수 있습니다.

높이 변경

최소 높이와 높이를 결합하는 경우 높이가 최소 높이보다 큰지 확인해야 합니다. 그렇지 않으면 높이는 무시됩니다. 아래 두 GIF에서 실시간으로 차이를 확인할 수 있습니다.

초과하지 않음

초과

최대 높이 변경

최소 높이를 초과하지만 높이보다 작은 경우 최대 높이가 인계됩니다. 예를 들어 최대 높이보다 최소 높이에 더 높은 값을 할당하면 최소 높이가 우선합니다.

행의 최대 너비 변경

웹 디자인의 모범 사례 중 하나는 전체 웹 사이트에 대해 하나의 특정 최대 너비를 결정하는 것입니다. 이렇게 하면 다양한 화면 크기에서 모든 것이 반응적으로 보이도록 유지하는 데 도움이 됩니다. 또한 설계자가 정확한 와이어프레임을 생성하는 데 도움이 됩니다.

전역 최대 너비 변경

일반 설정으로 이동하여 레이아웃 설정으로 이동하여 테마 사용자 정의 프로그램에서 콘텐츠에 대한 특정 기본 최대 너비를 설정할 수 있다는 것을 알 수도 있고 모를 수도 있습니다. 최대 너비를 지속적으로 유지하면 응답성을 강화하는 데 도움이 됩니다.

특히 한 행의 최대 너비 변경

드래그 가능한 새로운 크기 조정 업데이트를 통해 행의 최대 너비를 개별적으로 정의할 수도 있습니다. 이것은 더 높은 최대 너비를 사용하는 것이 더 합리적인 예외에 유용합니다.

모듈에 동일한 높이 제공

명심해야 할 또 다른 기술은 유사한 요소에 동일한 높이를 제공하는 데 중점을 둡니다. 이것은 미학적으로 보기에 좋고 방문자가 콘텐츠를 쉽게 검색할 수 있도록 도와줍니다. 여기에 접근하는 두 가지 일반적인 방법이 있습니다.

열 이퀄라이저 사용

첫 번째 방법은 오랫동안 Divi와 함께 해온 방법입니다. 행의 각 열에 대해 동일한 높이를 생성하려면 행의 크기 설정에서 열 이퀄라이저를 활성화할 수 있습니다. 열 배경색을 사용하는 경우 차이점을 빠르게 알 수 있습니다.

각 모듈에 높이 할당

접근하는 또 다른 방법은 추가하려는 모듈에 미리 정의된 높이를 할당하는 것입니다.

모듈 내 콘텐츠 정렬

모든 모듈에 높이를 할당하면 콘텐츠 정렬도 함께 할 수 있습니다. 그렇게 하려면 사용자 정의 패딩을 사용하여 모듈의 공백을 수동으로 결정하거나 몇 줄의 CSS 코드를 사용하여 콘텐츠를 자동으로 정렬할 수 있습니다.

display: flex;
flex-wrap: wrap;
align-content: center;

디자인 요소 높이 또는 너비 선택 및 오버플로를 스크롤로 전환

새로운 드래그 가능한 크기 조정 옵션으로 할 수 있는 또 다른 멋진 기능은 오버플로를 스크롤로 바꾸는 것입니다. 이렇게 하면 페이지의 공간을 절약하고 상호 작용을 추가하는 데 쉽게 도움이 됩니다. 여기에는 두 가지 단계가 있습니다. 요소의 높이를 설정하고 가시성 설정에서 오버플로를 변경합니다. 요소의 높이를 변경하여 시작하십시오.

그런 다음 요소의 가시성 설정으로 이동하여 세로 오버플로를 스크롤로 변경합니다.

모든 화면 크기에서 전체 화면 영웅 섹션 만들기

다음이자 마지막 팁으로! 전체 화면 영웅 섹션을 만들고 싶습니까? 페이지의 영웅 섹션을 열고 크기 설정으로 이동하여 높이를 변경합니다. 모든 화면 크기에서 모든 것이 응답성을 유지하도록 하려면 높이 뷰포트 단위를 사용하는 것이 중요합니다.

• 높이: 100vh

전체 화면 영웅 섹션의 콘텐츠를 중앙에 정렬하고 싶으십니까? 섹션의 기본 요소에도 다음 사용자 정의 CSS 코드 라인을 추가하십시오.

display: flex;
flex-wrap: wrap;
align-content: center;

마지막 생각들

이 게시물에서는 Divi의 드래그 가능한 크기 조정 업데이트와 함께 제공되는 새로운 너비 높이 옵션에 대해 살펴보았습니다. 우리는 그들이 어떻게 작동하는지 그리고 당신이 만들고 있는 모든 종류의 웹사이트를 위한 반응형 페이지 디자인을 만드는 데 어떻게 사용할 수 있는지 보여주었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.