Divi에서 3D 공간에서 충돌하는 플로팅 모듈을 만드는 방법
게시 됨: 2019-05-15Divi를 사용하여 가능한 새로운 디자인을 탐색하는 것은 언제나 즐겁습니다. 그리고 오늘 우리는 Divi를 사용하여 3D 공간을 탐험할 것입니다! 기술적으로 우리는 3D 공간에서 충돌하는 것처럼 보이는 플로팅 모듈을 설계하는 방법을 탐구할 것입니다. 이 디자인은 웹사이트에 서비스, 제품 또는 리소스의 "확장"이 있음을 보여줌으로써 방문자를 놀라게 하는 창의적인 방법으로 잘 작동합니다.
분명히, 이 튜토리얼은 내가 상상하는 실제 우주 탐사와 비교되지 않을 것입니다. 그러나 Divi 탐험가들이 그 과정에서 몇 가지를 배울 수 있기를 바랍니다.
엿보기
다음은 우리가 함께 만들 디자인의 미리보기입니다.
3D 공간 레이아웃에서 충돌하는 플로팅 모듈을 무료로 다운로드하십시오.
이 튜토리얼에서 구축한 디자인을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.
튜토리얼로 들어가 볼까요?
YouTube 채널 구독
미리 만들어진 레이아웃 시작하기
시작하려면 Divi 테마가 설치되어 있고 활성화되어 있는지 확인하십시오. 그런 다음 새 페이지를 만들고 페이지 제목을 지정하고 Divi Builder(프론트 엔드에서)를 배포합니다. "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 그런 다음 비디오 게임 랜딩 페이지 레이아웃을 선택하고 새 페이지로 가져옵니다.
디자인을 시작하기 위해 디자인에 사용할 광고 문구가 포함된 "게임 기능" 섹션을 사용할 것입니다. 이것이 우리가 정말로 필요로 하는 유일한 섹션이기 때문에, 두 행의 광고문안을 제외한 모든 섹션과 행을 삭제하십시오.
Divi의 3D 공간 디자인에서 플로팅 블러브 구현하기
Blurbs의 첫 번째 행 만들기
2행의 광고 문구가 포함된 미리 만들어진 레이아웃 섹션 내부에서 새로운 1열 행을 만들고 섹션의 맨 위로 드래그합니다.
이제 Divi의 다중 선택 기능을 사용하여(각 광고 문구를 선택하는 동안 ctrl/cmd를 누른 상태에서) 아래 두 열에서 광고 문구 중 5개를 선택하고 섹션 상단의 새로운 한 열 행으로 드래그합니다.
이제 아래에서 미리 만들어진 레이아웃과 함께 제공된 두 행을 삭제할 수 있습니다. 그 후에는 5개의 광고문안을 포함하는 단일 열 행만 있어야 합니다.
섹션에 관점 추가
이 디자인에서 찾고 있는 3D 효과를 얻으려면 Perspective CSS 속성을 섹션에 추가해야 합니다. 이렇게 하면 변환 옵션을 사용하여 행을 회전할 때마다 행에 3D 원근이 추가됩니다.
섹션 설정을 열고 다음 사용자 지정 CSS를 기본 요소에 추가합니다.
perspective: 1000px;
나중에 화면을 볼 때 사용자의 관점에서 3D 요소(이 경우 행)를 더 가깝거나 멀어지게 하기 위해 원근 값을 높이거나 낮출 수 있습니다.
자세한 내용은 Divi의 변형 옵션에서 원근감이 작동하는 방식을 확인하십시오.
행 사용자 정의
블러브 스타일 지정을 시작하기 전에 먼저 행 설정을 구성해 보겠습니다. 이 디자인의 행 수준에서 변경해야 하는 세 가지 주요 사항이 있습니다.
- "display:flex"를 사용하여 광고 문구를 수평으로 정렬해야 합니다. 이렇게 하면 모든 장치에서 디자인이 일관되고 응답성이 유지됩니다(태블릿과 휴대폰에서 깨지는 5열 레이아웃을 사용하는 것과 반대).
- 여백 너비를 1로 설정하여 기본 열 여백을 제거해야 합니다.
- 변환 회전을 사용하여 X축에서 행을 45도 회전해야 합니다. 부모(섹션)에 관점 속성을 추가하면 행과 모든 요소에 우리가 찾고 있는 3D 효과가 있습니다.
행 설정을 열고 다음을 업데이트합니다.
거터 폭: 1
너비: 80%(데스크톱), 100%(태블릿), 100%(휴대폰)
변환 X축 회전: 45deg
열 주요 요소 CSS:
display: flex; justify-content: center;
Blurb 스타일 및 간격 조정
이제 광고 문구의 내용과 스타일을 약간 조정할 차례입니다.
모든 광고 문구에 동일한 사용자 정의를 적용하고 싶기 때문에 다중 선택을 다시 사용하여 모든 광고 문구를 선택하고 요소 설정 모달을 배포합니다.
먼저 본문 내용을 삭제합니다.
그런 다음 배경색을 추가합니다.
배경색: rgba(20,241,217,0.16)
그런 다음 다음 간격을 업데이트합니다.
사용자 정의 여백(데스크톱): 2vw 오른쪽
사용자 정의 여백(태블릿 및 휴대전화): 0vw 오른쪽
맞춤 패딩: 위쪽 2%, 아래쪽 2%, 왼쪽 3%, 오른쪽 3%
다음으로 테두리를 다음과 같이 추가합니다.
테두리 너비: 2px
테두리 색상: rgba(20,241,217,0.66)
이 시점에서 모든 광고 문구에 스타일이 적용됩니다. 우리는 여전히 변형 옵션을 사용하여 각 광고의 크기와 위치를 개별적으로 변경하여 광고의 3D 부동 효과를 추가해야 합니다. 하지만 그 전에 행을 복제하여 두 번째 광고 문구 행을 생성해 보겠습니다.
광고 문구의 두 번째 행 만들기
광고 문구의 두 번째 행을 만들려면 방금 사용자 정의한 5개의 광고 문구 행을 복제하기만 하면 됩니다.
충돌 효과를 만들기 위해 복제된 행을 반대 방향(-45deg)으로 회전할 수 있습니다.
복제된 행을 열고 다음을 업데이트합니다.
변환 X축 회전: -45deg
상단 및 하단 섹션 패딩 늘리기
이 시점에서 전면 광고 문구가 섹션 외부로 확장될 수 있습니다. 이 문제를 해결하려면 섹션에 다음 패딩을 추가하세요.
맞춤 패딩: 상단 15%, 하단 15%
변형 옵션을 사용하여 개별적으로 각 Blurb 크기 및 위치 지정
이 시점에서 귀하는 3D 공간에서 귀하의 광고 문구 위의 각각이 "떠다니는" 방법으로 창의력을 발휘할 수 있도록 설정되었습니다. 이렇게 하려면 변환 옵션을 사용하여 원하는 위치에 정확히 하나씩 각 블러브의 크기를 조정하고 위치를 지정할 수 있습니다. 이렇게 하면 광고 문구가 3D 공간에서 다른 깊이로 나타납니다.
일을 더 쉽게 하기 위해 맨 위 행의 맨 왼쪽 문구(Blurb #1)에서 시작하여 두 번째 행(Blurb #10)의 맨 오른쪽 문구로 끝나는 문구의 번호를 1-10으로 지정하겠습니다.
광고 #1
맨 윗줄에 있는 첫 번째 광고부터 시작하겠습니다. 광고 설정을 열고 다음을 업데이트합니다.
변형 배율(x 및 y축): 90%
광고 #2
Blurb #2에 대한 설정을 열고 다음을 업데이트합니다.
변형 배율(x 및 y축): 80%
변환 변환 X 축: -10%
광고 #3
변형 배율(x 및 y축): 80%
변환 X축 변환: 20%
광고 #4
변형 배율(x 및 y축): 85%
변환 변환 X 축: -30%
광고 #5
변형 배율(x 및 y축): 60%
완료되면 첫 번째 행은 다음과 같아야 합니다.
두 번째 행의 맨 왼쪽에 있는 광고 문구 #6부터 시작하여 광고 문구 6-10에 대한 변형 옵션을 계속 사용자 지정합니다.
블러브 #6
변형 배율(x 및 y축): 60%
변환 변환 X 축: -40%
변환 Y축 변환: -20%
블러브 #7
변환 배율(x 및 y축): 90%
변환 X축 변환: 20%
광고 #8
변형 배율(x 및 y축): 70%
변환 변환 X 축: -50%
광고 #9
변형 배율(x 및 y축): 80%
변환 변환 X 축: -20%
광고 #10
변형 배율(x 및 y축): 70%
변환 변환 X 축: -60%
이제 3D 공간에서 첫 번째 행과 충돌할 때 두 번째 행이 어떻게 보이는지 확인해 보겠습니다.
디자인을 완성하기 위해 섹션에 멋진 3D 공간 배경 이미지를 추가할 수 있습니다. 저는 이 튜토리얼에서 사용한 비디오 게임 랜딩 페이지 레이아웃과 함께 제공되는 상단 섹션 배경 이미지를 사용하고 있습니다.
최종 디자인
이제 3D 플로팅 모듈의 최종 디자인을 확인해 보겠습니다.
데스크탑
태블릿
핸드폰
행을 가로질러 뻗어 있는 5개의 광고 때문에 뷰포트 외부로 확장되지 않고 5개의 광고를 모두 맞추는 것이 조금 더 어렵습니다. 이 문제를 해결하려면 전화의 각 행에서 멀리 있는 문구를 숨기기만 하면 됩니다. 또는 휴대전화에서 각 광고 문구를 더 작은 크기로 지정할 수 있습니다.
마지막 생각들
이 튜토리얼이 3D Space에서 자신만의 플로팅 모듈을 만드는 방법에 대한 영감을 주기를 바랍니다. 실제로 필요한 것은 원근 및 변환 옵션을 사용하여 전체 모듈 행을 3D로 회전시키는 몇 가지 단계입니다. 그런 다음 각 모듈을 원하는 위치에 띄울 수 있습니다.
즐겁게 탐험하세요.
댓글로 여러분의 의견을 기다리겠습니다.
건배!