Divi로 애니메이션 모바일 분할 콘텐츠 영웅 섹션을 만드는 방법

눈에 띄는 영웅 섹션을 만드는 것은 정말 중요합니다. 그리고 그것은 눈에 띄어야 할 뿐만 아니라 거기에 있는 행동 촉구에 힘을 실어주는 여러 요소로 분할되어야 합니다. 이해하기 쉬운 구조의 분할 콘텐츠 영웅 섹션은 다양한 종류의 웹 사이트에서 정말 인기 있고 자주 사용됩니다.

데스크탑용 분할 콘텐츠 영웅 섹션을 만드는 것은 간단하지만 더 작은 화면 크기용으로 만드는 것은 쉽지 않을 수 있습니다. 바로 이 튜토리얼이 유용할 것입니다. 모바일뿐만 아니라 다양한 화면 크기에서 잘 보일 수 있는 고도로 상호 작용하는 모바일 분할 영웅 섹션을 다시 만들 것입니다. 또한 디자인 스타일이 2019년과 완벽하게 일치하도록 몇 가지 훌륭한 애니메이션을 결합하고 있습니다. 이 튜토리얼을 통해 자신만의 모바일 분할 콘텐츠 영웅 섹션을 만들 수 있기를 바랍니다.

가자!

시사

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

이동하는

데스크탑

재창조를 시작합시다!

새 섹션 추가

간격

새 페이지를 만들거나 기존 페이지를 열어 시작하십시오. 새 일반 섹션을 추가하고 간격 설정으로 이동하여 모든 기본 상단 및 하단 패딩을 제거하십시오.

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

새 행 추가

열 구조

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

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 완전히 검은색 배경색을 추가하십시오.

• 배경색: #000000

열 1 배경색

첫 번째 열에도 검정색 배경색을 추가합니다.

• 열 1 배경색: #000000

2열 배경색

두 번째 열도 마찬가지입니다.

• 2열 배경색: #000000

사이징

그런 다음 크기 조정 설정으로 이동하여 행과 열이 화면의 전체 너비를 차지하도록 합니다.

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

간격

또한 행의 기본 상단 및 하단 패딩을 모두 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 오른쪽 패딩: 1vw

표시하다

마지막으로 더 작은 화면 크기에서도 두 열이 나란히 표시되도록 할 것입니다. 그렇게 하려면 행의 고급 탭에 CSS 코드 한 줄을 추가해야 합니다.

display: flex;

열 1에 이미지 모듈 추가

이미지 상자를 비워 둡니다.

필요한 모든 모듈을 추가할 시간입니다! 첫 번째 열의 이미지 모듈부터 시작합니다. 이미지 상자에 이미지를 업로드하는 대신 다음 단계에서 배경 설정에 이미지를 업로드합니다. 이렇게 하면 이미지가 어떻게 배치되고 행에서 차지하는 공간이 얼마나 되는지 알 수 있습니다.

배경색 추가

이미지 모듈의 배경 설정으로 이동하여 배경색을 추가합니다. 다음 단계에서는 혼합 효과를 사용하여 이 배경색과 배경 이미지를 결합하여 이미지를 어둡게 합니다.

• 배경색: #686868

배경 이미지 추가

원하는 배경 이미지를 추가하고 그에 따라 배경 설정을 수정합니다.

• 배경 이미지 크기: 표지
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 곱하기

사이징

작업 중인 행에 대해 동일한 크기의 열 두 개를 사용했지만 결과는 그렇게 보이지 않습니다. 다른 열 구조를 사용하는 것처럼 보이도록 추가하는 각 모듈의 크기를 수동으로 변경합니다. 다른 열 구조를 선택하는 대신 이 작업을 수행하는 이유는 모든 것이 더 작은 화면 크기에서도 잘 보이고 반응하도록 만들기 위한 것입니다. 이미지 모듈의 크기 설정으로 이동하여 너비를 수정합니다.

• 폭: 88%
• 모듈 정렬: 왼쪽

간격

이제 간격 설정에서 이미지 크기를 결정해야 합니다. 또한 이러한 값에 대해 뷰포트 단위를 사용하여 모든 화면 크기에서 디자인이 완전히 반응하도록 유지합니다.

• 상단 패딩: 26.3vw(데스크톱), 48vw(태블릿), 72vw(전화)
• 하단 패딩: 26.3vw(데스크톱), 48vw(태블릿), 72vw(전화)

생기

마지막으로 이미지 모듈에 슬라이드 애니메이션을 추가합니다. 애니메이션을 적용하면 첫 번째 열에 들어가는 순간부터 이미지가 나타나기 시작한다는 것을 알 수 있습니다. 두 번째 열의 배경색은 왼쪽으로 슬라이딩하는 동안 이미지 모듈 상단에 유지됩니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 반복: 한 번
• 애니메이션 방향: 왼쪽
• 애니메이션 지속 시간: 1450ms
• 애니메이션 강도: 60%
• 애니메이션 시작 불투명도: 100%

열 1에 버튼 모듈 추가

사본 추가

열 1에서 필요한 다음 모듈은 버튼 모듈입니다. 원하는 사본을 입력하십시오.

버튼 설정

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

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 1.5vw(데스크톱), 2.5vw(태블릿), 4vw(전화)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #e02b20
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 1px
• 버튼 글꼴: Poppins
• 글꼴 두께: 무거움

간격

간격 값도 수정합니다.

• 상단 여백: -3.3vw(데스크톱), -6vw(태블릿), -9.1vw(전화)
• 왼쪽 패딩: 8vw
• 오른쪽 패딩: 8vw

박스 섀도우

그리고 페이지에 약간의 깊이를 만들기 위해 미묘한 상자 그림자를 추가합니다.

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

열 2에 텍스트 모듈 #1 추가

H1 콘텐츠 추가

두 번째 칼럼으로! 우리가 필요로 하는 첫 번째 모듈은 텍스트 모듈입니다. 원하는 H1 콘텐츠를 추가하세요.

H1 텍스트 설정

그런 다음 디자인 탭으로 이동하여 H1 텍스트 설정을 수정합니다.

• 제목 글꼴: Poppins
• 제목 텍스트 색상: #ffffff
• 제목 텍스트 크기: 4vw(데스크톱), 5vw(태블릿), 6vw(전화)

간격

간격 값도 변경하십시오.

• 최고 마진: 12vw
• 왼쪽 여백: -20vw
• 오른쪽 여백: 17vw(데스크톱), 15vw(태블릿), 1vw(전화)

생기

그리고 미묘한 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 반복: 한 번
• 애니메이션 방향: 아래로
• 애니메이션 지속 시간: 1450ms
• 애니메이션 강도: 10%
• 애니메이션 시작 불투명도: 100%

2열에 디바이더 모듈 추가

시계

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

• 디바이더 표시: 예

색상

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

• 색상: #e02b20

생기

다음으로 Divider 모듈에 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 반복: 한 번
• 애니메이션 방향: 오른쪽
• 애니메이션 지속 시간: 1450ms
• 애니메이션 강도: 83%
• 애니메이션 시작 불투명도: 100%

열 2에 텍스트 모듈 #2 추가

콘텐츠 추가

두 번째 열에 필요한 다음 및 마지막 모듈로 이동합니다! 선택에 대한 설명을 추가합니다.

텍스트 설정

그런 다음 디자인 탭의 텍스트 설정으로 이동하여 그에 따라 몇 가지를 변경합니다.

• 텍스트 글꼴: Poppins
• 텍스트 글꼴 두께: 가벼움
• 텍스트 색상: #919191
• 텍스트 크기: 0.7vw(데스크톱), 1.8vw(태블릿), 2.2vw(전화)
• 텍스트 문자 간격: 0.1vw
• 텍스트 줄 높이: 2.2em

간격

간격 값도 수정합니다.

• 상단 마진: 9vw(데스크톱), 19vw(태블릿), 23vw(전화)
• 하단 여백: 12vw(데스크톱), 19vw(태블릿), 23vw(전화)
• 왼쪽 여백: -3vw
• 오른쪽 여백: 20vw(데스크톱), 6vw(태블릿), 3vw(전화)

생기

마지막으로 모듈에 페이드 애니메이션을 추가하면 끝입니다!

• 애니메이션 스타일: 페이드
• 애니메이션 반복: 한 번
• 애니메이션 지속 시간: 1450ms
• 애니메이션 지연: 1000ms
• 애니메이션 시작 불투명도: 0%

시사

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

이동하는

데스크탑

마지막 생각들

이 게시물에서는 Divi를 사용하여 멋진 분할 콘텐츠 영웅 섹션을 만드는 방법을 보여주었습니다. 분할 콘텐츠 영웅 섹션은 웹에서 정말 인기 있고 자주 사용되지만 응답성이 높은지 확인하는 것도 중요합니다. 이 튜토리얼이 향후 구축할 웹사이트를 위한 모바일 분할 콘텐츠 영웅 섹션을 만드는 데 도움이 되기를 바랍니다! 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!