Divi의 변환 옵션으로 포트폴리오 항목을 아름답게 쌓는 방법

새로운 Divi 변환 옵션은 시각적으로 매력적인 웹 디자인을 만들기 위한 수많은 새로운 문을 열었습니다. 웹사이트를 처음부터 디자인할 때 이미지 편집 소프트웨어가 필요 없는 것에 한 걸음 더 다가갔습니다. 100% 반응형 디자인을 유지하면서 원하는 대로 정확하게 보이도록 변형할 수 있습니다.

이 게시물에서는 새로운 변형 옵션을 사용하여 포트폴리오 항목을 아름답게 쌓을 것입니다. 예를 들어 이것은 이전에 만든 웹사이트를 보여주기 위한 훌륭한 접근 방식입니다. 또한 방문자가 사용하는 화면 크기에 관계없이 이미지가 제자리에 유지되도록 할 것입니다. 이 튜토리얼을 통해 웹사이트를 필요에 맞게 사용자 정의할 때 Divi의 새로운 변형 옵션으로 창의력을 발휘할 수 있기를 바랍니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.

재창조를 시작합시다!

새 섹션 추가

그라데이션 배경

페이지에 새 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 그라디언트 배경을 추가하십시오.

• 색상 1: #f4f4f4
• 색상 2: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 30%
• 최종 위치: 30%

간격

그런 다음 디자인 탭으로 이동하여 간격 설정에서 사용자 정의 패딩 값을 수정합니다.

• 상단 패딩: 0px(데스크톱), 18vw(태블릿), 40vw(전화)
• 하단 패딩: 0px(데스크톱), 18vw(태블릿), 40vw(전화)

새 행 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

그런 다음 간격 설정으로 이동하여 상단 및 하단 기본 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

표시하다

또한 더 작은 화면 크기에서 두 열이 나란히 표시되도록 합니다. 그렇게 하려면 행의 기본 요소에 CSS 코드 한 줄을 추가해야 합니다.

display: flex;

열 1에 이미지 모듈 #1 추가

이미지 업로드

이제 다른 모듈을 추가할 수 있습니다! 이 튜토리얼을 따라갈 수 있도록 다음 인쇄 화면을 컴퓨터에 저장하십시오.

첫 번째 열의 이미지 모듈에 인쇄 화면을 업로드합니다.

사이징

그런 다음 디자인 탭으로 이동하여 'Force Fullwidth' 옵션을 활성화합니다. 그렇게 하면 이미지가 열의 전체 너비를 차지합니다.

• 강제 전폭: 예

간격

이미지 크기를 줄이기 위해 사용자 지정 왼쪽 및 오른쪽 여백을 추가합니다. 화면 크기에 관계없이 이미지 크기가 그대로 유지되도록 뷰포트 단위를 사용하고 있음을 알 수 있습니다.

• 최고 여백: -10vw
• 왼쪽 패딩: 11vw
• 오른쪽 패딩: 11vw

국경

다음 테두리 설정에서 각 모서리에 '2vw'를 추가합니다.

박스 섀도우

상자 그림자와 함께.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)

변환 번역

이제 이미지 변환을 시작할 수 있습니다! 변환 옵션의 변환 변환 탭에 다음 값을 추가합니다.

• 하단: -26vw
• 오른쪽: -2vw

여기에 추가하는 값은 이미지의 너비와 높이에 따라 다르므로 다른 이미지를 사용하는 경우 그에 따라 값을 수정해야 합니다. 이미지의 위치가 모든 화면 크기에서 동일하게 유지되도록 뷰포트 단위를 사용하고 있는지 확인하십시오.

변환 회전

변환 회전 탭으로 이동하여 그에 따라 이미지를 회전합니다.

• 왼쪽: 24deg
• 중앙: 46deg
• 오른쪽: -7deg

번역 스큐

마지막으로 다음 값으로 번역 스큐를 활성화하십시오.

• 하단: -4deg
• 오른쪽: 24deg

열 1에 이미지 모듈 #2 추가

이미지 업로드

다음 이미지 모듈로! 다음 인쇄 화면을 컴퓨터에 저장하거나 원하는 다른 인쇄 화면을 사용하십시오.

계속해서 1열의 두 번째 이미지 모듈에 인쇄 화면을 업로드합니다.

사이징

그런 다음 크기 조정 설정으로 이동하여 'Force Fullwidth' 옵션을 활성화합니다.

• 강제 전폭: 예

간격

간격 설정에서 일부 사용자 정의 여백 값을 사용하여 이미지 크기를 줄이고 이전 이미지와 겹치도록 합니다.

• 상단 여백: -81vw(데스크톱), -50vw(태블릿 및 전화)
• 왼쪽 여백: 11vw
• 오른쪽 여백: 11vw

국경

다음에 테두리 설정의 각 모서리에 '2vw'를 추가합니다.

박스 섀도우

그리고 우리는 상자 그림자도 추가할 것입니다. 두 번째 포트폴리오 항목 이미지에 더 어두운 상자 그림자를 사용하는 방법에 주목하세요. 이렇게 하면 포트폴리오 항목 사이에 더 깊이를 만드는 데 도움이 됩니다.

• 상자 그림자 흐림 강도: 150px
• 그림자 색상: rgba(0,0,0,0.6)

변환 번역

그런 다음 변환 설정으로 이동하여 변환 변환 값을 수정합니다.

• 하단: -8vw
• 오른쪽: 0px

다시 말하지만, 이러한 값은 실제로 인쇄 화면을 배치하는 방법과 인쇄 화면의 치수에 따라 다릅니다. 이미지가 작을수록 더 큰 음수 값을 사용하여 더 많이 왼쪽으로 밀어야 합니다.

변환 회전

변환 회전 탭으로 이동하여 세 가지 값을 모두 사용합니다.

• 왼쪽: 24deg
• 중앙: 46deg
• 오른쪽: -7deg

번역 스큐

마지막으로 번역 스큐 값을 수정합니다.

• 하단: -4deg
• 오른쪽: 24deg

열 1에 이미지 모듈 #3 추가

이미지 업로드

열 1에 필요한 다음 및 마지막 이미지 모듈로 이동합니다. 다음 인쇄 화면을 컴퓨터에 저장하거나 원하는 다른 인쇄 화면을 사용합니다.

저장한 인쇄 화면을 새 이미지 모듈에 추가합니다.

사이징

그런 다음 크기 조정 설정으로 이동하여 'Force Fullwidth' 옵션을 활성화합니다.

• 강제 전폭: 예

간격

다음 간격 설정으로 이동하여 여백 값을 적절하게 수정합니다.

• 최고 여백: -107vw
• 왼쪽 여백: 19vw
• 오른쪽 여백: 19vw

국경

계속해서 이미지 모듈의 각 모서리에 '2vw'를 추가합니다.

박스 섀도우

다음에 상자 그림자를 추가합니다. 다시 말하지만, 이전 두 개의 이미지 모듈에 사용한 것보다 더 강한 그림자 색상을 사용하고 있습니다.

• 상자 그림자 흐림 강도: 200px
• 그림자 색상: rgba(0,0,0,0.82)

변환 번역

그런 다음 변환 설정으로 이동하여 변환 변환 값을 수정합니다.

• 하단: -42vw
• 오른쪽: 11vw

변환 회전

변환 회전 탭으로 이동하여 그곳에서도 약간의 변경을 가하십시오.

• 왼쪽: 24deg
• 중앙: 46deg
• 오른쪽: -7deg

번역 스큐

마지막으로 번역 스큐 값을 수정합니다.

• 하단: -4deg
• 오른쪽: 24deg

열 2에 제목 텍스트 모듈 추가

H2 사본 추가

두 번째 칼럼으로! 선택한 H2 콘텐츠가 포함된 텍스트 모듈을 추가합니다.

H2 텍스트 설정

다음으로 H2 텍스트 설정으로 이동하여 몇 가지를 변경합니다.

• 제목 2 글꼴: Roboto
• 제목 2 글꼴 두께: 가늘게
• 제목 2 텍스트 정렬: 왼쪽
• 제목 2 텍스트 색상: #000000
• 제목 2 텍스트 크기: 5vw(데스크톱), 6vw(태블릿), 7vw(전화)
• 제목 2 글자 간격: -1px

간격

간격 설정에서 몇 가지 사용자 정의 여백 값을 추가하여 계속하십시오.

• 상단 여백: 35vw(데스크톱), 10vw(태블릿), 0vw(전화)
• 왼쪽 여백: -4vw
• 오른쪽 여백: 4vw

2열에 디바이더 모듈 추가

시계

2열에서 필요한 다음 모듈은 Divider 모듈입니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

그런 다음 디자인 탭으로 이동하여 구분선 색상을 변경합니다.

• 색상: #8193fa

사이징

크기 설정도 수정합니다.

• 디바이더 무게: 8px
• 폭: 28%

간격

그리고 몇 가지 사용자 정의 여백 값을 추가합니다.

• 최고 마진: 1vw
• 왼쪽 여백: -4vw
• 오른쪽 여백: 4vw

2열에 설명 텍스트 모듈 추가

콘텐츠 추가

열 2에서 필요한 다음 모듈은 또 다른 텍스트 모듈입니다. 원하는 단락 내용을 추가합니다.

텍스트 설정

그런 다음 텍스트 설정으로 이동하여 몇 가지를 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 크기: 0.6vw(데스크톱), 1.2vw(태블릿), 1.8vw(전화)
• 텍스트 줄 높이: 3.1em(데스크탑), 2.7em(태블릿), 2.6em(전화)
• 텍스트 방향: 왼쪽

간격

다음에 사용자 정의 여백 값을 추가하십시오.

• 최고 마진: 1vw
• 왼쪽 여백: -4vw
• 오른쪽 여백: 4vw

2열에 버튼 모듈 추가

사본 추가

디자인을 완료하는 데 필요한 다음이자 마지막 모듈은 버튼 모듈입니다. 선택한 사본을 추가하십시오.

버튼 설정

그런 다음 디자인 탭으로 이동하여 버튼 설정을 수정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 색상 1: #5627ba
• 색상 2: #8fb5fc
• 기울기 방향: 122deg
• 버튼 테두리 너비: 0px
• 글꼴 두께: 매우 굵게
• 글꼴 스타일: 대문자

간격

사용자 정의 여백 및 패딩 값도 변경하십시오.

• 상단 마진: 2vw(데스크톱), 3vw(태블릿), 5vw(전화)
• 하단 여백: 6vw(태블릿), 8vw(전화)
• 왼쪽 여백: -4vw
• 오른쪽 여백: 4vw
• 상단 패딩: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 하단 패딩: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 왼쪽 패딩: 3vw(데스크톱), 5vw(태블릿), 7vw(전화)
• 오른쪽 패딩: 3vw(데스크톱), 5vw(태블릿), 7vw(전화)

박스 섀도우

마지막으로 미묘한 상자 그림자를 추가하면 완료됩니다!

• 상자 그림자 흐림 강도: 40px
• 그림자 색상: rgba(0,0,0,0.3)

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 게시물에서 우리는 Divi의 새로운 변형 옵션으로 창의력을 발휘하는 방법을 보여주었습니다. 보다 구체적으로, 우리는 멋지고 시각적으로 매력적인 디자인을 만들기 위해 포트폴리오 항목을 쌓았습니다. 또한 모든 화면 크기에서 이미지가 멋지게 보이도록 했습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!