Divi에서 콘텐츠를 세로로 정렬하는 방법

Divi로 사이트를 구축할 때 콘텐츠를 세로로 정렬하는 기능은 디자인 도구 벨트에 편리하게 추가할 수 있습니다. 때때로 특정 레이아웃은 콘텐츠가 다른 방식(가운데, 아래쪽, 위쪽)으로 세로로 정렬되도록 요구합니다. 가장 일반적인 요구 사항은 콘텐츠를 세로 중앙에 배치하는 것입니다. 콘텐츠에 여러 열 레이아웃을 사용할 때 정말 편리한 대칭 간격의 유쾌한 터치를 제공합니다. 또한 세로 중앙에 있는 콘텐츠는 다양한 브라우저 너비의 중앙에 유지되므로 사용자 지정 패딩이나 여백을 적용하여 비슷한 응답성을 얻을 수 있습니다.

이 튜토리얼에서는 CSS의 몇 가지 작은 조각을 열에 추가하여 콘텐츠를 세로로 정렬하는 방법을 보여 드리겠습니다. 이 작업을 수행하는 방법의 예를 위해 Divi의 미리 만들어진 레이아웃 중 일부를 사용할 것입니다. CSS에 대해 잘 모르더라도 걱정할 필요가 없습니다. 이것은 몇 초 만에 자신의 레이아웃에 적용하기에 충분히 쉽습니다.

Flex와 Divi 이해하기

Flex(또는 Flexbox) css 속성은 단순히 가로 및/또는 세로 스택(예: 테이블)에 요소를 배치하는 방법입니다. 단, 기존 테이블과 달리 flex 속성을 사용하면 포함하는 콘텐츠의 크기를 조정하거나 "유연하게" 조정하는 상자를 만들 수 있습니다.

Divi는 행 설정으로 "열 높이 균등화"를 선택할 때마다 flex 속성을 사용합니다. 이렇게 하면 열의 크기가 가장 많은 콘텐츠가 포함된 열의 크기로 모두 조정됩니다. "Equalize Column Heights"는 행 컨테이너에 대한 플렉스를 활성화하므로 열에 CSS를 추가하여 각 열(또는 상자)의 내용을 조정하여 이를 쉽게 활용할 수 있습니다.

예를 들어, 행의 열에 "margin: auto"를 추가하면 해당 열의 내용(하나 이상의 모듈이든 상관없이)이 세로 가운데에 맞춰집니다.

또한 "align-items:center;"를 추가하면 행에 대한 모든 열(및 해당 콘텐츠)이 세로 중앙에 배치됩니다.

물론 테마에 적용할 수 있는 고급 CSS와 함께 웹 디자인에서 flex 속성에 대한 더 많은 용도가 있습니다. 하지만 이 튜토리얼에서는 모든 것을 단순하게 유지하고 싶었습니다.

이것이 정말 필요한가?

기술적으로는 아닙니다. 사용자 정의 간격(패딩 및 여백)을 사용하여 열 내에서 콘텐츠/모듈을 수직으로 정렬할 수 있습니다. 예를 들어, Divi의 간격 옵션을 사용하여 열에 동일한 상단 및 하단 패딩을 제공하여 모듈이 열 내에서 수직으로 가운데에 오도록 할 수 있습니다. 또는 열에 위쪽 패딩만 추가하여 콘텐츠를 아래쪽에 정렬할 수 있습니다. 그러나 더 많은 콘텐츠로 페이지를 업데이트할 때 간격을 조정해야 할 수도 있습니다. 또한 다른 브라우저 너비에서 이 정렬을 유지하기 어려울 수 있습니다.

따라서 사용자 지정 간격에 대해 생각할 필요 없이 콘텐츠를 세로로 정렬하는 솔루션을 찾고 있다면 이것이 유용할 것이라고 생각합니다.

시작하자!

페이지에 미리 만들어진 레이아웃 로드

시작하기 위해 Interior Design Company 포트폴리오 페이지 레이아웃을 사용하겠습니다. 페이지에 이 레이아웃을 가져오려면 새 페이지를 만드세요. 그런 다음 페이지에 제목을 지정하십시오. "Divi Builder 사용"을 클릭한 다음 "Visual Builder 사용"을 클릭합니다. 그런 다음 "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 그런 다음 라이브러리에서 로드 팝업에서 인테리어 디자인 회사 레이아웃 팩을 선택합니다. 마지막으로 레이아웃 목록에서 포트폴리오 페이지를 선택하고 "이 레이아웃 사용"을 클릭합니다.

레이아웃이 페이지에 로드되면 사용할 준비가 된 것입니다.

방법 1: Flex 및 자동 여백을 사용하여 콘텐츠를 세로로 정렬하는 방법

페이지의 두 번째 행(페이지 제목이 있는 행 바로 아래에 있는 행)의 행 설정을 엽니다. 디자인 설정 토글에서 크기 조정 옵션 그룹을 열고 "열 높이 균등화"가 이미 활성화되어 있는지 확인합니다. 이것은 이제 행에 flex 속성("display: flex;")이 추가되었음을 의미합니다.

이제 동일한 행에 대한 고급 탭 설정으로 이동하여 Column 2 Main Element 입력 상자 아래에 다음 CSS 스니펫을 추가하십시오.

margin: auto;

이제 두 번째 열 콘텐츠가 세로 중앙으로 이동되었습니다.

콘텐츠 하단 정렬

모든 모듈이 열의 맨 아래에 쌓이도록 콘텐츠를 맨 아래에 정렬하려면 다음과 같이 여백 값을 조정할 수 있습니다.

margin: auto auto 0;

행의 모든 ​​열에 대해 세로로 콘텐츠 정렬

각 열에 "margin:auto"를 개별적으로 추가하는 대신 행 설정의 기본 요소에 다음 스니펫을 추가하여 행에 있는 모든 열의 내용을 세로로 가운데에 맞출 수도 있습니다.

align-items: center;

또는 열의 모든 콘텐츠가 아래쪽 정렬되도록 하려면 다음 스니펫을 추가할 수 있습니다.

align-items: flex-end;

그리고 css 스니펫으로 기본 요소를 마우스 오른쪽 버튼으로 클릭하고 "기본 요소 확장"을 클릭하여 Divi의 스타일 확장 기능을 활용할 수 있다는 것을 잊지 마십시오.

그런 다음 해당 기본 요소 CSS를 페이지(또는 섹션) 전체의 모든 행으로 확장하여 페이지의 모든 열에 있는 모든 콘텐츠를 수직으로 중앙에 배치합니다.

이제 모든 것이 수직으로 중앙에 배치됩니다.

그러나 흰색 열 배경색이 더 이상 행의 전체 높이에 걸쳐 있지 않음을 알 수 있습니다. 열에 "margin: auto"를 추가했기 때문입니다. 이 문제를 해결하려면 행 배경색을 흰색으로 변경하고 행 패딩을 제거할 수 있습니다. 대신 여백을 변경하지 않고 열의 내용을 가운데에 맞추는 방법을 보여 드리겠습니다.

방법 2: Column Flex Direction을 사용하여 콘텐츠 수직 정렬

첫 번째 방법에서는 행에 추가되는 flex 속성을 활용했습니다. 이것은 여백을 조정하여 세로로 정렬할 수 있는 각 열을 "플렉스 상자"로 만들었습니다.

그러나 열(및 열 배경)을 동일한 크기로 유지하는 "열 높이 균등화" 효과를 잃지 않고 열의 내용을 정렬하기 위해 flex-direction을 사용하는 방법도 있습니다. 이렇게 하려면 열에 몇 줄의 CSS를 추가하여 열 내의 모든 모듈이 세로로 쌓인 다음 중앙에 오도록 하면 됩니다.

이전 예의 행으로 돌아가 보겠습니다. 행 설정을 열고 사용자 정의 CSS를 마우스 오른쪽 버튼으로 클릭하고 "사용자 정의 CSS 스타일 재설정"을 클릭하여 거기에 있을 수 있는 사용자 정의 CSS를 꺼냅니다.

그런 다음 Column 2 Main Element 아래에 다음 CSS를 추가합니다.

display: flex;
flex-direction: column;
justify-content: center;

또는 콘텐츠를 아래쪽으로 정렬하려면 "justify-content: center"를 "justify-content: flex-end"로 변경하면 됩니다.

이 설정의 좋은 점은 내 콘텐츠가 세로 중앙에 있고 행을 전체 너비로 만들면 콘텐츠가 중앙에 유지된다는 것입니다.

다양한 양의 텍스트가 세로로 정렬된 블러브 만들기

열 콘텐츠를 세로 중앙에 배치하면 광고 문구에도 유용할 수 있습니다. 아시다시피 모든 광고 문구에 기능이나 서비스를 설명하는 데 사용되는 정확한 양의 텍스트가 있는 것은 아닙니다. 이러한 광고 문구를 세로 중앙에 배치하면 레이아웃에 멋진 디자인을 만들 수 있습니다.

이 예에서는 Digital Payments 홈페이지 레이아웃에서 광고 문구를 수직으로 정렬하겠습니다.

사이트가 어떻게 생겼는지 보다 사실적으로 표현하기 위해 먼저 광고 문구에 본문 텍스트의 양을 다르게 추가하겠습니다.

이제 행 설정 및 "열 높이 균등화"로 이동해야 합니다.

이제 CSS 스니펫을 추가하여 콘텐츠를 정렬하고 디자인을 변경할 수 있습니다.

행 설정의 고급 탭에서 기본 요소 아래에 다음을 추가하여 열의 내용을 세로로 가운데에 맞출 수 있습니다.

align-items: center;

또는 아래로 정렬되도록 다음과 같이 변경합니다.

align-items: flex-end;

또는 사용자 정의 CSS 스타일을 재설정하고 다음 사용자 정의 여백을 추가하여 첫 번째 열을 아래쪽으로 정렬하고 세 번째 열을 위쪽으로 정렬할 수 있습니다.

열 1 주요 요소 CSS:

margin: auto auto 0;

3열 주요 요소 CSS:

margin: 0 auto auto;

한 열 레이아웃은 어떻습니까?

기술적으로 한 열 콘텐츠를 세로 중앙에 맞추는 데 CSS 스니펫이나 플렉스가 필요하지 않습니다. 콘텐츠(또는 모듈) 위와 아래에 동일한 간격이 있는지 확인하기만 하면 됩니다. 대부분의 경우 사람들은 인접한 콘텐츠가 완벽하게 정렬되기를 원하기 때문에 여러 열이 있는 레이아웃에서 세로 중심 콘텐츠가 필요합니다.

많은 응용 프로그램

Divi에는 콘텐츠를 세로로 정렬하는 유용한 응용 프로그램이 많이 있습니다. 이것은 한 열에 제목 텍스트가 있고 다른 열에 있는 CTA(버튼)가 수직으로 중앙에 오도록 하려는 2열 레이아웃의 헤더에 유용할 것입니다. 6열 레이아웃에서 로고를 세로로 가운데에 맞추는 데에도 유용합니다(특히 로고의 치수가 약간 다른 경우).

마지막 생각들

이 방법은 사용자 정의 CSS의 몇 가지 작은 스니펫에 의존하지만 때때로 성가신 프로세스에 대한 빠른 수정을 찾는 사람들에게 응용 프로그램이 매우 유용할 수 있다고 생각합니다. 이것이 유용할 수 있는 다른 예를 듣고 싶습니다.

아래에서 자유롭게 아이디어와 의견을 공유하십시오.

건배!