Divi에서 사용자 정의 전체 화면 페이지 레이아웃을 디자인하는 방법

전체 화면 페이지 레이아웃은 웹 디자인 세계에서 정말 유용할 수 있습니다. 전체 화면 페이지 레이아웃의 주요 이점 중 하나는 가시성입니다. 전체 화면 페이지에서는 모든 페이지 콘텐츠가 브라우저 창에 남아 있습니다. 사용자가 빠르게 스크롤해야 하는 세상에서 처음부터 모든 콘텐츠가 브라우저 뷰포트에 포함되어 있으면 보는 사람이 상쾌할 수 있고 전환에도 도움이 될 수 있습니다.

Divi에 익숙하다면 전체 화면 기능이 내장된 전체 너비 헤더 모듈에 대해 이미 알고 있을 것입니다. 이것은 최소한의 콘텐츠로 전체 화면 페이지를 만들기 위한 훌륭한 솔루션입니다. 그러나 여러 행과 모듈이 있는 일반 섹션을 사용하여 전체 화면 페이지 레이아웃을 구축하는 이점을 활용하려는 경우 이 게시물이 적합합니다. 페이지 콘텐츠(머리글 및 바닥글 표시줄 포함)가 브라우저 창에 맞는지 확인한 다음 다양한 브라우저 크기에 맞게 확장할 수 있는 몇 가지 간단한 트릭을 보여 드리겠습니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 생성할 최종 전체 화면 페이지 레이아웃을 살짝 보여줍니다.

모든 것이 제자리에 유지되도록 페이지 높이가 브라우저 창의 높이로 어떻게 조정되는지 확인하십시오.

필요한 것

이 튜토리얼에서는 Divi만 있으면 됩니다. 또한 Divi Builder에서 액세스할 수 있는 Fitness Gym Layout 팩을 사용할 것입니다.

YouTube 채널 구독

Divi에서 사용자 정의 전체 화면 페이지를 만드는 방법

이 튜토리얼의 메인 디자인으로 넘어가기 전에 Divi에서 전체 화면 페이지를 만드는 기본 아이디어를 보여드리고자 합니다. 결국, 당신은 그것이 얼마나 간단할 수 있는지 놀랄 수 있습니다.

기본 아이디어 설명

새 페이지에서 빈 페이지 템플릿을 선택합니다. 이렇게 하면 기본 머리글과 아래쪽 바닥글 표시줄이 페이지에 표시되지 않습니다(이 항목을 포함하는 방법은 나중에 설명하겠습니다).

이제 프론트 엔드에 Divi Builder를 배포하여 처음부터 페이지를 구축하십시오. 그런 다음 하나의 열 행이 있는 하나의 일반 섹션을 추가합니다.

다음으로 카운트다운 타이머 모듈(또는 모든 모듈)을 한 열 행에 추가합니다.

눈에 쉽게 보이도록 카운트다운 타이머에서 배경색을 제거하고 페이지에서 섹션 높이를 더 잘 인식할 수 있도록 섹션에 배경색을 추가합니다. 현재 섹션의 높이는 포함된 콘텐츠의 높이에 상대적입니다. 이 경우 우리가 가진 유일한 콘텐츠는 sing 모듈이 있는 단일 행입니다.

이제 섹션 설정을 열고 고급 탭으로 이동하여 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

min-height: 100vh;
display: flex;
flex-direction: column;

섹션의 최소 높이를 100vh(뷰포트 높이의 100%)로 설정하면 섹션이 전체 브라우저 창(또는 뷰포트)에 걸쳐 있게 됩니다. "display:flex" 속성은 섹션의 내용을 수직으로 중앙에 배치하는 빠르고 쉬운 방법입니다.

vh 길이 단위에 대한 자세한 내용은 이 유용한 가이드를 확인하세요.

시크릿 브라우저에서 라이브 페이지를 보고 WordPress에 로그인한 경우 상단 관리 표시줄에서 브라우저 높이가 약간 떨어지므로 결과를 확인하세요.

글쎄요. 이것이 Divi에서 사용자 정의 전체 화면 페이지 레이아웃을 만드는 방법에 대한 기본 아이디어입니다.

머리글과 바닥글을 전체 화면 페이지에 통합합니다.

전체 화면 페이지에 머리글과 아래쪽 바닥글 표시줄을 포함하려면 약간의 조정이 필요합니다. 먼저 페이지 템플릿을 페이지 편집기의 백엔드에서 기본 템플릿으로 다시 변경합니다.

머리글과 바닥 바닥글을 포함하면 브라우저 뷰포트에 높이가 추가되어 섹션이 더 이상 예전처럼 완벽하게 맞지 않게 됩니다. 이는 페이지가 이제 표시 영역 높이의 100%에 머리글 및 바닥 바닥글 막대의 높이를 더한 섹션 높이로 구성되기 때문입니다. 그건 너무해 이 문제를 해결하려면 섹션의 사용자 정의 CSS를 다음과 같이 조정해야 합니다.

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

유일한 차이점은 최소 높이 값입니다. 이제 머리글과 바닥 바닥글 막대의 추가 높이(픽셀 단위)를 전체적으로 설명하는 계산이 있습니다.

132px는 머리글의 기본 높이(80px)와 하단 바닥글 막대의 기본 높이(53px)의 합계를 기준으로 합니다.

이제 Divi에서 사용자 정의 전체 화면 페이지를 만드는 방법에 대한 기본적인 이해를 얻었으므로 더 복잡한 디자인에 대해 알아보겠습니다.

완전한 전체 화면 페이지 디자인 구축

이 디자인을 시작하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 Divi Builder를 배포하세요. 미리 만들어진 레이아웃 선택 옵션을 선택하고 라이브러리에서 로드 팝업에서 피트니스 체육관 레이아웃 페이지를 선택합니다. 그런 다음 가격 책정 페이지를 사용하려면 클릭하십시오.

레이아웃이 빌더에 로드되면 버튼을 클릭하여 프런트 엔드(Visual Builder)에서 빌드하면 시작할 준비가 된 것입니다.

새 섹션 만들기

미리 만들어진 레이아웃은 디자인을 시작하는 데 도움이 됩니다. 도중에 이러한 레이아웃 디자인 요소를 사용하고 작업이 끝나면 나머지 레이아웃을 삭제할 것입니다. 전체 화면 레이아웃에 대한 기본 섹션을 만들려면 새 일반 섹션을 만들고 페이지 맨 위로 드래그합니다. 그런 다음 행에 1/4 1/4 열 구조를 추가합니다. 이것은 전체 화면 페이지의 기초가 될 것입니다.

열에 모듈 추가하기

다중 선택(ctrl/cmd를 누른 상태에서 클릭)을 사용하여 레이아웃의 첫 번째 섹션에서 처음 두 행의 모든 ​​모듈을 선택하고 페이지 상단에 있는 새 섹션의 첫 번째 열로 끌어다 놓습니다.

그런 다음 다중 선택을 사용하여 레이아웃의 동일한 첫 번째 섹션의 세 번째 행에 있는 모든 모듈을 복사하고 페이지 상단에 있는 새 섹션의 두 번째 열에 붙여넣습니다.

흰색 배경으로 인해 텍스트가 숨겨지지만 나중에 배경색을 변경합니다.

세 번째 열에서 슬라이더 모듈을 추가합니다. 이 슬라이더는 결국 화면의 전체 높이에 걸쳐 있지만 지금은 콘텐츠를 설정해 보겠습니다. 슬라이더 설정에서 기본적으로 있는 두 개의 기본 슬라이드 중 하나를 삭제한 다음 클릭하여 단일 슬라이드의 설정을 엽니다.

슬라이드 설정에서 배경 이미지를 추가하여 브라우저의 전체 높이에 걸쳐 충분한지 확인합니다.

현재 필요한 모든 모듈을 처리합니다. 나중에 디자인 설정을 다시 살펴보겠지만 지금은 행을 사용자 지정하겠습니다.

행 설정 사용자 정의

행 설정을 열고 2열에 배경색을 추가하여 시작합니다.

2열 배경색: #2a2e40

디자인 탭으로 이동하여 다음을 업데이트합니다.

이 행을 전체 너비로 만들기: 예
거터 폭: 1
열 높이 균등화: 예
맞춤 패딩: 상단 0px, 하단 0px

섹션 설정 사용자 정의

이 시점에서 섹션 설정에 필요한 유일한 것은 기본 패딩을 제거하는 것이지만 첫 번째 열의 상단을 프레임화하는 섹션 구분선을 추가하는 것이 좋을 것이라고 생각했습니다. 섹션 설정을 열고 다음을 업데이트합니다.

상단 구분선 스타일: 스크린샷 참조
상단 구분선 색상: #2a2e40
상단 분배기 높이: 8vw
상단 디바이더 수평 반복: 0.8x
상단 디바이더 플립: 수직 및 수평

맞춤 패딩: 위쪽 0px, 아래쪽 0px

구분선이 섹션 콘텐츠 아래에 표시되도록 설정되어 있으므로 3열의 슬라이더 뒤에 숨겨지고 2열 배경색과 일치하기 때문에 구분선이 표시되지 않습니다. 이렇게 하면 열 1에 대한 멋진 프레임 디자인 요소가 생성됩니다.

미리 만들어진 나머지 레이아웃 삭제

이 시점에서 상단 섹션에는 전체 화면 페이지 레이아웃에 대한 모든 것이 있으므로 미리 만들어진 레이아웃과 함께 제공된 나머지 섹션을 모두 삭제할 수 있습니다. 이것이 지금까지의 페이지 모양입니다.

이제 전체 화면이 되도록 페이지를 사용자 정의할 준비가 되었습니다.

페이지를 전체 화면으로 만들기 위해 사용자 정의 CSS 추가

이 기사의 시작 부분에 있는 기본 예제에서 사용자 지정 CSS를 섹션에 직접 추가했습니다. 그러나 전체 화면 기능이 데스크톱에만 적용되고 모바일의 기본 스타일에 의존하는지 확인하기 위해 페이지 설정 아래의 CSS에 추가할 것입니다. 이렇게 하면 이 페이지에만 적용되는 외부 CSS를 추가할 수 있지만 스타일을 데스크톱으로만 제한하는 미디어 쿼리를 추가할 수 있는 옵션도 제공됩니다.

프런트 엔드 빌더 하단의 설정 메뉴에서 페이지 설정을 엽니다. 고급 탭에서 다음 사용자 지정 CSS를 입력합니다.

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

CSS에 익숙하지 않은 사용자를 위해 브라우저의 너비가 최소 980px일 때 스타일을 적용하는 미디어 쿼리로 코드가 래핑된다는 점에 유의하십시오. 대괄호를 사용하면 첫 번째 스니펫에는 "fullsection"이라는 CSS ID와 "fullslide"라는 CSS ID가 차례로 포함됩니다. 이 두 CSS ID는 섹션과 슬라이더에 추가해야 하므로 기억하는 것이 중요합니다. 그렇게 하면 CSS "height: calce(100vh – 133px)"가 적용되어 둘 다 전체 화면(브라우저 창의 전체 높이에 걸쳐 있음)이 됩니다.

두 번째 스니펫은 display flex 속성을 섹션에 적용하여 모든 섹션 콘텐츠를 세로 중앙에 배치합니다. 이에 대한 자세한 내용은 Divi에서 콘텐츠를 세로로 정렬하는 방법에 대한 게시물을 확인하세요.

세 번째 스니펫은 완전히 선택 사항입니다. 이렇게 하면 디자인에 좀 더 잘 맞도록 하단 바닥글 막대를 전체 너비로 만들고 추가할 전체 너비 머리글 스타일과 일치시키기만 하면 됩니다.

이제 외부 CSS가 준비되었으므로 CSS ID를 섹션과 슬라이더에 추가할 수 있습니다. 섹션 설정으로 이동하여 다음 CSS ID를 추가하십시오.

CSS ID: 전체 섹션

이제 열 3의 슬라이더에 대한 슬라이더 모듈 설정을 열고 다음 CSS ID를 추가합니다.

CSS ID: 전체 슬라이드

최종 터치

이 시점에서 전체 화면 페이지 기능이 제자리에 있으며 작동해야 합니다. 시크릿 브라우저에서 확인할 수 있습니다. 남은 것은 몇 가지 최종 수정뿐입니다.

열에 간격 추가

행 설정을 열어 다음과 같이 열 1과 열 2의 상단에 패딩을 추가합니다.

열 1 사용자 정의 패딩: 12vh 상단, 1vw 왼쪽, 1vw 오른쪽
열 2 맞춤 패딩: 12vh 상단, 1vw 왼쪽, 1vw 오른쪽

상단 패딩 값에 vh 길이 단위를 사용했습니다. 이렇게 하면 뷰포트의 높이에 따라 패딩 크기가 조정되어 브라우저 창이 커질수록 더 많은 패딩이 생성되고 브라우저가 짧아질수록 더 적은 패딩이 생성됩니다. 브라우저의 너비에 따라 패딩이 확장되도록 왼쪽 및 오른쪽 패딩 값에 vw(뷰포트 너비) 길이 단위를 사용했습니다.

큰 텍스트에 vh 길이 단위를 추가하여 보기 공간 최대화

보시다시피, 브라우저 창에서 전혀 확장되지 않는 정말 큰 텍스트가 있는 몇 가지 모듈이 있습니다. 이 문제를 해결하기 위해 텍스트 크기를 vh 길이 단위로 설정할 수 있습니다. 이렇게 하면 더 짧은 브라우저 화면에서 텍스트를 축소할 수 있습니다.

1열 상단의 텍스트 모듈 설정을 열고 h1 헤더 텍스트 크기를 7vh(vw 아님)로 업데이트합니다.

그런 다음 2열 상단의 텍스트 모듈 설정을 열고 제목 2 텍스트 크기를 6vh로 업데이트합니다.

슬라이더 디자인 업데이트

디자인을 마무리하려면 2열에 있는 버튼의 버튼 디자인을 복사하여 슬라이더의 버튼 스타일에 붙여넣으면 됩니다. 이렇게 하려면 2열의 버튼에 대한 버튼 설정을 열고 버튼 옵션 범주를 마우스 오른쪽 버튼으로 클릭하고 "버튼 스타일 복사"를 클릭합니다.

그런 다음 슬라이더 설정을 열고 버튼 스타일을 슬라이더의 버튼 옵션 범주에 붙여넣습니다.

개별 슬라이드에 배경 오버레이를 추가할 수도 있습니다.

머리글 및 아래쪽 바닥글 막대 조정

바닥글을 전체 너비로 확장하는 사용자 정의 CSS의 작은 스니펫을 이미 추가했다는 것을 기억할 것입니다. 이는 기본 메뉴 표시줄도 전체 너비로 만들 것을 예상한 것이었습니다. 기본 메뉴 모음을 전체 너비로 만들려면 WordPress 대시보드로 이동하여 Divi > 테마 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 모음으로 이동합니다. 그런 다음 전체 너비 만들기 옵션을 선택합니다.

전체 화면 페이지에 하단 바닥글 표시줄을 표시하고 있으므로 하단 표시줄 배경색을 디자인과 일치하도록 업데이트할 수 있습니다. 테마 사용자 지정 프로그램에 머물면서 바닥글 > 하단 표시줄로 이동합니다. 그런 다음 배경색을 #2a2e40으로 설정합니다.

그런 다음 변경 사항을 게시합니다.

최종 결과

다음은 최종 디자인입니다. 브라우저 창에 모든 것이 잘 맞는지 확인하십시오.

브라우저를 다양한 크기로 조정할 때 어떻게 보이는지 확인하십시오.

그리고 980px보다 큰 브라우저 너비에만 맞춤 CSS를 적용했기 때문에 모바일 장치에서는 디자인이 다시 정상으로 돌아갑니다.

여기 태블릿과 스마트폰이 있습니다.

마지막 생각들

몇 가지 CSS 스니펫으로 섹션 높이를 브라우저 높이로 적절하게 조정하는 방법을 이해하고 나면 Divi에서 사용자 정의 전체 화면 페이지 레이아웃을 만드는 것이 그렇게 압도적이지 않습니다. 그러나 일단 다운되면 Divi Builder 내에서 수많은 전체 화면 페이지 디자인을 만들 수 있습니다. 브라우저 창 내에서 모든 것을 볼 수 있도록 계획하는 경우 콘텐츠를 최소한으로 유지하도록 주의하십시오.

이러한 유형의 디자인은 개인 사이트, 프로모션 제안 및 모든 종류의 방문 페이지에 적합합니다. 또한 콘텐츠가 적고 하단 바닥글 막대가 페이지 중간에 표시되는 것을 방지하려는 페이지에 대한 훌륭한 솔루션입니다.

그리고 Divi의 Fullwidth Header Module을 사용하는 옵션을 잊지 마십시오. 이 게시물에서 사용된 방법과 같은 유연성은 없지만 최소한의 콘텐츠가 포함된 페이지에 적합합니다.

다음은 전체 화면 페이지의 주제에 대해 즐길 수 있는 몇 가지 추가 게시물입니다.

• Divi로 상단 및 하단 스크롤 링크로 전체 화면 섹션을 만드는 방법
• 애니메이션 스크롤 버튼으로 고유한 전체 화면 Divi 레이아웃 디자인
• 그리고 더

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!