Divi의 변환 컨트롤을 사용하여 고유한 Blurb 모듈 레이아웃 만들기

Divi의 Transform 컨트롤을 사용하면 페이지의 요소를 쉽게 배치하고 스타일을 지정하여 고유한 레이아웃을 만들 수 있습니다. Divi의 광고 문구 모듈은 웹사이트에서 항목을 표시하기 위한 가장 일반적인 요소 중 하나입니다. 그래서 나는 블러 모듈을 특징으로 하는 몇 가지 독특한 레이아웃을 만들어 이러한 변형 효과를 사용하는 방법을 보여주고 싶다고 생각했습니다. 물론, 여백과 패딩을 사용하여 유사한 위치 지정을 수행할 수 있지만 프로세스는 훨씬 더 복잡하고 재미가 없습니다. 또한 변형 컨트롤을 사용하면 추가 스타일을 추가하여 더 독특한 디자인을 위해 광고 문구의 크기를 조정하고 회전할 수 있습니다.

이 튜토리얼에서는 Divi의 변형 컨트롤을 사용하여 창의적인 방식으로 광고 문구를 배치하고 회전하는 방법을 보여 드리겠습니다.

시작하자.

시작하기

이 튜토리얼에서는 Divi만 있으면 됩니다. 설정하려면 새 페이지를 만드세요. 페이지에 제목을 지정하고 프런트 엔드에 Divi 빌더를 배포하여 처음부터 페이지를 빌드하세요.

이제 시작할 준비가 되었습니다.

Blurb 레이아웃 디자인 만들기 #1

이 첫 번째 레이아웃 디자인에서는 두 개의 다른 행을 사용하여 광고문안을 구성할 것입니다. 그런 다음 Divi Transform 옵션을 사용하여 블러 모듈의 크기를 조정하고 위치를 지정하여 고유한 블러 모듈 레이아웃을 만듭니다.

첫 번째 행 만들기

시작하려면 일반 섹션을 만든 다음 행에 대해 다음 열 레이아웃을 추가합니다. 1/2 1/6 1/6 1/6

텍스트 모듈 추가 및 스타일 지정

왼쪽의 1/2 열에 다음 내용이 포함된 텍스트 모듈을 추가합니다.

<h2>Our Services</h2>
<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>

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

배경색: #ffffff
너비: 500px
맞춤 여백(데스크톱): -70px 왼쪽
맞춤 여백(태블릿): 20px 왼쪽
맞춤 패딩: 상단 20px, 하단 20px

섹션 패딩 업데이트

다음으로 섹션에 패딩을 추가해야 합니다. 섹션 설정을 열고 다음을 업데이트합니다.

맞춤 패딩: 20vw 상단

첫 번째 행에 대한 설정 업데이트

다음으로 행 설정을 다음과 같이 업데이트합니다.

거터 폭: 1
사용자 정의 패딩: 상단 10vw, 하단 0px
테두리 너비: 5px
테두리 색상: #eeeeee

두 번째 행 추가

그런 다음 방금 사용자 정의한 행 아래에 다른 행을 추가합니다. 6열 레이아웃을 제공합니다.

Blurb 모듈 생성 및 스타일 지정

이제 변환 컨트롤을 사용하여 최종적으로 배치할 블러브 모듈 생성을 시작할 때입니다. 생성한 첫 번째(상단) 행의 블러브 모듈 열 2를 추가합니다.

광고 설정에서 콘텐츠를 삭제하고 제목 텍스트를 "서비스"라는 단어로 업데이트합니다. 그런 다음 이미지 대신 아이콘을 클릭하여 사용합니다. 이 예에서는 구름 아이콘을 사용하고 있습니다.

다음과 같이 나머지 광고 설정을 업데이트합니다.

아이콘 색상: #ffffff
원 아이콘: 예
원 색상: #5e89fb
제목 글꼴: Nunito
제목 텍스트 정렬: 가운데
제목 텍스트 크기: 16px
맞춤 패딩: 상단 1vw, 하단 1vw, 왼쪽 1vw, 오른쪽 1vw

그런 다음 고급 탭 아래의 Blurb 이미지 CSS 상자에 다음 CSS를 추가하여 광고 아이콘 아래의 기본 여백을 업데이트합니다.

margin-bottom: 5px

다음으로, 방금 만든 광고 문구 모듈을 복사하여 각 열에 붙여넣고 맨 위 행의 3열에 두 개의 광고 문구 모듈이 있고 두 번째 행의 5열과 6열은 비워둡니다.

Blurbs 크기 조정 및 위치에 변형 효과 추가

이제 변환 컨트롤을 사용하여 블러브를 고유한 디자인으로 배치하고 크기를 조정할 준비가 되었습니다.

먼저 맨 위 행의 2열에 있는 광고 문구 설정을 열고 다음과 같이 변환 컨트롤을 업데이트합니다.

스케일 X축 변환: 242%
변환 스케일 Y축: 242%

변환 X축 변환: -96px
변환 Y축 변환: -44px

다음으로 첫 번째 행의 3열에 있는 상단 Blurb 모듈의 설정을 다음과 같이 업데이트합니다.

스케일 X축 변환: 192%
스케일 Y축 변환: 192%

변환 변환 X축: -70px
변환 Y축 변환: -13px

그런 다음 맨 위 행의 4열에 있는 블러브 모듈을 다음과 같이 업데이트합니다.

변형 스케일 X축: 158%
스케일 Y축 변환: 158%

변환 변환 X축: 33px
변환 Y축 변환: -13px

다음으로 다음과 같이 맨 위 행의 3열에 있는 맨 아래 블러브 모듈을 업데이트합니다.

스케일 X축 변환: 132%
변환 스케일 Y축: 132%

변환 변환 X축: 89px
Y축 변환: 39px

그런 다음 미묘한 디자인 요소에 대한 행 테두리에 나누기를 만들기 위해 다음 배경색을 지정합니다.

배경색: #ffffff

그게 다야!

추가 디자인 요소의 경우 레이아웃 전체에 사용되는 각 아이콘의 원 색상 불투명도를 점차 높일 수 있습니다.

모바일 조정

태블릿 및 휴대전화 디스플레이의 광고 문구 모듈 레이아웃을 조정하려면 변형 효과를 원래 상태로 되돌리기만 하면 광고 문구가 원래 크기로 돌아가고 열 내부에 멋지게 배치됩니다. 이를 위해 Divi의 다중 선택 기능을 사용할 수 있습니다. 변환 속성으로 배치된 모듈을 클릭하기 어려울 수 있으므로 빌더 설정에서 그리드 모드를 활성화하는 것이 좋습니다. 이렇게 하면 원래 위치에 있는 광고 문구 모듈을 볼 수 있습니다. 그리드 모드에 있으면 ctrl 또는 cmd를 누른 상태에서 변환 효과가 있는 각 모듈을 클릭합니다. 그런 다음 선택한 모듈의 톱니바퀴 아이콘을 클릭하여 요소 설정 모달을 엽니다.

요소 설정 모달에서 다음을 업데이트합니다.

스케일 X축 변환: 100%
변환 배율 Y축: 100%

변환 X축 변환: 0px
변환 Y축 변환: 0px

이렇게 하면 태블릿 및 휴대폰 디스플레이에서 광고 문구의 원래 위치와 크기가 복원됩니다.

최종 결과

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

Blurb 모듈 레이아웃 만들기 #2

다음 예에서는 Divi의 크기 조정, 변환 및 회전 변환 옵션을 사용하여 고유한 블러브 모듈 레이아웃을 보여 드리겠습니다. 또한 각 광고 문구에 관점을 추가하는 보너스 CSS 스니펫을 추가하겠습니다. 방법은 다음과 같습니다.

제목 만들기

먼저 한 열 행이 있는 새 일반 섹션을 추가합니다. 그런 다음 다음 내용이 포함된 행에 텍스트 모듈을 추가합니다.

<h2>Our Process</h2>
<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>

그런 다음 나머지 텍스트 모듈 설정을 다음과 같이 업데이트합니다.

제목 2 글꼴: Nunito
제목 2 글꼴 두께: 반 굵게
제목 2 텍스트 크기: 50px
제목 2 글자 간격: 7px
너비: 500px

6열 행으로 Blurb 레이아웃 만들기

그것은 제목을 처리합니다. 이제 Blub 모듈 레이아웃을 위한 행을 추가할 차례입니다. 계속해서 현재 행 바로 아래에 6열 레이아웃으로 새 행을 만듭니다.

Blurb 모듈 스타일 지정

첫 번째 열에서 새 블러브 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

내용 상자에서 본문 텍스트를 삭제하고 "Step"이라는 단어로 제목 텍스트를 업데이트합니다.

그런 다음 아이콘을 클릭하여 사용하고 원 체크 아이콘을 선택합니다.

Blurb에 다음과 같이 흰색 배경색을 지정합니다.

배경색: #ffffff

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

아이콘 색상: #ffffff
원 아이콘: 예
원 색상: #3d0dad
제목 글꼴: Nunito
제목 글꼴 두께: 굵게
제목 글꼴 스타일: TT
제목 텍스트 정렬: 가운데
제목 글자 간격: 4px

그런 다음 다음과 같이 광고 문구에 상자 그림자를 지정합니다.

박스 섀도우: 스크린샷 참조
그림자 색상: rgba(0,0,0,0.12)

마지막으로 블러브 모듈에 회전 변형 효과를 추가합니다.

변환 X축 회전: -3deg
변환 Y축 회전: -10deg
변환 Z축 회전: 31deg

이것이 우리의 첫 번째 광고문안 모듈을 처리합니다.

행 설정 업데이트

이제 블러브 모듈 복제를 시작하기 전에 다음과 같이 행 설정을 업데이트해야 합니다.

거터 폭: 2
맞춤 패딩: 상단 11vw, 하단 0px

이렇게 하면 레이아웃에서 광고 문구의 간격을 지정하는 데 도움이 됩니다.

나머지 Blurbs 복제 및 스타일 지정

이제 나머지 광고 문구를 복제하고 사용자 지정할 준비가 되었습니다. 1열의 블러브 모듈을 복사하여 마지막 열(6열)을 제외한 나머지 모든 열에 붙여넣습니다. 광고 문구가 오른쪽으로 이동할 수 있는 더 많은 공간을 남기기 위해 열 6을 비워 둡니다.

이제 2열에서 blurb 모듈 설정을 열고 다음을 업데이트합니다.

원 색상: #62de9d

스케일 X축 변환: 120%
변환 스케일 Y축: 120%

변환 Y축 변환: -10%(여기에 백분율 값을 입력해야 함)

다음으로 3열의 blurb 모듈을 다음과 같이 업데이트합니다.

원 색상: #5e89fb

스케일 X축 변환: 140%
변환 스케일 Y축: 140%

변환 Y축 변환: -20%
변환 X축 변환: 10%

다음과 같이 4열의 블러브 모듈을 업데이트합니다.

원 색상: #2a3fc9

스케일 X축 변환: 160%
변환 스케일 Y축: 160%

변환 Y축 변환: -30%
변환 X축 변환: 30%

마지막으로 다음과 같이 5열의 blurb 모듈을 업데이트합니다.

원 색상: #62de9d

스케일 X축 변환: 180%
스케일 Y축 변환: 180%

변환 Y축 변환: -40%
변환 X축 변환: 55%

보시다시피, 각 광고 문구는 왼쪽에서 오른쪽으로 크기가 20% 증가합니다. 그리고 변환 변환 백분율 값은 광고 문구가 잘 정렬되도록 합니다.

디자인이 마지막 열(6열)로 오버플로되므로 비워 둡니다. 그러나 행의 크기를 늘리면 항상 6열에 다른 광고 문구를 추가할 수 있습니다.

각 열에 Perspective 속성 추가

CSS에서 Perspective 속성은 3D 위치 요소에 Z-Space에서 약간의 원근감을 제공하는 데 사용됩니다. 기본적으로 사용자가 화면을 볼 때 개체가 사용자로부터 얼마나 멀리 떨어져 있는지 정의합니다. Perspective 속성은 3D 위치가 있는 상위 컨테이너에 적용되어야 하며 이 경우에는 우리의 블러브 모듈입니다. 따라서 다음과 같이 CSS의 작은 조각을 사용하여 각 열에 관점을 추가해야 합니다.

다음과 같이 5개의 열 각각에 대한 열 기본 요소 CSS 상자에 다음 CSS를 추가합니다.

열 1 주요 요소:

perspective: 1000px

2열 주요 요소:

perspective: 1000px

3열 주요 요소:

perspective: 1000px

4열 주요 요소:

perspective: 1000px

5열 주요 요소:

perspective: 1000px

이 경우 변경 사항은 매우 미묘하지만 제 생각에는 추가 노력을 기울일 가치가 있습니다.

다음은 원근감 없는 광고 모듈 레이아웃 디자인입니다.

그리고 여기에 관점이 있습니다.

광고 문구가 사용자에게 더 가깝게 보이도록 하려면 원근 값을 줄일 수 있습니다. 예를 들어, 이것은 각 열에 "perspective: 400px"가 추가된 광고 문구의 모양입니다.

섹션에 구분선 배경 추가

광고 문구가 표면에 서 있는 것처럼 보이도록 섹션에 구분선 배경을 추가할 수 있습니다. 섹션 설정을 열고 다음을 업데이트합니다.

하단 구분선 스타일: 스크린샷 참조
하단 구분선 색상: #dddddd
하단 디바이더 높이: 27vw
하단 디바이더 수평 반복: 0.8x
하단 디바이더 플립: 수평

태블릿 및 휴대폰 디스플레이의 레이아웃을 조정하려면 각 블러브 모듈을 다중 선택하고 태블릿 디스플레이의 요소 설정에서 다음 변환 옵션을 업데이트해야 합니다.

스케일 X축 변환: 100%
변환 배율 Y축: 100%

변환 Y축 변환: 0%
변환 X축 변환: 0%

최종 결과

이제 블러브 모듈 레이아웃의 최종 결과를 확인해보자.

마지막 생각들

Divi의 변환 컨트롤을 사용하면 페이지의 정확한 영역에 블러브 모듈을 매우 쉽게 배치할 수 있습니다. 따라서 서비스, 프로세스 단계 및 기타 수많은 용도를 위한 새로운 블러브 모듈 레이아웃을 실험하고 생성하는 것이 재미있습니다. 이 튜토리얼이 이러한 디자인 기술을 직접 테스트하는 데 약간의 영감을 주기를 바랍니다.

더 많은 영감을 얻으려면 다음 5가지 창의적인 광고 문구 모듈 디자인을 확인하세요.

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

건배!