Divi에서 시차 배경 이미지 전환으로 전체 화면 레이아웃 만들기

전체 화면 섹션으로 웹 페이지를 만드는 것은 브라우저의 전체 너비와 높이에 걸쳐 부드러운 전환과 깔끔한 ​​섹션 레이아웃으로 사용자 경험을 개선하는 좋은 방법입니다. 일반적으로 이것은 사용자가 페이지를 아래로 스크롤하는 동안 각 섹션에 쉽게 집중할 수 있도록 한 번에 한 섹션씩 제품 또는 서비스를 표시하는 데 적합합니다. 이러한 유형의 디자인은 콘텐츠와 관련이 있고 아름다운 디자인 액센트를 제공하는 배경 이미지와도 매우 잘 어울립니다. 그리고 약간의 창의력을 발휘하고 싶다면 배경 이미지에 일부 시차 기능을 추가하여 전체 화면 섹션에서 다른 섹션으로 스크롤할 때 매우 독특한 전환을 만들 수 있습니다.

이 튜토리얼에서는 Divi에서 전체 화면 페이지 레이아웃에 일부 시차 배경 이미지 전환을 추가하는 방법을 보여 드리겠습니다. 이 과정은 간단하며 몇 가지 강력한 결과를 만들 수 있습니다.

엿보기

우리가 함께 만들 몇 가지 디자인을 살펴보십시오.

시작하기

YouTube 채널 구독

이 튜토리얼에서는 Divi와 다양한 제품 이미지 및 배경 이미지에 사용할 이미지 모음만 있으면 됩니다. Juice Shop Layout Pack의 이미지를 사용하고 있습니다. 이 레이아웃 팩이 포함된 블로그 게시물 하단에서 이러한 이미지가 포함된 zip 파일을 다운로드할 수 있습니다. "전체 해상도 이미지 자산 다운로드" 버튼을 클릭하기만 하면 됩니다.

새 페이지 준비

이미지가 준비되면. 새 페이지를 만들고 페이지 제목을 지정하십시오. 그런 다음 Divi Builder를 배포하고 "처음부터 빌드"를 선택합니다. 그런 다음 버튼을 클릭하여 프런트 엔드에서 빌드합니다.

이제 롤할 준비가 되었습니다!

기본 아이디어

이 개념의 기본 아이디어는 각각 전체 너비 헤더 모듈이 있는 여러 전체 너비 섹션을 쌓는 것입니다. 각 헤더 모듈에는 섹션 배경을 노출하면서 왼쪽, 중앙 또는 오른쪽으로 정렬할 수 있는 사용자 정의 너비가 제공됩니다. 그런 다음 각 섹션은 특정 시차 방법으로 배경 이미지를 제공합니다. 이것은 페이지를 아래로 스크롤할 때 다른 배경 이미지 전환 효과를 만듭니다.

방법은 다음과 같습니다.

전체 너비 헤더 섹션 만들기

먼저 새 전체 너비 섹션을 만든 다음 해당 섹션에 전체 너비 헤더 모듈을 추가해야 합니다.

다음을 사용하여 일부 콘텐츠로 전체 너비 헤더 설정을 업데이트합니다.

제목: "토마토 주스"
버튼 #1 링크 텍스트: "레시피 보기"
콘텐츠: “당신의 콘텐츠는 여기에 갑니다. 인라인 또는 모듈 콘텐츠 설정에서 이 텍스트를 편집하거나 제거하십시오."
로고 이미지: [스크린샷 참조] (이미지는 240px x 300px)

이제 다음과 같이 헤더 디자인을 계속 업데이트하십시오.

배경색: rgba(255,255,255,0.92)

전체 화면 만들기: 예

아래로 스크롤 버튼 표시: 예
아이콘: 스크린샷 참조
아래로 스크롤 아이콘 색상: #222222

텍스트 색상: 어두운

제목 제목 수준: H2
제목 글꼴: Raleway
제목 텍스트 크기: 50px

본문 글꼴: Lato
본문 텍스트 크기: 16px
본문 문자 간격: 1px

버튼 하나의 텍스트 크기: 16px
버튼 fOne 텍스트 색상: #ffffff
버튼 하나의 배경색: #222222
버튼 하나의 테두리 반경: 50px
버튼 한 글자 간격: 2px
버튼 하나 글꼴 스타일: TT

너비: 45%(데스크톱), 60%(태블릿), 100%(스마트폰)

설정을 저장합니다.

여기에서 주요 핵심 디자인 요소는 "전체 화면 만들기" 옵션과 "너비: 45%"입니다. 이렇게 하면 섹션이 항상 브라우저 창의 전체 너비와 높이에 걸쳐 있게 됩니다. 그리고 사용자 정의 너비는 헤더 모듈을 축소하여 다음에 추가할 섹션 배경을 표시합니다.

섹션 배경 추가

이제 헤더 모듈이 설계되었으므로 섹션 배경 이미지를 추가할 수 있습니다. 전각 섹션 설정으로 이동하여 배경 이미지를 추가합니다. 브라우저 창의 전체 너비와 높이에 걸쳐 있을 만큼 충분히 큰지 확인합니다. 그런 다음 CSS Parallax 방법을 사용하도록 선택합니다.

섹션 복제

각 섹션에는 새 콘텐츠가 표시되므로 전체 너비 섹션을 세 번 복제해야 페이지에 헤더 모듈이 있는 총 4개의 섹션이 있습니다.

CSS Parallax와 동일한 섹션 배경 이미지를 사용하여 정적 배경 이미지 만들기

이제 4개의 동일한 섹션이 있으므로 디자인을 더 잘 이해할 수 있도록 전체 너비 헤더 콘텐츠를 새 로고 이미지와 제목으로 업데이트할 수 있습니다. 그러나 네 섹션 모두에 대해 CSS 시차를 사용하여 동일한 배경 이미지를 유지하는 경우 결과는 다른 전체 화면 섹션으로 스크롤할 때 제자리에 유지되는 정적 배경 이미지입니다. 그리고 각 헤더에서 아래로 스크롤 버튼을 사용하기 때문에 사용자는 화살표를 클릭하여 각 새 섹션으로 깔끔하게 스크롤할 수 있습니다.

결과를 확인하십시오.

CSS 시차 전환과 함께 다른 배경 이미지 사용하기

각 섹션에 다른 배경 이미지(CSS 시차 포함)를 사용하면 스크롤할 때 디자인의 느낌이 바뀝니다. 4개의 섹션 배경 이미지에 대해 CSS 시차가 이미 활성화되어 있으므로 각 이미지를 다른 것으로 변경하기만 하면 됩니다. 이 경우 각 섹션의 배경 이미지로 제품의 큰 버전을 추가하기만 하면 됩니다.

네 섹션 각각에 대해 다른 배경 이미지(CSS Parallax 포함)가 있으면 결과를 확인하십시오.

진정한 시차 전환으로 다른 배경 이미지 사용하기

배경 이미지 전환 효과를 변경하려면 4개의 섹션 배경 이미지 모두에 대해 시차 방식을 CSS에서 True Parallax로 변경할 수 있습니다.

섹션 설정 중 하나를 열고 CSS 방법을 "True Parallax"로 변경합니다.

그런 다음 나머지 세 섹션에 대해 동일한 작업을 수행해야 합니다. 또는 시차 방법 옵션을 마우스 오른쪽 버튼으로 클릭하고 페이지 전체의 모든 전폭 헤더 모듈에 대해 "시차 방법 확장"을 선택할 수 있습니다.

완료되면 배경 이미지 전환 효과를 확인하십시오.

다양한 모듈 정렬 탐색

전폭 헤더 모듈의 정렬을 변경하는 것은 아주 쉽습니다. 전체 너비 헤더 모듈의 사용자 정의 너비는 45%이므로 모듈 정렬을 왼쪽, 중앙 또는 오른쪽으로 쉽게 조정하여 다른 레이아웃을 얻을 수 있습니다. 나는 특히 정적인 배경을 가진 중앙 정렬을 좋아합니다.

모듈을 중앙에 맞추려면 전체 너비 헤더 설정을 열고 모듈 정렬 을 Centered 로 업데이트하십시오.

모듈을 페이지 오른쪽에 정렬하려면 모듈 정렬 을 오른쪽 정렬 로 업데이트하기만 하면 됩니다.

정렬을 결정하면 "모듈 정렬" 스타일을 페이지 전체의 나머지 헤더 모듈로 간단히 확장할 수 있습니다.

다음은 정적 배경(CSS 시차가 있는 각각에 대해 동일한 배경 이미지)이 있는 중앙 정렬의 예입니다.

다음은 CSS Parallax 방법을 사용하여 다양한 배경 이미지를 중심으로 정렬하는 예입니다.

다음은 True Parallax 방법을 사용하여 다양한 배경 이미지를 중심으로 정렬하는 예입니다.

다음은 CSS와 실제 시차의 조합을 사용하여 다른 배경 이미지를 가진 오른쪽 정렬의 예입니다.

마지막 생각들

이러한 배경 이미지 전환은 전체 화면 섹션 및 맞춤형 헤더 모듈과 함께 사용할 때 정말 멋지게 보입니다. 기능은 깨끗하고 디자인은 미묘하고 독특합니다. 무엇이든 콘텐츠에 대한 정적 배경을 만드는 빠르고 쉬운 방법입니다. 배경 그라디언트, 글꼴 및 이미지를 사용하여 더 고급 디자인을 자유롭게 탐색하십시오!

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

건배!