Divi에서 오버플로 옵션을 사용하는 유용한 방법 3가지

Divi의 내장된 오버플로 옵션을 사용하면 페이지의 모든 요소에 오버플로 CSS 속성(예: 표시, 숨김, 스크롤)을 매우 간단하게 추가할 수 있습니다. 독특한 디자인과 스크롤 가능한 콘텐츠를 쉽게 만드는 데 유용합니다. 이 게시물에서는 이러한 오버플로 옵션이 실제로 수행하는 작업을 살펴보겠습니다. 그리고 Divi 사이트에서 오버플로를 사용하는 세 가지 유용한 방법을 살펴보겠습니다.

시작하자.

Divi의 오버플로 옵션 이해

Divi의 오버플로 옵션을 사용하면 요소의 CSS 오버플로 속성을 다음 값 중 하나로 설정할 수 있습니다.

1. 기본값 – 기본값이 표시됩니다(아래 참조).
2. Visible – 넘치는 콘텐츠는 계속 볼 수 있으며 상자 외부로 확장할 때 잘리지 않습니다. 이것은 Divi의 기본 설정이므로 선택할 필요가 거의 없습니다.
3. 스크롤 – 넘치는 콘텐츠는 숨겨지지만 사용자는 숨겨진 콘텐츠를 가로 또는 세로로 스크롤할 수 있습니다.
4. 숨김 – 상자 외부에 넘쳐나는 콘텐츠가 숨겨집니다(스크롤 기능 없음).
5. 자동 – 이 옵션은 필요할 때마다 스크롤 기능을 사용합니다(즉, 콘텐츠가 상자를 넘어 확장됨). 이것은 더 작은 브라우저에서 스크롤 기능이 필요한 높이 또는 너비가 설정된 디자인에 유용합니다.

Divi에는 수평 및 수직 오버플로 모두에 대한 오버플로 옵션이 있어 각각에 대해 다른 속성 값을 설정할 수 있습니다. 이것은 요소에 수직 스크롤 기능을 추가하고 싶지만 스크롤 막대가 수평으로 나타나지 않도록 하려는 경우에 유용합니다.

다음은 오버플로 옵션이 작동하는 방식을 이해하는 데 도움이 되도록 이 자습서의 디자인에서 가져온 몇 가지 빠른 그림입니다.

오버플로 표시(기본값)

이 예에서 행 컨테이너 외부에 배치된 콘텐츠는 계속 표시되며, 이는 Divi의 모든 요소에 대한 기본 설정입니다.

오버플로 숨김

오버플로 숨김 속성을 행에 추가하면 상자 외부의 내용이 잘려서 보기에서 완전히 숨겨집니다.

오버플로 스크롤

오버플로 스크롤을 사용하면 상자 컨테이너 외부의 콘텐츠를 숨길 수 있습니다(오버플로 숨김과 유사). 주요 차이점은 사용자가 컨테이너의 한계를 넘어 존재하는 콘텐츠를 스크롤할 수 있도록 스크롤 막대가 표시된다는 것입니다.

예를 들어 높이가 400px인 텍스트 모듈이 있습니다. 텍스트 모듈의 내용은 텍스트 모듈을 넘어 확장되지만 기본적으로 계속 표시됩니다.

그러나 텍스트 모듈에 수직 오버플로 스크롤 속성을 추가하면 스크롤 막대가 나타나 사용자가 숨겨진 내용을 스크롤할 수 있습니다.

이제 오버플로 옵션을 조금 더 잘 이해했으므로 실제 생활에서 이를 사용하는 데 유용한 몇 가지 실제 예제를 구축해 보겠습니다.

YouTube 채널 구독

Divi에서 Divi의 오버플로 옵션을 사용하는 유용한 방법 3가지

#1 고유한 디자인을 위해 오버플로 숨김을 사용하여 오버플로 콘텐츠 자르기

오버플로 히든 속성을 사용하는 방법을 이해하기 위해 오버플로 텍스트와 오버플로 이미지가 있는 빠른 예제 디자인을 만들 것입니다. 그런 다음 행을 오버플로 숨김으로 설정할 때 디자인이 어떻게 변경되는지 살펴보겠습니다.

먼저 하나의 열 행이 있는 일반 섹션을 만듭니다. 모듈 추가를 시작하기 전에 섹션에 다음 패딩을 지정해 보겠습니다.

맞춤 패딩: 상단 12vw, 하단 12vw

그런 다음 다음과 같이 행 설정을 업데이트합니다.

폭: 80vw
최대 폭: 80vw
패딩: 0px 상단, 0px 하단
박스 섀도우: 스크린샷 참조
상자 그림자 흐림 강도: 80px

그런 다음 행에 텍스트 모듈을 추가하고 다음 텍스트 모듈 설정을 업데이트합니다.

먼저 다음과 같이 콘텐츠 상자에 h2 제목을 추가합니다.

<h2>Overflow</h2>

그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

제목 2 글꼴: Lato
제목 2 글꼴 두께: 굵게
제목 2 글꼴 스타일: TT
제목 2 텍스트 정렬: 가운데
제목 2 텍스트 색상: #dddddd
제목 2 텍스트 크기: 15vw
제목 2 글자 간격: 0.1em
제목 2 텍스트 그림자: 스크린샷 참조
제목 2 텍스트 그림자 색상: rgba(0,0,0,0.05)

이제 텍스트가 행 콘텐츠 영역을 오버플로하도록 하려면 사용자 지정 여백을 사용해야 합니다. 텍스트 모듈에 다음 사용자 지정 여백을 추가하여 행 위(수직) 및 행의 각 측면(수평)에 오버플로되도록 합니다.

여백: -6vw 상단, -10vw 왼쪽, -10vw 오른쪽

그런 다음 방금 만든 모듈 아래에 다른 텍스트 모듈을 추가하고 다음을 업데이트합니다.

콘텐츠:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(그런데 이와 같은 코드 조각은 오버플로 스크롤 옵션을 활용하는 좋은 방법입니다.)

텍스트 글꼴: Lato
텍스트 텍스트 정렬: 오른쪽
텍스트 텍스트 크기: 24px(데스크톱), 16px(전화)
텍스트 줄 높이: 1.3em
최대 너비: 50%
모듈 정렬: 오른쪽
패딩: 4vw 오른쪽

이제 행 외부에 오버플로되는 이미지를 추가해 보겠습니다. 두 개의 텍스트 모듈 아래에 새 이미지 모듈을 만든 다음 원하는 이미지를 업로드합니다.

그런 다음 다음과 같이 이미지 설정을 업데이트합니다.

최대 폭: 35vw
여백: -12vw 상단, -8vw 하단, -5vw 왼쪽
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: -40px
상자 그림자 수직 위치: -50px
그림자 색상: rgba(0,0,0,0.17)

행이 오버플로 표시로 설정된 디자인(기본값)

이제 행 오버플로를 표시(기본값)로 설정한 디자인을 확인해 보겠습니다.

보시다시피 이 기본 오버플로 표시 옵션은 아름답고 현대적인 디자인을 만드는 데 유용합니다.

행이 오버플로 숨김으로 설정된 디자인

이제 행에 대해 Overflow Hidden 속성을 사용할 때 어떤 일이 발생하는지 봅시다. 행 설정을 열고 다음을 업데이트합니다.

수평 오버플로: 숨김
수직 오버플로: 숨김

결과는 다음과 같습니다.

보시다시피 넘쳐나는 콘텐츠(상단 제목과 이미지)는 이제 잘리고 숨겨져 독특한 디자인을 만듭니다. 그리고 이 설정을 사용하면 변형 옵션을 활용하여 요소의 크기를 조정하고 이동하여 디자인을 바로 잡을 수 있습니다.

#2 사용자가 콘텐츠를 세로로 스크롤할 수 있도록 오버플로 스크롤 사용

다음 예에서는 세로 오버플로 스크롤을 소개합니다. 이 오버플로 옵션은 링크 또는 리소스 목록에 스크롤 가능한 콘텐츠를 추가하는 데 유용합니다. 모듈이나 행을 스크롤 가능한 콘텐츠의 컨테이너로 전환할 수 있습니다. 다음은 텍스트 모듈로 수행하는 방법입니다.

한 열 행이 있는 일반 섹션을 만듭니다. 그런 다음 다음 콘텐츠가 포함된 텍스트 모듈을 추가합니다.

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

그런 다음 다음과 같이 텍스트 모듈 디자인 설정을 업데이트합니다.

텍스트 글꼴: Lato

링크 텍스트 색상: #333333
링크 텍스트 크기: 18px

정렬된 목록 텍스트 색상:
정렬된 목록 텍스트 크기: 20px
주문 목록 줄 높이: 1.8em
정렬된 목록 스타일 유형: 10진수 선행 0

제목 3 글꼴 두께: 매우 굵게
제목 3 텍스트 크기: 50px
최대 너비: 500px
패딩: 위쪽 3%, 아래쪽 3%, 왼쪽 8%, 오른쪽 8%

높이와 오버플로 스크롤을 제공하기 전의 텍스트 모듈은 다음과 같습니다.

이제 최대 높이가 400px인 텍스트 모듈을 업데이트합니다. 텍스트 모듈의 기본 오버플로 값이 표시되므로 모듈 아래에 텍스트가 오버플로되는 것을 알 수 있습니다.

이제 우리가 해야 할 일은 수직 오버플로를 다음과 같이 스크롤하도록 설정하는 것입니다.

세로 오버플로: 스크롤

다음은 최종 디자인입니다.

Divi 사이트에서 세로 오버플로 스크롤을 사용하는 방법에 대한 더 많은 예를 보려면 다음 게시물을 확인하세요.

• Divi의 새로운 오버플로 옵션으로 스크롤 갤러리 목업을 만드는 방법
• Divi에서 스크롤 가능한 최근 게시물 위젯 영역을 디자인하는 방법

#3 오버플로 스크롤을 사용하여 사용자가 콘텐츠를 가로로 스크롤할 수 있도록 허용

가로 스크롤에 오버플로 스크롤을 사용하는 것은 간결한 위치에서 콘텐츠에 액세스할 수 있는 또 다른 방법입니다. 또한 플러그인 없이 모바일에서 측면 스와이프 기능을 통합할 수 있는 좋은 방법이기도 합니다.

그것을 하는 방법을 보여주기 위해 우리는 함께 빠른 예제를 만들 것입니다.

먼저 하나의 열 행이 있는 일반 섹션을 만듭니다.

그런 다음 행에 블러브 모듈을 추가합니다.

기본 이미지를 새 이미지나 아이콘으로 바꿀 수 있습니다. 그런 다음 몇 가지 조정으로 디자인 설정을 업데이트합니다.

텍스트 정렬: 가운데
제목 글꼴: Lato
제목 글꼴 두께: Heavy
패딩: 왼쪽 3%, 오른쪽 3%

블러 모듈을 5번 복제하여 행 열에 총 6개의 블러를 만듭니다.

그런 다음 다음 사용자 지정 CSS를 사용하여 행 설정을 열 기본 요소로 업데이트합니다.

display: grid;
grid-template-columns: repeat(6, 50%);

이렇게 하면 각각의 너비가 컨테이너(또는 이 경우 행)의 50%인 6개의 열이 있는 가로 그리드 레이아웃으로 광고 문구 열이 제공됩니다. 이것은 두 개의 광고 문구/열이 행 내부의 공간을 차지한다는 것을 의미합니다. 다른 4개 모듈은 행 외부에서 오른쪽으로 확장됩니다. 여기서 오버플로 스크롤 속성이 유용합니다. 다음 오버플로 옵션을 업데이트합니다.

수평 오버플로: 스크롤

이제 필요에 따라 행의 너비를 조정할 수 있으며 두 개의 광고 문구가 항상 멋지게 정렬됩니다. 다음은 최종 디자인입니다.

내용 상자를 좀 더 잘 볼 수 있도록 행에 상자 그림자를 추가했습니다. 사용자가 오른쪽으로 스크롤할 때까지 처음에 두 개의 광고 문구가 어떻게 표시되는지 확인하십시오.

자세한 내용은 가로 스와이프 카드 만들기에 대한 전체 게시물을 확인하세요.

마지막 생각들

요즘에는 일반적인 그리드 레이아웃 외부에 겹치는 요소와 위치 요소가 더 보편화되고 있습니다. 대부분 이것은 순전히 디자인 목적으로 수행됩니다. Divi의 오버플로 옵션을 사용하는 방법을 이해하면 이러한 고유한 디자인을 만들기 위해 컨테이너 외부에 콘텐츠를 숨기거나 표시하는 방법을 이해하는 데 도움이 됩니다. 또한 오버플로 스크롤을 이해하면 웹 사이트에 스크롤 가능한 콘텐츠를 추가하는 데에도 도움이 됩니다.

이 기사가 overflow 속성과 다음 Divi 프로젝트에 이를 어떻게 사용할 수 있는지에 대한 정보를 제공하는 데 도움이 되었기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!