Divi로 분할 혼합 모드 헤드라인을 만드는 방법

블렌드 모드가 작업 중인 디자인의 미학에 더 많은 관심을 기울일 수 있다는 것은 비밀이 아닙니다. 과거에는 독특하고 멋진 디자인을 만드는 데 도움이 되는 혼합 모드 팁과 트릭을 다루었습니다. 이제 열 업데이트가 나왔으므로 이러한 혼합 모드로 할 수 있는 몇 가지 추가 작업이 있습니다. 그 중 하나는 분할 혼합 모드 헤드라인을 만드는 것입니다. 이 게시물에서는 모듈 및 열 혼합 모드, 열 배경색 및 음수 여백을 결합하여 놀라운 결과를 얻을 수 있는 방법을 보여줍니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

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

스플릿 블렌드 모드 히어로 섹션을 무료로 다운로드하세요

무료 혼합 모드 영웅 섹션에 손을 대려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

YouTube 채널 구독

재창조를 시작합시다!

새 섹션 추가

간격

작업 중인 페이지에 새 일반 섹션을 추가하고 모든 기본 상단 및 하단 패딩을 제거합니다.

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

박스 섀도우

상자 그림자 옵션으로 이동하여 미묘한 상자 그림자를 추가합니다.

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

새 행 추가

열 구조

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

그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 그라데이션 배경을 적용합니다. 이 게시물의 다음 단계에서는 혼합 모드를 사용하여 그라데이션 배경을 배경 이미지와 병합합니다.

• 색상 1: #00cbff
• 색상 2: #bf35ff
• 기울기 방향: 96deg

배경 이미지

행에 배경 이미지를 추가하고 다음 배경 이미지 설정과 함께 사용합니다.

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

사이징

다음으로 크기 조정 설정으로 이동하여 행이 섹션 컨테이너의 전체 너비를 차지하도록 합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예
• 폭: 100%
• 최대 너비: 100%

간격

다음 행의 모든 ​​기본 상단 및 하단 패딩을 제거합니다. 이렇게 하면 이 게시물의 뒷부분에서 추가하는 열 2 배경색이 행 및 섹션 컨테이너의 상단 및 하단 경계에 닿도록 합니다.

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

표시하다

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

display: flex;

2열 설정

배경색

일반 행 설정을 완료했으면 계속해서 두 번째 열의 설정을 엽니다. 흰색 배경색을 추가하여 시작합니다.

• 배경색: #FFFFFF

필터

디자인 탭으로 이동하여 전체 열에 혼합 모드를 추가합니다.

• 혼합 모드: 화면

열 1에 분배기 모듈 추가

시계

모듈 추가를 시작할 시간입니다! 첫 번째 열에 필요한 유일한 모듈은 Divider 모듈입니다. 이 모듈은 모듈을 표시하지 않고 첫 번째 열에 공간을 만드는 데 도움이 됩니다. 디바이더의 '디바이더 표시' 옵션이 비활성화되어 있는지 확인하십시오.

• 디바이더 표시: 아니오

간격

간격 설정으로 이동하고 아래쪽 여백을 추가하여 첫 번째 열에 공간을 만듭니다.

• 하단 여백: 50vw

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

H1 헤드라인 추가

두 번째 칼럼으로! 여기에서는 헤드라인 텍스트 모듈부터 시작하겠습니다. 원하는 H1 콘텐츠를 입력하세요.

H1 텍스트 설정

디자인 탭으로 이동하여 그에 따라 텍스트 설정을 변경합니다.

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #FFFFFF
• 제목 텍스트 크기: 12vw
• 제목 문자 간격: -0.2vw

간격

또한 모듈 주위에 약간의 공간을 만들고 사용자 정의 여백 값을 적용하여 모듈을 왼쪽으로 밀고 있습니다. 음수 왼쪽 여백은 분할 혼합 모드를 만드는 데 중요한 역할을 합니다. 복사본의 일부가 배경색을 포함하지 않는 첫 번째 열 아래에 나타날 수 있습니다.

• 최고 마진: 18vw
• 하단 여백: 2vw
• 왼쪽 여백: -27.3vw

필터

이제 이 다음 단계에서 마법이 일어날 것입니다! 행 배경이 보일 수 있도록 모듈과 열 혼합 모드를 결합하고 있습니다. 텍스트 모듈에 대해 다음 혼합 모드를 선택했는지 확인하십시오.

• 혼합 모드: 차이

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

콘텐츠 추가

두 번째 모듈로 이동합니다! 원하는 콘텐츠를 추가하세요.

텍스트 설정

디자인 탭으로 이동하여 그에 따라 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Poppins
• 텍스트 정렬: 양쪽 맞춤
• 텍스트 색상: #000000
• 텍스트 크기: 0.8vw(데스크톱), 1.5vw(태블릿), 2.3vw(전화)
• 텍스트 줄 높이: 2.5em(데스크톱 및 태블릿), 2.2em(전화)

간격

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

• 하단 여백: 1vw
• 왼쪽 여백: 5vw
• 오른쪽 여백: 14vw(데스크톱), 4vw(태블릿), 5vw(전화)

2열에 디바이더 모듈 추가

시계

디바이더 모듈인 다음 모듈로 넘어갑니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

선

디자인 탭으로 이동하여 그에 따라 선 설정을 변경합니다.

• 선 색상: #FFFFFF
• 선 스타일: 단색
• 라인 위치: 상단

사이징

디바이더의 크기 설정도 수정합니다.

• 분배기 무게: 0.7vw
• 폭: 9%
• 높이: 0px

간격

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

• 최고 마진: 2vw(데스크톱), 5vw(태블릿 및 전화)
• 하단 여백: 3vw(데스크톱), 6vw(태블릿 및 전화)
• 왼쪽 여백: 5vw

필터

마지막으로 행 배경 이미지와 그라디언트가 보이도록 블렌드 모드를 적용합니다.

• 혼합 모드: 차이

2열에 버튼 모듈 추가

사본 추가

버튼 모듈인 다음이자 마지막 모듈로 넘어갑니다. 원하는 사본을 입력하십시오.

조정

디자인 탭으로 이동하여 버튼 정렬이 왼쪽으로 설정되어 있는지 확인합니다.

• 버튼 정렬: 왼쪽

버튼 설정

버튼 설정도 수정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 버튼 텍스트 색상: #000000
• 버튼 테두리 반경: 0px
• 버튼 글꼴: Poppins

간격

마지막으로 간격 설정에 사용자 지정 여백 및 패딩 값을 추가합니다.

• 하단 여백: 10vw(데스크톱), 15vw(태블릿 및 전화)
• 왼쪽 여백: 5vw
• 탑 패딩: 1vw
• 하단 패딩: 1vw
• 왼쪽 패딩: 3vw
• 오른쪽 패딩: 3vw

시사

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

마지막 생각들

이 게시물에서는 Divi의 새로운 열 옵션을 사용하여 멋진 분할 혼합 모드 헤드라인을 만드는 방법을 보여주었습니다. 이 튜토리얼은 Divi의 내장 옵션이 얼마나 다재다능한지, 모든 Divi 업데이트에서 어떻게 타사 디자인 소프트웨어가 불필요해지는지를 보여주기 위한 것입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.